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>
-->
注释有两个功能:
- 想让某一段代码不起作用,但你又不想删除这一段代码。
- 就是给代码添加一些说明,方便团队合作或日后自己查看,但又不想影响代码本身。
可以通过删除
<!--
和-->
来删除注释。
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中文站