Module 02 · CSS Overview & HTML5 ElementsCSS 概述与 HTML5 元素
CSS: Styling HTMLCSS：HTML 样式设计
学习目标
观看本视频后，您将能够：
- 解释 什么是 层叠样式表（CSS）。
- 描述 如何使用 CSS 格式化 HTML 元素。
- 说明 如何在 HTML 文档中使用 CSS 格式化网页。
HTML5、JavaScript 和 CSS 的结合
通过结合 HTML5、JavaScript 和 CSS，开发者可以创建适用于桌面和移动设备的网页。这些技术具有强大的功能，可用于显示丰富的交互式应用程序，而无需依赖插件技术（如 Flash 播放器）。
- 优势：
- 无障碍访问：HTML 文档可以通过浏览器窗口呈现，也可以通过语音合成器为视障人士提供辅助技术支持。
- 可访问性要求：使用 HTML 标记交付交互内容能够更好地满足无障碍要求，相较于依赖浏览器插件具有优势。
CSS 的基础知识
CSS 的定义
- CSS 是一种 样式表语言，描述 HTML 元素的显示方式。
- 层叠性（Cascading）：CSS 的样式会层叠应用到网页的每个元素上，子元素通常继承父元素的样式，但也有例外。
分离数据与设计的意义
- HTML 用于向浏览器传递 数据，CSS 用于向数据应用 设计。
- 优势：
- 满足无障碍需求：例如，为视障用户提供语音合成的网页内容。
- 提升可访问性：用户可以在不加载设计的情况下渲染网页。
- 搜索引擎优化（SEO）：搜索引擎可以无干扰地索引网站内容。
CSS 的使用方法
CSS 可通过三种方式在 HTML 中应用：
| 方法 | 特点 |
|---|---|
| 内联 CSS | - 适用于单个 HTML 元素 - 优先级最高，但容易让 HTML 代码变得混乱。 |
| 内部 CSS | - 适用于单个页面 - 使用 <style> 标签，代码混入页面，增加加载时间。 |
| 外部 CSS | - 推荐使用此方法 - 将 CSS 写入独立的样式表文件，通过 <link> 标签引用。 |
优先级顺序：内联 CSS > 内部 CSS > 外部 CSS
样式规则的内容
CSS 可以为以下网页元素设置样式：
| 属性 | 描述 |
|---|---|
| 字体（Fonts） | 设置字体类型（如 serif、sans-serif）、大小（px、em）等。 |
| 文本（Text） | 设置颜色、对齐方式（left、right、center）等。 |
| 背景（Background） | 设置背景颜色、图片等。 |
| 大小（Sizes） | 控制元素的高度和宽度。 |
| 边框（Borders） | 定义元素的边框样式、颜色和宽度。 |
| 间距（Spacing） | 设置内边距（padding）和外边距（margin）。 |
| 定位（Positioning） | 控制元素在网页中的位置，如绝对定位（absolute）或相对定位（relative）。 |
| 视觉效果（Visual Effects） | 添加渐变、阴影等效果。 |
| 表格和列表（Tables and Lists） | 美化表格边框和列表样式。 |
CSS 样式规则
CSS 样式规则由以下结构组成：
selector {
property: value;
}
选择器的类型
- HTML 标签名：如
<a>、<div>、<li>。 - ID 选择器：使用
#符号标识，例如#header。 - 类选择器：使用
.符号标识，例如.menu。
网站设计基础
建立基础样式
在设计网站时，先定义基础样式，例如：
- 设置背景颜色为浅白色（
background-color）。 - 将字体颜色设为黑色（
color）。 - 内容与浏览器窗口边框对齐（
margin和padding）。 - 文本水平左对齐（
text-align）。 - 字体大小使用浏览器默认值，字体为无衬线字体（
font-family）。
代码示例：
body {
background-color: #f8f8f8;
color: #000;
margin: 0;
padding: 0;
text-align: left;
font-size: 100%;
font-family: sans-serif;
}
常用设置指南
- 颜色：使用 RGB 十六进制值（如
#ffffff）。 - 大小：
- 使用 像素 (px) 或 em（字体大小的倍数）。
- 使用 百分比 (%) 表示相对尺寸。
- 文本对齐：可以为 左对齐、右对齐 或 居中对齐。
- 浮动：可设置为 左浮动 或 右浮动。
- 字体：支持特定字体或字体族（如 serif、sans-serif 或 monospace）。
布局类型
网站布局可以分为两种类型：
| 布局类型 | 描述 |
|---|---|
流式布局（Fluid Layout） |
• 定义：元素的高度和宽度是灵活的，能够根据浏览器窗口、操作系统及用户偏好进行扩展或收缩。 • 单位：主要使用 百分比 (%) 和 ems。 • 优点： • 缺点： |
固定布局（Fixed Layout） |
定义：元素的高度和宽度是固定的，无论使用什么操作系统或浏览器，布局大小都保持不变。 单位：主要使用 像素 (px)。 优点： • 布局一致性强，设计更易控制。 缺点： • 在小屏幕或大屏幕设备上可能无法正常显示。 |
选择布局时的考虑因素
- 网站内容的类型与数量。
- 网站目标受众的偏好与设备使用情况。
HTML 引用 CSS 的三种方式
1. 内联 CSS
- 定义：直接将样式写在 HTML 元素的
style属性中。 - 用途：用于单个 HTML 元素的样式。
- 优点：
- 简单直接，适用于小型或临时样式。
- 缺点：
- 随着样式增多，HTML 文档会变得杂乱无章。
示例
<p style="color: red; font-size: 14px;">这是内联 CSS 示例。</p>
2. 内嵌 CSS
- 定义：将 CSS 写在 HTML 文档的
<style>标签内。 - 用途：用于单个页面的样式。
- 优点：
- 适合小型项目。
- 缺点：
- 污染 HTML 代码。
- 如果在每个页面复制样式，会增加页面加载时间。
示例
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
3. 外部 CSS
- 定义：将 CSS 写在单独的文件中，通过
<link>标签链接到 HTML 文档。 - 用途：为整个网站提供统一样式。
- 优点：
- HTML 文档更简洁。
- 提高代码可重用性，减少页面加载时间。
- 缺点：
- 如果文件丢失或路径错误，样式将无法加载。
示例
<head>
<link rel="stylesheet" href="styles.css">
</head>
CSS 优先级
当多种方式同时应用于一个元素时，优先级规则如下：
- 内联 CSS：优先级最高。
- 内嵌 CSS：优先级次高。
- 外部 CSS：优先级最低。
总结
在本视频中，您学习了：
- CSS 的定义与功能：
- CSS 通过样式规则创建网页的统一外观。
- CSS 设计与数据分离，使网页更具可访问性和可索引性。
- CSS 的应用方式：
- 内联 CSS：用于单个 HTML 元素。
- 内部 CSS：用于单个页面。
- 外部 CSS：用于整个网站，推荐使用。
- 网站设计基础与布局类型：
- 通过基础样式定义网站设计。
- 根据需求选择 流式布局 或 固定布局。
🎉 最终提示：通过合理使用 CSS，您可以创建兼具美观性和功能性的现代网页！
