font-size:设置文本的字体大小
选择器:{font-size:15px;}
此属性可以使用相对长度单位,也可以使用绝对长度单位。二者之间相对长度单位比较常用,相对长度种px(像素)单位使用较多。
相对长度单位有:
em:相对于当前对象内文本的字体尺寸px:像素单位,是开放中常用的单位绝对长度单位有:
in:英寸cm:厘米mm:毫米pt:点建议:
网页一般使用14px以上的字体大小字体大小尽量使用双数,因为单数情况下ie6等老式浏览器可能会出bugfont-family:设置文本的字体样式
选择器{font-family:"微软雅黑",“宋体”,arial;}
建议:
可以使用多个字体,中间用英文状态下的逗号,如果浏览器找不到第一个字体那么它会找下一个字体,以此类推,直到找到合适的字体。建议尽量使用系统默认的字体,这样可以保证用户的网页打开状态为最佳。英文字体不需要加双引号,如:选择器{font-family:arial;}如字体中包含特殊符号必须用双引号括起来,如:选择器{font-family:"Microsoft yahei";}font-weight:设置文本的粗细
选择器{font-weight:bold;}
属性值:
bold:正常加粗normal:取消加粗700:等于bold,如果还想更粗就加大数值400:等于normal,如果还想更细就减小数值font-style:设置字体风格
选择器{font-style:normal;}
属性值:
normal:取消字体样式,让字体显示为正常italic:设置字体为斜体,让原本正常的字体变斜体建议:
一般很少给正常的文字加斜体属性,相反的是让标签显示为正常字体。加完样式之后和要表达的意思不变。
字体样式连写:
学过了上面的几个属性之后我们发现如果一个标签这些样式都要设置的话写起来会很繁琐,代码冗余性太强,下面我们来学习一下简单的设置方式。
格式:
选择器{font:font-style font-weight font-size/line-height font-family;}p{font:normal bold 30px "宋体"}注意:
使用综合属性的时候必须按照以上的顺序来设置(其中不设置的属性可以不写(取默认值),font-size和font-family属性必须保留,否则连写将无效),不能改变顺序,每个属性用空格可开。
color:字体颜色设置
color属性用来设置字体的颜色,字体颜色设置格式有三种
浏览器预设样色,如red,pink,blue,grenn等(p{color:pink;})十六进制格式,如#333,#eee,#ff3300等(p{color:#333;})RGB颜色代码,如红色可以表达为rgb(255,0,0)或者rgb(100%,0%,0%)line-height:行间距设置
line-height用来设置行于行之间的距离,属性值有三种单位,像素px、百分比%、相对值em(p{line-height: 15px;})
text-align:文本对齐方式
text-align用来设置文本的对齐方式,属性值有三种,左对齐left、右对齐right、居中对齐center(p{text-align: center;})
text-indent: 设置段落的首行缩进
text-indent:属性用来设置首行的文本缩进,属性值有三种,一个字符宽度的倍数em、相对于浏览器窗口宽度的百分比%、像素px(p{text-indent: 2em;})
注意:
1em就是一个字的宽度,2em就是两个字的宽度
text-indent: 2em;
text-decoration:文本装饰属性
文本装饰属性用来让文本有更多的展现形式,如:上划线、下划线、中划线(删除线)等
text-decoration: none;/*取消装饰*/text-decoration: underline;/*下划线*/text-decoration: overline;/*上划线*/text-decoration: line-through;/*删除线*/
上划线
下划线
中划线/删除线
文本装饰代码实现
举报/反馈