CSS 01【基础语法学习】

1 id 选择器

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

实例

css 复制代码

#para1
{
    text-align:center;
    color:red;
}

2 class 选择器

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

实例

css 复制代码

.center {text-align:center;}

你也可以指定特定的 HTML 元素使用 class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

实例

css 复制代码

p.center {text-align:center;}

多个 class 选择器可以使用空格分开：

实例

css 复制代码

.center { text-align:center; }
.color { color:#ff0000; }

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

3 HTML 和 CSS 混合编写

html 复制代码

<!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、标签选择器）组合使用，实现更精准的选择：

css 复制代码

/* 选择 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