这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
1.CSS组成
2. CSS的三种使用方式
- 外部样式表(External style sheet)
<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">
- 内部样式表(Internal style sheet)
<head>
<style>
h1 {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
- 内联样式(Inline style)
<p style="color:sienna;margin-left:20px"> 这是一个段落。</p>
3. CSS选择器
定义：找出页面中的元素，以便给他们设置样式。
使用多种方式选择元素：
- 按照标签名、类名或 id
- 标签选择器：
- 类选择器：
- id选择器：
- 按照属性
- 按照 DOM 树中的位置
4. 选择器优先级
对于选择器的优先级：
- 标签选择器、伪元素选择器：1；
- 类选择器、伪类选择器、属性选择器：10；
- id 选择器：100；
- 内联样式：1000；
注意事项：
- !important声明的样式的优先级最高；
- 如果优先级相同，则最后出现的样式生效；
- 继承得到的样式的优先级最低；
- 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
- 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
5. 伪元素和伪类的区别和作用？
伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。
p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
color: orange;
}
a:active {
color: red;
}
:focus {
outline: 2px solid orange;
}
6. 一些常用属性
- font-family：设置字体格式
font-family: Optima, Georgia, serif;
- font-size：设置字体大小
关键字：small、medium、large
长度： px、em
百分数： 相对于父元素字体大小
- line-height: 设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。
- text-align：定义行内内容（例如文字）如何相对它的块父元素对齐。
text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。 - spacing:
- text-indent:
- text-decoration:
- white-space:
7. 盒子模型
盒子模型包括：
Margin(外边距)：清除边框外的区域，外边距是透明的。
Border(边框)：围绕在内边距和内容外的边框。
Padding(内边距)：清除内容周围的区域，内边距是透明的。
Content(内容)：盒子的内容，显示文本和图像。
width和height：只是设置content的宽度和高度。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距。
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距。
参考: (CSS 盒子模型 | 菜鸟教程 (runoob.com))
7.1 margin
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
参考：CSS margin(外边距) | 菜鸟教程 (runoob.com)
7.2 border
border-style属性用来定义边框的样式。
border-width 属性为边框指定宽度。
border-color属性用于设置边框的颜色。
7.3 padding
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
7.4 margin 和 padding 的使用场景
- 需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin；
- 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding。
8. 块级元素和行级元素
| 块级元素 | 行级元素 |
|---|---|
| 生成块级盒子 | 生成行级盒子，内容分散在多个行盒中 |
| 不和其它盒子并列摆放 | 和其它行级盒子一起放在一行或拆开成多行 |
| 适用所有的盒模型属性 | 盒模型中的width、height不适用 |
| body、article、div、main、 span、em strong、 cite、 code 等 | section、h1-6、p、ul、li 等 |
| display: block | display: inline |
9. display
9. display的block、inline和inline-block的区别
（1）block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；
（2）inline： 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
（3）inline-block： 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。
