第四节 CSS的三大特性
2017-07-18 20:57
274 查看
4.1
继承
子代可以直接使用父代的某些样式（特征），比如人可以从父母继承姓、肤色等，但性格不能继承。
CSS中也有继承特性
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div1{
font-size:24px;
color:red;
}
</style>
</head>
<body>
<div id="div1">
这是div1中的内容
<div id="div2">
这是div1的后代div2中的内容
</div>
</div>
</body>
结果显示为 红字
div2虽然没有设定这种样式，但是实际上却使用了该样式，说明该样式是从它的父代div1那里继承而来。
通过开发者工具可以进一步佐证继承的存在
但并不是所有的属性都可以继承
#div1{
font-size:24px;
color:red;
border:2px solid green;
}
结果为
从结果反映出来，div2并没有边框，也就是说border没有被继承。可以进一步通过开发者工具来佐证。
有些属性能被继承
4.2
层叠性
例如：华鑫公司发了两条通知，
通知一
为祝贺华鑫成功上市，经董事会讨论决定，所有华鑫员工本月发奖金500元。
通知二
为庆祝中国共产党成立96周年，公司决定给每位党员加发补助96元。
华鑫员工张三（中共党员）可以领取到奖金500元+补助96元
因为选择器一（华鑫员工）和选择器二（党员）都选中张三了，那么他可以领取的福利就可以进行叠加。
CSS中也支持叠加，但名词为层叠。
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div{
font-size:24px;
}
#div1{
color:red;
}
</style>
</head>
<body>
<div id="div1">张三（党员）</div>
<div id="div2">李四</div>
</body>
结果显示为
从结果可以得出结论：“张三”的最终样式来自于两个样式的层叠，“开发者工具”也进一步佐证了这一点。
4.3
优先级
在现实生活中当多条相互冲突的规则施加到同一事物时，也必须指定一个规则，也就是优先级。
从系列实验中可得出CSS选择器优先级的结论
内联>id选择器>类选择器>元素选择器
内部样式>外部样式
继承
子代可以直接使用父代的某些样式（特征），比如人可以从父母继承姓、肤色等，但性格不能继承。
CSS中也有继承特性
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div1{
font-size:24px;
color:red;
}
</style>
</head>
<body>
<div id="div1">
这是div1中的内容
<div id="div2">
这是div1的后代div2中的内容
</div>
</div>
</body>
结果显示为 红字
div2虽然没有设定这种样式，但是实际上却使用了该样式，说明该样式是从它的父代div1那里继承而来。
通过开发者工具可以进一步佐证继承的存在
但并不是所有的属性都可以继承
#div1{
font-size:24px;
color:red;
border:2px solid green;
}
结果为
从结果反映出来，div2并没有边框，也就是说border没有被继承。可以进一步通过开发者工具来佐证。
有些属性能被继承
4.2
层叠性
例如：华鑫公司发了两条通知，
通知一
为祝贺华鑫成功上市，经董事会讨论决定，所有华鑫员工本月发奖金500元。
通知二
为庆祝中国共产党成立96周年，公司决定给每位党员加发补助96元。
华鑫员工张三（中共党员）可以领取到奖金500元+补助96元
因为选择器一（华鑫员工）和选择器二（党员）都选中张三了，那么他可以领取的福利就可以进行叠加。
CSS中也支持叠加，但名词为层叠。
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div{
font-size:24px;
}
#div1{
color:red;
}
</style>
</head>
<body>
<div id="div1">张三（党员）</div>
<div id="div2">李四</div>
</body>
结果显示为
从结果可以得出结论：“张三”的最终样式来自于两个样式的层叠，“开发者工具”也进一步佐证了这一点。
4.3
优先级
在现实生活中当多条相互冲突的规则施加到同一事物时，也必须指定一个规则，也就是优先级。
从系列实验中可得出CSS选择器优先级的结论
内联>id选择器>类选择器>元素选择器
内部样式>外部样式
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 