文本属性

朱雀 2022-06-05 00:53 168阅读 0赞

1）字体大小：font-size:12px  
2）字体的类型：\{font-family:字体1,字体2,;\}  
3）文本颜色：\{color:颜色值;\}  
4）字体加粗：\{ font-weight:bolder/100-900 ;\}  
bolder(更粗的)/bold（加粗）/normal（常规）  
100-500常规字体 600-900加粗字体  
5）字体倾斜：\{ font-style：italic/oblique/normal;\}  
6）文本的大小写\{text-transform:none/capitalize\}  
uppercase 把文字变成全大写  
lowercase 把文字变成全小写  
capitalize 变成首字母大写  
7）文本对其方式  
水平对齐方式\{text-align:left/right/center;\}  
垂直对齐方式\{vertical-align:top/bottom/middle;\}  
8）文本行高\{line-height:normal/数值;\}  
当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；  
当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；  
当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位。  
9）文本修饰  
text-decoration:none  
none:没有修饰  
underline:添加下划线  
overline:添加上划线  
line-through:添加删除线  
blink：闪烁  
10）首行缩进：\{text-indent:value;\}  
text-indent可以取负值；只对第一行起作用  
11）字间距\{letter-spacing:value;\}  
控制英文字母或汉字的字距  
12）词间距word-spacing:value;  
控制英文单词词距  
13）垂直对齐方式  
\{vertical-align:top/bottom/middle;\}  
当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐； line-height=height  
图文排列中常用； 此属性无法单独使用，需要支持的条件  
扩展：如何让一个图片垂直居中的几个条件  
1、必须给容器加一个text-align:center;  
2、必须给当前元素转成行内快级元素（display:table-cell）在给当前元素加上vertical-align:middle;