CSS 01【基础语法学习】
1 id 选择器
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
实例
#para1
{text-align:center;color:red;
}2 class 选择器
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
实例
.center {text-align:center;}你也可以指定特定的 HTML 元素使用 class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
实例
p.center {text-align:center;}多个 class 选择器可以使用空格分开：
实例
.center { text-align:center; }
.color { color:#ff0000; }类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
3 HTML 和 CSS 混合编写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#customers
{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;width:100%;border-collapse:collapse;
}
#customers td, #customers th
{font-size:1em;border:1px solid #98bf21;padding:3px 7px 2px 7px;
}
#customers th
{font-size:1.1em;text-align:left;padding-top:5px;padding-bottom:4px;background-color:#A7C942;color:#ffffff;
}
#customers tr.alt td
{color:#000000;background-color:#EAF2D3;
}
</style>
</head><body>
<table id="customers">
<tr><th>Company</th><th>Contact</th><th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>【这个难道是css和html混着写的吗？】
是的，你提供的代码中CSS 和 HTML 确实是 “混合书写” 的形式，但这种混合属于 HTML 标准允许的 “内部样式表” 写法，并非无序的代码混杂。下面我会详细拆解这种写法的本质、特点，以及它与其他 CSS 引入方式的区别，帮你彻底理解这类代码结构。
一、先明确：这是 “内部样式表”，是 HTML+CSS 的标准结合方式
在 HTML 中，CSS（样式表）的引入有 3 种核心方式，你提供的代码属于第二种 ——内部样式表，它是 HTML 与 CSS “半分离” 的规范写法，而非混乱的混合。
具体对应代码结构：
- HTML 结构：负责页面 “内容”，比如
<table>表格、<tr>行、<th>表头、<td>单元格等标签，定义了 “页面有什么”。 - CSS 样式：被包裹在
<head>标签内的<style>标签中，负责页面 “外观”，比如表格的字体、颜色、边框、背景色等，定义了 “内容长什么样”。
代码中两者的边界非常清晰：所有 CSS 代码都在 <style> 标签内部，所有 HTML 内容都在 <body> 标签内部，完全符合语法规范。
二、3 种 CSS 引入方式对比：理解 “内部样式表” 的定位
为了更清晰地理解这种写法，我们可以对比另外两种 CSS 引入方式，明确它们的适用场景：
| 引入方式 | 实现方式 | 代码位置 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|---|---|
| 内联样式表 | 在 HTML 标签内用 style 属性写 CSS | HTML 标签内部（如 <td style="color:red">） | 优先级最高，可精准控制单个元素 | 代码冗余（每个元素都要写），难维护 | 临时调整单个元素样式 |
| 内部样式表 | 在 HTML 的 <head> 内用 <style> 包裹 CSS | HTML 文件的 <head> 中 | 样式与 HTML 在同一文件，便于单文件管理 | 样式无法复用给其他 HTML 文件 | 小型页面、单页面项目 |
| 外部样式表 | 单独创建 .css 文件，用 <link> 引入 | 独立的 .css 文件（如 style.css） | 样式与 HTML 完全分离，可复用给多个页面 | 需要额外加载 CSS 文件，多文件需管理 | 多页面网站、大型项目 |
你提供的代码是 “内部样式表”，适合小型表格展示页面（如示例中的数据表格），不需要复用样式到其他页面，因此这种写法高效且简洁。
三、代码中 CSS 与 HTML 的关联逻辑：如何 “绑定” 样式？
虽然 CSS 在 <style> 中、HTML 在 <body> 中，但它们通过 “选择器” 建立关联，比如代码中的核心关联逻辑：
#customers：通过 “ID 选择器”（#表示 ID）选中<table id="customers">表格，定义表格的全局样式（如字体、宽度、边框合并）。#customers td, #customers th：选中表格内所有<td>（单元格）和<th>（表头），定义它们的字体大小、边框、内边距。#customers th：单独选中表格的表头<th>，定义表头的对齐方式、上下内边距、背景色、文字色。#customers tr.alt td：选中表格中带有class="alt"的<tr>（行）内的<td>，定义 “交替行” 的背景色（实现表格隔行变色效果）。
简单说：CSS 通过 “选择器”（ID、class、标签名等）“找到” HTML 中的元素，再给这些元素赋予样式，两者通过 “选择器” 形成精准关联。
四、总结：这种写法是 “规范的半分离”，而非 “混乱的混合”
- 不是 “混乱混合”：CSS 和 HTML 各有固定位置（
<style>内 vs<body>内），边界清晰，符合语法规范。 - 是 “内部样式表”：属于 HTML+CSS 结合的标准方式之一，适合小型单页面，平衡了 “简洁性” 和 “可维护性”。
- 核心逻辑：HTML 定义 “内容结构”，CSS 定义 “外观样式”，通过 “选择器” 关联，实现 “内容与样式分离” 的核心思想（只是样式未单独拆成.css 文件）。
如果后续需要将这个表格复用到期他页面，只需将 <style> 内的 CSS 代码单独提取为 table.css 文件，再用 <link rel="stylesheet" href="table.css"> 引入，即可升级为 “外部样式表”，实现完全的分离。
4 Overflow
CSS 布局 Overflow | 菜鸟教程
https://www.runoob.com/css/css-overflow.html
5 CSS 布局 - 水平 & 垂直对齐
CSS 布局 – 水平 & 垂直对齐 | 菜鸟教程https://www.runoob.com/css/css-align.html
6 组合选择器
组合选择器被称为 组合器（Combinators）。一共有4种组合器：
' ' 后代组合器（Descendant combinator）
'>' 直接子代组合器（Child combinator）
'~' 一般兄弟组合器（General sibling combinator）
'+' 紧邻兄弟组合器（Adjacent sibling combinator）
7 CSS伪类
CSS 伪类 | 菜鸟教程https://www.runoob.com/css/css-pseudo-classes.html
CSS 伪类（Pseudo-class）是一种特殊的选择器，用于选择元素在特定状态或特定位置的状态，而不是根据元素的标签名、类名或 ID 来选择。它们通常以冒号 : 开头，用于描述元素的动态状态（如鼠标悬停）、位置关系（如第一个子元素）或文档结构（如空元素）等。
伪类的核心特点
- 动态性：很多伪类会根据用户行为或元素状态变化而生效（如
:hover鼠标悬停时）。 - 非基于元素本身：不依赖元素的固定属性（如
class或id），而是基于元素的状态或位置关系。 - 语法：以
:开头，后跟伪类名称，如a:hover、li:first-child。
常见伪类分类及用法
1. 链接与用户行为伪类
用于控制链接（<a> 标签）在不同交互状态下的样式，遵循 LVHA 顺序（link → visited → hover → active）以确保生效。
| 伪类 | 描述 | 示例 |
|---|---|---|
:link | 未被访问过的链接 | a:link { color: blue; } |
:visited | 已被访问过的链接（受隐私限制，样式有限） | a:visited { color: purple; } |
:hover | 鼠标悬停在元素上时 | button:hover { background: #eee; } |
:active | 元素被点击（激活）时 | a:active { color: red; } |
:focus | 元素获得焦点时（如输入框被选中） | input:focus { border: 2px solid blue; } |
2. 结构伪类
根据元素在文档树中的位置或结构关系选择元素，常用于列表、表格等有明确层级的结构。
| 伪类 | 描述 | 示例 |
|---|---|---|
:first-child | 选择父元素的第一个子元素 | ul li:first-child { color: red; } |
:last-child | 选择父元素的最后一个子元素 | ul li:last-child { color: green; } |
:nth-child(n) | 选择父元素的第 n 个子元素（n 可以是数字、odd 奇数、even 偶数） | table tr:nth-child(even) { background: #f0f0f0; }（表格隔行变色） |
:nth-last-child(n) | 从父元素的最后一个子元素开始计数，选择第 n 个 | ul li:nth-last-child(2) { font-weight: bold; } |
:only-child | 选择是父元素唯一子元素的元素 | div p:only-child { margin: 0; } |
:first-of-type | 选择父元素中同类型的第一个元素（与 :first-child 区别：只看同类型） | div span:first-of-type { color: blue; } |
:last-of-type | 选择父元素中同类型的最后一个元素 | div span:last-of-type { color: green; } |
3. 表单相关伪类
用于选择表单元素的特定状态（如禁用、选中、必填等）。
| 伪类 | 描述 | 示例 |
|---|---|---|
:checked | 选择被选中的表单元素（如单选框、复选框） | input:checked + label { color: red; } |
:disabled | 选择被禁用的表单元素 | input:disabled { background: #ddd; } |
:enabled | 选择可用的表单元素（默认状态） | input:enabled { border: 1px solid #ccc; } |
:required | 选择带有 required 属性的必填表单元素 | input:required { border-left: 3px solid red; } |
:optional | 选择没有 required 属性的可选表单元素 | input:optional { border-left: 3px solid green; } |
:valid | 选择验证通过的表单元素（如输入合法邮箱） | input:valid { border: 1px solid green; } |
:invalid | 选择验证失败的表单元素 | input:invalid { border: 1px solid red; } |
4. 其他常用伪类
| 伪类 | 描述 | 示例 |
|---|---|---|
:empty | 选择没有任何子元素（包括文本节点）的元素 | div:empty { height: 20px; background: #f0f0f0; } |
:root | 选择文档的根元素（HTML 中通常是 <html>） | :root { --main-color: blue; }（定义全局 CSS 变量） |
:not(selector) | 否定伪类，选择不匹配括号内选择器的元素 | input:not(:disabled) { cursor: pointer; }（选择未禁用的输入框） |
伪类的组合使用
伪类可以与其他选择器（包括类、ID、标签选择器）组合使用，实现更精准的选择：
/* 选择 class 为 "menu" 的列表中，被hover的第一个子元素 */
ul.menu li:first-child:hover {background: #ff0;
}/* 选择未被访问且带有 target 属性的链接 */
a:link[target="_blank"] {text-decoration: none;
}
注意事项
- 优先级：伪类的优先级与类选择器（
class）相同，高于标签选择器，低于 ID 选择器。 - 兼容性：大部分伪类（如
:hover、:nth-child）在现代浏览器中兼容良好，但部分高级伪类（如:focus-visible）需要注意旧浏览器支持情况。 - 动态性：部分伪类（如
:hover、:focus）会随用户行为实时变化，无需手动添加 / 移除类名。
通过伪类，我们可以更灵活地控制元素样式，减少不必要的 class 定义，让代码更简洁、语义化更强。
8 CSS伪元素
CSS 伪元素 | 菜鸟教程https://www.runoob.com/css/css-pseudo-elements.html