一、文本属性
1、 字体:font-family="";
当属性值是中文的时候,要用双引号包起来 :“ 微软雅黑”
当属性值为多个英文单词组成的时候,也要写在双引号里面: "Times New Roman"
当属性值是一个英文字体的时候,不用写在双引号里: Arial
注:英文字体对中文是不起作用的, 但是中文的字体对英文是起作用的。
font-family: arial,"微软雅黑"; 当同时设置中文和英文字体的时候,应先写英文字体;
2、文本颜色属性:color:“”;
英文单词: red,yellow,blue,green
十六进制:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f 表示颜色是有6个值得; 也可以缩写成三位数值,当三组数值,没两组都同时相同的时候,才可以缩写;
三原色: R G B 红 绿 蓝
# 00 00 00
# ff ff ff #fff
# ff 00 00 #f00
# ff ff 00 #ff0
# fa ff ff #faffff
注:当用十六进制表示颜色值时,需要在颜色值前加“#”
3、文本加粗属性:font-weight:bolder(更粗的)/bold(加粗)/normal(常规)/100—900;**
注:bolder和bold 在浏览器显示的效果,在肉眼下是一样的粗细,我们建议用bold 常规加粗,避免有的浏览器显示bolder时,会有区别;
100 200 300 400 500 600 700 800 900 带表的等级,不用加单位,100代表粗细程度比较细的, 900 代表比较粗。
100-500 常规显示 400=normal
600-900 加粗显示 700 = bold
4、倾斜属性:font-style:italic/oblique/ normal(取消倾斜,常规显示);
5、水平对齐:text-align:left/right/center/justify(两端对齐中文不起作用)
6、文本修饰: text-decoration:"";
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
注:underline:添加下划线、overline:添加上划线、line-through:添加删除线 这三个属性值是可以同时存在的,用空格隔开;
如:text-decoration: underline overline line-through;
7、首行缩进:text-indent:""; 属性值为数值型 ;
说明:首行缩进是可以写负值的;只针对第一行文本起作用;
8、字间距:letter-spacing:value; 支持负值 (中文和英文都应用)
词间距:word-spacing:value; 支持负值 (一般是针对英文起作用)
9、行高:line-height:normal/value;
normal:常规显示(默认值);
value: 数值,可以自己设置的数值,需要加单位;
作用:控制行与行之间的间距;
注: 文字始终会在行高的范围内垂直居中显示的。
测量方法分为:单行文本 : 从元素显示区域的头部开始量到文字顶部 乘2 在加上文字字号大小; 作用:设置单行文本在容器中显示的位置的。
多行文本 : 从上一行开始到下一行开始; 作用:设置行与行之间的间距。
单行文本的显示规则:
1、当单行文本的行高等于容器高度的时候,可实现单行文本垂直居中的效果。
2、当单行文本的行号小于容高度的时候,可实现单行文本在容器居中以上的位置显示的。
3、当单行文本的行号大于容高度的时候,可实现单行文本在容器居中以下的位置显示的。
行高的值可以用倍数表示:line-height:2; 2em ; 表示行高的值是当前文字大小的两倍;
复合式写法:
font-size font-family font-style font-weight
font: style weight size/line-height family
font: italic bold 12px/30px "微软雅黑" ;
注: 复合式写法 必须要有两个属性值 字号大小和字体;
顺序: italic bold size/line-height family ; 属性的顺序是不能互换的,必须写在属性值的最后面;
注: (1)简写时 , font-size和line-height只能通过斜杠/组成一个值,不能分开写。
(2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style , 他们会使用缺省值(默认值)。