HTML css继承与层叠样式

一:继承

  基本定义就是给一个父元素设置一些样式后,其属性值会被其后代继承。需要注意的是 后代只能继承父元素的文本样式,不能继承盒子(块元素)的样式。

                                                                       代码:

                                                                           

                                                       结果:          

二:层叠样式

       一个标签可以取多个类名和一个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;

猜你喜欢

转载自blog.csdn.net/JLX981314/article/details/114984781