文本CSS样式

1、文本大小

font-size:value;

属性值必须为数值型,且必须加上单位,为0时除外

单位:em(相对文字单位)、pt(绝对长度单位)、px(相对长度单位)      px使用比较广泛

2、文本字体

font-family:字体1,....

可以写多个字体,若字体1不存在,则显示字体2,以此类推,若都不存在,则显示系统默认字体

注:当字体名称为中文或者有空格时,需要加上双引号

      Windows中文版本操作系统下,中文默认字体为宋体或者新宋体,英文字体默认为Arial

3、文本粗细

font-weight:bolder(更粗)/bold(加粗)/normal(常规)/lighter(更细)/100-900;

注:400为常规,900代表最粗

4、文本倾斜

font-style:italic(倾斜度小)/oblique(倾斜度大)/normal(常规)

5、文本简写

font:属性值

顺序: font-style | font-weight | font-size / line-height | font-family

简写, font-sizeline-height只能通过斜杠/组成一个值,不能分开写

6、文本颜色

color:属性值

颜色的赋值方法:1、使用系统认可的颜色名称,如:red、yellow...

                                   注:transparent默认透明颜色

                              2、使用十六进制赋值:  #123456
                                                                      前两位:红色  0-f
                                                                      中间两位:绿色: 0-f
                                                                      后两位:蓝色:0-f

                              3、rgb(red, green, blue)   red、green、blue处取值为0-255表示颜色的深浅

                                   rgba(red, green, blue, opacity)   red、green、blue处取值为0-255表示颜色的深浅

                                                                                       opacity处取值为0-1,表示背景的透明程度,0为全透明

7、文本行高

line-height:normal/value

当value=容器高时,可实现单行文本垂直居中

当value<容器高时,可实现单行文本垂直中齐以上任意位置的定位

当value>容器高时,可实现单行文本垂直中齐以下任意位置的定位

8、文本样式的text属性

8.1、text-align:水平对齐方式

text-align: left/right/center/justify(“两端对齐中文不起作用”);

8.2、vertical-align:垂直对齐方式

vertical-align: top/bottom/middle;

适用于:指定图片垂直对齐方式,相对于其他文字

9、设置文字线

text-decoration:属性值

line-throuth:删除线   underline:下划线  overline:上划线   none:无

10、文本缩进

text-indent:value;

注:value可以设置负值,若为负值,则被缩进左边

       文本缩进只对首行有效

11、控制元素中的字母

text-transform:capitalize(所有单词首字母大写)/uppercase(所有字母大写)/lowercase(所有字母小写)

12、设置超出范围的单词换行

word-wrap: normal(默认值,断点处换行)/break-word(单词内部换行);

13、文字添加阴影

text-shadow: h-shadow v-shadow blur color;

h-shadow:必填:水平阴影的位置

v-shadow:必填:垂直阴影的位置

blur:选填:模糊的距离

color:阴影的颜色

 

 

猜你喜欢

转载自blog.csdn.net/pyrans/article/details/81710845