CSS总结
一、CSS简介
1.什么是CSS？
CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，是一种用来表现HTML或XML等文件式样的计算机语言，是一种标准的样式表语言，用于描述网页的表示，即布局和格式。
2.为什么使用CSS？
CSS允许您针对HTML元素应用特定的样式。
CSS的主要好处在于，它允许你将样式与页面内容进行分离。
仅使用HTML，样式将和页面内容格式混杂在一起，这样的页面将会变得难以维护。
所有的web页面样式都可以（也应该）从HTML文档中分离出来，建立成一个单独的CSS文件再进行引用。
3.CSS作用
页面外观美化
布局和定位
二、基本用法
1.CSS语法
<head>
<style type="text/css">
选择器{
样式名1:样式值1;
样式名2:样式值2;
}
</style>
</head>
选择器：要修饰的对象(东西)
样式名：修饰对象的每个样式
样式值：样式的取值
注意：多个样式之间以分号隔开，样式名和样式值之间以冒号隔开
2.CSS引用方式
有三种方式：内部样式、行内样式、外部样式
2.1 内部样式
也称为内嵌样式，在页面头部通过style标签定义
对当前页面所有符合样式选择器的标签起作用
2.2 行内样式
也称为嵌入样式，使用HTML标签的style属性来定义
只对设置style属性的标签起作用
注意：几乎所有HTML标签都具有style属性
2.3 外部样式
使用单独的css文件来定义，然后在页面中使用link标签或@import指令来引入
使用link标签链接外部样式表(推荐)
<link rel="stylesheet" type="text/css" href="css文件的路径">
使用@import指令导入外部样式表
<style>
@import url(css文件的路径);
</style>
三、选择器
1.基础选择器
1.1 标签选择器
也称为元素选择器，以HTML标签的名字作为样式应用依据
1.2 类选择器
使用自定义名称，以.作为前缀，然后通过HTML标签的class属性值作为依据
注意事项：
同时调用多个类选择器，以空格隔开
类选择器不能以数字开头
注意：几乎所有的HTML标签具有class属性
1.3 ID选择器
使用自定义名称，以#作为前缀，然后通过HTML标签的id属性进行名称匹配
以标签的id属性值作为样式的应用依据，一对一的关系
注意：几乎所有的HTML标签都具有id属性，且id的值必须唯一
2.复杂选择器
2.1 复合选择器
标签选择器和类选择器、标签选择器和ID选择器，一起使用
必须同时满足两个条件才能应用样式
2.2 组合选择器
也称为集体声明
将多个具有相同样式的选择器放在一起声明，使用逗号隔开
2.3 嵌套选择器
在某个选择器内再设置选择器，通过空格隔开
只有满足层次关系最里层选择器的标签才能应用样式
注意：使用空格不区分父子还是后代，表示的后代，使用>表示的是父子关系才可以
2.4 伪类选择器
根据不同的状态显示不同的样式，一般多用于a标签，即超链接
四种状态：
link ：未访问的链接
visited：已访问过的链接
hover ：鼠标移动到a标签上，即悬浮在链接上
active ：选定的链接，被激活
注意：书写顺序：link–>visited–>hover–>active
2.5 伪元素选择器
first-letter：对应元素内容中的第一个字符
first-line：对应元素内容中的第一行
after：配合content属性使用，在指定元素后面增加内容
before：配合content属性使用，在指定元素前面增加内容
四、选择器的优先级
1.优先级
行内样式>ID选择器>类选择器>标签选择器
原因：首先加载标签选择器，再加载类选择器，然后再加载ID选择器，最后加载行内样式
后加载的样式会覆盖最先加载的同名样式
2.内、外部样式加载顺序
就近原则
原因：按照书写顺序，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离得越近越优先
3.!important
可以使用!important使某个样式属性具有最高的优先级
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通