<!-- 重点
在css里面可以导入另一个css样式 ,如下代码, 可以先写个p标签的css,然后在里面嵌套一个b的css: 用第一行(@ import"test.css ) ,第二行下b{....},其实第二个css直接就可以嵌套在代码页,写两个link,一般写多个好-->
<p><b>加粗</b></p>
层叠和继承
所谓的样式表层叠:指的是同一个元素通过不同方式设置样式表产生的样式重叠。样式 表继承:指的是某一个被嵌套的元素得到它父元素样式。还有一种样式叫浏览器样式,是这 个元素在这个浏览器运行时默认附加的样式。 可以是相同的冲突,也可以是不同的重叠.
1浏览器样式 对比
<span style="font-weight:bold;">span元素没有隐含，但可以设置它加粗因为加了style</span>
<b>加粗了</b>
<b style="font-weight:normal;">去除b元素的隐含样式,这是用的冲突的方法,normal是正常的意思</b>
三个css的比较, 优先级不同,相同的字体和颜色被冲突掉了,而加粗(font-weight: bold)和斜体(font-style: italic)被被叠加了
2在外部引入样式 css中,
p {
color: red !important;
font-size: 20px !important;
font-weight: bold;
}
3在style中,文档内嵌样式
p {
color: green;
font-size: 30px;
font-style: italic;
}
4在行中,元素内嵌样式
<p style="font-size:50px;color:orange;">我要叠加三种定义样式的方式</p>
重点
link和style的优先级是一样的,但跟位置有关, 如果link在style的上面,则优先级会高点.
强制优先级
希望外部引入的优先级高,可用 !important (强制优先级)
p{
color:red !important; // 在 ;语句 前加入 !important
font-size: 20px;
font-weight:bold;
}
继承
以下结果是 这是 和 HTML5都变红了, b 继承了p的属性.
但是不继承框架,如p中加了"border: 1px solid orange;" 显示结果如图;但是b没有继承上
所以b要么重新写,或者强制继承 "border: inherit" 但是 inherit 只能继承上一级,如果 加入<p><span><b>有边框么</b></span></p>,则不会继承.
b{border: inherit}
css:
p {
color: red;
}
body:
<p>这是<b>HTML5</b></p>