一,字体样式
1,font-weight
作用:定义字体的粗细;具有继承性!
key:font-weight;
value:单词类型/数字类型;
| value | 解析 |
|---|---|
| bold/700 | 粗体b,strong标签的默认值 |
| bolder | 更粗字体 |
| normal/400 | 默认值,正常显示 |
| lighter | 更细的字体 |
2,font-style
作用:斜体显示;具有继承性!
key:font-style
| value | 解析 |
|---|---|
| italic | 斜体文字,针对英文要求英文字体斜体样式显示(常用) |
| oblique | 斜体的文字,将文字倾斜显示,与字体无关 |
| normal | 正常显示 |
3,line-height
作用:设置文字的实际占有高度,文字大小+文字间距=行高;具有继承性!
key:line-height;
| value | 作用 |
|---|---|
| px | 用像素设置行高 |
| % | 本身字号像素值百分比 |
font综合 顺序不能乱
写法1 两个属性值: font: 14px "宋体";
写法2 三个属性: font: 14px/28px "宋体"; 字号/行高 "字体";
写法3 五个属性: font: bold italic 14px/28px "宋体"; 粗体 斜体 字号/行高 "宋体";
line-height 行高
| value | 作用 |
|---|---|
| px | 用像素设置行高 |
| % | 本身字号像素值百分比 |
二,文本属性
1,text-align
作用:设置文本对齐;具有继承性!
| value | 作用 |
|---|---|
| centent | 居中 |
| left | 左对齐(默认) |
| right | 右对齐 |
2,text-decoration
作用:修饰文本;
key:decoration;
| value | 作用 |
|---|---|
| overline | 上划线 |
| line-through | 删除线/中划线;del标签默认属性 |
| underline | 下划线;a默认属性 |
| none | 无;清除a标签下划线 |
在我们知道了这样一些属性后,我们就解锁了一些新的玩法,那么既然del、a有这样的一些默认属性那如果我们不想要它们的默认属性我们就可以给del和a一个tetx-decoration:none;来去除掉它们的默认属性;
3,text-indent
作用:文本缩进效果;具有继承性!
value:text-indent;
| value | 作用 |
|---|---|
| px | 首行缩进多少个像素 |
| em | 首行缩进多少个中文字符位置 |
| % | 设置缩进文字所在标签的父级标签的 width 属性值的百分比 |
text-indent这一属性是用来写向右的文本缩进,他的属性值有px、em、百分比%表示的是缩进文字所在标签的父级标签的width属性值的百分比,如果给百分比负数的话它将会向左缩进。
其中最值得一提的是em他表示的是首行缩进几个中文字符的位置,有一个好处是无论字体变大或者变小它都会跟随变化增大缩小缩进字符。
三,继承性
继承性的表现他相当于一个继承规则,有继承性的元素例如font-weight当我们给他的父级设置一个font-weight:700;的加粗效果,那么他的子元素子后代就会受到其父亲继承的这一属性的影响,如果我们子元素不想要这一属性我们也可以给子元素单独设置其他属性,因为子元素的权重大所以会覆盖掉父元素的属性;
这样就可以来达到效果,在实际应用中我们可以利用好这一规用来给父元素设置一个公共属性利用他的继承性来达到减少代码量书写的效果