一:继承
基本定义就是给一个父元素设置一些样式后,其属性值会被其后代继承。需要注意的是 后代只能继承父元素的文本样式,不能继承盒子(块元素)的样式。
代码:
结果:
二:层叠样式
一个标签可以取多个类名和一个ID,同时在css中如果同时被多个选择器分别定义样式,就会产生冲突,于是 我们就要计算这些选择器的权重,来决定最终样式。一般遵循以下原则:
1.如果样式存在与不同的样式表。行内样式表的权重最高,再比较内嵌式与外联式的书写顺序。
2.同一样式表中,根据选择器的数量来确定优先级:
ID选择器数量多的权重高
ID选择器数量相同,再看类选择器的数量,谁多谁的权重高
类选择器的数量也相同,比较标签选择器。
如果标签选择器的数量也相同,则比较书写顺序。
通配符的权重对标签选择器的权重要低,比继承过来的要高。
三:文本样式(常用)
1.文字大小:font-size 单位 px
2.字体家族:font-family
3.字重(字体粗细):font-weight
值:bold(加粗)、bolder(继续加粗)、lighterr(细)
4.字体倾斜:font-style
5.字体颜色:color
6.行高:line-height (行高指的是文本行的基线间的距离)
初始值:normal 适应于:所有元素
对于line-height继承有点复杂。单行文字内容居中:最常用的就是line-height与height同时使用。
line-height可以用数字、百分比和长度进行定义,可以是正负值。
①数字:根据元素本身的 font-size 计算值的倍数计算行高。如,段落的 line-height属性值为 2,段落元素的 font-size 为14px,那么行高就等于 2*14=28 px
②百分比:根据元素本身计算值的百分比计算行高。如段落的 line-height属性值为 200%,段落元素的 font-size 为 14px,则行高为 200% * 14= 28px
③长度:设置固定的行高,可以使用绝对单位或相对单位。
若使用相对单位em,则根据元素本身的 font-size 计算值的倍数计算行高。
如段落的 line-height属性值为 2em,段落元素的 font-size 为 14px,则行高为 200% * 14 = 28px。
7.水平对齐方式:text-align
值:left 、 center 、right 、 justify 、 inherit 初始值:left 应用于:块级元素
8.文本修饰线(主要应用于a标签):text-decoration
值:none 、underline(下划线)、overline(上划线)、line-through(中划线)
初始值:none(去掉a标签的下划线) 应用于:所有元素
9.垂直对齐方式:vertical-align(只对行内元素有作用)
值:middle(居中)、top(顶部)、bottom(底部)默认值:baseline(基线对齐)
10.文本首行缩进:text-indent
初始值:0 应用于:块级元素 百分数:相对于包含块的宽度。
格式 text-indent : 2em ;
其中em代表单位,一个em代表缩进一个文字的宽度。
11.文本简写顺序:font-style、weight、size/height(同时,中间用‘/’分割)、family
格式: font:style weight size family;