1. CSS 介绍
CSS（层叠样式表）是为 HTML 文档添加样式和布局的技术，可以理解为对 HTML 内容的"美化装饰"。通过 CSS，我们可以控制网页的颜色、字体、间距、布局等视觉表现。
基本语法结构：
css
选择器 {
属性名: 属性值;
属性名: 属性值;
}
- 选择器：指定要样式化的 HTML 元素
- 声明块：包含在花括号
{}中的样式规则 - 声明：由属性和值组成，用分号分隔
示例：
html
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 练习</title>
<style>
p {
color: blue;
font-size: 16px; /* 修正：应该是 font-size 而不是 size */
}
</style>
</head>
<body>
<p>你好世界</p>
</body>
</html>
CSS 引入方式：
- 内部样式表：在
<head>的<style>标签中编写（推荐学习使用） - 行内样式：直接在 HTML 标签的
style属性中编写 - 外部样式表：在单独
.css文件中编写，通过<link>引入（企业开发常用）
补充：列表标签
<ul>：无序列表（项目符号）<ol>：有序列表（数字序号）<li>：列表项
html
<ul>
<li>无序列表项一</li>
<li>无序列表项二</li>
<li>无序列表项三</li>
</ul>
<ol>
<li>有序列表项一</li>
<li>有序列表项二</li>
<li>有序列表项三</li>
</ol>
2. CSS 选择器
选择器用于精确选中需要样式化的 HTML 元素。
2.1 标签选择器
通过 HTML 标签名选择元素：
css
p {
color: blue;
font-size: 16px;
}
div {
color: brown;
}
2.2 class 选择器
通过 class 属性选择元素（可重复使用）：
css
.primary-text {
color: aquamarine;
font-weight: bold;
}
html
<div class="primary-text">具有主样式的div</div>
<div class="primary-text secondary">同时具有多个class</div>
2.3 id 选择器
通过 id 属性选择元素（应保持唯一性）：
css
#main-header {
color: blueviolet;
font-size: 24px;
}
html
<div id="main-header">页面主标题</div>
2.4 复合选择器
通过组合关系精确选择元素：
css
/* 选择 ul 下的 li 中的 p 元素 */
ul li p {
color: darkmagenta;
}
/* 选择具有特定 class 的 div */
div.container {
border: 1px solid #ccc;
}
2.5 通配符选择器
选择所有元素：
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
2.6 分组选择器
同时为多个选择器设置相同样式：
css
h1, h2, h3, .title {
font-family: 'Microsoft YaHei', sans-serif;
color: #333;
}
选择器优先级：id > class > 标签 > 通配符
3. 常用 CSS 属性
下面通过一个具体示例演示常用 CSS 属性的使用：
html
<div id="styled-box">这是一个样式化的div元素</div>
3.1 文本颜色
css
#styled-box {
color: dodgerblue; /* 颜色名称 */
color: #1E90FF; /* 十六进制 */
color: rgb(30, 144, 255); /* RGB */
}
3.2 字体大小
css
#styled-box {
font-size: 16px; /* 像素值 */
font-size: 1em; /* 相对单位 */
font-size: large; /* 预定义大小 */
}
3.3 边框设置
css
#styled-box {
/* 简写形式 */
border: 2px solid #333;
/* 拆分形式 */
border-width: 2px;
border-style: solid;
border-color: #333;
/* 单边边框 */
border-left: 4px solid red;
}
边框样式选项：solid（实线）、dashed（虚线）、dotted（点线）、double（双线）
3.4 尺寸控制
css
#styled-box {
width: 200px; /* 宽度 */
height: 150px; /* 高度 */
min-width: 100px; /* 最小宽度 */
max-width: 300px; /* 最大宽度 */
}
3.5 内边距（Padding）
元素内容与边框之间的距离：
css
#styled-box {
padding: 20px; /* 四个方向相同 */
padding: 10px 20px; /* 上下10px，左右20px */
padding: 10px 20px 15px 5px; /* 上、右、下、左（顺时针） */
/* 单方向设置 */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
3.6 外边距（Margin）
元素与其他元素之间的距离：
css
#styled-box {
margin: 20px; /* 四个方向相同 */
margin: 0 auto; /* 上下0，左右自动（水平居中） */
margin: 10px 20px 15px 5px; /* 上、右、下、左 */
/* 单方向设置 */
margin-top: 10px;
margin-bottom: 20px;
}
综合示例
css
#styled-box {
/* 文本样式 */
color: #333;
font-size: 16px;
font-family: Arial, sans-serif;
text-align: center;
line-height: 1.5;
/* 尺寸和边框 */
width: 300px;
height: 200px;
border: 2px solid #007bff;
border-radius: 8px; /* 圆角 */
/* 内边距和背景 */
padding: 20px;
background-color: #f8f9fa;
/* 外边距 */
margin: 20px auto;
/* 阴影效果 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
盒子模型理解
CSS 盒子模型包含：
- Content：实际内容区域
- Padding：内边距（内容与边框的间距）
- Border：边框
- Margin：外边距（元素与其他元素的间距）
text
+-----------------------------------+
| Margin |
| +-----------------------------+ |
| | Border | |
| | +-----------------------+ | |
| | | Padding | | |
| | | +-----------------+ | | |
| | | | Content | | | |
| | | +-----------------+ | | |
| | +-----------------------+ | |
| +-----------------------------+ |
+-----------------------------------+
通过掌握这些基础的 CSS 知识，我们已经能够为 HTML 页面添加基本的样式效果。下一期我们将学习 JavaScript，为网页添加交互功能，从而完整掌握前端开发的三大核心技术。
