CSS基础教程：样式表语法与选择器详解
CSS简介
CSS（层叠样式表）是一种用于描述HTML元素在屏幕、纸张或其他媒体上如何呈现的语言。通过CSS，开发者可以同时控制多个网页的布局和外观，大大提高工作效率。CSS样式通常存储在外部.css文件中，便于管理和维护。
CSS基础语法
CSS规则由选择器和声明块构成：
选择器用于定位需要设置样式的HTML元素，声明块包含一条或多条声明。每条声明由属性名和属性值组成，中间用冒号分隔。多个声明之间用分号分隔，整个声明块用花括号包围。
示例代码：
article {
font-family: Arial;
line-height: 1.6;
}
在上述代码中，article是选择器，font-family和line-height是属性，Arial和1.6是对应的属性值。
CSS选择器类型
CSS选择器用于定位HTML元素，主要分为以下几类：
- 简单选择器：根据元素名称、ID或类选取元素
- 组合器选择器：根据元素间的关系选取元素
- 伪类选择器：根据元素的特定状态选取
- 伪元素选择器：选取元素的一部分并设置样式
- 属性选择器：根据属性或属性值选取元素
元素选择器
元素选择器根据HTML标签名称选择元素。例如，以下代码会使所有段落文本居中并显示为蓝色：
p {
text-align: center;
color: blue;
}
ID选择器
ID选择器使用HTML元素的ID属性来选择特定元素。ID在页面中应是唯一的，因此ID选择器通常用于选择单个元素。使用ID选择器时，需要在ID名称前添加井号(#)。
#main-content {
text-align: center;
color: green;
}
注意：ID名称不能以数字开头。
类选择器
类选择器选择具有特定class属性的HTML元素。使用类选择器时，需要在类名前添加点(.)。
.highlight {
background-color: yellow;
font-weight: bold;
}
可以限制类选择器只应用于特定元素：
div.highlight {
background-color: yellow;
font-weight: bold;
}
HTML元素可以引用多个类：
<div class="highlight bordered">这个div元素应用了两个类。</div>注意：类名不能以数字开头。
通用选择器
通用选择器(*)匹配页面上的所有HTML元素：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
分组选择器
分组选择器可以将具有相同样式定义的不同选择器组合在一起，减少代码重复：
h1, h2, h3 {
font-family: 'Helvetica Neue', sans-serif;
color: #333;
}
CSS使用方式
有三种方式可以在HTML文档中使用CSS：
外部样式表
外部样式表是最常用的方式，通过修改一个文件即可改变整个网站的外观。每个HTML页面需要在head部分通过link元素引用外部CSS文件：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>页面标题</h1>
<p>这是一个段落。</p>
</body>
</html>外部样式表文件（如styles.css）的内容示例：
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
header {
background-color: #4285f4;
color: white;
padding: 20px;
}
注意：在属性值和单位之间不要添加空格（例如：margin: 20px; 而不是 margin: 20 px;）。
内部样式表
内部样式表适用于单个页面需要独特样式的情况。样式定义在HTML文档的head部分的style元素中：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #e8f4fd;
}
nav {
background-color: #333;
color: white;
padding: 15px;
}
</style>
</head>
<body>
<nav>导航菜单</nav>
<h1>页面标题</h1>
<p>这是一个段落。</p>
</body>
</html>内联样式
内联样式直接应用于HTML元素的style属性中，适用于为单个元素设置独特样式：
<!DOCTYPE html>
<html>
<body>
<h1 style="color:#4285f4;text-align:center;">页面标题</h1>
<p style="color:#666;font-size:18px;">这是一个段落。</p>
</body>
</html>提示：内联样式会失去样式表的许多优势，应谨慎使用。
样式层叠与优先级
当为同一元素定义了多个样式时，会根据特定规则确定最终应用的样式：
/* 外部样式表 */
h2 {
color: blue;
}
/* 内部样式表 */
h2 {
color: red;
}
如果内部样式表在外部样式表之后引入，则h2元素将显示为红色：
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
h2 {
color: red;
}
</style>
</head>但如果顺序相反，h2元素将显示为蓝色。
样式优先级顺序
当多种样式应用于同一元素时，优先级从高到低为：
- 内联样式（HTML元素的style属性）
- 内部和外部样式表（在head部分）
- 浏览器默认样式
因此，内联样式具有最高优先级，会覆盖其他样式定义。
CSS注释
CSS注释以/*开始，以*/结束，用于解释代码，提高可读性。浏览器会忽略注释内容：
/* 设置页面基本样式 */
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
}
/*
多行注释示例
这里可以详细解释样式的作用
*/
.container {
max-width: 1200px;
margin: 0 auto;
}
