这是我参与「第四届青训营 」笔记创作活动的的第3天。

继前两篇HTML、JavaScript后，这篇写完之后前端三件套也就完结了。

一、CSS是什么？

• Cascading Style Sheets
• 用来定义页面元素的样式
  • 设置字体和颜色
  • 设置位置和大小
  • 设置动画效果

二、如何使用CSS?

CSS共有三种引入方式：

<!-- 外链 -->
<link rel="stylesheet" href="./assets/style.css">

<!-- 嵌入 -->
<style>
    li {margin: 0; list-style: none;}
    p {margin: 1em 0;}
</style>

<!-- 内联 -->
<p style="margin: 1em 0">Example Content</p>

三、CSS选择器（Selector）

通过选择器选中页面中的元素，并为其设置相应的样式。

通配选择器

* {
    margin: 0;
}

标签选择器

div {
    width: 100px;
}

id选择器

#id {
    width: 100px;
}

类选择器

.class {
    width: 100px;
}

属性选择器

[type] {
    width: 100px;
}

[type="input"] {
    width: 100px;
}

伪类选择器

::before,
::after {
    width: 100px;
}

p:first-child {
    font-size: 120%;
    font-weight: bold;
}

a:hover {
    color: hotpink;
}

四、选择器的组合

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B,如果它是A的子孙	nav a
亲子组合	A>B	选中B,如果它是A的子元素	section>p
兄弟选择器	A~B	选中B,如果它在A后且和A同级	h2 ~p
相邻选择器	A+B	选中B,如果它紧跟在A后面	h2+p

五、其它CSS属性

• 字体 font-family
• 字体 font-size
  • 关键字
    • small、medium、large
  • 长度
    • px、em
  • 百分数
    • 相对于父元素字体大小
• 行高 line-height
• 文本对齐 text-align
• 缩进 text-indent
• 文本描述 text-decoration

六、深入CSS

选择器优先级：

!important > 行内 > id > class > 属性、标签

继承：

一般关于字体的属性都是可以继承的

布局相关技术

• 常规流
  • 行级、块级、table、flexbox、grid
• 浮动
• 绝对定位

盒模型

• 标准盒模型——width 和 height 指的是内容区域的宽度和高度
• IE盒模型——width 和 height 指的是内容区域+border+padding的宽度和高度