CSS基础
1.css的介绍，什么是css
CSS是Cascading Style Sheets的英文缩写,中文翻译即层叠样式表。
css是用于页面布局与美化的，css实现内容与样式分开，这种方式便捷我们的开发。
2.css语法
css是由选择器，属性，属性值组成的 。css有三种引入方式分别是：
1.行内样式（内联样式）直接在标签内进行css样式的写入。
这是⾏内样式的使⽤⽅式
2. 内嵌样式（内部样式）
Document
这是内部样式引⼊⽅式
3.外部样式
通过link标签引入单独css样式代码的文件
CSS 的三种引入方式
| 引入方式 | 语法示例 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|---|
| 内联样式 | |
优先级最高，直接作用于元素 | 样式与结构混杂，维护困难 | 临时修改单个元素 |
| 内部样式 | |
作用于当前页面，无需额外请求 | 无法复用，多页面维护麻烦 | 单页面样式定义 |
| 外部样式 | |
样式与结构完全分离，多页面复用 | 需要额外的 HTTP 请求 | 网站全局样式 |
4.其他引入方式：
通过@import引入：
Document
外部样式
3 .css的核心
1.选择器：确定样式作用的元素。常见类型包括：
元素选择器（如p）元素选择器也是标签选择器，可以直接对标签进行css样式的书写
p {
color: blue;
}
h1 {
font-size: 24px;
}
类选择器（如.classname）
.highlight {
background-color: yellow;
}
.error {
color: red;
}
ID 选择器（如#idname）
#header {
height: 80px;
}
#logo {
width: 100px;
}
后代选择器（如div p）
div p { /* 后代选择器：选中div内的所有p元素 */
margin: 10px;
}
div > p { /* 子选择器：只选中div的直接子元素p */
font-weight: bold;
}
h2 + p { /* 相邻兄弟选择器：选中紧跟在h2后的p元素 */
color: purple;
}
h3 ~ p { /* 通用兄弟选择器：选中h3后的所有同级p元素 */
text-decoration: underline;
}
伪类选择器（如a:hover
a:hover { /* 鼠标悬停时的样式 */
color: red;
}
input:focus { /* 输入框获得焦点时的样式 */
border-color: blue;
}
li:first-child { /* 选中列表的第一个元素 */
font-size: 18px;
}
p:nth-child(even) { /* 选中偶数位置的p元素 */
background-color: #f0f0f0;
}4.标签权重
权重问题
在css中评价优先级的标准是以权重为准，而权重的计算方式为： 标签的权重0,0,0,1 约等 0001 之间是不进位的
class的权重0,0,1,0 约等 0010 之间是不进位的
id的权重 0,1,0,0 约等 0010 之间是不进位的
style的权重1,0,0,0
important +∞ 无穷大
important>style>id>class>标签
选择器之间的权重是可以相加进行比较的。但注意important慎用！！！！
因为标签是有嵌套关系的，所以在存在嵌套关系时直指内容的选择器才是最优先使用的。
5.css的特性
一、层叠性
定义：当多个 CSS 规则作用于同一元素时，浏览器通过 “层叠” 机制解决样式冲突，决定最终应用哪些样式。
核心逻辑：
- 不冲突则叠加：不同属性的规则会同时生效。
p { color: red; font-size: 16px; } p { line-height: 1.5; } /* 与上面规则合并，p元素同时拥有所有属性 */ - 冲突则覆盖：相同属性的规则按优先级和顺序决定最终值。
p { color: red; } p { color: blue; } /* 后声明的blue覆盖red */ - 优先级高者胜出：当规则来源不同时，按优先级（见下文）决定最终样式。
二、继承性
定义：子元素会自动继承父元素的某些 CSS 属性，减少重复代码。
常见继承属性：
文本相关：color、font-family、font-size、text-align 等。
列表相关：list-style、list-style-type 等。
行高：line-height。
不继承的属性：width、height、margin、padding、border、position 等。
强制继承：使用 inherit 关键字。
.parent { color: red; }
.child { color: inherit; } /* 即使child有其他规则，仍继承parent的color */
三、优先级（Specificity）
定义：当多个选择器作用于同一元素且属性冲突时，浏览器按选择器的 “权重” 决定最终样式。
优先级计算规则（从高到低）：
- 内联样式：直接写在 HTML 元素的
style属性中（权重最高）。html
预览
文本 - ID 选择器：
#id（权重次之）。css
#header { height: 100px; } /* 权重：0,1,0,0 */ - 类 / 伪类 / 属性选择器：
.class、:hover、[type="text"]。css
.btn:hover { color: blue; } /* 权重：0,0,2,0（1个类+1个伪类） */ - 元素 / 伪元素选择器：
div、::before（权重最低）。css
div p::first-line { font-weight: bold; } /* 权重：0,0,0,3（3个元素/伪元素） */ - 通配符与继承：
*和继承的样式权重最低，需通过显式声明覆盖。
特殊情况：!important
在属性值后添加 !important 可强制覆盖其他规则（慎用，会破坏层叠逻辑）。
p { color: red !important; } /* 优先级高于所有未标记!important的规则 */
四、层叠性、继承性与优先级的关系
- 优先级 > 层叠性：优先级高的规则直接胜出，不参与层叠比较。
- 继承性最弱：继承的样式权重低于任何显式声明的规则。
body { color: red; } p { color: blue; } /* 即使p继承body的color，显式声明的blue仍会覆盖 */ - 层叠性处理同优先级冲突：当优先级相同时，后声明的规则生效。
.box { width: 100px; } /* 先声明 */ .box { width: 200px; } /* 后声明，最终生效 */
6.css字体样式
在 CSS 里，字体样式的设置主要借助字体族、大小、粗细、风格等属性来达成。
字体（font-family）
这一属性的作用是设定文本所使用的字体。你既可以指定单个字体，也能设置字体族列表，如此一来，当第一种字体不可用时，浏览器就会选用列表中的下一种字体。
/* 指定单个字体 */
.element {
font-family: "Arial";
}
/* 指定字体族列表 */
.element {
font-family: "Helvetica Neue", Arial, sans-serif;
}
字体大小（font-size）
该属性用于确定文本的大小，其值可以是具体的长度单位（像 px、em、rem），也可以是相对单位（例如百分比）。
/* 使用像素单位 */
.element {
font-size: 16px;
}
/* 使用em单位（相对于父元素的字体大小） */
.element {
font-size: 1.5em;
}
/* 使用rem单位（相对于根元素的字体大小） */
.element {
font-size: 1.2rem;
}
/* 使用百分比 */
.element {
font-size: 120%;
}
字体粗细（font-weight）
此属性用来设置字体的粗细程度，它的值可以是具体的数值（如 400），也可以是描述性的关键词（如 bold）。
/* 使用关键词 */
.element {
font-weight: bold; /* 粗体 */
}
/* 使用数值（100-900，400等同于normal，700等同于bold） */
.element {
font-weight: 700; /* 粗体 */
}
字体风格（font-style）
该属性主要用于设置字体的倾斜样式。
.element {
font-style: italic; /* 斜体 */
}
字体变体（font-variant）
此属性可将文本设置为小型大写字母。
.element {
font-variant: small-caps;
}
行高（line-height）
这一属性用于设置文本行与行之间的间距，其值可以是数字、长度单位或者百分比。
/* 使用数字（无单位，相对于字体大小的倍数） */
.element {
line-height: 1.5;
}
/* 使用像素单位 */
.element {
line-height: 24px;
}
文本对齐（text-align）
该属性用于控制文本在元素内的水平对齐方式。
.element {
text-align: center; /* 居中对齐 */
}
文本装饰（text-decoration）
此属性可给文本添加装饰线，像下划线、删除线等。
/* 添加下划线 */
.element {
text-decoration: underline;
}
/* 添加删除线 */
.element {
text-decoration: line-through;
}
文本转换（text-transform）
该属性能够改变文本的大小写形式。
/* 全部大写 */
.element {
text-transform: uppercase;
}
/* 全部小写 */
.element {
text-transform: lowercase;
}
/* 每个单词首字母大写 */
.element {
text-transform: capitalize;
}
组合字体属性（font）
你可以使用 font 属性对字体相关的多个属性进行简写。
/* 顺序为：font-style, font-variant, font-weight, font-size/line-height, font-family */
.element {
font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}