书写位置与顺序

内部样式表

在 <title> 标签下方添加 <style> 双标签，在 <style> 标签内书写 CSS 代码

1
2
3
4
5
6
7

<title>网站标题</title>
<style>
    /*选择器{}*/
    {
        css属性
    }
</style>

• 选择器 要美化的目标标签

外部样式表

将 CSS 代码单独放在 CSS 标签中，然后在 HTML 内使用 <link> 单标签引用

1

<link rel = "stylesheet" href = "FilePath">

• FilePath CSS 的文件路径，通常使用绝对路径

行内样式

1
2
3

<p style = "font-size: 30">
    我是正文
</p>

即将 CSS 样式添加在标签内

书写顺序

通常有如下顺序：

1. 盒子模型属性

2. 文字样式

3. 圆角等修饰属性

选择器

标签选择器

以标签们作为选择器，选中同名标签并设置相同的样式。

1
2
3

h1 {
    color: pink;
}

类选择器

通过归类，分组来差异化设置标签的显示效果

我通常称为命名选择器

1
2
3

.pink {
    color: pink;
}

然后在标签内添加 class = "类名" 属性来使该标签使用该选择器

1

<div class = "pink"> 我是粉色的哦 </div>

可以在一个标签上使用多个类选择器，使用空格分开

1

<div class = "avatar color size"> </div>

ID 选择器

和类选择器一样，不过通常 id 选择器适用于配合 JS 使用。但是同一个 id 选择器在一个页面只能使用一次

1
2
3
4

#avatar_114514 {
    wight: 300px;
    height: 300px;
}

然后在标签内添加 id = "id名" 属性来使该标签使用该选择器

1

<div id = "avatar_114514"> </div>

通配符选择器

用于将页面内所有标签设置相同的样式

1
2
3

* {
    color: red;
}

后代选择器

选中父元素里的所有子元素

1
2
3

div span {
    color: red;
}

子代选择器

选中父元素中最近的子元素

1
2
3

div > span {
    color: red;
}

并集选择器

选中多组标签设置相同的样式

1
2
3

div, p, span {
    color: red;
}

交集选择器

选中同时满足多个条件的元素

1
2
3

p.box {
    color: red;
}

选择器之间连写，没有任何符号。如果交集选择器中有标签选择器，标签选择器必须书写在最前面

结构伪类选择器

根据元素的结构关系查找元素

• E.first-child 查找第一个 E 元素

• E.last-child 查找最后一个 E 元素

• E.nth-child(N) 查找第 N 个 E 元素 (首元素为 1)

其中 E 为标签名

1
2
3

li:first-child {
    background-color: pink;
}

上面表示了为第一个 <li> 标签应用特别样式

关于 nth-child (N) 里的 N:

N 为公式，如：

• 2n 为偶数标签，选中所有的偶数次标签

• 2n+1 / 2n-1 为奇数标签，选中所有的奇数次标签

• 5n 以 5 为倍数的标签

• n+5 找到第 5 个以后的标签 (此处的 n 从 0 开始计算)

• -n+5 找到 5 个之前的标签 (此处的 n 从 0 开始计算)

伪类选择器

伪类表示元素状态，选中元素的某个状态设置样式

1
2
3
4
5
6

a:hover {
    color: red;
}
a:link {
    color: pink;
}

• 选择性:link 访问前显示的样式

• 选择性:visited 访问后改变的样式

• 选择性:active 点击时的样式

• 选择性:hover 鼠标悬停状态

如果要给超链接设置以上 4 种状态，需要按照 link > visited > hover > active 的顺序书写，否则可能导致不生效

伪元素选择器

创建虚拟元素 (伪元素)，用来摆放装饰性内容

• E::before 在 E 元素里面的最前面添加一个伪元素

• E::after 在 E 元素里面的最后面添加一个为元素

1. 必须设置 content:"" 属性，用来设置伪元素的内容。如果没有内容，可以留空 (content 为显示文字) 2. 伪元素默认是行内显示模式 3. 伪元素选择器的权重与标签选择器相同

CSS 特性

CSS 继承性

子级标签默认继承父级的文字控制属性

若标签自带属性会优先使用自己的样式，再继承父级样式

CSS 层叠性

• 相同属性 覆盖，后面的 CSS 属性会覆盖前面的 CSS 属性 (优先后者)

• 不同属性 叠加，不同的 CSS 属性都生效

CSS 优先级

当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。通常按照谁优先级高谁生效 (并非按照书写顺序来)

通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important

即：选择器选中的范围越大，优先级就越低

!important

如果是复合选择器，则需要权重累加计算

行内样式 > id 选择器个数 > 类选择器个数 > 标签选择器个数

而 !important 的权重最高，继承权重是最低的

CSS 属性

大小、颜色属性

• color 颜色属性 (针对字体)。可以使用颜色英文关键词 (如 red,green,blue,pink)、RGB 表示法 (r,g,b 表示红绿蓝三原色，取值 0-255)、RGBA 表示法 (r,g,b,a r,g,b 同上，a 表示透明度，取值 0-1)、十六进制表示法 (#RRGGBB, 如 #FD81AC)

• width 宽度，常用单位 px

• height 高度，常用单位 px

1
2
3
4
5

div {
    width: 300px;
    height: 300px;
    color: pink;
}

字体属性

• font-size 字体大小，单位 px (默认 p 标签的大小为 16px)

• font-weight 文字粗细 (正常 400、加粗 700)

• font-style 字体倾斜 (正常:normal、倾斜:italic)

• line-height 行高 (设置多行文本的间距：数字 + px / 数字 + 当前标签 font-size 属性值的倍数；行号垂直居中可以设置属性值为盒子高度的属性值，仅能对单行文字垂直居中)

• font-family 字体族 (可以书写多个字体名，每个字体名用逗号隔开，浏览器会从左到右依次查找字体)

• text-indent 文本首行缩进 (属性值:数字 + px / 数字 + em,em 为当前标签字号大小)

• text-align 对齐方式 (left 默认左对齐 center 居中对齐 right 右对齐)

• text-decoration 修饰线 (none 无，去除默认修饰线效果 line-through 删除线 underline 下划线 overline 顶划线)

1
2
3
4
5
6
7
8
9

p {
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    line-height: 50%;
    font-family: MiSans;
    text-indent: 2em;
    text-align: center;
}

或者使用 font 的复合属性，其格式为:

1

font: 是否倾斜 是否加粗 字号/行高 字体

必须按照顺序书写，其中字号和字体是必须项，否则无法生效

1
2
3

p {
    font: italic 700 30px/2 Misans;
}

背景属性

• background-color 背景色

• background-image 背景图，属性值为 url (path)

• background-repat 背景图平铺方式 (默认为 repeat 平铺；no-repeat 为不平铺，默认在左上角显示；repeat-x X 水平方向平铺；repeat-y Y 垂直方向平铺)

• background-position 背景图位置 (关键字:left 左侧；right 右侧；center 居中；top 顶部；botton 底部。坐标：数字 + px, 正负取值均可，0 0 表示左上角)(关键字取值方式写法，可以颠倒取值顺序
  可以只写一个关键字，另一个方向默认为居中，数字只写一个值表示水平方向，垂直方向为居中)

• background-size 背景图缩放 (关键字:cover 等比缩放背景图片以完全覆盖，可能导致背景图有部分看不到；contain 等比例缩放背景图片以将图片完全装入背景区，可能导致背景区域部分空白。百分比：根据盒子尺寸计算图片大小)

• background-attachment 背景图固定 (属性值:fixed)

1
2
3
4
5
6
7

div {
    background-image: url(./hello.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-attachment: fixed;
}

或者使用 background 的复合属性，其格式为:

1

background: 背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定

使用空格隔开各个属性值，不区分数据

1
2
3

div {
    background: pink url(./hello.png) no-repeat center contain fixed;
}

显示模式与转换

布局网页的时候，根据标签的显示模式来选择合适的标签摆放内容

• 块级元素 独占一行，宽度默认是父级的 100%，添加宽高属性生效 (如 <div>)

• 行内元素 一行共存多个，尺寸由内容撑开，宽高属性不生效 (如 <span>)

• 行内块元素 一行共存多个，默认尺寸由内容撑开，加宽高生效 (如 <img>)

我们可以使用 display 属性将标签的显示模式进行转换

属性值:

• block 块级

• inline 行内

• inline-block 行内块

1
2
3

div {
    display: inline;
}

盒子模式

盒子的内容区域由宽、高、文字、图片的尺寸组成

我们可以设定一个盒子的大小，使用 width (宽度) 和 height (高度) 属性

边框线 - border

1

border: 粗细(px) 线条样式 颜色

• 粗细 边框线的粗细，单位 px

• 线条样式 solid: 实线 dashed: 虚线 dotted: 点线

• 颜色 十六进制 / RGBA 格式

这三属性值不区分顺序

1

border: 1px solid black;

也可以对单独某一方向设置边框线

• border-top 上方向

• border-right 右方向

• border-bottom 底方向

• border-left 左方向

1
2
3
4

border-top: 1px solid black;
border-right: 2px dashed red;
border-bottom: 5px dotted green;
border-left: 10px solid pink;

内边距 - padding

向 4 个方向添加内边距 (单位 px)，会出现在内容与盒子边缘之间，且默认会撑大盒子

和 border 一样，也可以单独设置某一方向的内边距

• padding-top 上方向

• padding-right 右方向

• padding-bottom 底方向

• padding-left 左方向

不过 padding 可以设置多个值

外边距 - margin

向 4 个方向添加外边距 (单位 px)，会出现在盒子边缘，且默认会撑大盒子

和 border 一样，也可以单独设置某一方向的内边距

• margin-top 上方向

• margin-right 右方向

• margin-bottom 底方向

• margin-left 左方向

margin 也可以设置多个值

常用 版心居中: margin: 0 auto; 盒子要有宽度才可以设置版心居中

盒子尺寸

盒子的最终尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

由于部分属性值可能会撑大盒子，这可能并不是我们想要的尺寸，因此有如下解决方式：

1. 手动计算解决

2. 内减模式：添加 box-sizing: border-box; 属性

内容溢出 - overflow

控制溢出元素内容的显示方式

1

overflow: hidden;

属性值:

• hidden 隐藏溢出的内容

• scroll 添加一个滚动条来控制溢出内容 (无论是否溢出，都会显示显示滚动条)

• auto 超出后添加滚动条

外边距合并现象

垂直排列的兄弟元素，上下 margin 会合并 (结果取 margin 中的较大值生效)

1
2
3
4
5
6
7

.one {
    margin-bottom: 50px;
}

.two {
    margin-top: 20px;
}

如上面的代码所示，生效的是 50px

外边距塌陷问题

父子级关系标签，子级添加上外边距会产生塌陷问题，会导致父级一起向下移动

解决方式:

1. 取消子级 margin，仅父级设置 padding

2. 父级设置 overflow: hidden;

3. 父级设置 border-top 属性

圆角 - border-radius 不是援交

设置元素的外边框为圆角

1

border-radius: 25%;

属性值:

• 数字 + px

• 百分比

属性值可以写 4 个，从左上角顺时针依次赋值。没有取值的角与对角的取值相同

1

border-radius: 25% 30% 10% 20%;

全圆: 设置为 50%，而该属性的属性值最高也是 50%;

胶囊形状: 将长方形盒子设置圆角属性值为盒子高度的一半

阴影 box-shadow

给元素设置阴影效果

1

box-shadow: 3px 2px 30px 50px 20px pink;

属性值从左到右依次为:

• x 轴偏移量 (必须)

• y 轴偏移量 (必须)

• 模糊半径

• 扩散半径

• 颜色

• 内外阴影 默认外阴影，内阴影需添加 inset

浮动 - float

让块元素水平排列

属性值:

• left 在屏幕上左对齐

• right 在屏幕上右对齐

特点: 顶对齐，具备行内块显示模式的特点

清除浮动

浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度，就可能导致页面布局错乱。因此需要清除浮动来解决

1. 额外标签法 在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both;

2. 单伪元素法 添加一个伪元素清除浮动:

1
2
3
4
5

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

3. 双伪元素法 (推荐) 添加两个伪元素清除浮动:

1
2
3
4
5
6
7
8

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

4. overflow 在父元素添加 CSS 属性: overflow: hidden;

垂直对齐方式 - vertical-align

基线，默认文字和图片都按基线对齐

在这一行谁占的高度最大，就给谁加

属性值:

• baseline 基线对齐 (默认)

• top 顶部对齐

• middle 居中对齐

• bottom 底部对齐

过渡属性 - transition

可以为一个元素在不同状态之间切换的时候添加过渡效果

transition 只能设置给元素本身

属性值:

• 要展示过渡的属性

• 过渡动画显示时间

1
2
3
4
5

img {
    width: 200px;
    height: 200px;
    transition: all 1s;
}

透明度 - opacity

设置整个元素的透明度（包含背景和内容）

属性值: 0-1 (0 时不透明度为 0%，1 时不透明度为 100%)

光标类型 - cursor

鼠标悬停在元素上时指针显示样式

属性值:

• default 通常为箭头 (默认)

• pointer 小手，提示用户可以点击

• text 工字型，提示用户可以选择文字

• move 十字光标，提示用户可以移动

flex

flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的控件分布和对齐能力

且 flex 模型不会产生浮动布局中脱标现象

flex 组成

如果给父元素设置 display: flex

那其子元素就可以自动挤压或拉伸

组成部分:

弹性容器 (父级)

弹性盒子 (子级 默认沿着主轴方向排列)

主轴: 默认在水平方向

侧轴 / 交叉轴: 默认在垂直方向

flex 布局

主轴对齐方式 justfy-content

属性值:

• flex-start 默认值，弹性盒子从起点开始依次排列

• flex-end 弹性盒子从终点开始依次排列

• space-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间

• space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧

• space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

侧轴对齐方式 align-items (父级) /align-self (子级)

属性值:

• stretch 弹性盒子沿着侧轴线被拉伸至铺满容器 (弹性盒子没有设置侧轴方向尺寸则默认拉伸，且弹性盒子在侧轴方向没有尺寸才能拉伸)

• center 弹性盒子沿侧轴居中排列

• flex-start 弹性盒子从起点开始依次排列

• flex-end 弹性盒子从终点开始依次排列

修改主轴方向 (侧轴自动变换到水平方向)

属性值:

• row 水平方向，从左向右 (默认)

• column 垂直方向，从上向下 (常用)

• row-reverse 水平反向，从右向左

• column-reverse 垂直反向，从下向上

弹性盒子换行 flex-wrap

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示

属性值:

• wrap 换行

• nowrap 不换行（默认）

行对齐方式 align-content

该属性值对单行的弹性盒子不生效

属性值:

• flex-start 默认值，弹性盒子从起点开始依次排列

• flex-end 弹性盒子从终点开始依次排列

• center 弹性盒子沿主轴居中排列

• space-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间

• space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧

• space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

定位

灵活的改变盒子在网页中的位置

步骤：

1. 设置定位模式 添加 position 属性值

2. 设置边偏移 设置盒子的位置 (方向的英文单词为属性值)

1
2

position: relative;
top: 100px;

相对定位

改变位置的参照物是自己原来的位置，且不脱标，不占位；标签显示模式不会被改变

1

position: relative;

绝对定位

1

position: absolute;

特点:

1. 脱标不占位

2. 参照物：先找最近的已经定位的祖先元素，如果祖先元素都没有定位，那么将会参照浏览器可视区域改变位置

3. 显示模式特点改变：宽高生效 (具备行内块的特点)

常见用法: 子级绝对定位，父级相对定位 (否则会跑去参照浏览器窗口定位)

定位居中

实现步骤:

1. 绝对定位

2. 水平、垂直边偏移为 50%

3. 子级向左和向上移动自身尺寸的一半

1
2
3
4

position: absolute;
left: 50%;
top: 50%;
transfrom: translate(-50%, -50%);

固定定位

1

position: fixed;

特点:

1. 脱标，不占位

2. 参照物：浏览器窗口

3. 显示模式会被改变为行内块特点

堆叠层级 z-index

默认按照标签书写顺序，后来者居上

而 z-index 就是设置定位元素的层级顺序，改变定位元素的显示顺序

• int 形数 默认为 0，取值越大越靠上

CSS 精灵图

即将一堆贴图放在一个图片文件上

实现步骤:

1. 创建盒子，盒子尺寸与小图 (贴图) 尺寸相同

2. 设置盒子背景图为精灵图

3. 添加 background-position 属性，改变背景图位置 (使用软件测量小图片左上角坐标；将坐标取负数为 background-position 属性值 (向左上移动图片位置))

字体图标

实现步骤:

1. 引入字体样式表 (比如:iconfont.css)

2. 标签使用字体图标类名

1
2
3
4
5
6

<head>
    <link rel = "stylesheet" href = "./iconfont/iconfont.css">
</head>
<body>
    <span class = "iconfont icon-xxx"></span>
</body>

如果调整字体大小，注意选择器的优先级，要高于 iconfont 类

平面转换

为元素添加动态效果，一般与过渡配合使用。改变盒子在平面内的形态 (如位移，旋转，缩放，倾斜)

平移 - translate

属性值: transform: translate(x轴移动距离, y轴移动距离);

取值:

• 像素单位数值 (如 50px)

• 百分比 (-50%) 参照盒子大小作为计算

translate() 可以只写一个值，表示仅沿着 X 轴移动

也可以单独设置

• X 轴 translateX()
• Y 轴 translateY()

平移实现居中效果: transform: translate(-50%, -50%);

旋转 - rotate

属性值: transform: rotate(旋转角度);

取值单位: deg (值为正，表示顺时针旋转；若值为负，表示逆时针旋转)

改变转换原点

默认情况下，转换原点为盒子中心点。若要修改:

1

transform-origin: 水平原点位置 垂直原点位置;

取值:

• 方位名词 (left top right bottom center)

• 像素单位数值

• 百分比

多重转换

必须先平移后旋转

1

transform: translate() rotate();

因为旋转会改变坐标轴向

多重转换一第一种转换形态的坐标轴为准

必须写复合属性，如果拆开写，由于 transform 有层叠性，只实现最下面的效果

缩放 - scale

可通过修改宽高尺寸的方式来实现缩放，但是是从左上角开始缩放

属性值: transform: scale(缩放倍数);

缩放倍数可分开设置 X 和 Y 轴

1

transform: scale(0.5);

取值大于 1 表示放大，小于 1 表示缩小

倾斜 - skew

属性值: transform: skew(角度度数);

角度度数单位 deg

线性渐变 - linear-gradient

属性: backgroud-image: linear-gradient();

属性值:

1

backgroud-image: linear-gradient(渐变方向, 颜色1 终点位置, 颜色2 终点位置);

• 渐变方向 (可选) to + 方位名词 ( to right ) / 角度度数 (单位 deg)

• 终点位置 (可选) 百分比

• 颜色 颜色名称 / 十六进制 / RGBA

属性值之间用逗号隔开，最后一个值不需要加逗号

1

backgroud-image: linear-gradient(to right, pink 30%, white 70%);

径向渐变 - radial-gradient

属性: backgroud-image: radial-gradient();

属性值:

1

backgroud-image: radial-gradient(半径 at 圆心位置, 颜色1 终点位置, 颜色2 终点位置);

• 半径 可以是两条 (为椭圆)

• 圆心位置 像素单位 / 百分比 / 方位名词

• 终点位置 (可选) 百分比

• 颜色 颜色名称 / 十六进制 / RGBA

空间转换

空间转换也叫 3D 转换

属性: transform

平移 - translate3d

1

transform: translate3d(x, y, z);

x y z 3 个值必须全写才能生效，由于电脑是 2D 平面因此无法观察 Z 轴平移效果

也可以单独设置某个轴

1
2
3

transform: translateX();
transform: translateY();
transform: translateZ();

**属性值:**像素单位 / 百分比 (正负均可)

视距 - perspective

指定观察者与 Z=0 平面的距离，为元素添加透视效果

1

transform: perspective(1000);

属性值:建议设定为 800-1200

该属性需添加至父级

旋转 - rotate

1
2
3

transform: rotateX();
transform: rotateY();
transform: rotateZ();

属性值: 角度 (deg)

3D 旋转 - rotate3d

1

rotate3d(x, y, z, 角度度数);

属性值:

• x,y,z 取值为 0-1

• 角度度数 单位 deg

立体呈现 - transform-style

设置元素的子元素是位于 3D 空间中还是平面中

属性值:

• flat 子级处于平面中

• preserve-3d 子级处于 3D 空间

1

transform-style: preserve-3d;

该属性添加给父级

缩放 - scale3d

可通过修改宽高尺寸的方式来实现缩放，但是是从左上角开始缩放

属性值: transform: scale3d(x, y, z);

缩放倍数可分开设置 X、Y 轴和 Z 轴

1
2
3
4
5

transform: scale3d();

transform: scaleX();
transform: scaleY();
transform: scaleZ();

取值大于 1 表示放大，小于 1 表示缩小

动画

定义动画

格式 1:

1
2
3
4

@keyframes Animation_name{
    form{}
    to{}
}

格式 2:

1
2
3
4
5
6

@keyframes Animation_name{
    0%{}
    10%{}
        ....
    100%{}
}

• Animation_name 为动画名称，可自定义

使用动画 - animation

1

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

也可使用拆分写法:

• animation-name (必须) 动画名称

• animation-duration (必须) 动画时长

• animation-delay 延迟时间

• animation-fill-mode 动画执行完毕时的状态 ( forwards 最后一帧状态； backwards 第一帧状态)

• animation-timing-function 速度曲线 ( steps(数字) 数字为多少步)

• animation-iteration-count 重复次数 (值为数字或者 infinite 重复播放)

• animation-direction 动画执行方向 ( alternate 为反向)

• animation-play-state 暂停动画 ( paused 为暂停，通常配合 :hover 使用)

逐帧动画

1. 备显示区域 盒子尺寸与一张精灵图的小尺寸相同

2. 定义动画 移动背景图 (移动距离 = 精灵图宽度)

3. 使用动画 steps(N) N 为精灵小图的个数相同

多组动画

1

animation: 动画1,动画2,动画n;

若开始动画的代码和默认样式的代码一样，可以省略

1

animation: run 1s steps(12) infinite, move 3s linear forwards;