learningnotes_htmlcss_1

发表于 2023-08-04 本文字数： 10k 阅读时长 ≈ 36 分钟

[TOC]

HTML & CSS

1 HTML 基础

前排提醒：这里的 “元素” 也可以叫做“标签”

1.1 标题元素

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

上述这六个元素叫做 “标题” (heading).

通常来说，h1 标签用来作主标题，h2 标签用来作副标题.

例子：

<h1>我是 h1</h1>
<h2>我是 h2</h2>
<h3>我是 h3</h3>
<h4>我是 h4</h4>
<h5>我是 h5</h5>
<h6>我是 h6</h6>

alt

1.2 段落元素

<p></p>

上述这个元素叫做 “段落” (paragraph). 网站上的段落一般由这个标签来定义。

例子（请按键盘上的 F12 键，在元素选项卡下查看内容，如果不知道在哪里的点左上角按钮，鼠标移到这个元素并点击）：

HTML 段落是通过标签 p 来定义的。

1.3 HTML 元素的注释

Ctrl + /

这个在编辑器中可以注释。

1	<!-- 我是注释 (Comment) -->

这个在 HTML 元素中叫做 “注释”.
“注释” 可以给代码添加说明，以方便查看；也可以直接把无用的代码注释掉以失去其作用，加快加载速度。

1.4 HTML5 的常用结构元素

<header></header>
<main>

<section></section>

</main>
<footer></footer>

上述元素通常定义了头部、主体、以及尾部.

section 元素通常定义了主体的某个部分.

1	<nav></nav>

这个元素通常定义了导航链接部分.

1
2
3

<article></article>
<audio></audio>
<video></video>

article 元素通常定义独立的内容；audio 定义了音频内容；video 定义了视频内容······

1.5 图片元素

1	<img></img>

给 html 内容添加图片，需要用到 img 元素.
img 元素必须设置 alt 属性和 src 属性，其中 alt 属性是用来设置当图片加载失败时的替代文字（这个内容也可设置为 “空”; 不允许设置特殊字符）；src 属性设置图片的地址路径（本地 or 网络）.

关于路径的说明：

路径可以有好多种，最常见的有三种：

1
2
3

（1）folder/..... 直接在当前目录下查找的路径
（2）./folder/...... 作用与（1）相同，更偏向于相对路径
（3）../folder/..... 返回上一级查找的路径，相对路径

路径也可以适用于接下来的跳转元素。

1.6 跳转元素

<a></a>

给 html 内容添加超链接跳转，需要用到 a 元素.

a 元素必须设置 href 属性，这里的 href 属性是设置用于跳转到的地址路径（本地 or 网络），可直接设置占位符 “#”;
target 属性，又称“锚点”属性，规定了在哪里打开（新选项卡/窗口、在当前选项卡/窗口内、······）；
注意在设置好页面内跳转后，target 属性最好不要设置！（因为设置完页面跳转在设置 target 属性后，网页可能会在新窗口重载，可能会影响网页浏览体验）

1.7 基本的元素嵌套

html 元素是可以嵌套的．

以基本的 p 标签嵌套 a 标签为例.
例子（请按键盘上的 F12 键，在元素选项卡下查看内容，如果不知道在哪里的点左上角按钮，鼠标移到这个元素并点击）：

什么是好引诱？好玩的引诱，就是好引诱

再以 a 标签嵌套 img 标签为例. 这里我们给图片添加超链接跳转到 “https://www.baidu.com“
例子（请按键盘上的 F12 键，在元素选项卡下查看内容，如果不知道在哪里的点左上角按钮，鼠标移到这个元素并点击）：

1.8 简单的有序列表和无序列表

<ul>
    <li>1</li>
    <li>2</li>
</ul>

如上为一个简单的无序列表. 使用到 ul 标签.

效果（请按键盘上的 F12 键，在元素选项卡下查看内容，如果不知道在哪里的点左上角按钮，鼠标移到这个元素并点击）：

<ol>
    <li>西瓜</li>
    <li>橙子</li>
</ol>

如上为一个简单的有序列表. 使用到 ul 标签.

效果（请按键盘上的 F12 键，在元素选项卡下查看内容，如果不知道在哪里的点左上角按钮，鼠标移到这个元素并点击）：

西瓜
橙子

可以看到，无序列表用的是粗体黑点进行标记的；而有序列表则用的是数字进行标记的.

1.9 强调文本标签

<em></em>

em 标签作强调文本的作用，在文档流中表示为 ”斜体“。
示例（请按键盘上的 F12 键，在元素选项卡下查看内容，如果不知道在哪里的点左上角按钮，鼠标移到这个元素并点击）：

This is a strong text.

1	<strong></strong>

strong 标签作强调文本的作用，在文档流中表示为 ”粗体“。
示例（请按键盘上的 F12 键，在元素选项卡下查看内容，如果不知道在哪里的点左上角按钮，鼠标移到这个元素并点击）：

This is a strong text.

1.10 输入框

1	<input type="text">

使用 input 标签，类型为 text，即可创建一个文本框。
输入框只是 input 其中一个作用而已，后面在叙述。

1	<input type="text" placeholder="placeholder">

placeholder 属性可以给文本框设置占位符，一般用作文本框的提示。

示例（请按键盘上的 F12 键，在元素选项卡下查看内容，如果不知道在哪里的点左上角按钮，鼠标移到这个元素并点击）：

1.11 表单 form

html 部分中，表单 form 标签是其中比较重要的标签。

1	<form></form>

上面的 form 标签是整个表单的 “外壳”，表单的输入、提交等操作都要包含在这个外壳里面。

1	<form action="#url"></form>

action 属性就是对网络地址（也可以是本地地址）当中的某一文件进行操作。

1	<input type="text" placeholder="placeholder" required>

之前简单提了以下 input 当中的输入框，这里再加一个属性那就是 required ，这个属性在表单中很常见，通常作为表单当中的必填项会使用到这个属性。

接下来给表单添加一个标签

1	<button type="submit"></button>

上面的按钮标签带了一个属性，类型为 submit ，表示点击了这个按钮标签之后，会执行提交表单的操作，具体操作的目标地址就是表单当中所定义的 action 属性。

1	<input type="submit">

这个 input 当中的提交按钮和上面的提交按钮操作都是一样的。

接下来在添加一组单选按钮：

1 2	<input type="radio">Option1 <input type="radio">Option2

input 标签当中的 radio 类型定义的是单选按钮，是选择框的一种。
当我们想只选一个选项时，必须要设置 name 和 id 属性（一组单选按钮的 name 必须一致）：

1 2	<input type="radio" name="single_select" id="option1">Option1 <input type="radio" name="single_select" id="option2">Option2

这样就可以只选一个选项了。

当然这不是单选按钮的结束，我们要在每一个单选按钮再套一层：

<label for="option1">
    <input type="radio" name="single_select" id="option1">Option1
</label>
<label for="option2">
    <input type="radio" name="single_select" id="option2">Option2
</label>

这样就可以确保这些单选按钮不会被其他组的单选按钮混淆了。

在提交的时候，如果单选按钮已经勾选了一个，会在提交后显示 url?name=on 。为了不让它只显示一个 “on”，我们需要设置 value 属性，值就设置为与 id 属性值一样的即可。

<label for="option1">
    <input type="radio" name="single_select" id="option1" value="option1">Option1
</label>
<label for="option2">
    <input type="radio" name="single_select" id="option2" value="option2">Option2
</label>

这样提交后会显示 url?name={value}，表单提交给后端程序的时候会更直观，后面设置的多选按钮也是同样道理。

1
2
3

<fieldset>
    <legend>Title</legend> 
</fieldset>

上面的标签：
fieldset 标签：用来给标签设置边框。
legend 标签：用来给 fieldset 标签设置标题。

这两个标签建议结合起来使用，一般是一个 fieldset 标签嵌套一个 legend 标签。

再把上面的单选按钮组合标签嵌入到 fieldset 标签当中，这样表单的形式会更加美观一些。

接下来我们添加一个 fieldset 标签，标签里添加一个 legend 标题标签，标题为 “multi_checkbox”，然后加入下面的多选按钮，结合起来就像这样。

<fieldset>
    <legend>multi_checkbox</legend>
    <label for="multi_option1">
        <input type="checkbox" name="multi_select" id="multi_option1" value="multioption1">Option1
    </label>
    <label for="multi_option2">
        <input type="checkbox" name="multi_select" id="multi_option2" value="multioption2">Option2
    </label>
</fieldset>

在这串代码中，input 当中的 checkbox 类型定义了一个多选框，是选择框的另一种类型。

接下来，我们设置选择框的默认选中项

1 2	<input type="checkbox" name="multi_select" id="multi_option1" value="multioption1" checked>Option1 <input type="radio" name="single_select" id="option1" value="option1" checked>Option1

这里的 checked 表示被选中，可以给表单设置 checked 代表默认选中项。这里需要说明的是，checked 并不是无值属性，后面通常隐藏了布尔值 true 或 false.

这里一个基本的 HTML 表单就做好了，更详细的细节到后面再叙述。

例子（请按键盘上的 F12 键，在元素选项卡下查看内容，如果不知道在哪里的点左上角按钮，鼠标移到这个元素并点击）：

1.12 Head 头部标签

通常情况下，一个 HTML 代码包括以下部分：

<html>
<head>

</head>
<body>

</body>
</html>

一个是 head 头部标签，一个是 HTML 内容主体。
之前我们把基本的 body 部分叙述完了，现在再回过头来看看 head 头部标签。
一个基本的 HTML 内容头部代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

第一行是 HTML DOCTYPE 声明，现在的 HTML 绝大多数都是 HTML5 版本，所以用 <!DOCTYPE html> 标识即可，当然上一个 HTML4 版本还是用的是 <!DOCTYPE> 这个声明。
第二行 lang 属性制定了网页元素的语言，可以不填。
第三行为 head 主体：
第四行定义了字符集，一般字符集为 UTF-8
第五行定义了标题，比如上述代码中，网页的标题是 Title
第六行为 head 标签的结束符号。

还有更复杂的头部代码，这里以 Visual Studio Code 提供的默认头部代码为例（这个代码已经很简单了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
......

其中这两行：

1 2	<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

第一行为 IE 8 浏览器的默认兼容模式（IE 8 浏览器专用），内容为 IE=edge, 意思是 IE 8/9/11/… 浏览器将以 IE 最高版本的内核去渲染页面，在这里的意思是 IE 将使用最新版的 IE 11 浏览器的内核来渲染页面。

第二行为视口属性，移动端浏览器专用属性，作用是让移动端浏览器的视口宽度即为设备浏览器窗口的默认宽度。

（到后期浏览器适配开发的时候会用到这两个属性，这里稍微提一提）

1.13 进入 CSS 之前：两个基础的元素

在进入 CSS 基础之前，我们先认识两个基础的元素，这两个元素对后面的 CSS 样式布局及之后的响应式网页开发具有很重要的作用。

1 2	<div></div> <span></span>

1.13.1 `<div>` 元素

div 元素，我们称之为块元素。默认情况下独占一行。

注意，div 元素作为块元素，默认具有宽高属性。

宽度：就是浏览器窗口的长度

高度：就是指定大小的字体的高度

1.13.2 `<span>` 元素

span 元素，我们称之为行元素。默认情况下不独占一行。

注意，span 元素作为行元素，并没有宽高属性。 只有将其转为块元素才能具有宽高属性。

1.13.3 举个栗子.jpg

（请按键盘上的 F12 键，在元素选项卡下查看内容，如果不知道在哪里的点左上角按钮，鼠标移到这个元素并点击）：

div 示例

span 示例

1.14 进入 CSS 之前：两个重要的属性

我们还需要认识两个重要的 html 属性：class 属性和 id 属性。

1 2	<element class=''></element> <element id=''></element>

关于 class 属性和 id 属性的说明

1
2

class: 在 html 任何元素内插入的属性。格式为：class='value1'；该属性在已经赋予值的情况下可以使用多次。
id：在 html 任何元素内插入的属性。格式为：id='value2'；该属性在已经赋予值的情况下只能使用一次，简单来说，这个属性是独一无二的。

1.15 HTML5 新特性

1	<figure></figure>

figure 标签是 HTML5 的新特性，作用是规定了独立的流内容（图像、图表、照片、代码等等）。在文档流设置这个标签应该与主内容相关，但标签位置相对主内容独立。

要求删除后，不能对文档流产生影响。

1	<figcaption></figcaption>

figcaption 标签用来给上述的 figure 标签设置标题。位置应该放在 figure 标签的首或尾。

2 CSS 基础

2.1 从标签里添加 style 属性开始。

前排提醒，涉及到的 css 效果请按 F12 查看。

如果你有前端编辑器的话，可以先创建一个 html 文件，一般来说，在创建完 html 文件之后，会同时在文件中嵌入模板，就像这样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

接下来在 body 部分写几个 div 标签。

1	<div class="css_example1">这是 CSS 示例 1</div>

这是 CSS 示例 1

首先，我们先从修改文本颜色开始：在标签内添加 style 属性，值为 color: red （可以修改成你喜欢的颜色），然后再看看效果：

1	<div class="css_example1" style="color: blue">这是 CSS 示例 1</div>

这是 CSS 示例 1

可以看到，文本已经变成蓝色了。
需要注意，style 里面的值如果有多个，要用逗号隔开。

2.2 在 HTML 文档内写 CSS 样式

之前，我们使用在标签内写 style 属性来改变 css 样式。现在，我们引入另一种方式编写 CSS 样式，就是在头部标签内的 <style> 标签。

标签的位置：

<head>
......
<style>

</style>
</head>

现在，我们要把之前在 style 属性定义的 CSS 样式搬到 <style> 代码块内。
先在 style 代码块内输入标签名 div，后面接个大括号，紧接着在下一行写 CSS 样式 color:blue，最后再把之前在 style 属性定义的 CSS 样式删除，再查看效果。

<style>
      .css_example1{
          color: blue;
      }
</style>

<body>
    <div class="css_example1">这是 CSS 示例 1</div>
</body>

最后效果和 2.1 节示例输出的结果一样，这里就不展示了。

CSS 示例 1

2.3 基本的 CSS 元素选择器

最常见的 CSS 选择器有 3 种：标签名选择器、class 选择器以及 id 选择器。

还是之前那个标签

1	<div class="css_example1" id="css_example1">这是 CSS 示例 1</div>

标签名选择器

<style>
    div {
        color: blue;
    }
</style>

应用范围：标签名为 div 的所有标签，现在不常用

class 选择器

<style>
    .css_example1 {
        color: blue;
    }
</style>

应用范围：类名为 css_example1 的所有标签。

id 选择器

<style>
    #css_example1 {
        color: blue;
    }
</style>

应用范围：id 为 css_example1 的标签（不是所有标签，id 是独一无二的）

2.4 基本的 CSS 样式

2.4.1 字体

设置字体大小用 font-size 属性

1	<div class="css_example2" id="css_example2" style="font-size: 45px">这是 CSS 示例 2</div>

这是 CSS 示例 2

设置字体家族名用 font-family 属性

1	<div class="css_example2" id="css_example2" style="font-family: monospace">这是 CSS 示例 2</div>

这是 CSS 示例 2

有时候 html 内置的字体不能满足我们的要求，所以我们可以引入字体库，这里以引入 Google 字体库为例，使用 link href 引入：

1	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

就可以引入字体了：

1	<div class="css_example2" id="css_example2" style="font-family: Lobster">这是 CSS 示例 2</div>

这是 CSS 示例 2

可以看到 CSS 和数字 2 的字体已经改变了（Lobster 字体不支持中文，所以默认用了微软雅黑）

font-family 属性可以设置一个以上的字体家族，当第一个字体不能使用时，就会使用第二个字体作为备用。

设置字体的粗细，可以使用 font-weight 属性。

属性值只需记住 100 400 700 900 或者 lighter normal bold bolder 这两组值即可，因为这两组值是相互对应的：

100 => lighter  字体细体
400 => normal   字体正常体，默认使用此值。
700 => bold     字体粗体
900 => bolder   字体粗体与 700/bold 一样，但是附加了语气加粗的意思

例如

<div class="css_example2" style="font-weight: 100">这是 CSS 示例 2</div>
<div class="css_example2" style="font-weight: 400">这是 CSS 示例 2</div>
<div class="css_example2" style="font-weight: 700">这是 CSS 示例 2</div>
<div class="css_example2" style="font-weight: 900">这是 CSS 示例 2</div>

效果如下：

这是 CSS 示例 2

2.4.2 文本

设置文本对齐用 text-align 属性，其中 center 居中，left 左对齐，right 右对齐

1	<div class="css_example3" id="css_example3" style="text-align: center">这是 CSS 示例 3</div>

这是 CSS 示例 3

1	<div class="css_example3" id="css_example3" style="text-align: right">这是 CSS 示例 3</div>

这是 CSS 示例 3

2.4.3 元素大小

我们可以简单通过 width 和 height 属性来设置元素的大小。

1	<div class="css_example4" id="css_example4" style="background-color:blue; width: 200px; height: 15px"></div>

1	<div class="css_example4" id="css_example4" style="background-color:blue; width: 15px; height: 300px"></div>

2.4.4 元素边框

border-color 、border-width、border-style 是元素边框的三个基本属性。

1	<div class="css_example5" id="css_example5" style="background-color:yellow; width: 50px; height: 50px; border-color: red; border-width: 5px; border-style: solid"></div>

其中 border-color 属性设置边框的颜色， border-width 属性设置边框的宽度， border-style 属性设置边框的样式（最常用的就是实线 solid和虚线dashed）

这三个属性可以直接写在一行：border: {border-color} {border-width} {border-style}

有时我们不能满足于方方正正的边框，我们想要一个圆滑的边框，所以这里我们引入了 border-radius 这个属性，这个属性是用来设置边框的弧度使得边框更圆滑，例如我们给上面的边框设置弧度为 8px

1	<div class="css_example5" id="css_example5" style="background-color:yellow; width: 50px; height: 50px;border: red 5px solid; border-radius: 8px"></div>

如上图所示，设置了 border-radius 属性后，边框就变得相对圆滑了一些。也可以利用这个属性把当前元素变成一个圆。只需给 border-radius 设置百分比（圆形一般是 50%）即可。

1	<div class="css_example5" id="css_example5" style="background-color:yellow; width: 50px; height: 50px;border: red 5px solid; border-radius: 50%"></div>

2.4.5 元素的颜色

在 CSS 中，设置元素的背景色，需要用到 background-color 或 background 属性（background 属性应用会更广泛，可以接参数等；background-color 更多的是单一的设置背景色）

1	<div class="css_example6" id="css_example6" style="background-color:yellow; width: 200px; height: 60px;">beijingse</div>

beijingse

设置文字的颜色则用到 color 属性：

1	<div class="css_example6" id="css_example6" style="background-color:yellow; width: 200px; height: 60px;color: red">beijingse</div>

beijingse

2.4.6 内边距与外边距

首先我们打开浏览器，随便打开一个网页。按下 F12 键，在弹出的开发者工具中，找到 ”样式“ ，翻到最底下，就会看到下面的样式结构

可以看到，HTML 当中所占有的矩形空间除了内容本体，还包括三个重要的属性：padding 内边距、border 边框、还有 margin 外边距。

之前提到了元素的边框，它在 HTML 的矩形空间中，位于从内边距向外数起的第二层，也就是中间层。

接下来会介绍内容与边框之间的两个非常重要的属性：padding 内边距和 margin 外边距。

2.4.6.1 padding 内边距

padding 内边距，用来控制内容本体与边框 border 之间的空隙大小

注意下面添加 padding 属性前后的变化

1	<div style="background-color: cornflowerblue; width: 300px;height: 300px; border: 6px red solid; display: inline-block">block1</div>

block1

1	<div style="background-color: cornflowerblue; width: 300px;height: 300px; border: 6px red solid; display: inline-block; padding: 30px">block1</div>

block1

可以看到，在添加 padding 属性之前，文字内容牢牢定在左上角，与边框贴得死死的；

添加了 padding 属性之后，文字内容已经不是牢牢定在左上角了，而是与左上角的红色边框拉开了距离。

而内容与红色边框之间的直线距离，就是我们之前设置的 padding 属性的值，为 30px.

在整个设置了 padding 属性的过程中，我们发现，HTML 所占用的矩形空间并没有发生变化！

所以，设置了 padding 属性后，在内容与边框拉开了距离的同时，也会造成内容本身的挤压！

当然， padding 属性设置之后，即为四个方向设置了内边距。我们也可以对单独的一个或两个方向设置内边距。

这里也忘记说明几个方向的参数属性，这里补充说明一下

top 元素的顶部
bottom 元素的底部
left 元素的左边
right 元素的右边
top-left 元素的左上角
top-right 元素的右上角
bottom-left 元素的左下角
bottom-right 元素的右下角

top-bottom 元素的顶部和底部
left-right 元素的左边和右边

设置了单独的方向属性之后，只对内容作特定方向的挤压。建议在设置单独方向的内边距时，在内容本体的不同方向添加文字（可以设置浮动和对齐等。具体方法可以百度）以测试效果。

2.4.6.2 margin 外边距

margin 外边距，用来控制一个元素边框与另一个元素的外边距 margin 之间的空隙大小

注意下面添加 margin 属性前后的变化

1	<div style="background-color: cornflowerblue; width: 300px;height: 300px; border: 6px red solid; display: inline-block;">block1</div>

block1

1	<div style="background-color: cornflowerblue; width: 300px;height: 300px; border: 6px red solid; display: inline-block;margin: 40px">block1</div>

block1

可以看到：

在设置 margin 属性之前，元素边框外面是没有空闲空间的；

在设置 margin 属性之后，元素边框外面多出来一块空白的空间。

这部分空白的空间，就是我们之前设置的 margin 属性的值，为 40px.

在整个设置 margin 属性的过程中，我们发现，HTML 元素所占用的矩形空间明显变大了。以边长（包括边框）的 1/2 为半径做一个圆；在另外以边长（包括边框和空白空间到标签窗口边的差值，即外边距）的 1/2 为半径做一个圆。会发现，这两个圆的面积也明显不同，后者的圆面积比前面的圆大 2*pi*R*r + pi*R*R （这里的 r 指前一个圆的边长，R 是指后一个圆与前一个圆的差值）

所以，设置了 margin 属性后，内容与边框距离不变，不会造成内容本身的挤压；但是会造成 HTML 元素所占用的空间变大。

现在我们再添加一个元素，两个元素用一个 div 标签套起来；将大 div 标签色设置背景色，再观察添加 margin 属性的前后变化

<div style="width: 700px;height: 700px;background-color: lime">
        <div style="background-color: cornflowerblue; width: 300px;height: 300px; border: 6px red solid; display: inline-block;">block1</div>
        <div style="background-color: yellow;width: 250px;height: 250px;border: 6px blue solid;display: inline-block;">block2</div>
</div>

block1

block2

<div style="width: 700px;height: 700px;background-color: lime">
        <div style="background-color: cornflowerblue; width: 300px;height: 300px; border: 6px red solid; display: inline-block; margin: 15px">block1</div>
        <div style="background-color: yellow;width: 250px;height: 250px;border: 6px blue solid;display: inline-block;">block2</div>
</div>

block1

block2

<div style="width: 700px;height: 700px;background-color: lime">
        <div style="background-color: cornflowerblue; width: 300px;height: 300px; border: 6px red solid; display: inline-block; margin: 15px">block1</div>
        <div style="background-color: yellow;width: 250px;height: 250px;border: 6px blue solid;display: inline-block;margin: 40px">block2</div>
</div>

block1

block2

起初，设置的两个小元素没有设置 margin 值，两个元素贴在大 div 元素的顶部；

接着给大元素设置 margin 属性，值为 15px，大元素扩大了边长为 15px 的绿色空间，则小元素的边框距离大元素的边框距离即为 15px.

下一步给小元素设置 margin 属性，值为 40px，小元素扩大了边长为 40px 的绿色空间，这回形势也发生了变化：

大元素顶部的绿色部分边长变成了小元素设置的 margin 值为 40px 边长，其他边的绿色部分边长不变，仍为 15px；

小元素各边的绿色部分边长为小元素设置的 margin 值为 40px 边长；

大元素右边框与小元素左边框之间的距离，为两个元素设置的 margin 属性值的总和，即 40 + 15 = 55px. 其中大元素的右边框与小元素的外边距（绿色部分）之间的距离为 15px；小元素的左边框与大元素的外边距（绿色部分）之间的距离为 40px.

2.4.6.3 总结

简单总结：

设置了 padding 属性后，在内容与边框拉开了距离的同时，也会造成内容本身的挤压；

设置了 margin 属性后，内容与边框距离不变，不会造成内容本身的挤压；但是会造成 HTML 元素所占用的空间变大。

所以 padding 属性适合给元素内部内容设置挤压；margin 属性适合给两个元素之间调距离。

2.4.6.4 利用顺时针标记设置内 / 外边距的值

padding 和 margin 属性除了设置统一的边距外，还可以使用顺时针标记法来分别设置每一边的边距。

顺序是：上、右、下、左

即

1
2
3

margin: {margin-top} {margin-right} {margin-bottom} {margin-left}
padding: {padding-top} {padding-right} {padding-bottom} {padding-left}
（不要套用）

1	<div style="background-color: cornflowerblue; width: 300px;height: 300px; border: 6px red solid; display: inline-block; padding: 20px 15px 30px 60px">block1</div>

block1

1	<div style="background-color: cornflowerblue; width: 300px;height: 300px; border: 6px red solid; display: inline-block;margin: 10px 30px 45px 60px">block1</div>

block1

2.5 给元素标签设置 id 值和 class 值

直接在任意一个 html 标签设置即可，这里不细讲

class 属性通常是给多个 class 属性值为 class1 的标签进行各种各样的设置（DOM 操作、CSS 样式设置等）；

而 id 属性则只能给一个 id 属性值为 id1 的标签进行各种各样的设置（根据规范， id 属性是独一无二的）

2.6 三个（？）CSS 元素选择器的优先级

（这一节为了展示 CSS 选择器的优先级，不会展示任何效果，但会有至少两个以上的链接来展示 CSS 选择器的优先级）

2.6.1 标签选择器与 class 选择器

Class VS Tagname

很明显，设置了 class 属性的元素在选择器上会优先于 class 选择器而不是标签名选择器。

当把 class 选择器的有关代码注释掉后，设置了 class 属性的元素就会选择剩下的标签名选择器。

2.6.2 class 选择器与 id 选择器

Class VS ID

在同时设置了 class 属性和 id 属性后，该元素使用的选择器会优先于 id 选择器而不是 class 选择器

同理，当把 id 选择器的有关代码注释掉后，元素就会选择剩下的 class 选择器。

2.6.3 id 选择器与标签内的 style 样式（？）

ID VS style Property

当标签设置 id 属性，同时添加 style 属性添加样式后，该元素使用的选择器会优先于标签内部的 style 属性样式而不是 id 选择器。

同理，当把标签内部的 style 属性样式有关代码删除后，元素就会选择剩下的 id 选择器。

2.6.4 总结

标签内部的 style 属性样式，优先级第一！

id 选择器，优先级第二！

class 选择器，优先级第三！

最后的标签名选择器，优先级垫底。。。

1	标签内部的 style 属性样式 > id 选择器 > class 选择器 > 标签名选择器

2.7 其他 CSS 选择器

2.7.1 属性选择器

格式

1
2
3

[属性 = '值']{
    CSS 样式
}

这里的属性和值均指 HTML 元素当中的属性和值

这里以文本框设置背景颜色和颜色为例

属性选择器

如图所示，应用属性选择器来改变文本框的背景色和文字色，只需用中括号，里面写着标签内定义的属性，如 type="text" ，在下面的大括号写上 CSS 样式即可。

2.7.2 后代选择器

格式如下

1
2
3

当前代元素[blank]后代元素[blank]... {
	CSS 样式
}

选择的是当前代元素之后的所有代数的被指定的后代元素。

这么说可能不太好理解，那么直接给出示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./css/index.css" rel="stylesheet">
</head>
<body>
    <div>
        <h1>
            <p>
                I'm another Paragraph.
            </p>
        </h1>
        <p>I'm Paragraph</p>
    </div>
</body>
</html>

1
2
3

div p {
    color: rgb(23,45,144);
}

执行效果：Link

2.7.3 子代选择器

1
2
3

当前代元素>子代元素>... {
	CSS 样式
}

只有当前代元素指定了子代元素的元素才被选择。

这么说可能不太好理解，那么直接给出示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="./css/index.css" rel="stylesheet">
</head>
<body>
    <div>
      <h1>
        <p>
          I'm another Paragraph.
        </p>
      </h1>
      <p>I'm Paragraph</p>
    </div>
</body>
</html>

1
2
3

div>p {
    color: rgb(23,255,144);
}

执行效果：Link

2.7.4 通配符选择器（全局选择器）

1
2
3

* {
	CSS 样式
}

又称全局选择器，选择的是文档流内 (document) 的所有元素。优先级最低。

通常使用此选择器来：清除盒子元素的默认内外边距 (padding & margin) 。

2.7.5 总结

优先级：

2.8 单位

在之前的基本 CSS 样式中，涉及数字的单位都是 px 即像素（pixel），是一种长度单位，它告诉了浏览器应如何调整元素的大小和位置。

除了 px 以外，还有其他单位供我们使用

in -》 英寸
mm -》 毫米

这两个单位都是绝对长度单位，接近于屏幕上的实际测量值（不能说数值一定与实际测量值相等，会存在一定误差）

em 、rem
这两个都是相对长度单位，其实际值会依赖于其他 HTML 元素长度的值而决定，都是基于像素点来适配。

其中 em 大小是相对于 HTML 元素的字体大小；一般来说，浏览器字体默认大小一般为 16px，则 2em 对应的是 32px；若父元素设置了字体的大小，则 em 继承父元素的字体大小，即父元素设置字体多大，1em 就有多大，所以 1em 单位值并不是固定的
rem 大小是相对于 HTML 根元素的字体大小。也就是说，根元素设置字体大小多大，1rem 就有多大，所以这个单位值是相对统一的，应用于根元素下属的所有元素，相对 em 来说尺寸更清晰，更容易维护，兼容性与 em 一致。

在编写响应式网页中，还会用到下面的四个单位

vw -》窗口宽度的 1 个百分点（1%）
vh -》窗口高度的 1 个百分点（1%）
vmin -》 选取 vw 和 vh 的最小值，在移动端时，1vmin = 1vw
vmax -》 选取 vw 和 vh 的最大值，在移动端时，1vmax = 1vh

vw、vh 依赖于窗口的大小，当窗口分辨率变大和变小时，尺寸会进行相应的放大和缩小，这个比较符合响应式网页的设计原则。
vw、vh 这两个单位应配合使用 rem 这个单位进行响应式网页的设计，效果会更完美一些。

2.9 CSS 继承

首先我们打开浏览器，随便打开一个网页。按下 F12 键，在弹出的开发者工具中，找到 ”样式“ ，往下翻，如果幸运的话，会找到一个叫 ”继承自XXX“ 的部分。这部分包括了网页 body 部分的继承，还包括了各种父元素的继承，等等。

在 CSS 中，子元素都会遵循父元素的继承和根元素的继承。

在 style.css 文件或网页内部的 style 标签内添加 body 主体选择器，里面随便写一点 CSS 样式，这样如果标签内没有声明 style 属性，且 style.css 或 style 标签内没有声明相应的 CSS 样式，则这个标签元素将使用这些 CSS 样式。

示例：

CSS 继承示例

从代码可以看到，一个内容为 ”CSS 继承“ 的 div 标签显示在输入框的下面，网页内没有设置任何 CSS 样式，但是标签内容的颜色不是默认的黑色，是 style 标签里 body 标签所定义的红色（color: red）。

此时我们按下键盘上的 F12 键，找到样式，往下翻，很快找到了继承的部分，显示 ”继承自 body“，这说明，我们之前在 body 标签设置的样式已经继承并应用到所有没有设置任何 CSS 样式的 div 标签当中了。

2.10 CSS 选择器还有更高的优先级？？？

当然有！

现在，我们将上一节的代码稍微添加一小部分，就像这样：

可以看到，原来内容为 ”CSS 继承“ 的 div 标签被 style 标签当中的 id 为 csscovered 所定义的样式所覆盖，div 标签所定义的样式没有应用到这个标签中。

现在，我们要把这个 div 标签样式还原成 div 标签所定义的样式。

要保证目标标签的样式不被更高等级的选择器所覆盖，我们要用到 !important 属性，现在在 div 标签定义的样式都添加 !important 属性，并保存刷新：

可以看到，样式已经被还原。

得出结论，在不同的选择器优先级当中，!important 的优先级最高！

1	!important > 标签内部的 style 属性样式 > id 选择器 > class 选择器 > 标签名选择器 > 后代自带选择器

但是这个属性有个缺点，无法在同等级选择器当中其中一个设置，不起作用。。。

2.11 颜色有不同代表方式

之前我们设置颜色，都是使用内置的颜色词语来设置颜色的

现在我们再引入几种新的颜色代表方式：

第一种：十六进制

十六进制的范围：0~~9、A~~E

在 CSS 中，使用了 6 位十六进制的控制来代表颜色，红（R）使用前两位，绿（G）使用中间两位，蓝（B）使用后两位，例如，#000000 代表着 rgb(0,0,0)，是 rgb 中最小的值。

试着用十六进制的方式来设置颜色

1	<div style="display: inline-block; width: 300px; background-color: #969696; color: #696969">hex_color</div>

hex_color

另外，6 位十六进制可以缩写成 3 位十六进制，红（R）使用前一位，绿（G）使用中间一位，蓝（B）使用后一位。但是不推荐这种缩写，这么写会导致颜色的数量减少到 4096 种。建议在设置十六进制颜色时使用 6 位十六进制。

第二种：rgb 值

rgb 值的范围：0~255

rgb 值有三个参数。分别对应红、绿、蓝三种颜色。

试着用 rgb 值的方式来设置颜色

1	<div style="display: inline-block; width: 300px; background-color: rgb(34,235,68); color: rgb(221,22,186)">hex_color</div>

hex_color

2.12 CSS 变量

CSS 变量可以实现：更新一个值，即可让使用该变量的属性值全部更新。

如下图，body 标签选择器里定义了三个变量，分别是 --div-bgcolor 、--div-textcolor 、 --div-textfamily，且都定义了已知的值。现在我们要把输入下面的三行用 div 标签包裹的文字通过使用变量的方式来改变样式。

先在 div 标签设置 class 组名，我们把它叫做 divgroup1，然后在 style 标签内写入组名为 divgroup1 的选择器（即 .divgroup1），然后写上几个 CSS 样式，需要注意的是，要想在值处调用变量，需使用 “var(variable)“ 的格式，调用完后保存刷新：

可以看到，设置了 CSS 变量并调用之后，输入框下面的三行文字的样式已经更改了。

2.13 背景

CSS 也有针对背景的样式。

设置背景图的位置，可以使用 background-position 属性

2.14 CSS 与文档流

CSS 也有一些与文档流有关的样式。

最常见的就是浮动 float 属性，其作用就是让元素脱离文档流 (document)，并按其指定的方向去排列。最明显的感受就是，原本纵向排列的 div 元素们，在设置属性值为 left 或 right 后，元素直接横向排列，不受 div 元素单个即换行的影响。

需要注意！该属性并不会脱离窗口 (window) 。

HTML & CSS

1 HTML 基础

1.1 标题元素

1.2 段落元素

1.3 HTML 元素的注释

1.4 HTML5 的常用结构元素

1.5 图片元素

1.6 跳转元素

1.7 基本的元素嵌套

1.8 简单的有序列表和无序列表

1.9 强调文本标签

1.10 输入框

1.11 表单 form

1.12 Head 头部标签

1.13 进入 CSS 之前：两个基础的元素

1.13.1 <div> 元素

1.13.2 <span> 元素

1.13.3 举个栗子.jpg

1.14 进入 CSS 之前：两个重要的属性

1.15 HTML5 新特性

2 CSS 基础

2.1 从标签里添加 style 属性开始。

2.2 在 HTML 文档内写 CSS 样式

2.3 基本的 CSS 元素选择器

2.4 基本的 CSS 样式

2.4.1 字体

2.4.2 文本

2.4.3 元素大小

2.4.4 元素边框

2.4.5 元素的颜色

2.4.6 内边距与外边距

2.4.6.1 padding 内边距

2.4.6.2 margin 外边距

2.4.6.3 总结

2.4.6.4 利用顺时针标记设置内 / 外边距的值

2.5 给元素标签设置 id 值和 class 值

2.6 三个（？）CSS 元素选择器的优先级

2.6.1 标签选择器与 class 选择器

2.6.2 class 选择器与 id 选择器

2.6.3 id 选择器与标签内的 style 样式（？）

2.6.4 总结

2.7 其他 CSS 选择器

2.7.1 属性选择器

2.7.2 后代选择器

2.7.3 子代选择器

2.7.4 通配符选择器（全局选择器）

2.7.5 总结

2.8 单位

2.9 CSS 继承

2.10 CSS 选择器还有更高的优先级？？？

2.11 颜色有不同代表方式

2.12 CSS 变量

2.13 背景

2.14 CSS 与文档流

1.13.1 `<div>` 元素

1.13.2 `<span>` 元素