CSS（总结）

一、@charset "字符编码形式"

作用：在 CSS 文件的最开始处使用这个指令可以告诉浏览器以 UTF-8 编码解释样式表。如果你使用这个指令，重要的是要确保你的 CSS 文件实际上是以 UTF-8 编码保存的

例如：

@charset "UTF-8";

@charset "iso-8859-15";

语法格式：
@charset    "<charset>";

二、盒子模型

display:flex

三、渐变背景设置

渐变背景

四、CSS应用方式

（1）内部样式

（2）行内样式

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

 （3）外部样式

使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入

• 使用 link标签 链接外部样式文件

<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

提示：type属性可以省略

• @import 指令 导入外部样式文件

<style>
    @import "CSS样式文件路径";
    @import url(CSS样式文件路径);
</style>

 

五、选择器

1.基础选择器

（1）标签选择器

（2）类选择器

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

注意事项：

• 调用时不能添加 . 号
• 同时调用多个类选择器时，以 空格 分隔
• 类选择器名称不能以 数字 开头

 （3）ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

以标签的id属性作为样式应用的依据，一对一的关系

 2.复杂选择器

（1）复合选择器

• 标签选择器+类选择器
• 标签选择器+ID选择器
• 

（2）组合选择器

将多个具有相同样式的选择器放在一起声明，使用逗号隔开

（3）嵌套选择器

在某个选择器内部再设置选择器，通过空格隔开

只有满足层次关系最里层的选择器所对应的标签才会应用样式

注意：使用 空格 时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行

 3.伪类选择器

根据不同的状态显示不同的样式，一般多用于标签

四种状态：

• ：link:未访问的链接
• ：visited：已访问的链接
• ：hover：鼠标悬浮在链接上，即移动在链接上
• ：active：选定的链接，被激活

注意：默认为：蓝色 下划线

4.伪元素选择器

• :first-letter 为第一个字符的样式
• :first-line 为第一行添加样式
• :before 在元素内容的最前面添加的内容，需要配合content属性使用
• :after 在元素内容的最后面添加的内容，需要配合content属性使用

5.选择器优先级

行内样式>ID选择器>类选择器>标签选择器

六、常见的CSS属性

 1.字体属性

（1）font-size

取值：

• %百分比，相对父标签字体大小的百分比
• px像素
• em倍数，相对父标签字体大小的倍数

注意：HTML根元素默认字体大小为16px，也称为基础字体大小

（2） font-weight

取值：

• nomal普通（默认）
• bold粗体
• 自定义

 （3）font-family

一般建议写3种字体：首选、其次、备用。以逗号隔开。

（4）font-style

取值：

• normal普通
• italic斜体

（5）font 

简写属性：font:font-style|font-weight|font-size|font-family

2.文本属性

（1） color

取值：

• 颜色名称：使用英文名称

• 16进制的RGB值：#RRGGBB
•  注意：不区分大小写

• rgb函数：rgb(red,green,blue)
• 每种颜色的取值范围：[0,255]

• rgba函数：rgba(red,green,blue,alpha)

可以设置透明度；alpha取值范围：[0,1],0表示完全透明，1表示完全不透明

3.背景属性

（1）background-color

取值：transparent 透明

（2）background-image

• 必须使用url()方式指定图片的路径
• 如果是在css样式文件中使用相对路径，此时是相对于css文件，不是相对html文件

（3）background-repeat

取值： repeat(默认)，repeat-x，repeat-y,no-repeat

（4）background-position

默认背景图显示在左上角

取值：

• 关键字：top、bottom、left、right、center
• 坐标：左上角为(0,0)坐标，向右为x正方向,向下为y正方向

（5）background-attachment

取值：scroll(默认)，fixed固定不动

（6）background

简写属性：

background:background-color|background-image|background-repeat|background-position

以空格隔开，书写顺序没有要求

4.列表属性 

 

（1）list-style-type

取值：none、disc、circle、square、decimal

（2）list-style

简写属性：list-style:list-style-type|list-style-image|list-style-position

书写顺序没有要求

 5.表格属性

border-collapse:表格中相邻的边框是否合并（折叠）为单一边框

取值：separated（默认） collapse

七、盒子模型

 盒子模型是网页布局的基础，将页面所有元素看作一个盒子，盒子都包含以下几个属性

• width 宽度
• height 高度
• border 边框
• padding 内边距
• margin 外边距

盒子模型

（1）border：表示盒子的边框

分四个方向：

• 上top、右right、下bottom、左left
• border-top、border-right、border-bottom、border-left

每个边框包含三种样式：

• border-top-color、border-top-width、border-top-style
• border-right-color、border-right-width、border-right-style
• border-bottom-color、border-bottom-width、border-bottom-style
• border-left-color、border-left-width、border-left-style

 样式style的取值：

solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线

（2）padding：表示盒子的内边距，即内容与边框之间的距离

（3）margin：表示盒子的外边距，即盒子与盒子之间的距离

八、定位方式

通过position属性实现对元素的定位，有四种定位方式

 设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right

1.相对定位

先设置元素的position属性为relative,然后再设置偏移量

3.绝对定位

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量

注意：

一般来说都会将父标签设置为非static定位
如果父标签不是非static定位，则会相对于浏览器窗口进行定位
设置元素为绝对定位后，元素会浮到页面上方

4.固定定位

先设置元素的position属性为fixed，然后再设置偏移量设置元素为固定定位后，元素会浮动在面面上方

5.z-index

设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序

取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)

注意：只能给非static定位的元素设置z-index属性

九、其他CSS属性 

1.浮动

通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，

如果一行显示不下，则会换行显示

常用取值：

• left左浮动
• right右浮动
• none不浮动，默认值

设置float属性后，元素会浮在页面上层，此时父容器无法计算自己尺寸，如果我们还想显示父容器通常会在末尾添加一个清除了float属性的空的div来解决

2.清除属性

通过clear属性来实现清除，设置元素的哪一侧不允许有浮动元素

常用取值：

• left左侧不允许出现浮动元素
• right右侧不允许出现浮动元素
• both两侧不允许出现浮动元素
• none允许两侧出现浮动元素，默值

结论：

对于非浮动元素，两边都可以设置清除（常用）
对于浮动元素，向哪边浮动，就只能设置哪边的清除

3.display

 通过display属性设置元素是否显示，以及是否独占一行

4.visibility

 可以通过visibility属性设置元素的显示和隐藏

5.轮廓属性

轮廓outline,用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素

（1）基本用法

常用属性：

• outline-width:轮廓宽度
• outline-color:轮廓颜色
• outline-style:轮廓样式
• outline简写

6.其他属性

（1）宽高相关

• max-width:设置元素的最大宽度
• max-height:设置元素的最大高度
• min-width设置元素的最小宽度
• min-height设置元素的最小高度

（2）overflow属性

• visible溢出时可见，显示在元素外，默认值
• hidden溢出的部分不可见（常用）
• scroll无论是否出现溢出始终出现滚动条
• auto溢出时自动出现滚动条

（3）cursor属性

• default默认光标，一般为箭头
• pointer手形，光标移动超链接上时一般显示为手形
• move表示可移动
• text表示文 本
• wait表示程序正忙，需要等待
• hep表示帮助