开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第18天，点击查看活动详
1、CSS概述
1.1 简介
CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS），简单的说，它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。
所谓层叠 : 是指样式表允许以多种方式规定样式信息。可以规定在单个元素中，可以在页面头元素中，也可以在另一个CSS文件中，规定的方式会有次序的差别（讲解引入时说明）。
所谓样式：是指丰富的样式外观。拿边框距离来说，允许任何设置边框，允许设置边框与框内元素的距离，允许设置边框与边框的距离等等。
1.2 组成
CSS 规则集（rule-set）由选择器和声明块组成：
- 选择器：指定将要添加样式的 HTML元素的方式。可以使用标签名，class值，id值等多种方式。
- 声明：形式为属性(property):值(value) ，用于设置特定元素的属性信息。
- 属性：指示文体特征，例如
font-size，width，background-color。 - 值：每个指定的属性都有一个值，该值指示您如何更改这些样式。
实例：
p {
color: red;
text-align: center;
}
例子解释:
- p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：
）。
- color 是属性，red 是属性值
- text-align 是属性，center 是属性值
1.3 注释
CSS 注释，以 /* 开始，以 */ 结束：
/* 这是一条单行注释 */
/* 这是
一条多行的
注释 */
2、基本语法
2.1 CSS三种引入方式
1）内联样式
内联样式是CSS声明在元素的style属性中，仅影响一个元素：
格式：
标签 style="属性名:属性值; 属性名:属性值;">内容</标签>
实例：
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
提示： 行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起）。
2）内部样式表
内部样式表是将CSS样式放在style标签中，通常style标签编写在HTML 的head标签内部。
格式：
<head>
<style>
选择器 {
属性名: 属性值;
属性名: 属性值;
}
</style>
</head>
实例：
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
3）外部样式表
外部样式表是CSS附加到文档中的最常见和最有用的方法，因为您可以将CSS文件链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式。
外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML<link> 元素引用它，通常link标签编写在HTML 的head标签内部。：
格式：
<link rel="stylesheet" href="css文件">
rel：表示“关系 (relationship) ”，属性值指链接方式与包含它的文档之间的关系，引入css文件固定值为stylesheet。
href：属性需要引用某文件系统中的一个文件
实例：
1.创建styles.css文件
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
2.link标签引入文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
注意：引入样式的优先级问题。
规则层叠于一个样式表中，其中数字 4 拥有最高的优先权：
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 标签内部）
- 内联样式（在 HTML 元素内部）
优先级： 1、一般情况下，内联样式的优先级高于内部样式或者外部样式 2、如果想要提升优先级为最高，在样式后面加上：!important 3、如果都是在内部样式或者外部样式中，标签选择器的优先级低于类选择器
2.2 选择器介绍
为了样式化某些元素，我们会通过选择器来选中HTML文档中的这些元素。如果你的样式没有生效，那很可能是你的选择器没有像你想象的那样选中你想要的元素。
每个CSS规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。
选择器分类：
| 分类 | 名称 | 符号 | 作用 | 示例 |
|---|---|---|---|---|
| 基本选择器 | 元素选择器 | 标签名 | 基于标签名匹配元素 | div{ } |
| 类选择器 | . | 基于class属性值匹配元素 | .center{ } | |
| ID选择器 | # | 基于id属性值匹配元素 | #username{ } | |
| 属性选择器 | 属性选择器 | [] | 基于某属性匹配元素 | [type]{ } |
| 伪类选择器 | 伪类选择器 | : | 用于向某些选择器添加特殊的效果 | a : hover{ } |
| 组合选择器 | 后代选择器 | 空格 | 使用空格符号结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素 | .top li{ } |
| 子级选择器 | > | 使用 > 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素 | .top > li{ } | |
| 同级选择器 | ~ | 使用 ~ 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有兄弟元素 | .l1 ~ li{ } | |
| 相邻选择器 | + | 使用 + 结合两个选择器，基于第一个选择器，匹配第二个选择器的相邻兄弟元素 | .l1 + li{ } | |
| 通用选择器 | * | 匹配文档中的所有内容 | *{ } |
2.2.1 基本选择器
1）元素选择器
页面元素：
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
选择器：
/*选择所有li标签,背景变成蓝色*/
li{
background-color: aqua;
}
2）类选择器
页面元素：
<div>
<ul>
<li class="ulist l1">List item 1</li>
<li class="l2">List item 2</li>
<li class="l3">List item 3</li>
</ul>
<ol>
<!--class 为两个值-->
<li class="olist l1">List item 1</li>
<li class="olist l2">List item 2</li>
<li class="olist l3">List item 3</li>
</ol>
</div>
选择器：
/*选择class属性值为l2的,背景变成蓝色*/
.l2{
background-color: aqua;
}
/*选择class属性值为olist l2的,字体为白色*/
.olist.l2{
color: wheat;
}
3）ID选择器
页面元素：
<div>
<ul>
<li class="l1" id="one">List item 1</li>
<li class="l2" id="two">List item 2</li>
<li class="l3" id="three">List item 3</li>
</ul>
<ol>
<li class="l1" id="four">List item 1</li>
<li class="l2" id="five">List item 2</li>
<li class="l3" id="six">List item 3</li>
</ol>
</div>
选择器：
#tow{
background-color: aqua;
}
4）通用选择器
页面元素：
<div>
<ul>
<li class="l1" id="one">List item 1</li>
<li class="l2" id="two">List item 2</li>
<li class="l3" id="three">List item 3</li>
</ul>
<ol>
<li class="l1" id="four">List item 1</li>
<li class="l2" id="five">List item 2</li>
<li class="l3" id="six">List item 3</li>
</ol>
</div>
选择器：
/*所有标签 */
*{
background-color: aqua;
}
2.2.2 属性选择器
页面元素：
<ul class="l1">
<li >List item 1</li>
<li >List item 2</li>
<li >List item 3</li>
</ul>
<ul class="l2">
<li id="four">List item 1</li>
<li id="five">List item 2</li>
<li id="six">List item 3</li>
</ul>
<p class="">
p item
</p>
选择器示例1
[属性名]{ }
选择器示例2
标签名[属性名]{ }
选择器示例3
标签名[属性名='属性值']{ }
2.2.3 伪类选择器
伪类选择器，用于选择处于特定状态的元素，例如，一些元素中的第一个元素，或者某个元素被鼠标指针悬停。
格式：
标签名:伪类名{ }
常用伪类:
锚伪类:在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标悬停链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意：伪类顺序 link ，visited，hover，active，否则有可能失效。
实例：
<div>
<a class="red" href="#">小粤</a> <br/>
<a class="blue" href="#">小粤</a>
</div>
/* 选择a标签,class值为red ,设置访问后为红色链接*/
a.red:visited {
color: red;
}
2.2.4 组合选择器
页面元素：
<div>
<ul class="l1">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<ul class="l2">
<li id="four">List item 1</li>
<li id="five">List item 2</li>
<li id="six">List item 3</li>
</ul>
</ul>
</div>
1）后代选择器
.l1 li{
background-color: aqua;
}
2）子级选择器
.l1 > li{
background-color: aqua;
}
3）同级选择器
.l1 ~ li{
background-color: aqua;
}
4）相邻选择器
.l1 + li{
background-color: aqua;
}
3、CSS定位
3.1 定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子
定位也是用来布局的，它有两部分组成：
定位 = 定位模式 + 边偏移
定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
1）边偏移
边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |
bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离。 |
left | left: 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离。 |
right | right: 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
2）定位方式 (position)
在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：
选择器 {
position: 属性值;
}
定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
| static 静态定位 | 否 | 不能使用边偏移 | 很少 |
| relative 相对定位 | 否 (占有位置) | 相对于自身位置移动 | 基本单独使用 |
| absolute绝对定位 | 是（不占有位置） | 带有定位的父级 | 要和定位父级元素搭配使用 |
| fixed 固定定位 | 是（不占有位置） | 浏览器可视区 | 单独使用，不需要父级 |
| sticky 粘性定位 | 否 (占有位置) | 浏览器可视区 | 当前阶段少 |
3.2 定位模式介绍
1）静态定位(static)
静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。
语法：
选择器 {
position: static;
}
静态定位 按照标准流特性摆放位置，它没有边偏移。
2）相对定位(relative)
相对定位是元素在移动位置的时候，是相对于它自己原来的位置**来说的（自恋型）。
语法：
选择器 {
position: relative;
}
相对定位的特点：
1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。
3） 绝对定位(absolute)
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
语法：
选择器 {
position: absolute;
}
- 完全脱标 —— 完全不占位置；
- 父元素没有定位，则以浏览器为准定位（Document 文档）。
- 父元素要有定位-----元素将依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位。
绝对定位的特点：
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）
4）固定定位(fixed)
固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器 {
position: fixed;
}
注意：
- 边偏移需要和定位模式联合使用，单独使用无效；
top和bottom不要同时使用；left和right不要同时使用。
