首頁 > web前端 > css教學 > CSS文字下劃線的設定方法介紹

CSS文字下劃線的設定方法介紹

不言
發布: 2018-11-05 14:22:10
原創
7540 人瀏覽過

在整體網頁設計中,最容易識別的風格仍然是帶有下劃線的藍色文字,這大部分都是連結到另一個網頁。連結元素預設具有樣式,藍色是預設模式下的唯一顏色。即使現在的連結元素可能不再需要加底線,文字下的行不僅僅是今天的連結標識,我們仍然需要去了解這個知識點,這篇文章主要是關於下劃線文字修飾CSS選項和「連結」選項。

首先如果你需要快速,簡單,規則的下劃線,可以使用HTML元素 ,它將在文字顏色的預設位置建立文字顏色。實際上,元素只是添加文字修飾:使用瀏覽器的內建CSS實現文字下劃線。 (相關推薦:css線上手冊

CSS文字下劃線的設定方法介紹

#效果如下:

CSS文字下劃線的設定方法介紹

可能上述所說並不是你想要的,接下來將介紹給你使用CSS在文字下方新增行有兩個可選擇的方法

第一個是文字修飾(text-decoration)屬性,它指定添加到文字的裝飾。此屬性的可能值為underline, overline和line-through。 text-decoration屬性應該是text-decoration-line,text-decoration-color和text-decoration-style的簡寫屬性,但目前還不支援。現在,我們有了文字修飾(text-decoration)屬性,我們可以在文字下方為文字添加線條,顏色,我們可以為那條線和文字風格著色,我們可以使下劃線是雙,點,虛線或波浪線。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	p{
		text-decoration: underline;
	}
	</style>
</head>
<body>
<p>我有一条文字下划线</p>
</body>
</html>
登入後複製

效果如下:

CSS文字下劃線的設定方法介紹

其他形狀的文字下滑線範例:

css虛線下劃線:

p{
		text-decoration: underline;
		text-decoration-style: dotted;
	}
登入後複製

效果如下:

CSS文字下劃線的設定方法介紹

css粉紅色實線底線:

p{
		text-decoration: underline;
		text-decoration-color: red;
	}
登入後複製

效果如下:

CSS文字下劃線的設定方法介紹

css波浪底線:

p{
		text-decoration: underline;
		text-decoration-color: red;
		text-decoration-style: wavy;
	}
登入後複製

效果如下:

CSS文字下劃線的設定方法介紹

#第二個是使用邊框底部(border- bottom)屬性,在這種情況下,display屬性必須是內聯的。使用這個方法,我們可以使用padding-bottom屬性,具有border-bottom-width的線條的粗細,具有border-bottom-style的樣式和具有border-bottom-color的顏色來控制線的位置。 Border-bottom-style有相同的選項,如text-decoration-style和一些3D效果選項。此選項提供更多選項和變量,但使用這種方法可能會比較麻煩。

程式碼如下:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	p{
		border-bottom-width: 5px;
		border-bottom-style: dashed;
		border-bottom-color: green;
		padding-bottom: 10px;
	}
	</style>
</head>
<body>
<p>我有一条文字下划线</p>
</body>
</html>
登入後複製

效果如下:

CSS文字下劃線的設定方法介紹

#最後說明一下,第二個方法是無法設定出波浪形狀的底線。

以上是CSS文字下劃線的設定方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板