稍稍總結了下css文本的一些屬性用法,自己忘記的時候也可以用來查查,不用去查網站那麼麻煩。 下麵是部分總結,也希望對其他人有用 文本修飾 (1)text-decoration: 文本修飾(橫線) 4個屬性值 overline line-through underline blink (1)overl ...
稍稍總結了下css文本的一些屬性用法,自己忘記的時候也可以用來查查,不用去查網站那麼麻煩。
下麵是部分總結,也希望對其他人有用
文本修飾
(1)text-decoration: 文本修飾(橫線)
4個屬性值
overline line-through underline blink
(1)overline
定義文本上的一條橫線
(2)line-through
這個屬性值時最有用的,一般商家降價促銷後面的價格會用橫線划去表示那是之前的價格
(3)一般<a>標簽會帶由unline
要想去除就要設置text-decoration:none
(4)blink
文本閃爍,一般很少使用,只有在canvas中會使用,並且瀏覽器的支持度不高,只有火狐支持
另外:
還可以用text-decoration-color來修飾橫線的顏色
(2)text-transform 字母大小寫
5個屬性值
capitalize uppercase lowercase inhert none
(1)capitalize
首字母大寫
(2)uppercase和lowercase
大小寫
(3)inhert
繼承父元素的字母屬性
(4)none
預設,沒有任何效果
(3)text-overflow 定義文本超出範圍的修飾
3個屬性
clip ellipsis string
(1)clip
修剪文本
(2)ellipsis
用省略號來表示超出的文本
(3)string
用固定的字元來表示超出的文本
(4) text-shadow: h-shadow v-shadow blur color 文本陰影效果
3個屬性值
(1)v-shadow 必需,水平陰影的位置,允許負值
(2)v-shadow 必需,垂直陰影的位置,允許負值
(3)blur 可選,模糊的距離
(4)color 可選,陰影的顏色
文本佈局
(1)text-indent 文本縮進
3種屬性值
length % inhert
(1)length
定義固定縮進,以像素為單位,預設值為0
(2)%
以父元素寬度的百分比為長度縮進
(3)inhert
繼承父元素的縮進
(2)text-align 文本對齊
5種屬性值
left center right justify inhert
(1)left和right
很少使用
(2)center
居中對齊
經常和line-height:父元素高度 一起使用使文本居中對齊
如果不添加line-height 屬性,文本會偏在父元素的上方
(3)justify
文本兩端對齊