Free Code Camp 知识点整理：HTML5 and CSS

最新推荐文章于 2024-06-22 14:53:21 发布

vincenteL

最新推荐文章于 2024-06-22 14:53:21 发布

阅读量1.5k

点赞数

分类专栏： Free code camp 文章标签： freecodecamp 网页前端

Free code camp 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

Free Code Camp

第二节 Front End Development

一、HTML5 and CSS

1.Say Hello to HTML Element

<h1>Hello World</h1>

HTML是英文Hyper Text Markup Language(超文本标记语言)的缩写。
元素：h1就是一个HTML元素，h1是header1的简写，意思是一级标题。
开始标记：<h1> 　　结束标记：</h1> 　开始标记和结束标记的唯一区别就是结束标记多了一个/。

2.Headline with the h2 Element

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

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

3.Inform with the Paragraph Element

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

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

4.Uncomment HTML

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

注释有两个功能：
1. 想让某一段代码不起作用，但你又不想删除这一段代码。
2. 就是给代码添加一些说明，方便团队合作或日后自己查看，但又不想影响代码本身。
可以通过删除来删除注释。

5.Comment out HTML

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

注释的开始标记是

6.Fill in the Blank with Placeholder Text

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

7.Delete HTML Elements

手机的屏幕空间是有限的。让我们删除不必要的元素

8.Change the Color of Text

<h2 style="color: red">我家的猫咪</h2>
<p>在大家心目中……</p>

样式的属性有很多，其中color用来指定颜色。
我们可以通过修改h2元素的style(样式)来达到目的。

9.Use CSS Selectors to Style Elements

<style>
  h2{color: red}
</style>
<h2>我家的猫咪</h2>
<p>在大家心目中……</p>

样式的属性多达几千个，但别担心，按照80-20原则，常用的也就几十个，你完全可以掌握它。
当你键入<h2 style="color: red">CatPhotoApp</h2>，你就给h2元素添加了inline style(内联样式)。
内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层叠样式表CSS（Cascading Style Sheets）。
在代码的最顶端，创建一个如下的style元素：

CSS > <style> > </style> >
在这个 style元素内, 你可以为所有的 h2元素创建一个 元素选择器。比如，如果你想要将所有的h2元素设置为红色, 你的代码应该看起来像这样：
css > <style> > //选择器 {属性名称: 属性值;} > h2 {color: red;} > </style> >
注意：一定要在属性值的后面加上分号;。
错误：添加层叠样式表CSS后要删除内联样式，因为内联样式有更高的优先级。

10.Use a CSS Class to Style an Element

<style>
  .red-text{
    color: red;
  }
</style>
<h2 class="red-text">我家的猫咪</h2>
<p>在大家心目中……</p>

上节课我们学习了元素选择器，这节课我们学习类选择器。
我们先声明一个类选择器：
```
<style>
  .blue-text {
    color: blue;
  }
</style>
```
上面的代码在<style>标记中声明了一个叫做blue-text的类样式。
然后在h2元素上应用我们声明的类选择器：
```
<h2 class="blue-text">CatPhotoApp</h2>
```
注意：在CSS中，类选择器应该添加.为前缀。而在HTML中，class属性不能添加.为前缀。这是因为在CSS中如果类选择器前不添加. 浏览器就会误认为类选择器是一个元素选择器。

11.Style Multiple Elements with a CSS Class

<style>
  .red-text{
    color: red;
  }
</style>
<h2 class="red-text">我家的猫咪</h2>
<p class="red-text">在大家心目中……</p>

CSS类选择器必须添加.为前缀，但在HTML中class属性的值不需要添加.为前缀

12.Change the Font Size of an Element

<style>
  .red-text {
    color: red;
  }
  p{
      font-size: 16px;
    }
</style>

字号是由样式属性font-size来控制的

13.Set the Font Family of an Element

<style>
  .red-text {
    color: red;
  }
  p{
      font-size: 16px;
      font-family: Monospace;
    }
</style>

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

14.Import a Google Font

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }
  h2 {
    font-family: Lobster;
  }
  p {
    font-size: 16px;
    font-family: Monospace;
  }
</style>

用link标签来引入谷歌Lobster字体。

15.Specify How Fonts Should Degrade

<!--
<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
-->
<style>
    .red-text {
        color: red;
    }
    h2 {
        font-family: Lobster, Monospace;
    }

有几种默认的字体是所有浏览器都可用的，包括Monospace、Serif和Sans-Serif。
当某种字体不可用时，你可以让浏览器自动降级到另一种字体。

16.Add Images to your Website

<img src=/images/relaxing-cat.jpg>

使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。
注意：img元素是自关闭元素，不需要结束标记。

17.Size your Images

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }
  .smaller-image {
    width: 100px;
  }
  h2 {
    font-family: Lobster, Monospace;
  }
  p {
    font-size: 16px;
    font-family: Monospace;
  }
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img class=smaller-image src="/images/relaxing-cat.jpg">

CSS包含一个控制元素宽度的width属性。像控制字体一样，我们使用px（像素）来指定图片的宽度。
如果我们想要创建一个名为larger-image的类选择器，把HTML元素的宽度设定为500像素，我们使用：

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

18.Add Borders Around your Elements

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }
  h2 {
    font-family: Lobster, Monospace;
  }
  p {
    font-size: 16px;
    font-family: Monospace;
  }
  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }
  .smaller-image {
    width: 100px;
  }
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg">

CSS边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。
如果我们想要让一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为固体(solid)，代码如下:

CSS > <style> > .thin-red-border { > border-color: red; > border-width: 5px; > border-style: solid; > } > </style> >
提示：你可以应用多个class到一个元素，只需要在多个class之间用空格分开即可。例如：<img class="class1 class2">

19.Add Rounded Corners with a Border Radius

<style>
.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 10px;
}

我们可以通过CSS的一个叫border-radius(边框半径)的属性来让它的边框变成圆的。
你同样可以使用像素来指定border-radius的属性值。
注意：这个任务有多种解决方案。你可以添加border-radius到.thick-green-border类选择器，也可以添加到.smaller-image类选择器。

20.Make Circular Images with a Border Radius

<style>
.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
}

除了像素，你还可以使用百分比来指定border-radius边框半径的值。
border-radius的值为50%时图片即为圆形，0%时为正方形。

21.Link to External Pages with Anchor Elements

<a href="http://freecatphotoapp.com">cat photos</a>

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

22.Nest an Anchor Element within a Paragraph

<p>Here's a link to <a href="http://freecatphotoapp.com">cat photos</a> </p>

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

23.Make Dead Links using the Hash Symbol

<p>Here's a link to <a href="#">cat photos</a> </p>

有时你想为你的网站添加一个a元素，但此时你还不知道要将它们链接到哪儿，此时可以使用固定链接。
把你的a元素的href属性的值替换为一个#，别名hash(哈希)符号，将其变为一个固定链接。

24.Turn an Image into a Link

<a href="#"><img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg"></a>

你可以通过把某元素嵌套进a元素使其变成一个链接。
一旦完成，把你的光标悬停在你的图片上。你的光标此时应该由光标指针变成手形指针。图片现在是一个链接了。

25.Add Alt Text to an Image for Accessibility

<a href="#"><img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg" alt="A cute orange cat lying on it's back"></a>

alt属性，也被称为alt text, 是当图片无法加载时显示的替代文本。alt属性对于盲人或视觉损伤的用户理解一幅图片中所描绘的内容非常重要，搜索引擎也会搜索alt属性。
简而言之，每一张图片都应该有一个alt属性！
你可以像下面例子中一样为img元素添加一个alt属性：

HTML > <img src="www.your-image-source.com/your-image.jpg" alt="your alt text"> >

26.Create a Bulleted Unordered List

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>

HTML有一个特殊元素，用于创建unordered lists（无序列表）, 或带项目符号的列表。
无序列表以<ul>元素开始，并包含一个或多个<li>元素。
例如：
“`HTML
- milk
- cheese
将会创建一个带项目符号的”milk”和”cheese”列表。

27.Create an Ordered List

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>

HTML有一个特殊元素，用于创建ordered lists（有序列表）, 或数字编号列表。
有序列表以<ol>元素开始，并包含一个或多个<li>元素。
例如：

HTML > <ol> > <li>Garfield</li> > <li>Sylvester</li> > </ol> >
将创建一个包含”Garfield”和”Sylvester”的数字编号列表。

28.Create a Text Field

<input type="text">

现在让我们来创建一个form(表单)。
Text input(文本输入框)是用来获得用户输入的绝佳方式。
你可以用如下方法创建：

HTML > <input type="text"> >
注意,input元素是自关闭的。

29.Add Placeholder Text to a Text Field

<input type="text" placeholder="cat photo URL">

占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。
你可以用如下方式创建占位符：

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

30.Create a Form Element

<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL">
</form>

使用HTML来构建可以跟服务器交互的Web表单(form)，通过给你的form元素添加一个action属性来达到此目的。
action属性的值指定了表单提交到服务器的地址。
例如：

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

31.Add a Submit Button to a Form

<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL">
  <button type="submit">Submit</button>
</form>

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

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

32.Use HTML5 to Require a Field

<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button> 
</form>

当你设计表单时，你可以指定某些选项为必填项(required)，只有当用户填写了该选项后，用户才能够提交表单。
例如，如果你想把一个文本输入字段设置为必填项，在你的input元素中加上required属性就可以了，你可以使用：<input type="text" required>
注意：required属性在Safari浏览器中不起作用.

33.Create a Set of Radio Buttons

<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
  <label><input type="radio" name="indoor-outdoor">indoor</label>
  <label><input type="radio" name="indoor-outdoor">outdoor</label>
</form>

多选一的场景就用radio button(单选按钮)
单选按钮只是input输入框的一种类型。
每一个单选按钮都应该嵌套在它自己的label(标签)元素中。
注意：所有关联的单选按钮应该使用相同的name属性。
下面是单选按钮的例子:

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

34.Create a Set of Checkboxes

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

checkboxes（复选按钮）复选按钮是input的输入框的另一种类型。
每一个复选按钮都应该嵌套进label元素中。
所有关联的复选按钮应该具有相同的name属性。
下面是复选按钮的例子:

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

35.Check Radio Buttons and Checkboxes by Default

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

使用checked属性，你可以设置复选按钮和单选按钮默认被选中。
为此，只需在input元素中添加属性checked

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

36.Nest Many Elements within a Single Div Element

<div>
<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
</div>

div元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。
所以可以利用CSS的继承关系把div上的CSS传递给它所有子元素。
你可以用<div>来标记一个div元素的开始，然后用</div>来标记一个div元素的结束。

37.Give a Background Color to a Div Element

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
  .gray-background {
    background-color: gray;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/images/relaxing-cat.jpg"></a>

<div class="gray-background">
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

你可以用background-color属性来设置一个元素的背景颜色。
例如，如果你想把一个元素的背景颜色设置为green，你应该把这些加到你的style元素中：

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

38.Set the ID of an Element

<form action="/submit-cat-photo" id="cat-photo-form">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

除了class属性之外，每一个HTML元素还可以使用id属性。
使用id属性有若干好处，一旦当你开始使用jQuery的时候你会有更深的体会。
id属性应该是唯一的，虽然浏览器并不强制唯一，但基于最佳实践，这一点是被广泛认可的，所以请不要给一个以上的元素设置相同的id属性。
下面举例说明了如何设置h2元素的id属性为cat-photo-app。

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

39.Use an ID Attribute to Style an Element

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }

  .gray-background {
    background-color: gray;
  }
  #cat-photo-form {
    background-color: green;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/images/relaxing-cat.jpg"></a>

<div class="gray-background">
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="/submit-cat-photo" id="cat-photo-form">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

和类选择器一样，你也可以使用ID选择器来声明样式。
声明一个叫cat-photo-element的ID选择器，并设置背景色为绿色：

CSS > #cat-photo-element { > background-color: green; > } >
注意：在你的style元素内部，定义类选择器必须添加.为前缀，定义ID选择器必须添加#为前缀。

40.Adjusting the Padding of an Element

<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }
  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }
  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }
  .red-box {
    background-color: red;
    padding: 20px;
  }
  .green-box {
    background-color: green;
    padding: 20px;
  }
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box green-box">padding</h5>
</div>

现在让我们把 Cat Photo App 暂时搁置，以学习更多的 HTML 样式。
你可能早已经注意到了这点，所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。
有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。
元素的padding控制元素内容content和元素边框border之间的距离。
padding即padding-top&padding-bottom。

41.Adjust the Margin of an Element

<style>
  .green-box {
    background-color: green;
    padding: 20px;
    margin: 20px;
  }

元素的外边距margin控制元素边框border和元素实际所占空间的距离。
margin即padding-left&padding-right。

42.Add a Negative Margin to an Element

<style>
  .red-box {
    background-color: red;
    padding: 20px;
    margin: -15px;
  }
  .green-box {
    background-color: green;
    padding: 20px;
    margin: -15px;
  }

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

43.Add Different Padding to Each Side of an Element

<style>
  .green-box {
    background-color: green;
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
  }

有时你想要自定义元素，使它的每一个边具有不同的padding。
CSS允许你使用padding-top、padding-right、padding-bottom和padding-left来控制元素上右下左四个方向的padding。

44.Add Different Margins to Each Side of an Element

<style>
  .green-box {
    background-color: green;
    margin-top: 40px;
    margin-left: 40px;
    margin-right: 20px;
    margin-bottom:20px;

有时你想要自定义元素，使它的每一个边具有不同的margin。
CSS允许你使用margin-top、margin-right、margin-bottom和margin-left来控制元素上右下左四个方向的margin。

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

<style>
  .green-box {
    background-color: green;
    padding: 40px 20px 20px 40px;
  }

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

HTML > padding: 10px 20px 10px 20px; >
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

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

<style>
  .green-box {
    background-color: green;
    margin: 40px 20px 20px 40px;
  }

让我们再试一次，但这次是用于margin。
除了分别指定元素的margin-top、margin-right、margin-bottom和margin-left属性外，你还可以集中起来指定它们。

47.Style the HTML Body Element

<style>
body {
    background-color: black;
}
</style>

现在让我们来一个全新的开始，讲一讲 CSS 继承。
每一个 HTML 页面都有一个body元素。
通过将其background-color设置为黑色，我们可以证明body元素的存在。

48.Inherit Styles from the Body Element

<style>
  body {
    background-color: black;
    color: green;
    font-family: Monospace;
  }
</style>
<h1>Hello World</h1>

现在我们证明了每一个 HTML 页面都有一个body元素，并且其body元素同样能够应用样式。
记住，你可以像对其他 HTML 元素一样对你的body元素应用样式，并且所有其他元素将继承你的body元素的样式。

49.Prioritize One Style Over Another

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
</style>
<h1 class="pink-text">Hello World!</h1>

有时你的 HTML 元素会得到相互冲突的多个样式。
当我们创建一个使其文字为粉色的class，然后将其应用到某元素，我们的class会override（覆盖）body元素的color: green; CSS 属性。

50.Override Styles in Subsequent CSS

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 class="blue-text pink-text">Hello World!</h1>

我们刚刚证明了我们的class会覆盖body元素的 CSS，那么下一个合乎情理的问题就是，我们怎样才能覆盖我们的pink-text class呢？
注意：在 HTML 中这些class如何排序是无所谓的。然而，在<style>部分中class声明的顺序却非常重要，第二个声明总是比第一个具有优先权。因为.blue-text是第二个声明，它覆盖了.pink-text属性。

51.Override Class Declarations by Styling ID Attributes

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
  #orange-text {
    color: orange;
  }
</style>
<h1 class="pink-text blue-text" id="orange-text">Hello World!</h1>

我们刚刚证明了浏览器读取 CSS 的顺序是从上到下，这意味着，在发生冲突时，浏览器会使用最后的 CSS 声明。
但是并非只有这些，还有其他覆盖 CSS 的方法。你还记得id属性吗？
让我们来覆盖你的pink-text和blue-text两个class，通过为h1元素添加id并设置id的样式，使你的h1元素变成orange（橙色）。
注意：你声明的这个 CSS 在pink-text类选择器的上面还是下面是无所谓的，因为id属性总是具有更高的优先级。

52.Override Class Declarations with Inline Styles

<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

我们证明了无论在style元素 CSS 的哪个位置进行声明，id声明都会覆盖class声明。
试着用in-line style（内联样式）使h1元素变为白色。

53.Override All Other Styles by using Important

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

我们刚刚证明了行内样式将覆盖style中定义的所有 CSS。
还有最后一种覆盖 CSS 的方法，这是所有方法中最强大的，但是在讲它之前，我们先讲讲为什么你要覆盖 CSS。
很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时，你可以使用!important。

54.Use Hex Code for Specific Colors

<style>
  body {
    background-color: #000000;
  }
</style>

在 CSS 中还有其他表示颜色的方法,其中的一种方法称作 hexadecimal code（十六进制编码），简写为hex code。
在 CSS 中，我们可以使用 6 位十六进制数字来表示颜色，每 2 位分别表示红色 (R)、绿色 (G) 和蓝色 (B) 成分。例如，#000000是黑色，同时也是可能的数值中最小的。

55.Use Hex Code to Color Elements White

<style>
  body {
    background-color: #FFFFFF;
  }
</style>

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

56.Use Hex Code to Color Elements Red

<style>
  body {
    background-color: #FF0000;
  }
</style>

16 个值和 6 个位置意味着我们有 16 的 6 次方，或者说超过 1600 万种可能的颜色。
Hex code遵循 red-green-blue（红-绿-蓝），或者叫rgb格式。hex code中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。
所以要得到绝对的纯红色，你只需要在第一和第二位使用F（最大可能的数值），且在第三、第四、第五和第六位使用0（最小可能数值）。

57.Use Hex Code to Color Elements Green

<style>
  body {
    background-color: #00FF00;
  }
</style>

记住hex code遵循 red-green-blue（红-绿-蓝），或称为rgb格式。hex code中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。
要得到绝对的纯绿色，你只需要在第三和第四位使用F（最大可能的数值），且在其它位使用0（最小可能数值）。

58.Use Hex Code to Color Elements Blue

<style>
  body {
    background-color: #0000FF;
  }
</style>

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

59.Use Hex Code to Mix Colors

<style>
  body {
    background-color: #FFA500;
  }
</style>

从这三种纯色（红、绿、蓝），我们能得到 1600 万种其它的颜色。
例如，橙色是纯红，混合一些绿，没有蓝。
通过对background-color应用hex code值#FFA500以把body元素的背景色设置为橙色。

60.Use Hex Code to Color Elements Gray

<style>
  body {
    background-color: #808080;
  }
</style>

我们也可以通过平均混合所有三种颜色得到不同灰度等级的灰色。
通过对background-color应用hex code值#808080以把body元素的背景色设置为灰色。

61.Use Hex Code for Specific Shades of Gray

<style>
  body {
    background-color: #111111;
  }
</style>

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

62.Use Abbreviated Hex Code

<style>
  body {
    background-color: #F00;
  }
</style>

许多人对超过 1600 万种颜色感觉十分地抓狂，并且hex code非常难以记忆。幸运的是，你可以缩短它。
例如，红，hex code是#FF0000，可被缩写成#F00。也就是说，一位表示红，一位表示绿，一位表示蓝。
这会把所有可能的颜色数减少至大约 4000 种，但是浏览器会把#FF0000和#F00解释为完全相同的颜色。

63.Use RGB values to Color Elements

<style>
  body {
    background-color: rgb(0, 0, 0);
  }
</style>

在CSS中表示颜色的另一个方法是使用rgb值。
代表黑色的 RGB 值看起来是下面的样子：rgb(0, 0, 0)
代表白色的 RGB 值看起来是下面的样子：rgb(255, 255, 255)
使用rgb，你通过 0 至 255 之间的一个数字来指定每种颜色的亮度，而不是像hex code那样使用六个十六进制数字。
如果你做个算术，16 乘以 16 总共有 256 个值，所以从零开始计数的rgb，和hex code一样有完全相同数量的可能数值。

64.Use RGB to Color Elements White

<style>
  body {
    background-color: rgb(255, 255, 255);
  }
</style>

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

65.Use RGB to Color Elements Red

<style>
  body {
    background-color: rgb(255, 0, 0);
  }
</style>

和使用hex code一样，你可以通过不同数值的组合来表示RGB中不同的颜色。
这些数值遵循RGB顺序模式：第一位表示红色，第二位表示绿色，第三位表示蓝色。

66.Use RGB to Color Elements Green

<style>
  body {
    background-color: rgb(0, 255, 0);
  }
</style>

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

67.Use RGB to Color Elements Blue

<style>
  body {
    background-color: rgb(0, 0, 255);
  }
</style>

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

68.Use RGB to Mix Colors

<style>
  body {
    background-color: rgb(255, 165, 0);
  }
</style>

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

注：资料整理自FCC中文站

vincenteL

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Free Code Camp 知识点整理：HTML5 and CSS

Free Code Camp第二节 Front End Development一、HTML5 and CSS1.Say Hello to HTML Element&lt;h1&gt;Hello World&lt;/h1&gt;HTML是英文Hyper Text Markup Language(超文本标记语言)的缩写。元素：h1就是一个HTML元素，h1是he...
复制链接

扫一扫