样式继承(分类)
- 文本相关属性
font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, text-align, text-indent, texttransform,word-spacing
font-size是比较特殊的,他可以按相对值进行继承。这个特性会广泛应用于响应式设计相关的屏幕适配技术。
- 列表相关属性
list-style-image, list-style-position,
list-style-type, list-style
- 还有一个color属性
注: 不需要记住所有的,用的时候现查就可以了。当然你得记住几个重要分类。
样式覆盖
-
根据引用方式确定优先级
优先级依次提高:外部链接 < 写在style标签里 < 内联属性也就是“内联属性”里的会覆盖前面两种,“写在style标签里”的会覆盖写在外部文件里,用“外部链接”引进来的。
如果在同一个级别里,几乎只有一个规则,后写的覆盖先写的。栗子:
//这是写在外部文件里的
h1 { color: #ffffff;}
//这是写在html里的
<head>
<link rel="stylesheet" href="styles.css" />
<style> h1 { color: #444245; } </style>
</head>
<body>
<h1 style="color:#123456">我的颜色到底是啥?</h1>
</body>
最后看到的颜色是#123456
,因为内联属性设置的值优先级最高,所以覆盖了前面。
- 后写覆盖先写
栗子:
//这是写在外部文件style.css里的
h1 { color: #ffffff;}
h1 { color: #dddadd;}
//这是写在html里的
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>我的颜色到底是啥?</h1>
</body>
#dddadd
最后为#dddadd
因为后写的会覆盖先写的,几乎所有的解释型语言都是这样的.
- 选择器优先级
CSS的样式覆盖,在选择器不同的情况下,我们给每种选择器制定一个权值,计算命中一个元素的所有选择器的总权值,值高者获胜
元素选择器: 1
类选择起器: 10
ID选择器: 100
内联选择器: 1000
栗子:
//HTMl部分:
<section id="content">
<p class="abstract">这里是Abstract</p>
<p>这里是普通的</p>
</section>
//CSS部分:
#content p { color: red}
.abstract { color: black;}
p的color最后为red.因为#content p
的权值是101, .abstract
的权值是10
-
important
在样式上加了important,前面所有的规则都忽略 加了important的代码样子如下:
p { color: white !important;}
栗子:
// HTMl部分:
<section id="content">
<p class="abstract" style="color: blue;">这里是Abstract</p>
<p>这里是普通的</p>
</section>
//CSS部分:
#content p { color: red}
.abstract { color: black !important;}
p的color属性为black
, 因为.abstract
里设置的color属性标记为 !important
了。所它忽视一切的规则。