CSS 样式设计入门
什么是 CSS
CSS（层叠样式表）用于定义 HTML 元素的视觉表现。它将内容结构与外观展示分离，使网页布局更灵活、维护更高效。
通过外部样式文件，可统一管理多个页面的视觉风格，显著提升开发效率。
为何需要样式系统
早期 HTML 主要用于语义标记，如标题、段落等。但随着浏览器不断引入格式化标签（如字体、颜色），内容与表现逐渐混杂。
为解决这一问题，W3C 推出标准样式机制。现代浏览器均支持多层级样式规则，实现结构与表现解耦。
样式优先级规则
当同一元素被多重规则影响时，采用以下优先级顺序：
- 内联样式（直接写在标签中）
- 内部样式（位于 <head> 内 <style> 块）
- 外部样式表（链接的 .css 文件）
- 浏览器默认样式
内联样式拥有最高控制权，可覆盖其他所有定义。
CSS 基本语法结构
selector {
property: value;
property: value;
}示例：设置标题文字颜色和大小
h1 {
color: #ff0000;
font-size: 16px;
}选择器指定目标元素；属性-值对定义具体样式。
值的表达方式
颜色可用多种形式表示：
- 英文名称：red
- 十六进制：#ff0000
- 缩写：#f00
- RGB：rgb(255,0,0)
- 百分比：rgb(100%,0%,0%)
注意：数值为 0 时无需单位，如 margin: 0;。
引号与分号使用规范
若值包含多个单词，需加引号：
p { font-family: "Arial Black"; }每条声明末尾建议加分号，避免后续增删时出错：
p {
text-align: center;
color: blue;
}空格与大小写处理
空格不影响解析结果，但有助于可读性：
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}CSS 对大小写不敏感，但类名和 ID 名在 HTML 中区分大小写。
选择器组合应用
多个选择器可共享相同样式：
h1, h2, h3, h4 {
font-weight: bold;
color: #333;
}简化重复规则，提高维护性。
继承机制与控制
子元素会自动继承父元素的某些样式，如字体族：
body {
font-family: "Microsoft YaHei", sans-serif;
}但可通过新规则覆盖继承行为：
p {
font-family: Times New Roman, serif;
}上下文选择器（派生选择器）
根据元素嵌套关系定义样式：
li strong {
font-style: italic;
font-weight: normal;
}仅作用于列表项内的强调文本，无需额外 class。
ID 选择器
以井号（#）开头，唯一标识一个元素：
#sidebar {
border: 1px solid #ccc;
padding: 15px;
}每个文档中只能有一个同名 ID。
ID 与派生结合
利用 ID 构建特定区域的样式规则：
#sidebar p {
text-align: right;
font-style: italic;
}
#sidebar h2 {
font-size: 1.1em;
color: #0066cc;
}仅应用于特定容器内的元素。
独立使用 ID 选择器
即使不作为派生基础，也可单独定义：
#header {
height: 80px;
background: url("bg-header.jpg");
}注意：旧版 IE 可能要求明确指定元素类型，如 div#header。
类选择器（Class Selector）
以点号（.）开头，可被多个元素复用：
.highlight {
background-color: yellow;
font-weight: bold;
}HTML 中通过 class 属性应用：
<p class="highlight">重要信息</p>类名首字符不能是数字，否则在部分浏览器中无效。
类作为派生条件
限制样式作用范围：
.menu td {
padding: 5px;
border: 1px solid #ddd;
}仅影响带有 .menu 类的表格单元。
元素与类联合选择
精确匹配元素类型与类名：
td.fancy {
color: #f60;
background: #666;
}只对具有 fancy 类的 <td> 元素生效，不受其他元素影响。
属性选择器
针对特定属性的元素进行样式设定：
支持条件匹配，适用于无 id 或 class 的表单控件。
存在属性匹配
[title] {
color: red;
}所有含 title 属性的元素都将变为红色。
属性值精确匹配
[title="W3School"] {
border: 5px solid blue;
}仅当属性值完全等于指定内容时才生效。
属性值部分匹配
[title~=hello] {
color: red;
}
[lang|=en] {
color: red;
}~ 表示空格分隔的值中包含目标词；|= 表示以指定前缀开始（如 en-us）。
表单样式实例
input[type="text"] {
width: 150px;
margin-bottom: 10px;
background: #fff;
font-family: Arial, sans-serif;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
font-family: Arial, sans-serif;
}无需额外类名即可精准控制输入框外观。
三种插入方式对比
1. 外部样式表
<link rel="stylesheet" type="text/css" href="styles.css" />适合全局统一风格，修改一处即可更新整站。
2. 内部样式表
<style type="text/css">
body { background: #eee; }
</style>适用于单页特殊需求，避免污染全局。
3. 内联样式
<p style="color: red; margin: 10px;">内容</p>仅限一次性使用，破坏样式可维护性，应尽量避免。
多重样式叠加规则
当不同来源的规则冲突时，优先采用更具体的定义：
/* 外部样式表 */
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
/* 内部样式表 */
h3 {
text-align: right;
font-size: 20pt;
}最终效果：颜色取外部，对齐与大小取内部。
