CAN302 电子商务技术 Pt.2 深入了解HTML和CSS

文章目录

[1. HTML](#1. HTML)
- [1.1 HTML 发展史](#1.1 HTML 发展史)
- [1.2 HTML 属性（HTML attributes）](#1.2 HTML 属性（HTML attributes）)
- [1.3 HTTP 头和 HTML 头](#1.3 HTTP 头和 HTML 头)
- - [1.3.1 HTML \<head>](#1.3.1 HTML <head>)
  - [1.3.2 HTML \<body>](#1.3.2 HTML <body>)
  - - [1.3.2.1 HTML 中段落和文本标签](#1.3.2.1 HTML 中段落和文本标签)
    - [1.3.2.2 HTML 段落内文本修饰标签（inline text tags）](#1.3.2.2 HTML 段落内文本修饰标签（inline text tags）)
    - [1.3.2.3 HTML 列表（list）](#1.3.2.3 HTML 列表（list）)
    - [1.3.2.4 HTML 表格（table）](#1.3.2.4 HTML 表格（table）)
    - [1.3.2.5 HTML 插入图片（image）](#1.3.2.5 HTML 插入图片（image）)
    - [1.3.2.6 HTML 超链接（hyperlink）](#1.3.2.6 HTML 超链接（hyperlink）)
    - [1.3.2.7 HTML 表单（form）](#1.3.2.7 HTML 表单（form）)
    - - [1.3.2.7.1 \<input> 标签](#1.3.2.7.1 <input> 标签)
      - [1.3.2.7.2 \<textarea> 标签](#1.3.2.7.2 <textarea> 标签)
      - [1.3.2.7.3 \<select> + \<option> 基本用法](#1.3.2.7.3 <select> + <option> 基本用法)
    - [1.3.2.8 HTML 中的 \<iframe> 标签](#1.3.2.8 HTML 中的 <iframe> 标签)
[2. CSS](#2. CSS)
- [2.1 CSS2 与 CSS3 的区别](#2.1 CSS2 与 CSS3 的区别)
- [2.2 CSS 盒子模型(Box Model)](#2.2 CSS 盒子模型(Box Model))
- [2.3 CSS 语法](#2.3 CSS 语法)
- [2.4 给网页设置 CSS 样式的四种方式](#2.4 给网页设置 CSS 样式的四种方式)
- - [2.4.1 Inline CSS（内联样式）](#2.4.1 Inline CSS（内联样式）)
  - [2.4.2 Internal CSS（内部样式）](#2.4.2 Internal CSS（内部样式）)
  - [2.4.3 External CSS（外部样式）](#2.4.3 External CSS（外部样式）)
  - [2.4.4 @import](#2.4.4 @import)
- [2.5 CSS 选择器（selector）](#2.5 CSS 选择器（selector）)
- - [2.5.1 常见 CSS 选择器（selector）](#2.5.1 常见 CSS 选择器（selector）)
  - - [2.5.1.1 .class](#2.5.1.1 .class)
    - 2.5.1.2 #id
    - [2.5.1.3 *](#2.5.1.3 *)
    - [2.5.1.4 element](#2.5.1.4 element)
    - [2.5.1.5 element, element](#2.5.1.5 element, element)
    - [2.5.1.6 element element（后代选择器）](#2.5.1.6 element element（后代选择器）)
    - [2.5.1.7 element > element （子选择器）](#2.5.1.7 element > element （子选择器）)
    - [2.5.1.8 element + element（相邻兄弟选择器）](#2.5.1.8 element + element（相邻兄弟选择器）)
    - [2.5.1.8 element ~ element（通用兄弟选择器）](#2.5.1.8 element ~ element（通用兄弟选择器）)
    - [2.5.1.9 复杂情况](#2.5.1.9 复杂情况)
- [2.6 CSS 的颜色设计](#2.6 CSS 的颜色设计)
- [2.7 CSS 中常用的单位（units）](#2.7 CSS 中常用的单位（units）)
- - [2.7.1 绝对单位（Absolute）](#2.7.1 绝对单位（Absolute）)
  - [2.7.2 相对单位（Relative）](#2.7.2 相对单位（Relative）)
  - - [2.7.2.1 %，em 和 rem 的区别](#2.7.2.1 %，em 和 rem 的区别)
- [2.8 响应式网页设计（Responsive Web Design）](#2.8 响应式网页设计（Responsive Web Design）)
- [2.9 CSS 字体（font）](#2.9 CSS 字体（font）)
- - [2.9.1 文字的对齐方式](#2.9.1 文字的对齐方式)
  - [2.9.2 给超链接 \<a> 设置不同状态下的样式](#2.9.2 给超链接 <a> 设置不同状态下的样式)
- [2.10 CSS display](#2.10 CSS display)
- [2.11 CSS position](#2.11 CSS position)

1. HTML

Hyper Text Markup Language（超文本标记语言），用来构建网页的内容和结构。

结构如上图所示。

<html>：整个网页的根标签。

<head>：网页头部，放置网页信息（比如 <title> 网页标题，<meta> 元信息）。

<body>：网页主体，放置网页可见内容（文字、图片、链接等）。

HTML 中的每个元素都会被浏览器解析成一个节点。

所有节点组成一个树状结构（DOM 树），如上图所示。

<html> 是根节点。

<head> 和 <body> 是 <html> 的子节点。

<h1>、<p>、<a>、<img> 都是 <body> 的子节点。

DOM 树让 JavaScript 可以操作网页元素，比如修改文字、图片、样式等。

1.1 HTML 发展史

1989年：Tim Berners-Lee 发明了万维网（www）

1991年：Tim Berners-Lee 发明了HTML

1993年：Dave Raggett 制定HTML+

1995年：HTML 2.0标准

1997年：HTML 3.2标准

1999年：HTML 4.01标准

2000年：XHTML 1.0标准

2008年：HTML5首次公开草案

2012年：HTML5标准

2014年：W3C推荐HTML5

2016年：HTML5.1候选推荐

2017年：HTML5.1第2版 & HTML5.2推荐

不同版本有不同的特性。

比如HTML5的特性：

视频/音频支持
<video> 和 <audio> 标签可以直接嵌入多媒体内容。
以前需要安装Flash插件。
Canvas画布
<canvas> 标签可以创建绘图区域。
用于网页游戏或可视化内容。
WebSocket
支持双向通信，网页可以实时与服务器交互。
访问本地设备
可以访问摄像头、地理位置、传感器等本地设备。

GML 是第一代通用标记语言（General Markup Language），最早的标记语言。

SGML 是为了把 GML 标准化而发展出来的标准化标记语言。

HTML（Hyper Text Markup Language，超文本标记语言）是基于 SGML 的一种标记语言，用于网页制作。HTML 比较宽松，不严格。

XML（Extensible Markup Language，可扩展标记语言）是严格的标记语言规范。

XHTML 是 HTML 与 XML 的结合，兼具 HTML 的网页功能和 XML 的严格结构。

HTML5 是 HTML 的最新版本，不再是 GML 的一部分，引入了很多新功能（例如 <video>、<audio>、<canvas> 等）。

1.2 HTML 属性（HTML attributes）

HTML 标签可以带有属性来提供额外信息或设置行为。

例如 <html> 标签的 lang 属性用来指定网页的语言。

html 复制代码

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<\html>

这是 XML 命名空间（XML namespace），主要用于 XHTML 版本的 HTML。

现代网页默认使用 HTML5，所以一般不需要这个属性，现在 HTML5 的版本如下。

html 复制代码

<html lang="en">

lang="en" 用来设置网页的语言为英文。

可以只写语言代码，比如 en（英语）、zh（中文）。

也可以写语言 + 国家代码，比如 en-US（美国英语）、zh-CN（简体中文）。

除了设置整个页面语言，也可以针对某个区域（标签）单独设置语言：

html 复制代码

<p lang="fr">Bonjour</p>

1.3 HTTP 头和 HTML 头

HTTP 头是通信信息，在网页本身的 HTML 内容之前发送给浏览器。

包含的信息有：

状态行：HTTP/1.1 200 OK → 表示请求成功

日期：服务器响应的时间

服务器类型：比如 Apache/1.3.29

内容长度：Content-Length: 35，告诉浏览器内容多大

内容类型：Content-Type: text/html，告诉浏览器文件类型

HTML 头是网页内容的一部分，用来描述网页和加载资源。

包含的信息有：

标题：<title>Page Title → 浏览器标签页显示的名字

其他信息（示例里没写）：meta 信息、CSS 链接、JavaScript 文件等

1.3.1 HTML <head>

所有 <head> 中的元素不会直接显示在网页上。HTML 头中常用元素有：

<title> → 网页标题

src → 指定 JS 文件的路径，可以是网页上任何可访问的资源。
defer → 延迟加载属性：让网页先加载 HTML，再加载 JS。
避免 JS 阻塞网页内容显示。但并非所有浏览器都支持 defer，为了确保 JS 最后加载，通常建议把 <script> 标签放在 <body> 的底部。

<base> → 基础 URL（影响相对路径的解析）

1.3.2 HTML <body>

HTML 容易学，但要精通难，不同标签可以实现相似视觉效果，但最好根据语义使用"正确的标签"。

例如：不要只用 <div> 或 <span> 模仿标题或段落，应该用 <h1>、<p> 等。

推荐使用语义标签，优点如下：

更易维护
对搜索引擎友好（SEO）
对屏幕阅读器友好（无障碍设计）

常用 <body> 标签及作用

标签	英文解释	中文解释
div	division	分割（块元素）
span	span	区域（行内元素）
p	paragraph	段落
ol	ordered list	有序列表
ul	unordered list	无序列表
li	list item	列表项
dl	definition list	定义列表
dt	definition term	定义术语
dd	definition description	定义描述
h1~h6	header1~header6	标题1~标题6
hr	horizontal rule	水平线
a	anchor	锚点，超链接
strong	strong	加粗
em	emphasized	斜体（强调）
sup	superscript	上标
sub	subscript	下标
br	break	换行
fieldset	fieldset	域集（表单分组）
legend	legend	图例（表单标题）
caption	caption	表格或图像标题
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格
td	td	表格单元格

1.3.2.1 HTML 中段落和文本标签

标签	英文解释	中文理解
`<h1>~<h6>`	header	标题（显示在网页上，给人看的）
`<p>`	paragraph	段落
`<br>`	break	换行
`<hr>`	horizontal rule	水平线
`<div>`	division	区块（容器，可用 CSS 定义样式）
`<span>`	span	区域（行内元素，可用 CSS 定义样式）

再次强调一遍网页标题（header）不等同于 HTML <head>。<head> 是网页后台信息（浏览器看），而 <h1>~<h6> 是网页正文显示的标题（人看）。

虽然可以用 <div> + CSS 模拟，但语义化标签对人和机器都有意义。

人类浏览网页看 <h1>、<p> 等标签显示的内容。

计算机程序（搜索引擎、爬虫、NLP）也需要通过标签理解网页结构。

NLP可以利用这些标签理解网页内容，更像人类在阅读。

1.3.2.2 HTML 段落内文本修饰标签（inline text tags）

标签	英文解释	中文理解
`<strong>`	strong	加强（加粗）
`<em>`	emphasized	强调（通常斜体）
`<cite>`	cite	引用（书名、文章、来源等）
`<sup>`	superscript	上标（如 x² 的 2）
`<sub>`	subscript	下标（如 H₂O 的 2）

下面给出一个示例。

html 复制代码

<p>
  Before proceeding, <strong>make sure you put on your safety goggles</strong>.
</p>

结果如下：

Before proceeding, make sure you put on your safety goggles.

1.3.2.3 HTML 列表（list）

标签	说明
`ol`	有序列表（ordered list），会自动编号，例如 1, 2, 3...
`ul`	无序列表（unordered list），通常使用圆点（•）标记每一项
`dl`	定义列表（definition list），通常用来显示术语及其定义

下面给出一个示例。

html 复制代码

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

效果如下：

first item
second item
third item

1.3.2.4 HTML 表格（table）

基础表格如下。

标签	说明
`table`	表格容器，用来包含整个表格
`tr`	表格行（table row），每一行的开始标签
`td`	表格单元格（table data cell），每行中的每个单元格

下面给出一个示例。

html 复制代码

<table>
  <tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
  </tr>
  <tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
  </tr>
  <tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
  </tr>
</table>

效果如下：

|---------|---------|---------|
| Content | Content | Content |
| Content | Content | Content |
| Content | Content | Content |

进阶标签如下。

标签	说明
`thead`	表格头部（table head），通常用来放标题行
`tbody`	表格主体（table body），放主要内容行
`tfoot`	表格底部（table foot），放总结或合计行
`th`	表头单元格（table header），通常加粗居中，用于标题

下面给出一个示例。

html 复制代码

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Price</th>
      <th>Available</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>CSS Demystified</td>
      <td>$29</td>
      <td>16</td>
    </tr>
    <tr>
      <td>Mastering JavaScript</td>
      <td>$35</td>
      <td>10</td>
    </tr>
    <tr>
      <td>HTML5: An Introduction</td>
      <td>$15</td>
      <td>6</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td></td>
      <td>32</td>
    </tr>
  </tfoot>
</table>

效果如下：

Title	Price	Available
CSS Demystified	$29	16
Mastering JavaScript	$35	10
HTML5: An Introduction	$15	6

当然它还可以像Excel中的表格一样，进行单元格合并（colspan 和 rowspan），把多个列或行合并为一个单元格。

colspan（列合并）

html 复制代码

<td colspan="2">1</td>

colspan="2" 表示该单元格占用两列

例子中，"1" 占了表格的前两列

合并效果：原本两列的格子变成一个大格子

rowspan（行合并）

html 复制代码

<td rowspan="2">4</td>

rowspan="2" 表示该单元格占用两行

例子中，"4" 占了表格的两行

合并效果：原本上下两行的格子变成一个高格子

下面给出一个示例。

html 复制代码

<table width="200" height="200" border="2" bgcolor="yellow">
  <tr>
    <td colspan="2">1</td>
    <td>3</td>
  </tr>
  <tr>
    <td rowspan="2">4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr bgcolor="red">
    <td>8</td>
    <td>9</td>
  </tr>
</table>

被 colspan/rowspan 合并掉的格子在 HTML 代码里不需要再写，因此这里单元格 "2"和"7" 已被"1"和"4"占据，所以它们被删除。

效果如下：

|---|---|---|
| 1 || 3 |
| 4 | 5 | 6 |
| 4 | 8 | 9 |

1.3.2.5 HTML 插入图片（image）

html 复制代码

<img src="图片路径" alt="替代文字" />

<img> 是自闭合标签（没有 </img>）

src：指定图片路径（本地或网络 URL）

alt：图片无法加载时显示的替代文字，也对屏幕阅读器友好，有利于无障碍访问

下面给出一个示例。

html 复制代码

<img
  class="fit-picture"
  src="/media/cc0-images/grapefruit-slice-332-332.jpg"
  alt="Grapefruit slice atop a pile of other slices"
/>

效果如下：

1.3.2.6 HTML 超链接（hyperlink）

使用 <a> 标签创建可点击的链接。

html 复制代码

<a href="URL">链接文本</a>

<a>：锚点标签，用于创建超链接

href：链接目标地址，可以是网页 URL、邮件地址、电话等

链接文本：用户在网页上看到的可点击文字

下面给出一个示例。

html 复制代码

<p>You can reach Michael at:</p>
<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

效果如下：

You can reach Michael at:

Website
Email
Phone

1.3.2.7 HTML 表单（form）

<form> 标签，用于收集用户输入的数据。

html 复制代码

<form>
  <!-- 表单控件 -->
</form>

<form>：表单容器，表示页面中可以提交信息的区域，用户填写完表单后，可以提交数据到服务器

更多控件：

控件类型	HTML 标签	说明
输入框	`<input>`	单行文本输入，例如邮箱、用户名
文本域	`<textarea>`	多行文本输入
下拉选择	`<select>` + `<option>`	单选或多选下拉菜单
多选框	`<input type="checkbox">`	可以选择多个选项
单选按钮	`<input type="radio">`	同一组中只能选择一个选项
标签	`<label>`	给表单控件添加描述文本，提升可访问性

下面给出一个示例。

html 复制代码

<form>
  <label>Email:</label>
  <input type="email" placeholder="john@example.com">
  
  <label>Textarea:</label>
  <textarea placeholder="Enter some long form content."></textarea>
  
  <label>Select:</label>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>

  <label>Multiselect:</label>
  <select multiple>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
  </select>

  <label>Checkboxes:</label>
  <input type="checkbox">Option 1
  <input type="checkbox">Option 2
  <input type="checkbox">Option 3

  <label>Radio Buttons:</label>
  <input type="radio" name="group1">Option 1
  <input type="radio" name="group1">Option 2
  <input type="radio" name="group1">Option 3
</form>

通过 action 和 method 提交数据

属性	说明
`action`	指定表单提交的目标 URL，例如 `/action_page.php`
`method`	指定 HTTP 请求方法，常用 `GET` 或 `POST`
`<input type="submit">`	提交按钮，点击后发送数据到服务器

下面给出一个示例。

html 复制代码

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>

  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>

  <input type="submit" value="Submit">
</form>

正如前文所述可以给表单提供标签。

<label> 用于给表单控件（如 <input> 或 <textarea>）提供描述文本。

它不仅视觉上标识输入框，还程序上与控件关联，提高可访问性。

当用户点击标签时，浏览器会将焦点自动跳到对应的控件。

下图给出一个示例。

对应的代码如下。

html 复制代码

<form action="">
  <label for="user">Username</label>
  <input type="text" name="user" id="user">

  <input type="submit">
  <input type="reset">
</form>

这里点击 Username 文本，光标自动跳到文本输入框。

1.3.2.7.1 <input> 标签

我们刚刚提到了很多<input> 标签，现在我们说一下这些的类型以及如何使用。

首先，最基础的。

html 复制代码

<input type="类型" name="名称">

<input>：表单输入控件，用于接收用户数据

type：指定输入类型，决定显示样式和验证方式

name：控件的名称，用于提交数据时的 key

常见类型如下。

Input Type	Description
`email`	输入邮箱地址
`tel`	输入电话号码
`url`	输入网址
`search`	搜索框，自动处理换行等
`number`	输入数字（浮点数）
`range`	输入范围，用滑块选择值
`date`	输入日期（年月日）
`datetime`	输入日期和时间（带时区）
`datetime-local`	输入日期和时间（无时区）
`month`	输入月份和年份
`week`	输入第几周
`time`	输入时间（小时分钟秒）
`color`	选择颜色

下图也给出了一些示例。

1.3.2.7.2 <textarea> 标签

刚刚提到<textarea>用于多好文本输入。

html 复制代码

<textarea name="字段名" cols="列数" rows="行数" maxlength="最大长度" placeholder="提示文字" required></textarea>

<textarea>：多行文本输入框

name：表单提交时该控件的名字

cols：文本框宽度（字符数）

rows：文本框高度（行数）

maxlength：可输入的最大字符数

placeholder：默认提示文字

required：必填属性，用户必须填写才能提交

下面给出一个示例。

html 复制代码

<textarea
  name="TA1"
  cols="40"
  rows="8"
  maxlength="100"
  placeholder="type only 100 characters"
  required>
</textarea>

这里是一个名为 TA1 的宽度 40 字符，高度有 8 行，最大输入长度有 100 字符，提示文字为 type only 100 characters，用户必须输入的多行文本框。

1.3.2.7.3 <select> + <option> 基本用法

<select>：创建下拉菜单容器

<option>：每个选项

value：提交表单时的值

标签文本：用户看到的选项

下面给出一个示例。

还可以使用 <optgroup>将 <option> 选项分组，label 属性为该组命名，用户在浏览器看到的下拉菜单，会按组显示，便于选择。

下面给出一个示例。

1.3.2.8 HTML 中的 <iframe> 标签

HTML 中的 <iframe> 标签，用于在网页中嵌入另一个页面。

html 复制代码

<iframe src="页面URL" width="宽度" height="高度" frameborder="边框"></iframe>

src：被嵌入的页面 URL

width、height：设置 iframe 的宽度和高度

frameborder：边框粗细（一般 0 表示无边框）

下面给出一个示例。

html 复制代码

<iframe src="https://www.xjtl.edu.cn" frameborder="3" width="1024" height="400"></iframe>
<br>
<iframe src="https://www.bing.com" frameborder="3" width="1024" height="400"></iframe>

2. CSS

HTML 是标记语言（Markup Language），负责网页的内容和结构。

HTML 就像汽车的骨架或轮廓，它决定了网页上有哪些元素，但不涉及样式或颜色。

CSS 是样式语言（Design Language），负责控制网页的视觉效果，包括颜色、字体、布局等。

CSS 就像汽车的外观和颜色，它让网页内容更美观、可视化和易读。

下面的表格总结了两者的区别。

技术	作用	比喻
HTML	定义网页内容和结构	汽车的骨架/轮廓
CSS	定义网页样式和美观	汽车的外观和颜色

2.1 CSS2 与 CSS3 的区别

CSS2：

普通样式（Normal Styling）：只能定义基本颜色、字体、边框等
单设备适配（For Single Device）：不支持响应式布局
无动画和过渡效果（No Transitions & Animations）
无阴影效果（No Shadows）
不支持嵌入字体（No Embedded Fonts）

CSS3

更好的样式（Better Styling）：可以定义更丰富的样式
过渡和动画效果（New Transitions & Animations）
阴影效果（Shadows）
响应式布局（Responsive Layouts）：可以适配不同屏幕
嵌入字体（Embedded Fonts）：可以使用自定义字体

总结如下。

CSS版本	功能特点
CSS2	基本样式，单设备，不支持动画、阴影、嵌入字体
CSS3	丰富样式、动画、阴影、响应式布局、支持嵌入字体

因此 CSS3 是主流的版本。

2.2 CSS 盒子模型(Box Model)

相关参考资料：CSS 盒子模型快速介绍
 CSS 盒子模型教学

在 CSS 中，每个 HTML 元素都可以看作一个矩形盒子，盒子由以下几层组成（从里到外）：

Content（内容）

元素的实际内容，例如文字、图片等。
宽度和高度由 width 和 height 决定。

Padding（内边距）

内容和边框之间的空白区域。
由 padding-top、padding-right、padding-bottom、padding-left 设置。
背景色和背景图片会显示在 padding 区域。

Border（边框）

围绕内容和 padding 的边框。
由 border-width、border-style、border-color 设置。

Margin（外边距）

元素与其他元素之间的距离。
由 margin-top、margin-right、margin-bottom、margin-left 设置。
外边距是透明的，不会显示背景色或图片。

这张图主要说明了背景问题。
背景色和背景图可以应用在 content + padding + border 区域。
背景图尺寸上：
盒子比图片大 → 可以设置 repeat-x / repeat-y 平铺
盒子比图片小 → 显示部分图片

背景的重复和位置可通过 background-repeat、background-position 调整。

2.3 CSS 语法

一个 CSS 规则（rule）主要由三部分组成：

css 复制代码

selector {
    property: value;
    property: value;
    ...
}

Selector（选择器）
用来选中 HTML 元素。
例子：
a → 选中所有 <a> 标签
.my-class → 选中 class 为 my-class 的元素
#my-id → 选中 id 为 my-id 的元素
Declaration（声明）
用 {} 包起来的一组样式属性和值。
每个声明都是 property: value; 的形式。
Property（属性）
定义你想要改变的样式方面。
例子：
color → 文字颜色
background-color → 背景颜色
font-size → 字体大小
Value（值）
给属性设定具体的样式。
例子：
red → 颜色红色
1.2rem → 字体大小
yellow → 背景颜色黄色
Declaration Separator（声明分隔符）
每条声明用分号 ; 结束，表示该条样式结束。
可以在一行写多条声明，也可以多行写，便于阅读。

2.4 给网页设置 CSS 样式的四种方式

2.4.1 Inline CSS（内联样式）

把样式直接写在 HTML 标签里：

html 复制代码

<p style="color: blue;">This is a paragraph.</p>

这里只给这一个 <p> 生效。

这样写法简单，但不方便复用，也不好维护。

2.4.2 Internal CSS（内部样式）

把 CSS 写在当前 HTML 文件的 <head> 里的 <style> 标签中：

html 复制代码

<head>
  <style>
    body { background-color: blue; }
    p { color: yellow; }
  </style>
</head>

这里样式只对这个网页有效。

这样写法适合单个页面测试或小页面。

2.4.3 External CSS（外部样式）

把样式写到单独的 .css 文件里，再在 HTML 中引用：

html 复制代码

<head>
  <link rel="stylesheet" href="style.css">
</head>

样式写在独立文件中，这样多个网页都可以共用。

这是最常用、最推荐的方式。

2.4.4 @import

在 CSS 或 <style> 中导入另一个 CSS 文件：

CSS：

css 复制代码

@import url("style.css");

HTML <style>：

html 复制代码

<style>
  @import url("style.css");
</style>

但现在一般更推荐用 <link>，因为性能和加载方式通常更好

2.5 CSS 选择器（selector）

CSS 选择器是把样式和 HTML 元素连接起来的工具。

HTML 页面里的所有标签，会组成一棵树状结构，叫 DOM 树。

选择器负责找到 DOM 树中的元素，再把样式加到这些元素上。

所以整个流程是：

HTML 元素 → 选择器选中 → 应用 CSS 样式 → 显示成有样式的页面

同一个 HTML 元素，可以同时被多条 CSS 规则影响。

样式优先级大致是：Inline style （行内样式）> Internal CSS（内部样式） > External CSS （外部样式）> Browser default styles（浏览器默认样式）

2.5.1 常见 CSS 选择器（selector）

2.5.1.1 .class

示例：

css 复制代码

.intro

这里意思是选中所有 class="intro" 的元素。

例如：

html 复制代码

<p class="intro">你好</p>
<div class="intro">世界</div>

这两个都会被选中。

2.5.1.2 #id

示例：

css 复制代码

#firstname

这里意思是选中 id="firstname" 的那个元素。

例如：

html 复制代码

<input id="firstname">

通常 id 应该是唯一的，所以一般只选中一个元素。

2.5.1.3 *

示例：

css 复制代码

这里意思是选中所有元素。

例如：

css 复制代码

* {
  margin: 0;
}

这里表示页面上所有元素的外边距都设为 0。

2.5.1.4 element

示例：

css 复制代码

这里意思是选中所有 <p> 元素

例如：

css 复制代码

p {
  color: blue;
}

这里所有段落文字都会变蓝。

2.5.1.5 element, element

示例：

css 复制代码

div, p

这里意思是选中所有 <div> 和所有 <p> 元素

例如：

css 复制代码

div, p {
  color: red;
}

这里所有 div 和 p 都变红。

2.5.1.6 element element（后代选择器）

示例：

css 复制代码

div p

这里意思是选中所有在 <div> 里面的 <p> 元素

例如：

html 复制代码

<div>
  <p>会被选中</p>
</div>

<p>不会被选中</p>

这里只有 div 里面的 p 会被选中。

2.5.1.7 element > element （子选择器）

示例：

css 复制代码

div > p

这里意思是选中父元素是 <div> 的 <p>，也就是直接子元素

例如：

html 复制代码

<div>
  <p>会被选中</p>
  <section>
    <p>不会被选中</p>
  </section>
</div>

因为第二个 p 不是 div 的直接子元素。

2.5.1.8 element + element（相邻兄弟选择器）

示例：

css 复制代码

div + p

这里意思是选中紧挨在 <div> 后面的第一个 <p> 元素

例如：

html 复制代码

<div></div>
<p>会被选中</p>
<p>不会被选中</p>

只有第一个紧跟在 div 后面的 p 会被选中。

2.5.1.8 element ~ element（通用兄弟选择器）

示例：

css 复制代码

div ~ p {}

这里意思是选中在 <div> 后面的所有同级的 <p> 元素

例如：

html 复制代码

<style>
div ~ p {
  color: red;
}
</style>

<div></div>
<p>会被选中</p>
<p>也会被选中</p>
<span>我不会被选中</span>
<p>我还是会被选中</p>

第一个 p 会被选中，第二个 p 也会被选中，第三个 p 我还是会被选中。

不会选中 div 自己，span 因为它不是 p。

2.5.1.9 复杂情况

复杂 CSS 选择器会根据 DOM 的层级关系、兄弟关系、id、class 等条件，精确选中不同的 HTML 元素；看起来差一个空格、一个 >、一个 +，实际选中的元素可能完全不同。

最终到底哪些元素会生效，最好自己运行代码试一下。

上图的代码的对应选择结果就在代码附近，可以自己再尝试一下以巩固这里的知识点。

2.6 CSS 的颜色设计

显示器通过大量像素来成像，而每个像素由红、绿、蓝子像素组成；通过调节 RGB 亮度和不同色域标准，屏幕就能显示出不同的颜色和画面。

色深决定每个颜色通道（R、G、B）可以分多少个亮度等级。每个通道的 bit 越高，可表示的层次越多，颜色过渡就越细腻。

因此随着显示技术的升级，网页设计也需要遵循主流显示分辨率。

同一种颜色，在 CSS 中可以用颜色名、十六进制、RGB 来表示。

CSS 颜色教学

2.7 CSS 中常用的单位（units）

2.7.1 绝对单位（Absolute）

绝对单位有固定大小，不依赖父元素或屏幕尺寸。

px → 像素

例如：

css 复制代码

font-size: 12px;

字体大小是 12 像素。这是网页里最常用的单位之一。

cm → 厘米

mm → 毫米

in → 英寸

pt → 点

例如：

css 复制代码

font-size: 12pt;

通常更常见于打印或排版，不是网页中最常用的。

pc → 派卡

2.7.2 相对单位（Relative）

相对单位不是固定值，而是相对于某个参照物来计算。

% → 百分比

em → 相对于父元素的字体大小

例如：

css 复制代码

font-size: 2em;

这表示当前元素大小是参考字体大小的 2 倍

例如如果当前基准字体是 16px，那：

css 复制代码

font-size: 2em;

就大约等于：

css 复制代码

font-size: 32px;

但要注意：em 常常会受到父元素字体大小影响。

rem → 相对于根元素 <html> 的字体大小

ex → 相对于当前字体中小写字母 x 的高度

ch → 相对于当前字体中数字 0 的宽度

vw → 视口宽度（viewport width）的 1%

vh → 视口高度（viewport height）的 1%

vmax → 视口宽和高里，较大那个的 1%

vmin → 视口宽和高里，较小那个的 1%

2.7.2.1 %，em 和 rem 的区别

em：相对于父元素的字体大小计算

rem：相对于根元素 <html> 的字体大小计算

因此左边：

HTML font-size = 10px

BODY font-size = 1.4em = 14px

DIV font-size = 1.2em = 16.8px

因此右边：

HTML font-size = 10px

BODY font-size = 1.4rem = 14px

DIV font-size = 1.2rem = 12px

2.8 响应式网页设计（Responsive Web Design）

不同设备的屏幕尺寸、分辨率和显示方向不一样，所以网页设计要适配不同显示器。

同一个网站内容，在不同设备上要用不同的排版和样式来适配屏幕大小。

2.9 CSS 字体（font）

font 简写属性

css 复制代码

font: italic small-caps bold 34px/100px "Times New Roman", Times, serif;

这里：

italic → 字体样式（style，斜体）

small-caps → 字体变体（variant，小型大写）

bold → 字重（weight，粗体）

34px → 字号（size）

100px → 行高（line-height）

"Times New Roman", Times, serif → 字体族（family）

style / variant / weight 要写在前面

size 和 family 是关键部分

family 必须放最后

如果写了 line-height，要用 / 连接，例如：

css 复制代码

font: 16px/24px Arial, sans-serif;

2.9.1 文字的对齐方式

CSS 写法	中文意思	效果说明	常见情况
`text-align: start;`	起始方向对齐	按文字书写起始方向对齐。中文、英文通常是左对齐	适合多语言页面
`text-align: end;`	结束方向对齐	按文字书写结束方向对齐。中文、英文通常是右对齐	适合多语言页面
`text-align: left;`	左对齐	文字靠左边排列	最常见
`text-align: right;`	右对齐	文字靠右边排列	数字、特殊排版时常见
`text-align: center;`	居中对齐	文字显示在中间	标题、按钮文字常见
`text-align: justify;`	两端对齐	每行文字左右两边都尽量对齐，最后一行通常除外	文章、新闻排版
`text-align: justify-all;`	全部两端对齐	连最后一行也尽量两端对齐	不太常用
`text-align: match-parent;`	匹配父元素	跟父元素的对齐方式一致	继承父级样式时用

text-align: start;

在从左到右的语言里，通常等于左对齐。在从右到左的语言里，通常等于右对齐。

text-align: end;

在从左到右语言里，通常等于右对齐。在从右到左语言里，通常等于左对齐。

2.9.2 给超链接 <a> 设置不同状态下的样式

写法	中文意思	什么时候出现
`a:link`	未访问链接	还没点过这个链接
`a:visited`	已访问链接	点过链接后再回到页面
`a:hover`	鼠标悬停	鼠标移到链接上面时
`a:active`	正在点击	鼠标按下链接的一瞬间

下图给出了一个示例。

对应的代码如下。

html 复制代码

<style>
a:link {
  color: red;
}

a:visited {
  color: green;
}

a:hover {
  color: blue;
}

a:active {
  color: orange;
}
</style>

<a href="https://www.google.com">Link to Google</a>

2.10 CSS display

display 决定元素以什么方式排布、占不占一整行、能不能设置宽高、是否显示。

值	中文意思	效果
`block`	块级元素	独占一行，从上到下排列
`inline`	行内元素	不独占一行，和其他元素排在同一行
`inline-block`	行内块元素	可以同一行排列，同时又能设置宽高
`none`	不显示	元素直接隐藏，不占空间

如下图所示。

2.11 CSS position

position 决定元素在页面中的定位方式。

值	中文意思	效果
`static`	静态定位	默认位置，按正常文档流排列
`relative`	相对定位	相对自己原来的位置移动
`absolute`	绝对定位	相对最近的已定位父元素定位
`fixed`	固定定位	相对浏览器窗口固定，不随页面滚动
`sticky`	粘性定位	平时正常，滚动到某位置后"粘住"

如下图所示。

CAN302 电子商务技术 Pt.2 深入了解HTML和CSS

文章目录

1. HTML

1.1 HTML 发展史

1.2 HTML 属性（HTML attributes）

1.3 HTTP 头 和 HTML 头

1.3.1 HTML <head>

1.3.2 HTML <body>

1.3.2.1 HTML 中段落和文本标签

1.3.2.2 HTML 段落内文本修饰标签（inline text tags）

1.3.2.3 HTML 列表（list）

1.3.2.4 HTML 表格（table）

1.3.2.5 HTML 插入图片（image）

1.3.2.6 HTML 超链接（hyperlink）

1.3.2.7 HTML 表单（form）

1.3.2.7.1 <input> 标签

1.3.2.7.2 <textarea> 标签

1.3.2.7.3 <select> + <option> 基本用法

1.3.2.8 HTML 中的 <iframe> 标签

2. CSS

2.1 CSS2 与 CSS3 的区别

2.2 CSS 盒子模型(Box Model)

2.3 CSS 语法

2.4 给网页设置 CSS 样式的四种方式

2.4.1 Inline CSS（内联样式）

2.4.2 Internal CSS（内部样式）

2.4.3 External CSS（外部样式）

2.4.4 @import

2.5 CSS 选择器（selector）

2.5.1 常见 CSS 选择器（selector）

2.5.1.1 .class

2.5.1.2 #id

2.5.1.3 *

2.5.1.4 element

2.5.1.5 element, element

2.5.1.6 element element（后代选择器）

2.5.1.7 element > element （子选择器）

2.5.1.8 element + element（相邻兄弟选择器）

2.5.1.8 element ~ element（通用兄弟选择器）

2.5.1.9 复杂情况

2.6 CSS 的颜色设计

2.7 CSS 中常用的单位（units）

2.7.1 绝对单位（Absolute）

2.7.2 相对单位（Relative）

2.7.2.1 %，em 和 rem 的区别

2.8 响应式网页设计（Responsive Web Design）

2.9 CSS 字体（font）

2.9.1 文字的对齐方式

2.9.2 给超链接 <a> 设置不同状态下的样式

2.10 CSS display

2.11 CSS position

1.3 HTTP 头和 HTML 头