本文参考MDN记录CSS常用知识点,CSS全称为Cascading Style Sheets,层叠样式表。
引入CSS
外部样式表引入方式如下
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
</html>
内部样式表引入方式如下
<!DOCTYPE html>
<head>
<style>
h1 {
color: red;
}
</style>
</head>
</html>
内联样式如下
<html>
<body>
<p style="color: red; background-color: yellow">This is a paragraph.</p>
</body>
</html>
CSS优先级
选择器的优先级由4个部分相加,不允许进位
- 千位:内联样式,由于没有选择器,总为1
- 百位:包含id选择器计1
- 十位:包含类选择器、属性选择器、或者伪类计1
- 个位:包含元素、伪元素选择器则计1
比如h1 + p::first-letter的优先级为0003
另外一个影响到优先级的就是!important,可以覆盖样式层叠规则,强制使用该样式
选择器
选择器 | 示例 |
---|---|
类型选择器 | h1 { } |
通配选择器 | * { } |
类选择器 | .box { } |
id选择器 | #name { } |
标签属性选择器 | a[title] { } |
伪类选择器 | p:first-child { } |
伪元素选择器 | p::first-line { } |
后代选择器 | article p { } |
子代选择器 | article > p { } |
相邻兄弟选择器 | h1 + p { } |
通用兄弟选择器 | h1 ~ p { } |
存否和值选择器
选择器 | 含义 |
---|---|
a[title] | 带有title属性的a元素 |
a[href=“https://www.qq.com”] | 带有指定值href属性的a元素 |
p[class~=“special”] | 带有class属性,且属性的值至少包含特定值 |
div[lang|=“zh”] | 带有lang属性,且属性的值以zh开头 |
子字符串匹配选择器
选择器 | 含义 |
---|---|
li[class^=“box-”] | 带有class属性,且值以box-开头 |
li[class$="-box"] | 带有class属性,且值以-box结尾 |
li[class*=“box”] | 带有class属性,且值包含box |
在闭合括号前添加i表示字符串匹配时忽略大小写,比如li[class*=“box” i]
伪类与伪元素
伪类是选择器的一种,它用于选择处于特定状态的元素,而伪元素匹配额外添加的元素或者现有元素的一部分。
常见伪类和伪元素参考 MDN伪类和伪元素
关系选择器
用法 | 含义 |
---|---|
body article | 后代选择器,选择body下的所有article,不论层级 |
body > article | 子代选择器,选择body下一级的article,更深层级的不匹配 |
p + img | 邻接兄弟选择器,选择p后面相邻的img元素,中间有其它元素相隔则不匹配 |
p ~ img | 通用兄弟选择器,选择p后面所有的img元素,即使中间有其它元素 |
盒模型
所有的元素都被一个个的盒子包裹着,两种典型的盒子为块级盒子block box和内联盒子inline box。
block box和inline box主要区别为
- block元素会换行,inline元素不会换行
- block元素默认充满父元素所有宽度
- width height属性在block元素有效,inline元素不生效
- block元素的padding,margin,border会把其它元素推开,而inline元素的padding,margin,border会生效但是仅水平方向上会把其它inline元素推开
常见的div img这些为block元素,a span strong em这些都是inline元素。
内部和外部显示模型
css的box模型有一个外部显示类型,来决定盒子是块级还是内联。同样盒模型还有内部显示类型,它决定了盒子内部元素是如何布局的。
通过设置display为block或inline设置该元素的外部显示类型,通过设置display为flex或者grid设置该元素的内部显示类型