瑞安做网站多少钱,进入百度网首页,空白网站怎么建,海南进出口公司排名CSS三大特性
CSS的三大特性是为了化简代码、定位问题并且解决问题
继承性
继承性特点#xff1a;
子级默认继承父级的文字控制属性。注意#xff1a;如果标签自己有样式则生效自己的样式#xff0c;不继承。
!DOCTYPE html
html langen
子级默认继承父级的文字控制属性。注意如果标签自己有样式则生效自己的样式不继承。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS特性-继承性/titlestylebody {font-size: 30px;color: aquamarine;font-weight: 700;}/style
/headbodydivdiv标签/divpp标签/pspanspan标签/spana href#a标签/a
/body
/html其中div、p、span、a标签都会继承父级body标签所定义的属性。 但由于a标签有自己的颜色属性则此处的a标签不会继承body的color属性仍然为默认的蓝色。
层叠性
层叠性特点
相同的属性会覆盖后面的CSS属性覆盖前面的CSS属性不同的属性会叠加不同的CSS属性都生效
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS特性-层叠性/titlestylediv {color: red;font-weight: 700;}div {color: green;font-size: 30px;}/style
/headbodydivdiv 标签/div
/body/html两个相同的div后面div的color属性相同会覆盖前面的只生效第二个。 而第一个的font-weight和第二个font-size属性不同则都生效。
优先级
优先级也叫权重当一个标签使用了多种选择器时基于不同种类的选择器的匹配规则
规则选择器优先级高的样式生效公式通配符选择器 标签选择器 类选择器 id选择器 行内样式 !important (选中标签的范围越大优先级越低)注意!important可以提高权重让优先级到最高但谨慎使用
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS特性-优先级/titlestyle* {color: rebeccapurple !important;}div {color: red;}.box {color: aquamarine;}#test {color: chocolate;}/style
/headbodydiv classbox idtest stylecolor: cornflowerblue;div 标签/div
/body
/html此时虽然通配符优先级最低但由于后面有提高权重的!important让权重提到最高。
