六章字体特殊符号.pdf

06-第六章：字体文本样式和特

殊符号

字体样式

字体颜色color

字体风格font-family

span{

font-family:微软雅黑,宋体

}

引入外部字体

@font-face{

font-family:名称

src:url()

}

字体大小font-size

div{

/*具体的值*/

font-size:50px

/*百分比相当于父容器的字体百分比调整浏览器默认字体大小16px*/

font-size:50%

/*根据父元素字体大小来调整*/

font-size:1em

/*当html字体大小为100px的时候得到一个14px的字体，14/100等于0.14rem

移动端布局比较多*/

font-size:1rem

}

字体粗细font-weight

1.bold定义粗的字体

2.bolder定义更粗的字体

3.lighter定义更细的字体

4.100200300400500600700800900数值的写法没有单位

5.normal默认默认一般是用来给本来就加粗的字体，变成普通粗度

规定字体是否倾斜font-style

1.italic定义字体倾斜

2.oblique定义字体的斜体(两者没有明显的区别，记住一个就行)

4.normal默认一般用来规定本来就是斜体的字体变成普通字体

规定小型大写字母font-variant

small-caps大型小写字母

line-height行高

设置行与行之前的距离

div{

line-height:30px

line-height:100%

line-height:1.2em

}

复合写法

基本写法：

div{

/*字体大小和字体风格是必须要写的*/

font:12px‘微软雅黑’,’宋体’

}

多样式写法:

/*字体:字体大小/行高字体风格字体粗细小型大写字母倾斜顺序不能改变*/

font:blodsmall-capsintalic12px/1.2‘微软雅黑’

文本样式

text-transform控制文本大小写

uppercase字母大写

capitalize首字母大写

lowercase小写字母

text-align文本对齐方式

left左对齐

right右对齐

center居中

justify两端对齐

text-indent首行缩进

px

text-decoration文本修饰下划线

none去掉下划线

underline下划线

line-through中划线

overline上划线

letter-spacing字间距

px

em

word-spacing

px

em

white-space文本不换行

nowrap不换行

word-break单词内换行

break-all单词内换行

text-overflow文本省略号

ellipsis文本省略号

span{

display:block

white-space:nowrap

text-overflow:ellipsis

overflow:hidden

}

css属性的继承

默认继承的属性：

color

font:small-capsitalicbold50px/100pxyahei

text-align

text-indent:

letter-spacing=字间