CSS 定义

层叠样式表(Casading Style Sheets), 又叫级联样式表, 简称 样式表 .
用来描述 HTML 文档的呈现方式,用于美化内容.

CSS 的基本结构由选择器、属性和属性值组成：

选择器 {
  属性 : 值;
}

选择器：指定要应用样式的 HTML 元素，比如标签、类名、ID 等。
属性：指定要设置的样式类型，如color、font-size、margin等。
属性值：为属性指定具体的值，如red、16px、10px等。

键值对: 属性名和属性值成对出现, 选择器中就包含一个或多个键值对.

CSS 的引入方式

想要在 HTML 中应用 CSS, 有以下三种引入方式:

内部样式

在 title 标签下方添加 Style 双标签 ,能书写 CSS 代码.

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
    <style>
        /* 在这里编写CSS代码 */
    </style>
</head>
<body>
    网页内容
</body>
</html>

能让样式作用于当前页面的指定的标签上.
（可以写在页面任何位置, 但通常约定写在 head 标签中）

外部样式

将 CSS 代码写在单独的 CSS 文件中(.css)
再在 HTML 中, 使用 link 标签 引入

<link rel="(关系:样式表)stylesheet" href="./my.css">

html 和 css 实现了完全的分离, 常用.

行内样式

需配合 JavaScript 使用, 写在标签的 style 属性 值里.

<div style="color:red; font-size:20px;">这是div标签</div>

缺点: 会出现大量的代码冗余, 不方便后期的维护, 所以通常只会配合 JS 使用.

CSS 选择器

能查找并选择标签, 实现设置样式的目的.
根据业务场景不同, 选择的标签的需求也是多种多样的, 所以选择器有很多种.

基础选择器

通配符选择器

能选中页面所有标签,设置相同样式.

<style>
* {
    color:red;
}
</style>

在网页初期使用, 清除网页的默认格式.

/* 重置所有元素的外边距和内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 使元素的总宽度包含内容、内边距和边框 */
}

标签选择器

使用标签名作为选择器, 能选中同名标签, 以设置同一种样式.
缺点: 由于批量选中,无法差异化设置.

/* 设置所有标题（h1）的字体大小和颜色 */
h1 {
  font-size: 24px;
  color: #0055a4;
}

常用的段落首行缩进;

/* 设置段落首行缩进 */
p {
  text-indent: 2em; /* 首行缩进2em */
  line-height: 2; /* 行高2倍 */
}

类选择器

能够差异化选中标签

定义类选择器 –> .类名
使用类选择器 –> 标签添加 class = “类名”

<style>
/* 定义类选择器 */
.color{
    color:red;
}

.size{
    font-size: 50px;
}
</style>

<!-- 使用类选择器 -->
<!-- 一个类能给多个标签使用 -->
<div class="color">这是div标签1</div>
<!-- 用空格隔开多个类名 -->
<div class="color size">这是div标签2</div>

ID 选择器

能够差异化选中标签.
一般配合 JavaScript 使用

定义 id 选择器 –> #id 名
使用 id 选择器 –> 标签添加 id=”id”

<style>
    /* 定义id选择器 */
    #red{
        color:red;
    }
</style>

<!-- 使用id选择器 -->
<div id="red">这是 div 标签</div>

ID 是唯一的
ID 不能以数字开头

复合选择器

其实都是基础选择器的组合,本质也是选择器.
能更精确地选中标签.

后代选择器

父选择器子选择器 {CSS 属性}

(用空格隔开)

子代选择器

父选择器 > 子选择器 {CSS 属性}

只选中最近的子级

并集选择器

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

选择器 1, 选择器 2,…,选择器 N { CSS 属性 }

用逗号隔开

交集选择器

选中存在 多个特点 的标签

选择器 1 选择器 2 { CSS 属性 }

连着写, 不隔开.

伪类选择器

能选中元素的状态来设置样式( 例如要设置鼠标悬停的样式 ).

选择器:hover {CSS 属性}

伪类-超链接的状态

最常用的伪类就是选择超链接的状态,
超链接有四种状态:

选择器	作用
`:link`	访问前
`:visited`	访问后
`:hover`	鼠标悬停
`:active`	点击时

进阶选择器

结构伪类选择器

选择器	说明
E:first-child	查找第一个 E 元素
E:last-child	查找最后一个 E 元素
E:nth-child(N)	查找第 N 个 E 元素(第一个元素 N=1)

N 支持数学运算.
例如: 2N, 选中偶数标签

伪元素选择器

能创建虚拟元素(伪元素), 一般用来摆放装饰性内容.

选择器	说明
E::before	在 E 元素里面最前面添加一个伪元素
E::after	在 E 元素里面最后面添加一个伪元素

注意:

必须设置content:" "属性, 用来设置伪元素的内容.
默认为行内显示
权重和标签选择器相同

CSS 特性

CSS 能化简代码/定位问题,并解决问题

继承性

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

例如,我们可以选择 body 标签,设置文字效果.

层叠性

相同的属性会覆盖
不同的属性会叠加

优先级

优先级也称为 “权重”
当一个标签使用了多种选择器时, 会基于不同种类的选择器的匹配规则

优先级从高到低: !important > 行内样式 (1000) > ID 选择器 (100) > 类选择器 (10) > 标签选择器 (1) > 通配符

总的来说范围大的优先级越低.

!important 写在 css 大括号内, 能提高权重, 谨慎使用.

标签的显示模式

布局页面的时候, 根据需求选择合适的标签显示模式摆放内容.

块级元素(block)
独占一行, 宽度默认与父级元素相等.
宽高属性生效.
行内元素(inline)
一行共存多个, 宽度默认尺寸由内容撑开.
宽高属性不生效.
行内块元素(inline-block)
一行共存多个, 宽度默认尺寸由内容撑开.
宽高属性生效.

转换显示模式

属性名: display

属性值	效果
block	块级
inline-block	行内块
inline	行内

CSS 属性

前端尺寸

像素 `px`

像素是屏幕上的一个点, 是计算机显示系统的基本单位. 在前端开发中, px 代表的是相对于显示器屏幕分辨率的绝对单位.

像素值不会随着视口大小或缩放级别变化, 保持固定不变.
适用于通常用于需要精确布局的场合, 如图形设计, 图标大小等.

相对长度单位 `em`

em 是一个相对长度单位, 其大小相对于当前元素的字体尺寸. 如果当前元素没有设置字体大小, 则相对于父元素的字体大小.

em 单位的尺寸会根据其参考元素的字体大小变化而变化, 具有一定的灵活性.
适合需要根据字体大小动态调整布局的场合，如响应式设计中的文本缩放.

根元素相对长度 `rem`

rem 是 CSS3 新增的单位, 与 em 类似, 但它是相对于根元素 (html) 的字体大小来计算的.

rem 单位使得整个页面的尺寸调整更加一致和方便, 但不支持的浏览器需要特定的回退策略.
在需要整体控制字体大小和布局比例时非常有用, 特别是当想要统一调整整个页面的尺寸时.

回退策略:
提供备选的尺寸单位(通常是 px), 使得页面布局和样式能够降级到一个可接受的状态.

视口单位 `vw`/`vh`

vw 和 vh 是基于视口的单位，分别代表视口宽度和高度的百分比. 1vw 等于视口宽度的 1%, 1vh 等于视口高度的 1%.

vw 和 vh 单位使得元素能够随着视口大小的变化而伸缩, 非常适合创建全屏或者响应式布局.
适用于需要根据视口大小动态调整元素尺寸的响应式设计.

视口最小/最大单位 `vmin`/`vmax`

vmin 是 vw 和 vh 中较小的一个, vmax 是较大的一个.
这两个单位用于在不同方向上保持元素尺寸的一致性.

vmin/vmax 单位有助于在横屏和竖屏模式下保持元素的相对大小一致.
在移动设备上, 当屏幕方向改变时, 使用 vmin/vmax 可以确保元素的尺寸适应不同方向.

百分比 `%`

百分比单位表示相对于父元素的尺寸.例如, 宽度设置为 50%的元素将会占据其父元素宽度的一半.

百分比单位提供了一种简单的方式来创建相对于父元素尺寸的布局.
适用于需要根据父元素尺寸来确定自身尺寸的布局.

border 不支持的百分比设置.

文字属性

文本颜色 `color`

规定文本的颜色, 值支持:

颜色的英文单词
rgba(r,g,b,a) rgb 三原色, 取值为 0~255 a 是透明度
#RRGGBB 三原色的值并一起,但是十六进制

字体大小 `font-size`

设置文字尺寸,PC 端网页常用单位为 px.
默认大小一般是 16px.

chrome 浏览器接受最小字体是 12px

字体粗细 `font-weight`

设置文本的粗细

值	描述
`bold`	粗体
`bolder`	比粗题还粗体
`lighter`	细体
`100`~`900`	`400`-normal(正常), `700`-bold(加粗)

字体倾斜 `font-style`

一般用来清除字体的默认倾斜.

值	描述
`normal`	不倾斜
`italic`	倾斜

字体样式 `font-family`

设置字体样式.
属性值填写字体名称即可,多个字体逗号隔开. 如果字体名称包含空格，它必须加上引号.

font-family属性最后设置一个字体族名. sans-serif是无衬线字体.

字体复合属性 `font`

节省代码量,能集合字体的其他属性调整.

font: 是否倾斜 是否加粗 字号/行高 字体 (按顺序书写)

文本属性

文本对齐方式 `text-align`

指定元素文本的水平对齐方式.

属性值	效果
left	文本居左(默认值)
right	文本居右
center	文本居中

文本修饰线 `text-decoration`

属性值	效果
none	无
underline	下划线
line-through	删除线
overline	上划线

控制文本大小写 `text-transform`

属性值	效果
captialize	定义每个单词开头大写
uppercase	全部字母大写
lowercase	全部字母小写

文本缩进 `text-indent`

设置文本块中首行文本的缩进.

负值是允许的. 如果值是负数，将第一行左缩进

行高 `line-height`

设置多行文本的间距
数字 px(以 px 为单位设置行高).
数字(以当前的 px 为基准,倍数设置行高).

垂直居中技巧: 行高属性值等于盒子高度属性值

背景图属性

使用背景图实现装饰效果.
属性名: background-image (bgi)
属性值: url (背景图片 URL)

常用的几个属性:

描述	属性
背景色	`background-color`
背景图	`background-image`
背景图位置	`background-position`
背景图缩放	`background-size`
背景图固定	`background-attachment`
背景图复合属性	`background`

背景色 `background-color`

简单粗暴设置背景颜色.

背景图 `background-image`

默认情况下 background-image 属性放置在元素的左上角,

如果图像不够大的话会在垂直和水平方向平铺图像,
如果图像大小超过元素大小从图像的左上角显示元素大小的那部分.

背景图平铺方式 `background-repeat`

设置如何平铺背景图像.

属性值	效果
repeat	平铺 (默认效果)
no-repeat	不平铺
repeat-x	水平方向平铺
reapeat-y	竖直方向平铺

背景图缩放 `background-size`

设置背景图像的大小.

属性值	效果
length	设置宽高, 第一个值为宽, 第二个值为高. 如果只设置其中一个, 另一个值会自动 auto.
percentage	计算相对位置区域的百分比, 第一个值为宽, 第二个值为高. 同样设置一个, 另一个 auto.
cover	保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain	保持图片纵横比并将图像缩放成适合背景定位区域的最大大小

背景图位置 `background-position`

设置背景图像的起始位置, 其默认值是: 0% 0% (左上角)

属性值	效果
x% y%	第一个值是水平位置, 第二个值是垂直位置. 左上角是 0% 0%, 右下角是 100% 100%. 如果只指定了一个值, 其他值默认是 50%.
xpos ypos	单位是像素.
方位词组合	例如: 左上角-left top 中下-center bottom

表格属性

使用 border 属性指定表格边框

table, td {
    border: 1px solid black;
}

折叠边框 `border-collapse`

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

光标类型更改

设置鼠标悬停在元素上的样式

属性名: cursor

属性值	效果
pointer	小手效果
text	文字输入效果
move	十字光标效果
default	默认效果

CSS 盒子模型

基本盒子模型的组成

内容区域 - width & heigth: 盒子的内容，显示文本和图像
内边距 - padding: 内容周围的区域
边框线 - boder: 围绕在内边距和内容外的边框
外边距 -margin: 边框外的区域

盒子的大小, 其实就包括三个部分: border、padding、content, 而 margin (外边距)是不包括在盒子之内的。

关于尺寸的计算

默认情况

盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸 + margin 尺寸

內减模式(box-sizing:border-box)

设置为自动减去 border/padding 的尺寸

盒子尺寸 = 内容尺寸 - border 尺寸 - 内边距尺寸 + margin 尺寸

行内元素

行内元素添加内外边距, 无法改变元素的垂直位置

解决方法:
添加 line-height 改变垂直位置

边框线

属性名: border - (设置方位名词可单独控制)
属性值: 边框线粗细线条样式颜色(不区分顺序)

常用线条样式:

属性值	线条样式
`solid`	实线
`dashed`	虚线
`dotted`	点线

使用属性: border-radius 添加圆角.

正圆
给正方形盒子设置属性值为宽高的一半/50%.
胶囊形状
给长方形盒子设置圆角属性为盒子高度的一半.

内边距

属性名:padding / padding-方位名词

padding 多值写法

padding: 上右下左 (空格隔开,从上方顺时针应用)
padding: 上左右下
padding: 上下左右
padding: 四个方向相同值

外边距

同 padding, 作用拉开两个盒子之间的距离.

在外边距两边设置 auto, 能使版心居中.

外边距合并现象

若两兄弟元素垂直排列, 上下的 margin 会合并, 取最大值.

外边距塌陷问题

父子级标签中, 若在子级添加上外边距, 会导致父级一起向下移动.

解决方法:

取消子级 margin, 父级设置 padding
父级设置 overflow: hidden
父级设置 border-top

清除默认样式

清除默认边距
margin: 0;
padding: 0;
box-sizing: border-box;(内减模式)
去掉列表的项目符号
list-style: none;

弹性盒子模型 (flex)

flex 布局也叫弹性布局, 是 CSS3 的一种新的布局模式. 相比浮动, felx 更简单灵活.

给父元素设置 dispaly: felx , 子元素可以自动挤压或拉伸.

属性	说明	取值	含义
display	模式	flex	使用flex布局
flex-direction	设置主轴	row	主轴方向为x轴，水平向右（默认）
flex-direction	设置主轴	column	主轴方向为y轴，垂直向下
justify-content	子元素在主轴上的对齐方式	flex-start	从头开始排列
		flex-end	从尾部开始排列
		center	在主轴居中对齐
		space-around	平分剩余空间
		space-between	先两边贴边，再平分剩余空间

修改主轴方向

属性名: flex-direction

属性值	效果
column	垂直方向, 从上到下
row	水平方向, 从左向右(默认)
row-reverse	水平方向, 从右向左
column-reverse	垂直方向, 从下向上

主轴对齐方式

属性名: justify-content

属性值	效果
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在盒子之间.
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在盒子两侧.
space-evenly	弹性盒子沿主轴均匀排列, 盒子与容器之间间距相等.
felx-start	默认值, 弹性盒子从主轴起点依次排起.
felx-end	弹性盒子从主轴终点依次排起.

标准流和浮动

标准流

标准流也称文档流, 是标签在页面中默认的排布规则.

标准流里面的限制非常多, 导致很多页面效果无法实现.
例如:

高矮不齐，底边对齐
空白折叠现象

脱离标准流

浮动
绝对固定
固定位置

浮动(float)

浮动能让块元素水平排列, 具备行内块的特点.

浮动后元素会顶对齐, 并脱离标准流控制. 如果父级元素未设置高度, 脱离后会对网页布局造成影响.

没有上下浮动.

当所有元素同时浮动的时候, 会变成水平摆放, 向左或者向右.
当容器不足以横向摆放内容时候, 会在下一行摆放.

关于清除浮动带来的影响:

更详细更清晰地理解, 当然是实践啦.
很有必要的参考视频:
尚学堂-WEB 前端

当元素设置 float 浮动后, 该元素就会脱离文档流并向左/向右浮动.
会造成:

浮动元素会造成父元素高度塌陷
后续元素会受到影响

解决方法有很多种:

父元素设置高度

可以给父元素设置高度, 撑开元素本身大小.

受影响的元素增加 clear 属性

在父元素类的最后添加一个块级元素, 将其 css 属性设置为 clear: both;

overflow 清除浮动

在父级元素标签添加 overflow:hidden;, 同时增加 clear: both;

感觉不如用 flex.

定位

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

第一步: 启用定位模式 position
第二步: 用边偏移设置盒子位置

属性值	效果
relative	相对定位(一般设置给子级)
absolute	绝对定位(一般设置给父级)
fixed	固定定位(不随网页滚动)

绝对定位和固定定位会脱离文档流.

定位居中

设置绝对定位, 并把水平, 垂直边偏移为 50%.
然后将子级向左上移动自身尺寸的一半(margin|transform).

用平移属性更简洁方便:
transform: translate(-50%, -50%)

堆叠层级 z-index

设置定位元素的层级顺序, 改变定位元素的显示顺序.

默认效果按照标签书写顺序, 后写居上.
z-index 取值是整数, 默认为 0. 取值越大越靠上.

元素溢出解决方法

属性名: overflow

属性值	效果
hidden	溢出部分隐藏
scroll	显示滚动条
auto	溢出时才显示滚动条

盒子阴影(拓展)

属性名: box-shadow
属性值: X 轴偏移 Y 轴偏移模糊半径扩散半径颜色内外阴影

默认为外阴影, 内阴影需要添加 inset

box-shadow: h-shadow v-shadow blur color;

属性值	效果
h-shadow	水平阴影的位置
v-shadow	垂直阴影的位置
blur	模糊距离
color	阴影的颜色

CSS Sprites

CSS 精灵, 是一种网页图片应用处理方式. 把网页中的一些背景图片整合到一张图片文件, 再用background-position 精确定位出图片的位置.
能减少服务器被请求的次数, 从而减轻服务器压力, 提高访问速度.

实现步骤:
第一步: 创建盒子, 盒子尺寸与小图尺寸相同.
第二步: 设置盒子背景图 background-image 为精灵图
第三步: 添加 background-position 属性, 改变背景图位置.

CSS 动画

过渡效果

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

transation : 过度属性花费时间(s)

平面转换效果

transform 一般配合过渡效果使用. 能改变盒子在平面内的形态.

属性值	效果
translate (X 轴距离,Y 轴距离)	位移效果 (百分比取值参照自身取值)
rotate (旋转角度 $deg$)	旋转效果
scale(缩放倍数) scale(X 缩放倍数,Y 缩放倍数)	缩放效果, 取值大于 1 为放大, 反之缩小
skew (倾斜角度 $deg$)	倾斜效果

改变转换原点

默认情况下, 转换原点是盒子中心点.

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

取值:

方位名词(left, top, right, bottom, center)
像素单位数值
百分比

渐变

渐变是多个颜色逐渐变化的效果, 一般用于设置盒子背景.

线性渐变

background-image: linear-gradient(
    渐变方向(to 方位名词/角度度数 deg),
    颜色1 终点位置(百分比),
    颜色2 终点位置,
    ......
);

径向渐变

background-image: radial-gradient(
    半径 at 圆心位置(像素单位数值/百分比/方位名词),
    (半径两条为椭圆),
    颜色1 终点位置,
    颜色2 终点位置,
    ......
);

透明度效果

设置整个元素的透明度 (包含背景和内容).

属性名: opacity
属性值: 0(不透明) - 1(元素不可见)

动画效果

从坐标轴角度定义了 X, Y 和 Z 三条坐标轴构成了一个立体空间,
Z 轴方向与视线方向相反.x 轴方向向右,y 轴向下.

形式上讲, 动画效果就是加强版的 transation 过度属性.

视距属性

perspective

指定了观察者与 z=0 平面的距离, 为元素添加透视效果.
属性添加给父级, 取值范围 800-1200.

空间转换

transform
能改变盒子在空间内的形态.

属性值	效果
translate3d (X 轴距离,Y 轴距离,Z 轴距离) translate[X/Y/Z]	位移效果 (百分比取值参照自身取值) 小括号三个数据必须一个不差, 否则不生效.
rotate (旋转角度 $deg$) rotate[X/Y/Z]	旋转效果
scale(缩放倍数) scale(X 缩放倍数,Y 缩放倍数,Z 轴距离) scale[X/Y/Z]	缩放效果, 取值大于 1 为放大, 反之缩小
skew (倾斜角度 $deg$)	倾斜效果

动画

animation

动画能实现多个状态间的变化过程, 动画过程可控(重复, 最终画面, 是否暂停)

`@keyframes` 创建动画

@keyframes 动画的名称 {
 from|0%{
 css样式
    }
 多个百分比值{
 css样式
    }
 to|100%{
 css样式
    }
 }

animation 执行动画

animation: 动画名称 持续时间 动画速率 开始延迟 循环次数(infinite-无限循环) 播放方向 播放状态( running-播放 | paused-暂停 );

动画速率可选值	描述
ease	逐渐变慢(默认)
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速

播放方向可选值 | 描述
normal|向前播放(默认)
alternate|动画播放在第偶数次向前播放, 第奇数次向反方向播放

立体呈现

transform-style
设置元素的子元素是位于 3D 空间还是平面.

属性值	效果
flat	子级处于平面中
preserve-3d	子级处于 3D 空间

父元素添加 transform-style: preserve-3d
子级定位
调整盒子的位置(位移或选择)

不同设备自适应

设置 meta 标签

使用设备的宽度作为视图宽度并禁止初始的缩放.
在 <head> 标签里加入这个 meta 标签:

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

width = device-width 宽度等于当前设备的宽度
initial-scale 初始的缩放比例（默认设置为 1.0）
maximum-scale 允许用户缩放到的最大比例（默认设置为 1.0）
user-scalable 用户是否可以手动缩放（默认设置为 no）

例如, 要设置不同尺寸设备下网页样式:

@media screen and (max-width: 768px) {
 /* 设备小于768px加载样式 */
    body{
        background-color: red;
    }
 }

@media screen and (max-width: 992px) and (min-width: 768px) {
 /* 设备小于768px但小于992px加载样式  */
    body{
        background-color: pink;
    }
}
@media screen and (min-width: 992px) {
 /* 设备大于992px加载样式 */
    body{
        background-color: green;
    }
}

渊痕爪记

网页之衣裳-CSS