CSS 常用文字屬性

by1314發表於2024-03-24

文字間距

div.hello1{letter-spacing: 90px;} 字母間距
div.hello1{word-spacing: 90px;} 單詞間距(根據空格來識別的)

文字修飾

div.hello1{text-decoration: 線的位置 線的型別 線的顏色}
例子:
上劃線:div.hello1{text-decoration: overline;}
下劃線:div.hello1{text-decoration: underline;}
中劃線:div.hello1{text-decoration: line-through;}
無劃線:div.hello1{text-decoration: none;} 超連結的下劃線也可以取消
上劃虛線:div.hello1{text-decoration: overline dotted green;}

文字縮排

p{text-indent: 120px;}

文字對齊

p{text-align: center;}
值:left、right、center

文字行高

這個元素可以繼承
1)畫素:p{line-height: 100px;} 畫素這種寫法,font-size 與 line-height 不要數值一樣,一般行高是1.5倍字型大小
2) 數值:p{line-height: 1.5;}
3)百分比:p{line-height: 150%;}
4)normal:p{line-height: normal;} 由瀏覽器根據文字大小決定一個預設值

height 與 line-height:height是容器的高度,寫了height就是這個屬性值,沒有設定height,預設是line-height*行數
行高作用於:

  • 調整行間距
  • 單行文字的垂直居中,在height=line-height時
  • 讓字型放在最下面:line-height=height*2 - font-size - x (也可以用定位去做)

vertical=align

子元素中使用,不能控制塊元素,作用於單元格或者同一行元素之間中文字的垂直對齊方式

  • baseline:子元素與父元素基線對齊
  • middle:使元素的中部父元素的基線加上父元素高度一半對齊
  • top
  • bottom

相關文章