Web前端-之CSS篇章知识点总结

系列文章目录

CSS是一种描述HTML文档样式的语言

---

---

前言

---

一、CSS简介

1.CSS 指的是层叠样式表* (Cascading Style Sheets)
2.CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
3.CSS 节省了大量工作。它可以同时控制多张网页的布局
4.外部样式表存储在 CSS 文件中
*注：也称级联样式表。

二、CSS语法

1.CSS规则集(rule-set)由选择器和声明块组成:

选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。

2.CSS选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类：
A.简单选择器（根据名称、id、类来选取元素）
举例》CSS 元素选择器
页面上的所有P元素都将居中对齐，并带有红色文本颜色：
p {
text-align: center;
color: red;
}
》CSS id 选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
这条 CSS 规则将应用于 id=“para1” 的 HTML 元素：
#para1 {
text-align: center;
color: red;
}
注意：id 名称不能以数字开头
CSS 类选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
在此例中，所有带有 class=“center” 的 HTML 元素将为红色且居中对齐：
.center {
text-align: center;
color: red;
}
注:HTML 元素也可以引用多个类
B.组合器选择器（根据它们之间的特定关系来选取元素）
组合器是解释选择器之间关系的某种机制。
CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。
CSS 中有四种不同的组合器：
a.后代选择器 (空格)
后代选择器匹配属于指定元素后代的所有元素。
下面的例子选择 div元素内的所有 p元素：
实例
div p {
background-color: yellow;
}
b.子选择器 (>)
子选择器匹配属于指定元素子元素的所有元素。
下面的例子选择属于 div元素子元素的所有 p 元素：
实例
div > p {
background-color: yellow;
}
c.相邻兄弟选择器 (+)
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
下面的例子选择紧随 div元素之后的所有 p元素：
实例
div + p {
background-color: yellow;
}
d.通用兄弟选择器 (~)
通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
下面的例子选择属于 div元素的同级元素的所有 p 元素：
实例
div ~ p {
background-color: yellow;
}

C.伪类选择器（根据特定状态选取元素）
什么是伪类？
伪类用于定义元素的特殊状态。
例如，它可以用于：
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
伪类的语法：
selector:pseudo-class {
property: value;
}
锚伪类
链接能够以不同的方式显示：
实例
/ 未访问的链接 /
a:link {
color: #FF0000;
}
/ 已访问的链接 /
a:visited {
color: #00FF00;
}
/ 鼠标悬停链接 /
a:hover {
color: #FF00FF;
}
/ 已选择的链接 /
a:active {
color: #0000FF;
}
注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
CSS - :first-child 伪类
:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。
D.伪元素选择器（选取元素的一部分并设置其样式）
什么是伪元素？
CSS 伪元素用于设置元素指定部分的样式。
例如，它看用于：
设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容
::first-line 伪元素
::first-line 伪元素用于向文本的首行添加特殊样式。

下面的例子为所有 p元素中的首行添加样式：
实例
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
注意：::first-line 伪元素只能应用于块级元素。
::first-letter 伪元素
::first-letter 伪元素用于向文本的首字母添加特殊样式。
CSS - ::before 伪元素
::before 伪元素可用于在元素内容之前插入一些内容。
h1::before {
content: url(smiley.gif);
}
CSS - ::after 伪元素
::after 伪元素可用于在元素内容之后插入一些内容。
E.属性选择器（根据属性或属性值来选取元素）
F.CSS 通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。

• {
  margin:0;
  padding:0;
  }

G.CSS 分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素
h1, h2, p {
text-align: center;
color: red;
}

---

## 3.CSS使用 有三种插入样式表的方法：

外部 CSS

内部 CSS
行内 CSS
多重样式层叠优先级别:行内样式最高，其次内部样式最后外部样式

4.CSS注释

注释用于解释代码，以后在您编辑源代码时可能会有所帮助。
以 /* 开始，以 */ 结束：

5.CSS背景

background-color 属性指定元素的背景色
不透明度 / 透明度
opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

6.CSS背景图像

CSS 背景图像
background-image 属性指定用作元素背景的图像。
body {
background-image: url(“paper.gif”);
}

7.CSS 背景重复

默认情况下，background-image 属性在水平和垂直方向上都重复图像。
水平方向重复 (background-repeat: repeat-x;)
垂直方向重复(background-repeat: repeat-y;)
background-repeat: no-repeat属性还可指定只显示一次背景图像
background-position 属性用于指定背景图像的位置。

8.CSS 背景附着

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：fixed固定scroll滚动

9.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 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

10.CSS 边框宽度

border-width 属性指定四个边框的宽度。
可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：
border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）

11.CSS 边框颜色

border-color 属性用于设置四个边框的颜色。
可以通过以下方式设置颜色：
name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
transparent
注释：如果未设置 border-color，则它将继承元素的颜色。

12.CSS 边框各边

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

13.CSS 外边距

margin 属性是以下各外边距属性的简写属性：
margin-top
margin-right
margin-bottom
margin-left
auto 值
可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。
然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。
inherit 值
本例使 p class=“ex1” 元素的左外边距继承自父元素（div）：

14.CSS 文字间距

字母间距
letter-spacing属性用于指定文本中字符之间的间距
行高
line-height 属性用于指定行之间的间距：
字间距
word-spacing 属性用于指定文本中单词之间的间距
空白
white-space 属性指定元素内部空白的处理方式

15.CSS 文本阴影

文本阴影
text-shadow 属性为文本添加阴影。

三、CSS 中级模块

1.CSS 布局 - display 属性

display 属性
display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display值为 block (块状) 或 inline(内联)
块级元素（block element）
块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
这个 <iv 元素属于块级元素。
块级元素的一些例子：
div
h1 - h6
p
form

footer section 行内元素（inline element） 内联元素不从新行开始，仅占用所需的宽度。 这是段落中的行内 span元素。 行内元素的一些例子：

span
a
img
display:none 与 visiblity: hidden 的区别
visibility:hidden 隐藏元素，但仍占据布局中的空间。
display:none 从文档中删除元素。它不会占据任何空间。

2.CSS 布局 - width 和 max-width

3.CSS 布局 - position 属性

position 属性
position 属性规定应用于元素的定位方法的类型。
有五个不同的位置值：
static
relative
fixed
absolute
sticky
position: static;
HTML 元素默认情况下的定位方式为 static（静态）。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：
position: relative;
position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
position: fixed;
position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
固定定位的元素不会在页面中通常应放置的位置上留出空隙。
position: absolute;
position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
注意：“被定位的”元素是其位置除 static 以外的任何元素。
position: sticky;
position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
注意：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见下面的实例）。您还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。
在此例中，在到达其滚动位置时，sticky 元素将停留在页面顶部（top: 0）。
重叠元素z-index
在对元素进行定位时，它们可以与其他元素重叠。
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）

4.CSS 布局 - 溢出

CSS Overflow
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow 属性可设置以下值：
visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条
注释：overflow 属性仅适用于具有指定高度的块元素。

5.CSS 布局 - 浮动和清除

CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
float 属性
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：
1.left - 元素浮动到其容器的左侧
2.right - 元素浮动在其容器的右侧
3.none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
4.inherit - 元素继承其父级的 float 值
clear 属性
clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
clear 属性可设置以下值之一：
none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值
浮动:
box-sizing 属性，以确保框不会由于额外的内边距（填充）而损坏。