# CSS

# 参考文档

# css 选择器

# 简单选择器

id 选择器

格式为 #id {}，id 选择器是使用元素的 id 来选定元素。

注意： id 选择器不能以数字开头。
类选择器

格式为 .类名 {}，还可以 标签名.类名 {}，比如：p.center {...}，选择具有这个类的这个标签可以生效。就是指的是具有 center 类的 p 标签生效。

选择多个类的话，类之间使用空格隔开。

注意： 类名不能使用数字开头！
通用选择器

格式为 * {}，使用 * 可以选择页面的所有元素。
元素选择器

格式为 标签名 {}，即元素名，直接使用元素的名字进行选择。
选择器分组

多个选择器可以进行分组，然后使用“，”进行分隔。

# 高级选择器

多类选择器

格式为 .类名.类名 {}，即类名直接连接在一起，之间没有空格，表示筛选同时具有这两个类的元素。
属性选择器

格式为 标签名[属性名 1=属性值 1][属性名 2=属性值 2] {}，标签名可省略，属性名可以是多个，但是多个使用要连接在一起。
- [attribute = value] ，用于选取带有指定属性和值的元素。
- [attribute~ = value] ，用于选取属性值中包含指定词汇的元素。
- [attribute| = value] ，用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
- [attribute^ = value] ，匹配属性值以指定值开头的每个元素。
- [attribute$ = value] ，匹配属性值以指定值结尾的每个元素。
- [attribute* = value] ，匹配属性值中包含指定值的每个元素。
示例：
```
  *[title] {color:red;}  /*-- 这里是包含 title 属性的所有元素都设置为红色字体 --*/
```
1
```
  a[href] {color:red;}  /*-- 这里是把有 href 属性的 a 标签设置为红色字体 --*/
```
1
多类选择器

格式为 .类名.类名 {}，即类名直接连接在一起，之间没有空格，表示筛选同时具有这两个类的元素。

# 组合器

后代选择器 (空格)，所有后代。

示例：
```
div p {
background-color: yellow;
}
```
1
2
3
子选择器 (>)，只是子。

示例：
```
div > p {
background-color: yellow;
}
```
1
2
3

相邻兄弟选择器 (+)

示例：

div + p {
  background-color: yellow;
}

1
2
3

通用兄弟选择器 (~)，所有兄弟。

示例：
```
div ~ p {
  background-color: yellow;
}
```
1
2
3

# 三种使用 CSS 的方法

外部 CSS

使用 <link> 标签引用外部的 CSS 文件，例如 <link rel="stylesheet" type="text/css" href="文件地址">。

外部样式表的扩展名必须是 .css 的文件，文件中不应该包含任何 HTML 标签，属性值和单位之间不加空格。
内部 CSS

内部 CSS 写在页面声明的 <head> 标签内，样式代码写在 <style> 标签中。
内联（行内） CSS

内联样式是写在标签的属性中，HTML 标签有一个 style 属性，样式代码作为属性值写进去。

# 多个样式表

优先级：行内样式 > 内部（在 head 中声明）/外部 > 浏览器默认样式

内部/外部的优先级是看谁最后被读取。如果是先使用 <link> 标签引入的外部文件，而内部的 <style> 标签则在引用的后面，那么是内部的生效。生效后面的那个。

# 注释

CSS 的注释和 HTML 一致。

# 颜色

使用颜色名称，比如 red、blue 等
还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色。
- RGB(red, green, blue)，取值 0 ~ 255，比如（255，0，0）表示的就是红色。
  
  通常使用三种颜色值相同来使用不同程度的灰色，比如用到阴影的时候。
- RGBA(red, green, blue， alpha)，添加了 alpha 属性来指定不透明度，A 取值 0.0 ~ 1.0，0.0 是完全透明，1.0 是完全不透明。
- HEX，#rrggbb，十六进制取色。

# 渐变

linear-gradient 线性渐变

默认从上而下 background-image: linear-gradient(red, yellow);
从左到右 linear-gradient(to right, red , yellow);
对角线 linear-gradient(to bottom right, red, yellow);

radial-gradient 径向渐变

调整占比 background-image: radial-gradient(red 5%, yellow 15%, green 60%);
设置形状 background-image: radial-gradient(circle, red, yellow, green);

# CSS 背景

# 背景色

background-color: 取值; 指定背景颜色

# 背景图

background-image: url("地址");，指定使用的背景图片。
background-repeat: repeat-x;，只在在水平方向重复；repeat-y，只在在垂直方向重复，no-repeat，只显示一次。
background-position: right top;,指定图片位置。
background-attachment: fixed;，选择图片是否和页面一起滚动，fixed 固定，scroll 滚动。

# 属性简写

background: url("地址") no-repeat right top，可以在 background 属性里面直接写其他所有取值，但是要遵循以下顺序：颜色、图片、重复、固定、位置。

background-color
background-image
background-repeat
background-attachment
background-position

# 其他属性

background，在一条声明中设置所有背景属性的简写属性。
background-clip，规定背景的绘制区域。
background-origin，规定在何处放置背景图像。
background-position，设置背景图像的开始位置。
background-size，规定背景图像的尺寸。
- contain，背景图像将保持其长宽比缩放，并尝试匹配内容区域。
- 100% 100%，拉伸以覆盖整个内容区域。
- cover，保持比例缩放。不会拉伸。

# CSS 边框

# 边框类型

border-style，指定边框类型。取值有以下这些：

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框，效果取决于 border-color 值
ridge - 定义 3D 脊线边框，效果取决于 border-color 值
inset - 定义 3D inset 边框，效果取决于 border-color 值
outset - 定义 3D outset 边框，效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。即按照上右下左的顺时针的顺序自定义四个边框。它的工作原理是这样的：

四个值：border-style: dotted solid double dashed;
- 上边框是虚线
- 右边框是实线
- 下边框是双线
- 左边框是虚线
三个值：border-style: dotted solid double;
- 上边框是虚线
- 右和左边框是实线
- 下边框是双线
两个值：border-style: dotted solid;
- 上和下边框是虚线
- 右和左边框是实线
一个值：border-style: dotted;
- 四条边均为虚线

# 边框宽度

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框），即顺时针方向。

# 边框颜色

border-color 属性用于设置四个边框的颜色。同样可以顺时针选择分别自定义四个边框。

# 属性简写

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color

即宽度 > 样式 > 颜色的顺序，进行编写。

# 圆角边框

border-radius: npx 属性用于向元素添加圆角边框。

# 边距

# 外边距

margin 属性用于在任何定义的边框之外，为元素周围创建空间。可选以下属性值：

auto - 浏览器来计算外边距，以使元素在其容器中水平居中。然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。
length - 以 px、pt、cm 等单位指定外边距。
% - 指定以包含元素宽度的百分比计的外边距。
inherit - 指定应从父元素继承外边距。

注意： 允许负值，可以简写，遵循顺时针原则。

# 外边距合并

TODO：

# 内边距

padding 属性用于在任何定义的边界内的元素内容周围生成空间。

length - 以 px、pt、cm 等单位指定内边距。
% - 指定以包含元素宽度的百分比计的内边距。
inherit - 指定应从父元素继承内边距。

注意： 不允许为负值，没有 auto。可以简写，遵循顺时针原则。

# 高度宽度

height、width 指的是内容区域的宽度高度，不包括内边距、边框和外边距。

# 盒子模型

盒子包括内容 + 内边距 + 边框 + 外边距。

box-sizing，此元素的内边距和边框不再会增加它的宽度。

下面是部分代码，匹配各种浏览器用的。通过挤压内容实现。

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

1
2
3

实例：

-moz 代表 firefox 浏览器私有属性；
-ms 代表 IE 浏览器私有属性；
-webkit 代表 chrome、safari 私有属性；
-o 代表 Opera 私有属性。

# 轮廓

outline 指的是元素的外轮廓，使用见 border。

offset - 偏移量，轮廓与边框之间的距离（有点外边距的味道）。

# 文本

color - 颜色
text-align - 水平对齐方式，left/center/right。
vertical-align - 垂直对齐方式，top/middle/bottom。
text-decoration - 设置或删除文本装饰
- text-decoration: none;，通常用于从链接上删除下划线。
- text-decoration: overline;，上划线。
- text-decoration: line-through;，删除线。
- text-decoration: underline;，下划线。
text-transform: 属性值; - 文本转换。
- uppercase，全大写。
- lowercase，全小写
- capitalize，首字母大写。
text-indent - 指定文本第一行的缩进。
letter-spacing - 文本中字符之间的间距。
line-height - 行距。
word-spacing - 文本中单词之间的间距。
text-shadow - 文本添加阴影。
- text-shadow: 2px 3px 5px red;，表示水平 2px，垂直 3px，模糊 5px，阴影颜色 red。
font-size - 字体大小。
font-weight - 粗细。

# 链接

a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

例子：

a:link {
  color: blue;
}
a:visited {
  color: red;
}

1
2
3
4
5
6

这里说的是未访问的是蓝色字体，访问过的字体颜色变成红色。

# 表格

border-collapse 属性设置是否将表格边框折叠为单一边框。
在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行。

# Display & visitable

display: none; 从 DOM 树中移除，visitable: hidden不显示，但是占用空间。

# 位置/定位

# position

static 是默认值。

任意 position: static; 的元素不会被特殊的定位。不受 top、bottom、left 和 right 属性的影响。它始终根据页面的正常流进行定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。
relative 表现的和 static 一样，除非你添加了一些额外的属性，相对于它的正常位置偏移。
- top - 比如 top: -20px;
- left
- bottom
- right
fixed 固定位置。
absolute 相对于最近的被定位的父元素的位置进行定位，取值四个方向顺时针。如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
- 绝对定位元素的位置与文档流无关，因此它不占据任何空间。
- 被定位的是指的除了 static 以外的任何元素。
sticky 粘性定位，根据用户的滚动位置进行定位。

# 元素重叠

z-index 属性可以指定元素的堆栈顺序（那个元素在上面或者下面）。可以设置为正/负值。

注意： 如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。

# 溢出

overflow 如果内容溢出，则提供一个滚动条。

visible - 默认。溢出没有被剪裁。内容在元素框外渲染。
hidden - 溢出被剪裁，其余内容将不可见。
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容。
auto - 与 scroll 类似，但仅在必要时添加滚动条
overflow-x 指定如何处理内容的左/右边缘。
overflow-y 指定如何处理内容的上/下边缘。

示例：

div {
  overflow-x: hidden; /* 隐藏水平滚动栏 */
  overflow-y: scroll; /* 添加垂直滚动栏 */
}

1
2
3
4

注意： overflow 属性仅适用于具有指定高度的块元素。

# 浮动 & 清除

# 浮动

float:left; - 当前元素向左侧浮动。
float:right; - 当前元素向右侧浮动。

float 占用其他的显示，会把其他的字挤过去。文字包围图片效果，使用的时候，将图片放在文字前面。

# 清除浮动

clear:left; - 禁止左侧出现浮动元素,如果左侧存在浮动元素,则当前元素将在浮动元素下面另起一行呈现。
clear:right; - 禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现。
clear:both; - 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现。

# 响应式设计

HTML5 引入了一种方法，使 Web 设计者可以通过 <meta> 标签来控制视口（viewport）。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

当浏览器首次加载页面时，initial-scale=1.0 部分设置初始缩放级别。

# 图片

width 属性设置为百分比，且高度设置为 auto，则图像将进行响应来放大或缩小。
如果将 max-width 属性设置为 100％，则图像将按需缩小，但绝不会放大到大于其原始大小。

# 伪类

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

示例：

/*-- 选择器匹配所有 <p> 元素中的第一个 <i> 元素 --*/
p:first-child i {
  color: blue;
}

1
2
3
4

/*-- 匹配所有首个 <p> 元素中的所有 <i> 元素 --*/
p i:first-child {
  color: blue;
}

1
2
3
4

# 不透明度

opacity 属性的取值范围为 0.0-1.0。值越低，越透明。

当使用 opacity 属性为元素背景添加透明度时，其所有子元素也将变为透明，比如它内部的字体颜色也会变得透明。

# 单位

# 绝对单位

cm - 厘米
mm - 毫米
in - 英寸 (1in = 96px = 2.54cm)
px - 像素 (1px = 1/96th of 1in)
- 像素（px）是相对于观看设备的。对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。
pt - 点 (1pt = 1/72 of 1in)
pc - 派卡 (1pc = 12 pt)

# 相对单位

em - 相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）
ex - 相对于当前字体的 x-height(极少使用)
ch - 相对于 "0"（零）的宽度
rem - 相对于根元素的字体大小（font-size）
vw - 相对于视口*宽度的 1%
vh - 相对于视口*高度的 1%
vmin - 相对于视口*较小尺寸的 1％
vmax - 相对于视口*较大尺寸的 1％
% - 相对于父元素

视口（Viewport）= 浏览器窗口的尺寸。如果视口为 50 厘米宽，则 1vw = 0.5 厘米。

# 讨论区

由于评论过多会影响页面最下方的导航，故将评论区做默认折叠处理。

点击查看评论区内容，渴望您的宝贵建议~

← CSS 总览 Flex →