HTML5&CSS3基础

淩亂°似流年 2022-01-06 01:33 307阅读 0赞

# **目录** #

1.Headline with the h2 Element

2.Uncomment HTML

3.Comment out HTML

4.Fill in the Blank with Placeholder Text

5.Change the Color of Text

6.Use CSS Selectors to Style Elements

7.Use a CSS Class to Style an Element

8.Style Multiple Elements with a CSS Class

9.Change the Font Size of an Element

10.Set the Font Family of an Element

11.Import a Google Font

12.Specify How Fonts Should Degrade

13.Add Images to your Website

14.Size your Images

15.Add Borders Around your Elements

16.Add Rounded Corners with a Border Radius

17.Make Circular Images with a Border Radius

18.Link to External Pages with Anchor Elements

19.Nest an Anchor Element within a Paragraph

20.Make Dead Links using the Hash Symbol

21.Turn an Image into a Link

22.Add Alt Text to an Image for Accessibility

23.Create a Bulleted Unordered List

24.Create an Ordered List

25.Create a Text Field

26.Add Placeholder Text to a Text Field

27.Create a Form Element

28.Add a Submit Button to a Form

29.Use HTML5 to Require a Field

30.Create a Set of Radio Buttons

31.Create a Set of Checkboxes

33.Check Radio Buttons and Checkboxes by Default

33.Nest Many Elements within a Single Div Element

34.Give a Background Color to a Div Element

35.Set the ID of an Element

36.Use an ID Attribute to Style an Element

37.Adjusting the Padding of an Element

38.Adjust the Margin of an Element

39.Add a Negative Margin to an Element

40.Add Different Padding to Each Side of an Element

41.Add Different Margins to Each Side of an Element

42.Use Clockwise Notation to Specify the Padding of an Element

43.Use Clockwise Notation to Specify the Margin of an Element

44.Style the HTML Body Element

45.Inherit Styles from the Body Element

46.Prioritize One Style Over Another

47.Override Styles in Subsequent CSS

48.Override Class Declarations by Styling ID Attributes

49.Override Class Declarations with Inline Styles

50.Override All Other Styles by using Important

51.Use Hex Code for Specific Colors

52.Use Hex Code to Color Elements White

53.Use Hex Code to Color Elements Red

54.Use Hex Code to Color Elements Green

55.Use Hex Code to Color Elements Blue

56.Use Hex Code to Mix Colors

57.Use Hex Code to Color Elements Gray

58.Use Hex Code for Specific Shades of Gray

59.Use Abbreviated Hex Code

60.Use RGB values to Color Elements

61.Use RGB to Color Elements White

62.Use RGB to Color Elements Red

63.Use RGB to Color Elements Green

64.Use RGB to Color Elements Blue

65.Use RGB to Mix Colors

--------------------

### 1.Headline with the h2 Element ###

h是英文`header`标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT等。h1是主标题，h2是副标题，h3、h4、h5、h6依次递减字体的大小。

在主标题下面创建一个副标题，标题内容是：CatPhotoApp。

<h1>Hello World</h1>
    <h2>CatPhotoApp</h2>

Inform with the Paragraph Element

p是英文`paragraph`段落的缩写，经常被用来创建一个段落，就和你写作文一样。

任务：在副标题下面新增一个段落，段落内容是：`Hello Paragraph`。

<h1>Hello World</h1>
    <h2>我家的猫咪</h2>
    <p>Hello Paragraph</p>

### 2.Uncomment HTML ###

注释有两个功能：

1、想让某一段代码不起作用，但你又不想删除这一段代码。

2、就是给代码添加一些说明，方便团队合作或日后自己查看，但又不想影响代码本身。

我们先学习如何删除注释，再学习如何添加注释。

提示：可以通过删除``来删除注释。

任务：试着先把一级标题、二级标题、段落的注释都删除掉。

<h1>Hello World</h1>
    
    <h2>我家的猫咪</h2>
    
    <p>Hello Paragraph</p>

### 3.Comment out HTML ###

注释的开始标记是`<!--`

结束标记是`-->`

任务：把主标题和段落都注释掉，但把副标题留着。

<h2>我家的猫咪</h2>

### 4.Fill in the Blank with Placeholder Text ###

Web开发者通常用[lorem ipsum text][]来做占位符，占位符就是占着位置的一些文字，没有实际意义。

为什么叫`lorem ipsum text`呢?

是因为`lorem ipsum`是古罗马西塞罗谚语的前两个单词。

从公元16世纪开始`lorem ipsum text`就被当做占位符了，这种传统延续到了互联网时代。

于此同时，孙悟空也在五指山下压了500年，然后就进化成程序猿了，是不是很巧合，哈哈。

任务：把段落中的文本替换为：`Monkey code 猴哥猴哥，你真了不得，金箍棒在手，问世间谁是英雄。`

<h1>西游记</h1>
    
    <h2>齐天大圣</h2>
    
    <h2>孙悟空</h2>
    
    <p>Monkey code 猴哥猴哥，你真了不得，金箍棒在手，问世间谁是英雄。</p>

###  5.Change the Color of Text ###

现在让我们来改变某些文本的颜色。

我们可以通过修改`h2`元素的`style`(样式)来达到目的。

样式的属性有很多，其中color用来指定颜色。

以下是将你的`h2`元素的文本颜色设置为蓝色的示例代码：

`<h2 style="color: blue">CatPhotoApp</h2>`

任务：修改你的`h2`元素的style，让文本的颜色变为红色。

<h2 style= "color:red">我家的猫咪</h2>
    
    <p>在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>

### 6.Use CSS Selectors to Style Elements ###

样式的属性多达几千个，但别担心，按照80-20原则，常用的也就几十个，你完全可以掌握它。

当你键入`<h2 style="color: red">CatPhotoApp</h2>`，你就给`h2`元素`添加了inline style(内联样式)`。

内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层叠样式表`CSS`（Cascading Style Sheets）。

在代码的最顶端，创建一个如下的`style`元素：

> <style>  
> </style>

在这个`style`元素内, 你可以为所有的`h2`元素创建一个`元素选择器`。比如，如果你想要将所有的`h2`元素设置为红色, 你的代码应该看起来像这样：

> <style>  
>   选择器 \{属性名称: 属性值;\}  
>   h2 \{color: red;\}  
> </style>

注意：一定要在属性值的后面加上分号`;`。

任务：删除你的`h2`元素的内联样式，然后创建一个`style`元素。添加必要的CSS，使所有`h2`元素变为蓝色。

### 7.Use a CSS Class to Style an Element ###

上节课我们学习了元素选择器，这节课我们学习类选择器。

**我们先声明一个类选择器：**

> <style>  
>   .blue-text \{  
>     color: blue;  
>   \}  
> </style>

上面的代码在 `<style>` 标记中声明了一个叫做 `blue-text` 的类样式。

**然后在h2元素上应用我们声明的类选择器：**

`<h2 class="blue-text">CatPhotoApp</h2>`

注意：在CSS中，类选择器应该添加`.`为前缀。

而在HTML中，class属性不能添加`.`为前缀。

这是因为在CSS中如果类选择器前不添加`.` 浏览器就会误认为类选择器是一个元素选择器。

任务：在你的`style`元素中，修改`h2`选择器为`.red-text`选择器，并把颜色值从`blue`修改为`red`。

最后在`h2`元素上应用我们声明的`.red-text`选择器。

### 8.Style Multiple Elements with a CSS Class ###

你可以在 HTML 元素的开始标记中通过使用`class="your-class-here"`来将 class 附加到相关元素中。

CSS 类选择器必须添加`.`为前缀，如下：

> .blue-text \{  
>   color: blue;  
> \}

但在HTML中class属性的值不需要添加`.`为前缀，如下：

`<h2 class="blue-text">CatPhotoApp</h2>`

将`red-text`类应用到`h2`和`p`元素中。

### 9.Change the Font Size of an Element ###

字号是由样式属性`font-size`来控制的, 如下：

> h1 \{  
>   font-size: 30px;  
> \}

用下面的文本来创建第二个`p`元素：  
`养动物有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，狗狗和猫猫会到处拉屎，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，狗猫慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。`

任务：让第一个段落和第二个段落的`font-size`都为`16px`。

请不要为第二个段落添加 class 属性。

### 10.Set the Font Family of an Element ###

用`font-family`属性来设置元素的字体。

如果你想把副标题的字体设置为`Sans-serif`，你可以使用下面的CSS：

> h2 \{  
>   font-family: Sans-serif;  
> \}

任务：让所有的`p`元素都使用`Monospace`字体。

### 11.Import a Google Font ###

现在，让我们来导入谷歌字体。

首先，你需要用`link`标签来引入谷歌`Lobster`字体。

复制下面的代码片断并将其粘贴到你的代码编辑器的顶部：

`<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">`

现在你可以将`Lobster`作为 font-family属性 的值应用到你的`h2`元素上了。

为你的`h2`元素应用`font-family`属性，值为`Lobster`。

当你遇到困难时可以参考`wiki`

### 12.Specify How Fonts Should Degrade ###

有几种默认的字体是所有浏览器都可用的，包括`Monospace`、`Serif`和`Sans-Serif`。

当某种字体不可用时，你可以让浏览器`自动降级`到另一种字体。

例如，如果你想让段落的字体为`Helvetica`，但你同时想在`Helvetica`字体不可用时自动降级使用`Sans-Serif`字体，你可以使用如下CSS样式：

> p \{  
>   font-family: Helvetica, Sans-Serif;  
> \}

现在注释掉link标签，以使`Lobster`字体不可用。请仔细观察浏览器是如何降级到`Monospace`字体的。

<style>
      .red-text {
        color: red;
      }
    
      h2 {
        font-family: Lobster, Monospace;
      }
    
      p {
        font-size: 16px;
        font-family: Helvetica, Sans-Serif;
      }
    </style>
    
    <h2 class="red-text">CatPhotoApp</h2>
    
    <p class="red-text">在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
    <p class="red-text">养动物有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，狗狗和猫猫会到处拉屎，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，狗猫慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>

### 13.Add Images to your Website ###

使用`img`元素来为你的网站添加图片，使用`src`属性指向一个图片的具体地址。

举例如下：

`<img src="https://www.your-image-source.com/your-image.jpg">`

注意：`img`元素是自关闭元素，不需要结束标记。

用以下图片来测试：

`/images/relaxing-cat.jpg`

### 14.Size your Images ###

CSS包含一个控制元素宽度的`width`属性。像控制字体一样，我们使用`px`（像素）来指定图片的宽度。

例如，如果我们想要创建一个名为`larger-image`的类选择器，把HTML元素的宽度设定为500像素，我们使用：

> <style>  
>   .larger-image \{  
>     width: 500px;  
>   \}  
> </style>

任务：创建一个名为`smaller-image`的类选择器，然后用它来改变图片尺寸，使图片仅有100像素宽。

### 15.Add Borders Around your Elements ###

CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。

举个例子，如果我们想要让一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为固体(solid)，代码如下:

> <style>  
>   .thin-red-border \{  
>     border-color: red;  
>     border-width: 5px;  
>     border-style: solid;  
>   \}  
> </style>

任务：创建一个叫thick-green-border的class，让它的边框宽度为10像素、边框样式为solid(固体)、边框颜色为绿色(green)，然后把这个class应用到你的猫咪照片上。

提示：你可以应用多个class到一个元素，只需要在多个class之间用空格分开即可。例如：

`<img class="class1 class2">`

### 16.Add Rounded Corners with a Border Radius ###

猫咪图片的边框现在是尖尖的，不够可爱，我们可以通过CSS的一个叫border-radius(边框半径)的属性来让它的边框变成圆的。

你同样可以使用像素来指定border-radius的属性值，现在让你的猫咪图片的边框半径为10px吧。

注意：这个任务有多种解决方案。你可以添加border-radius到`.thick-green-border`类选择器，也可以添加到`.smaller-image`类选择器.

### 17.Make Circular Images with a Border Radius ###

除了像素，你还可以使用百分比来指定`border-radius`边框半径的值。

给你的猫咪图片一个`50%`的`border-radius`。

### 18.Link to External Pages with Anchor Elements ###

`a`元素，也叫`anchor（锚点）`元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

下面是一张`a`元素的图示。`a`元素位于段落元素的中间，这意味着链接会出现在段落的中间。

[![a diagram of how anchor tags are composed with the same text as on the following line][]][a diagram of how anchor tags are composed with the same text as on the following line 1]

这有一个例子：

`<p>Here's a <a href="http://freecodecamp.cn"> link to FreeCodeCamp中文社区 </a> for you to follow.</p>`

任务：创建一个链接到`http://freecatphotoapp.com`的`a`元素，并用`cat photos`作为其`anchor text（锚点文本）`。

### 19.Nest an Anchor Element within a Paragraph ###

例如：

`<p>Here's a <a href="https://freecodecamp.cn"> link to FreeCodeCamp中文社区</a> for you to follow.</p>`

`Nesting（嵌套）`就是把一个元素放在另一个元素里面。

任务：把你的`a`元素嵌套进一个新的`p`元素（紧邻已有的`h2`元素之后），让段落的文本为`View more cat photos`，但是其中仅`cat photos`是一个链接，其余的是普通文本。

### 20.Make Dead Links using the Hash Symbol ###

有时你想为你的网站添加一个`a`元素，但此时你还不知道要将它们链接到哪儿，此时可以使用固定链接。

把你的`a`元素的`href`属性的值替换为一个`#`，别名hash(哈希)符号，将其变为一个固定链接。

### 21.Turn an Image into a Link ###

你可以通过把某元素嵌套进`a`元素使其变成一个链接。

把你的图片嵌套进`a`元素。举例如下：

`<a href="#">[图片上传失败...(image-65ea48-1510046527278)]</a>`

任务：把你的小猫图片插入到一个新的锚点元素中，并把锚点元素的`href`属性设置为`#`。

一旦完成，把你的光标悬停在你的图片上。你的光标此时应该由光标指针变成手形指针。图片现在是一个链接了。

### 22.Add Alt Text to an Image for Accessibility ###

`alt`属性，也被称为`alt text`, 是当图片无法加载时显示的替代文本。`alt`属性对于盲人或视觉损伤的用户理解一幅图片中所描绘的内容非常重要，搜索引擎也会搜索`alt`属性。

简而言之，每一张图片都应该有一个`alt`属性！

你可以像下面例子中一样为img元素添加一个`alt`属性：

为你的图片添加一个`alt`属性，内容为`A cute orange cat lying on its back`。

### 23.Create a Bulleted Unordered List ###

HTML有一个特殊元素，用于创建`unordered lists（无序列表）`, 或带项目符号的列表。

无序列表以`<ul>`元素开始，并包含一个或多个`<li>`元素。

例如：

> <ul>  
> <li>milk</li>  
> <li>cheese</li>  
> </ul>

将会创建一个带项目符号的"milk"和"cheese"列表。

删除最后两个`p`元素，然后在页面底部创建一个有关猫咪喜欢的三件事情的无序列表。

### 24.Create an Ordered List ###

HTML有一个特殊元素，用于创建`ordered lists（有序列表）`, 或数字编号列表。

有序列表以`<ol>`元素开始，并包含一个或多个`<li>`元素。

例如：

> <ol>  
> <li>Garfield</li>  
> <li>Sylvester</li>  
> </ol>

将创建一个包含"Garfield"和"Sylvester"的数字编号列表。

创建一个有关猫咪最痛恨的三件事情`Top 3 things cats hate:`的有序列表。

### 25.Create a Text Field ###

现在让我们来创建一个form(表单)。

Text input(文本输入框)是用来获得用户输入的绝佳方式。

你可以用如下方法创建：

`<input type="text">`

注意，`input`元素是自关闭的。

任务：在有序列表下面创建一个type(类型)为`text`的`input`元素。

### 26.Add Placeholder Text to a Text Field ###

占位符(placeholder text)是用户在`input(输入)`框输入任何东西之前放置在`input(输入)`框中的预定义文本。

你可以用如下方式创建占位符：

`<input type="text" placeholder="this is placeholder text">`

把你的`input(输入)`框的`placeholder`的值设置为"cat photo URL"。

### 27.Create a Form Element ###

使用HTML来构建可以跟服务器交互的Web表单(form)，通过给你的`form`元素添加一个`action`属性来达到此目的。

`action`属性的值指定了表单提交到服务器的地址。

例如：

`<form action="/url-where-you-want-to-submit-form-data"></form>`

把你的文本框嵌套进`form`元素，并为此`form`元素添加`action="/submit-cat-photo"`。

### 28.Add a Submit Button to a Form ###

让我们来为你的form添加一个`submit`(提交)按钮，点击这个按钮，表单中的数据将会被发送到你通过`action`属性指定的地址上。

下面是submit按钮的例子：

`<button type="submit">this button submits the form</button>`

为你的`form`元素添加一个type为`submit`的提交按钮，用"Submit"作按钮文本。

### 29.Use HTML5 to Require a Field ###

当你设计表单时，你可以指定某些选项为必填项(required)，只有当用户填写了该选项后，用户才能够提交表单。

例如，如果你想把一个文本输入字段设置为必填项，在你的`input`元素中加上`required`属性就可以了，你可以使用：  
`<input type="text" required>`

任务：给你的输入框添加`required`属性，这样用户不填写输入框就无法提交表单。

试试输入框不填写任何文本，然后点击Submit提交表单，看看浏览器如何提示你该字段为必填项。

注意：`required`属性在Safari浏览器中不起作用，请用其他浏览器来学习，推荐使用Chrome。

### 30.Create a Set of Radio Buttons ###

类比是最好的学习方式，当你搞不清一个概念时，最好在生活中找到对应的案例。

单选就是你只能在多个选项中选择一个，就好比你有很多追求者，但却只能选择一个结婚。

多选一的场景就用`radio button(单选按钮)`

单选按钮只是`input`输入框的一种类型。

每一个单选按钮都应该嵌套在它自己的`label(标签)`元素中。

注意：所有关联的单选按钮应该使用相同的`name`属性。

下面是一个单选按钮的例子：

`<label><input type="radio" name="indoor-outdoor"> Indoor</label>`

给你的表单添加两个单选按钮，一个叫`indoor`，另一个叫`outdoor`。

### 31.Create a Set of Checkboxes ###

当你在大学选课时，面对几百门课程，而因为时间和精力，你只能从中选择十几门。

这样的场景就用`checkboxes（复选按钮）`。

复选按钮是`input`的输入框的另一种类型。

每一个复选按钮都应该嵌套进`label`元素中。

所有关联的复选按钮应该具有相同的`name`属性。

下面是复选按钮的例子：

`<label><input type="checkbox" name="personality"> Loving</label>`

任务：为你的表单添加三个复选按钮，每个复选按钮都应该嵌套进它自己的`label`元素，所有复选按钮的`name`属性必须为`personality`。

### 33.Check Radio Buttons and Checkboxes by Default ###

使用`checked`属性，你可以设置复选按钮和单选按钮默认被选中。

为此，只需在`input`元素中添加属性`checked`

`<input type="radio" name="test-name" checked>`

把你的第一个`radio button`和第一个`checkbox`都设置为默认选中。

### 33.Nest Many Elements within a Single Div Element ###

`div`元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。

所以可以利用CSS的继承关系把`div`上的CSS传递给它所有子元素。

你可以用`<div>`来标记一个div元素的开始，然后用`</div>`来标记一个div元素的结束。

试着在你的"Things cats love" `p`元素之前放置`div`的开始标记，在你的`ol`结束标记之后放置`div`的结束标记，这样你的两个列表就都嵌套在`div`中了。

把"Things cats love"和"Things cats hate"两个列表都嵌套进同一个`div`元素中。

### 34.Give a Background Color to a Div Element ###

你可以用 `background-color` 属性来设置一个元素的背景颜色。

例如，如果你想把一个元素的背景颜色设置为`green`，你应该把这些加到你的 `style` 元素中：

> .green-background \{  
> background-color: green;  
> \}

创建一个叫做 `gray-background` 的类选择器，设置其 `background-color` 为 gray，最后应用到 `div` 元素。

### 35.Set the ID of an Element ###

除了 `class`属性之外，每一个 HTML 元素还可以使用 `id` 属性。

使用 `id` 属性有若干好处，一旦当你开始使用 jQuery 的时候你会有更深的体会。

`id` 属性应该是唯一的，虽然浏览器并不强制唯一，但基于最佳实践，这一点是被广泛认可的，所以请不要给一个以上的元素设置相同的 `id` 属性。

下面举例说明了如何设置`h2` 元素的`id`属性为`cat-photo-app`。

`<h2 id="cat-photo-app">`

任务：设置 `form` 元素的`id`属性为 `cat-photo-form`。

### 36.Use an ID Attribute to Style an Element ###

和类选择器一样，你也可以使用ID选择器来声明样式。

声明一个叫`cat-photo-element`的ID选择器 ，并设置背景色为绿色。：

> \#cat-photo-element \{  
> background-color: green;  
> \}

注意：在你的 `style` 元素内部，定义类选择器必须添加 `.` 为前缀，定义ID选择器必须添加 `#` 为前缀。

任务：试着给你的表单，添加一个值为 `cat-photo-form`的 id 属性，一个绿色的背景。

### 37.Adjusting the Padding of an Element ###

现在让我们把 Cat Photo App 暂时搁置，以学习更多的 HTML 样式。

你可能早已经注意到了这点，所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。

有三个影响HTML元素布局的重要属性：`padding(内边距)`、`margin(外边距)`、`border(边框)`。

元素的 `padding` 控制元素内容 `content`和元素边框 `border`之间的距离。

在这儿，我们可以看到绿方块和红方块都位于黄方块之中，但是红方块比绿方块具有更大的 `padding`。

当你加大绿方块的 `padding`, 它将扩大元素内容和元素边框的距离。

任务：修改绿方块的 `padding` 以使它与红方块相匹配。

### 38.Adjust the Margin of an Element ###

元素的外边距 `margin` 控制元素边框 `border` 和元素实际所占空间的距离。

在这儿，我们可以看到绿方块和红方块都位于黄方块之中，注意红方块比绿方块具有更大的外边距 `margin`，使得它看起来更小。

当你增大绿方块的 `margin` 时，将会增加元素边框和元素实际所占空间之间的距离。

修改绿方块的 `margin` 以使它与红方块匹配。

### 39.Add a Negative Margin to an Element ###

元素的 `margin` 控制元素的 `border` 和元素实际所占空间的距离。

如果你将一个元素的 `margin` 设置为负值，元素将会变大。

具体可以看看红方块的 `margin` 值。

任务：把绿方块的 `margin` 设置为 `-15px`，以使它将父容器(黄方块)的横向宽度填满。

### 40.Add Different Padding to Each Side of an Element ###

有时你想要自定义元素，使它的每一个边具有不同的 `padding`。

CSS 允许你使用 `padding-top`、`padding-right`、`padding-bottom` 和 `padding-left`来控制元素上右下左四个方向的 `padding`。

使你的绿方块的顶部和左侧具有 `40px` 的 `padding`，而底部和右侧则是 `20px`。

### 41.Add Different Margins to Each Side of an Element ###

有时你想要自定义元素，使它的每一个边具有不同的 `margin`。

CSS 允许你使用 `margin-top`、`margin-right`、`margin-bottom` 和 `margin-left` 来控制元素上右下左四个方向的 `margin`。

使你的绿方块的顶部和左侧具有 `40px` 的 `margin`，而底部和右侧则是 `20px`。

### 42.Use Clockwise Notation to Specify the Padding of an Element ###

除了分别指定元素的 `padding-top`、`padding-right`、`padding-bottom` 和 `padding-left` 属性外，你还可以集中起来指定它们，举例如下：

`padding: 10px 20px 10px 20px;`

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

使用顺时针方式设置 ".green-box" class，使其顶部和左侧具有 `40px` 的 `padding`，而底部和右侧具有 `20px` 的 `padding`。

### 43.Use Clockwise Notation to Specify the Margin of an Element ###

让我们再试一次，但这次是用于 `margin`。

除了分别指定元素的 `margin-top`、`margin-right`、`margin-bottom` 和 `margin-left` 属性外，你还可以集中起来指定它们，举例如下：

`margin: 10px 20px 10px 20px;`

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

使用`顺时针表示法`设置含有 ".green-box" class 的元素，使其顶部和左侧具有 `40px` 的 `margin`，而底部和右侧具有 `20px` 的 `margin`。

### 44.Style the HTML Body Element ###

现在让我们来一个全新的开始，讲一讲 CSS 继承。

每一个 HTML 页面都有一个 `body` 元素。

通过将其 `background-color` 设置为黑色，我们可以证明 `body` 元素的存在。

我们可以通过将下面的代码添加到我们的 `style` 元素来做到这一点：

> body \{  
> background-color: black;  
> \}

### 45.Inherit Styles from the Body Element ###

现在我们证明了每一个 HTML 页面都有一个 `body` 元素，并且其 `body` 元素同样能够应用样式。

记住，你可以像对其他 HTML 元素一样对你的 `body` 元素应用样式，并且所有其他元素将继承你的 `body` 元素的样式。

首先，创建一个文字为 `Hello World` 的 `h1` 元素。

然后，让我们通过向 `body` 元素的样式声明部分添加 `color: green;` 使页面上的所有元素的颜色为 `green`。

最后，通过向 `body` 元素的样式声明部分添加 `font-family: Monospace;` 将 `body` 元素的 font-family（字体）设置为 `Monospace`。

### 46.Prioritize One Style Over Another ###

有时你的 HTML 元素会得到相互冲突的多个样式。

例如，你的 `h1` 元素不能同时为绿色和粉色。

让我们来看看当我们创建一个使其文字为粉色的 class 时会发生什么，然后将其应用到某元素。我们的 class 会 `override（覆盖）` `body` 元素的 `color: green;` CSS 属性吗？

创建一个使元素颜色成为粉色的名为 `pink-text` 的 CSS class。

设置 `h1` 元素的 class 为 `pink-text`。

### 47.Override Styles in Subsequent CSS ###

我们的 "pink-text" class 覆盖了 `body` 元素的 CSS 声明！

我们刚刚证明了我们的 class 会覆盖 `body` 元素的 CSS，那么下一个合乎情理的问题就是，我们怎样才能覆盖我们的 `pink-text` class 呢？

再创建一个把元素设置为蓝色的名为 `blue-text` 的 CSS class，确保它在你的 `pink-text` class 声明的下面。

除了 `pink-text` class 之外，再把 `blue-text` class 应用到你的 `h1` 元素，让我们来看看谁会赢。

如下例，通过用空格分隔多个 class 属性，可对 HTML 元素应用多个 class 属性：

`class="class1 class2"`

注意：在 HTML 中这些 class 如何排序是无所谓的。

然而，在 `<style>` 部分中 `class` 声明的顺序却非常重要，第二个声明总是比第一个具有优先权。因为 `.blue-text` 是第二个声明，它覆盖了 `.pink-text` 属性。

### 48.Override Class Declarations by Styling ID Attributes ###

我们刚刚证明了浏览器读取 CSS 的顺序是从上到下，这意味着，在发生冲突时，浏览器会使用最后的 CSS 声明。

但是并非只有这些，还有其他覆盖 CSS 的方法。你还记得 id 属性吗？

让我们来覆盖你的 `pink-text` 和 `blue-text` 两个 class，通过为 `h1` 元素添加 id 并设置 id 的样式，使你的 `h1` 元素变成 orange（橙色）。

给你的 `h1` 元素添加名为 `orange-text` 的 `id` 属性。记住，id 样式看起来是这样的：

`<h1 id="orange-text">`

在你的 `h1` 元素中保留 `blue-text` 和 `pink-text` 两个 class。

在你的 `style` 元素中为你的 `orange-text` id 创建一个 CSS 声明，就像下面例子中的样子：

> \#brown-text \{  
> color: brown;  
> \}

注意：你声明的这个 CSS 在 `pink-text`类选择器的上面还是下面是无所谓的，因为 id 属性总是具有更高的优先级。

### 49.Override Class Declarations with Inline Styles ###

我们证明了无论在 `style` 元素 CSS 的哪个位置进行声明，id 声明都会覆盖 class 声明。

还有其他覆盖 CSS 的方法。你还记得行内样式吗？

试着用 `in-line style（行内样式）` 使 `h1` 元素变为白色。记住，行内样式看起来是这样的：

`<h1 style="color: green">`

保留 `h1` 元素中的 `blue-text` 和 `pink-text` 两个 class。

### 50.Override All Other Styles by using Important ###

耶！我们刚刚证明了行内样式将覆盖`style` 中定义的所有 CSS。

但是等一下，还有最后一种覆盖 CSS 的方法，这是所有方法中最强大的，但是在讲它之前，我们先讲讲为什么你要覆盖 CSS。

很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时，你可以使用 `!important`。

让我们再回到我们的 `pink-text` class 声明。还记得不？我们的 `pink-text` class 被随后的 class 声明、id 声明和行内样式所覆盖了。

让我们来给 pink-text 元素的 color 声明加上关键字 `!important`，以便 100% 确保你的 `h1` 元素是粉色的。

举例如下：

`color: pink !important;`

### 51.Use Hex Code for Specific Colors ###

你是否知道在 CSS 中还有其他表示颜色的方法？其中的一种方法称作 hexadecimal code（十六进制编码），简写为 `hex code`。

我们通常使用 `decimals`，也就是十进制数字，它对每一位数字使用符号0到9来表示。`Hexadecimals` （或 `hex`）是十六进制数字，这意味着它使用十六个不同的符号。像十进制那样，符号 0-9 代表数值零到九，再使用 A、B、C、D、E、F 代表数值十到十五。合在一起，用 0 到 F 可以代表 `hexadecimal` 中的每一位数字，共为我们提供 16 个可能的数值。你可以在 [这儿][Link 1] 找到更多关于十六进制数字的信息。

在 CSS 中，我们可以使用 6 位十六进制数字来表示颜色，每 2 位分别表示红色 (R)、绿色 (G) 和蓝色 (B) 成分。例如，`#000000` 是黑色，同时也是可能的数值中最小的。你可以在 [这儿][Link 2] 找到更多关于 RGB 颜色系统的信息。

把 `body` 元素的 background-color 由 `black` 替换成其 `hex code` 表示，即`#000000`。

### 52.Use Hex Code to Color Elements White ###

`0` 是 hex code（十六进制编码）中最小的一个，它代表颜色的完全缺失。

`F` 是 hex code（十六进制编码）中最大的一个，它代表最大可能的亮度。

让我们通过把 background-color 的 hex code 修改为 `#FFFFFF`，以把 `body` 元素的背景改为白色。

### 53.Use Hex Code to Color Elements Red ###

你可能会疑惑为什么我们使用6位数来表示一种颜色而不是只用一位或二位，答案是使用6位数可提供给我们巨大数量的颜色变化。

会有多少种可能的颜色？16 个值和 6 个位置意味着我们有 16 的 6 次方，或者说超过 1600 万种可能的颜色。

Hex code 遵循 red-green-blue（红-绿-蓝），或者叫 `rgb` 格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。

所以要得到绝对的纯红色，你只需要在第一和第二位使用 `F` （最大可能的数值），且在第三、第四、第五和第六位使用 `0` （最小可能数值）。

通过对 background-color 应用 hex code 值 `#FF0000`以把 `body` 元素的背景色设置为红色。

### 54.Use Hex Code to Color Elements Green ###

记住 `hex code` 遵循 red-green-blue（红-绿-蓝），或称为 `rgb` 格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。

所以要得到绝对的纯绿色，你只需要在第三和第四位使用 `F`（最大可能的数值），且在其它位使用 `0` （最小可能数值）。

通过对 background-color 应用 hex code 值 `#00FF00` 以把 `body` 元素的背景色设置为绿色。

### 55.Use Hex Code to Color Elements Blue ###

`hex code` 遵循 red-green-blue（红-绿-蓝），或称为 `rgb`格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。

所以要得到绝对的纯蓝色，你只需要在第五和第六位使用 `F`（最大可能的数值），且在其它位使用 `0` （最小可能数值）。

通过对 background-color 应用 hex code 值 `#0000FF` 以把 `body` 元素的背景色设置为蓝色。

### 56.Use Hex Code to Mix Colors ###

从这三种纯色（红、绿、蓝），我们能得到 1600 万种其它的颜色。

例如，橙色是纯红，混合一些绿，没有蓝。

通过对 background-color 应用 hex code 值 `#FFA500` 以把 `body` 元素的背景色设置为橙色

### 57.Use Hex Code to Color Elements Gray ###

从这三种纯色（红、绿、蓝），我们能得到 1600 万种其它的颜色。

我们也可以通过平均混合所有三种颜色得到不同灰度等级的灰色。

通过对 background-color 应用 hex code 值 `#808080` 以把 `body` 元素的背景色设置为灰色。

### 58.Use Hex Code for Specific Shades of Gray ###

通过平均混合所有三种颜色，我们还可以得到其他色度等级的灰色，这样我们可以非常接近纯黑色。

通过对 background-color 应用 hex code 值 `#111111` 以把 `body` 元素的背景色设置为深灰色。

### 59.Use Abbreviated Hex Code ###

许多人对超过 1600 万种颜色感觉十分地抓狂，并且 hex code 非常难以记忆。幸运的是，你可以缩短它。

例如，红，hex code 是 `#FF0000` ，可被缩写成 `#F00`。也就是说，一位表示红，一位表示绿，一位表示蓝。

这会把所有可能的颜色数减少至大约 4000 种，但是浏览器会把 `#FF0000` 和 `#F00` 解释为完全相同的颜色。

继续前进，尝试使用 `#F00` 把 `body` 元素的背景色改为红色。

### 60.Use RGB values to Color Elements ###

在 CSS 中表示颜色的另一个方法是使用 `rgb` 值。

代表黑色的 RGB 值看起来是下面的样子：

`rgb(0, 0, 0)`

代表白色的 RGB 值看起来是下面的样子：

`rgb(255, 255, 255)`

使用 `rgb`，你通过 0 至 255 之间的一个数字来指定每种颜色的亮度，而不是像 hex code 那样使用六个十六进制数字。

如果你做个算术，16 乘以 16 总共有 256 个值，所以从零开始计数的 `rgb`，和 hex code 一样有完全相同数量的可能数值。

让我们用黑色的 RGB 值 `rgb(0, 0, 0)` 替换掉 `body` 元素背景色的 hex code。

### 61.Use RGB to Color Elements White ###

代表黑色的 RGB 值看起来是下面的样子：

`rgb(0, 0, 0)`

代表白色的 RGB 值看起来是下面的样子：

`rgb(255, 255, 255)`

使用 `rgb`，你通过 0 至 255 之间的一个数字来指定每种颜色的亮度，而不是像 hex code 那样使用六个十六进制数字。

把 `body` 元素的背景色从黑色的 RGB 值修改为白色的 `rgb`值 `rgb(255, 255, 255)`。

### 62.Use RGB to Color Elements Red ###

和使用 hex code 一样，你可以通过不同数值的组合来表示 RGB 中不同的颜色。

这些数值遵循 RGB 顺序模式：第一位表示红色，第二位表示绿色，第三位表示蓝色。

把 `body` 元素的背景色修改为红色的 RGB 值：`rgb(255, 0, 0)`。

### 63.Use RGB to Color Elements Green ###

现在将`body` 元素的背景色修改为绿色的 `rgb` 值：`rgb(0, 255, 0)`。

### 64.Use RGB to Color Elements Blue ###

将你的 `body` 元素的背景色修改为蓝色的 RGB 值：`rgb(0, 0, 255)`。

### 65.Use RGB to Mix Colors ###

就像使用 hex code 一样，你可以使用不同数值的组合在 RGB 中混合出各种颜色。

将 `body` 元素的背景色修改为橙色的 RGB 值：`rgb(255, 165, 0)`。

[lorem ipsum text]: http://www.ruanyifeng.com/blog/2009/04/lorem_ipsum.html
[a diagram of how anchor tags are composed with the same text as on the following line]: https://www.freecodecamp.cn/images/camper-image-placeholder.png
[a diagram of how anchor tags are composed with the same text as on the following line 1]: https://i.imgur.com/hviuZwe.png
[Link 1]: https://link.jianshu.com?t=https://en.wikipedia.org/wiki/Hexadecimal
[Link 2]: https://link.jianshu.com?t=https://en.wikipedia.org/wiki/RGB_color_model