给html添加注释
给网站添加图片
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
注意：img 元素是没有结束标签的。
所有的 img 元素 必须 有 alt 属性。 alt 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。
注意： 如果图片是纯装饰性的，把 alt 的属性值设置为空是最佳实践。
理想情况下，alt 属性不应该包含特殊字符，除非有特殊需要。
让我们给上面例子的 img 添加 alt 属性。
网页间的跳转
你可以用 a（Anchor，简写为 a）来实现网页间的跳转。
a 需要一个 href 属性指向跳转的目的地。 同时，它还应有内容。
<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
用a实现网页内部的跳转
a（anchor）元素也可以用于创建内部链接，跳转到网页内的各个不同部分。
要创建内部链接，你需要将链接的 href 属性值设置为一个哈希符号 # 加上你想内部链接到的元素的 id，通常是在网页下方的元素。 然后你需要将相同的 id 属性添加到你链接到的元素中。 id 是描述网页元素的一个属性，它的值在整个页面中唯一。
当用户点击了 Contacts 链接，页面就会跳转到网页的 Contacts 区域。
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
将a嵌套在段落中
<p>
Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
</p>
文本是被包裹在 p 元素内，接下来是锚点元素 <a>（它需要结束标签 </a>），target 是锚点元素的一个属性，它用来指定链接的打开方式。 属性值 _blank 表示链接会在新标签页打开。 href 是锚点元素的另一个属性，它用来指定链接的 URL
用#号来创建链接占位符
href 属性的当前值是指向 “https://www.freecatphotoapp.com”。 请将 href 属性的值替换为#，以此来创建链接占位符。
创建一个无序列表
无序列表以 <ul> 开始，中间包含一个或多个 <li> 元素， 最后以 </ul> 结束
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
创建一个有序列表
有序列表以 <ol> 开始，中间包含一个或多个 <li> 元素。 最后以 </ol> 结束。
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
创建一个输入框
input 输入框可以让你轻松获得用户的输入。注意 input 输入框是没有结束标签的。
<input type="text">
给输入框添加一个占位符文本
占位符文本用户在 input 输入框中输入任何东西前的预定义文本。
<input type="text" placeholder="this is placeholder text">
创建一个表单
我们可以只通过 HTML 来实现发送数据给服务器的表单， 只需要给 form 元素添加 action 属性即可
<form action="url-where-you-want-to-submit-form-data">
<input>
</form>
给表单添加一个必填字段
当你设计表单时，你可以指定某些字段为必填项（required），只有当用户填写了该字段后，才可以提交表单。
如果你想把文本输入框设置为必填项，在 input 元素中加上 required 属性就可以了，例如：<input type="text" required>
创建一组单选按钮
radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。
单选按钮是 input 选择框的一种类型。
每一个单选按钮都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。
所有关联的单选按钮应该拥有相同的 name 属性。 创建一组单选按钮，选中其中一个按钮，其他按钮即显示为未选中，以确保用户只提供一个答案。
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 单选按钮的 id 属性值相同。 这使得辅助技术能够在标签和相关的 input 元素之间建立关联关系。
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
我们也可以在 label 标签中嵌入 input 元素：
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
创建一个复选框 多选框
checkboxes（复选框）就好比多项选择题，正确答案有多个。
复选框是 input 选择框的一种类型。
每一个复选框都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。
所有关联的复选框应该拥有相同的 name 属性。
使得 input 与 label 关联的最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 复选框的 id 属性值相同。
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
使用单选框和复选框的 value 属性
提交表单时，所选项的值会发送给服务端。 radio 和 checkbox 的 value 属性值决定了发送到服务端的实际内容。
<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
这里有两个 radio 单选框。 当用户提交表单时，如果 indoor 选项被选中，表单数据会包含：indoor-outdoor=indoor。 也就是所选项的 name 和 value 属性值。
如果没有指明 value 属性值，则会使用默认值做为表单数据提交，也就是 on。 在这种情况下，如果用户选中 “indoor” 选项然后提交表单，表单数据则会包含 indoor-outdoor=on。 这样的表单数据看起来不够直观，因此最好将 value 属性值设置为一些有意义的内容。
给单选按钮和复选框添加默认选中项
用 checked 属性把第一个复选框和单选按钮都设置为默认选中。
为此，只需将单词 checked 添加到 input 元素的内部。
<input type="radio" name="test-name" checked>
元素嵌套
div 元素也叫内容划分元素，是一个包裹其他元素的通用容器。
它也是 HTML 中出现频率最高的元素。
和其他普通元素一样，你可以用 <div> 来标记一个 div 元素的开始，用 </div> 来标记一个 div 元素的结束。
声明 HTML 的文档类型
之前的挑战涵盖了一些 HTML 元素和它们的用法。 另外有些元素为页面提供了整体结构，每个 HTML 文档中都应该有这些元素。
在文档的顶部，我们需要告诉浏览器网页所使用的 HTML 的版本。 HTML 是一个在不停发展的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。 大部分主流浏览器都支持最新的 HTML5 规范。 但是一些陈旧的网页可能使用的是老版本的 HTML。
你可以通过 <!DOCTYPE ...> 来告诉浏览器页面上使用的 HTML 版本，“...” 部分就是版本号。 <!DOCTYPE html> 对应的就是 HTML5。
! 和大写的 DOCTYPE 是很重要的，尤其是对那些老的浏览器。 但 html 无论大写小写都可以。
所有的 HTML 代码都必须位于 html 标签中。 其中 <html> 位于 <!DOCTYPE html> 之后，</html> 位于网页的结尾。
这是一个网页结构的列子。 你的 HTML 代码会在两个 html 标签之间。
<!DOCTYPE html>
<html>
</html>
定义 HTML 文档的 head 和 body
html 的结构主要分为两大部分：head 和 body。 网页的描述应放入 head 标签， 网页的内容（向用户展示的）则应放入 body 标签。
比如 link、meta、title 和 style 都应放入 head 标签。
这是网页布局的一个例子：
<!DOCTYPE html>
<html>
<head>
<meta />
</head>
<body>
<div>
</div>
</body>
</html>
更改文本的颜色
我们通过修改 h2 元素的 style 属性来改变文本颜色。
我们需要修改 color 属性值。
以下是将 h2 元素设置为蓝色的方法
<h2 style="color: blue;">CatPhotoApp</h2>
请注意，需要在内联 style 声明末尾加上 ;。
使用元素选择器来设置元素的样式
在 CSS 中，页面样式的属性有几百个，你可以用来改变元素在页面上的外观。
当你输入 <h2 style="color: red;">CatPhotoApp</h2>，就可以用行内 CSS 设置 h2 元素的样式。
这是指定元素样式的一种方法，但有一个更好的方法来应用 CSS。
在代码的顶部，创建一个 style 声明区域，如下方所示：
<style></style>
在样式声明区域内，可以为所有 h2 元素创建一个 CSS selector。 如果想让所有 h2 元素在变成红色，可以添加下方的样式规则：
<style>
h2 {
color: red;
}
</style>
请注意，每个元素的样式规则都应该有开始和结束大括号（{ 和 }）。 还需要确保元素的样式定义在开始和结束样式标签之间。 你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束
使用class选择器设置单个元素的样式
CSS 的 class 具有可重用性，可应用于各种 HTML 元素。
一个 CSS class 声明示例如下所示：
<style>
.blue-text {
color: blue;
}
</style>
可以看到，我们在 <style> 样式声明区域里，创建了一个名为 blue-text 的 class 选择器。 你可以这样将 class 应用于 HTML 元素：<h2 class="blue-text">CatPhotoApp</h2>。 注意在 CSS style 元素里，class 名以一个句点开头。 在 HTML 元素的 class 属性中，class 名的开头没有句点。
使用class选择器设置多个元素的样式
通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。 你可以将 red-text class 添加到第一个 p 元素上。
更改元素的字体大小
字体大小由 font-size 属性控制，如下所示：
<style>
h1 {
font-size: 30px;
}
</style>
设置元素的字体族民
通过 font-family 属性，我们可以设置元素里的字体族名。
字体族名称（family-name）例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等
如果你想将 h2 元素的字体设置为 sans-serif，可以这样写：
<style>
h2 {
font-family: sans-serif;
}</style>
引入谷歌字体
在我们的网站上，除了使用系统提供的默认字体以外，我们也可以使用自定义字体。 网络上有很多字体库。 在这个例子中，我们将使用 Google 字体库。
Google 字体库是一个免费的 Web 字体库，我们只需要在 CSS 里设置字体的 URL 即可使用。
接下来，我们就要引入和使用 Google Fonts（注意：如果 Google 在你的地区被限制访问，你可以选择跳过这个挑战）。
要引入 Google Font，你需要从 Google Fonts 上复制字体的 URL，并粘贴到你的 HTML 里面。 在这个挑战中，我们需要引入 Lobster 字体。 因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到 style 标签之前。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
现在可以在 CSS 中使用 Lobster 字体，并像下面一样使用 Lobster 作为 FAMILY_NAME：
<style>
p{
font-family: FAMILY_NAME, GENERIC_NAME;
}
</style>
GENERIC_NAME 是可选的，它用来指明在其他字体不可用时的后备字体。
字体如何优雅降级
所有浏览器都有几种默认字体， 包括 monospace、serif 和 sans-serif。
在字体不可用的时候，你可以告诉浏览器通过“降级”去使用其他字体。
如果你想将一个元素的字体设置成 Helvetica，但当 Helvetica 不可用时，降级使用 sans-serif 字体，那么可以这样写：
<style>
p {
font-family: Helvetica, sans-serif;
}
</style>
通用字体名不区分大小写。 同时，也不需要使用引号，因为它们是 CSS 中的关键字。
调整图片的大小
CSS 的 width 属性可以控制元素的宽度。 和设置文本字号一样，我们会以 px（像素）为单位来设置图片的宽度。
例如，如果你想创建一个叫 larger-image 的 CSS class，来控制 HTML 元素的宽度为 500px，就可以这样写：
<style>
.larger-image {
width: 500px;
}
</style>
在元素周围添加边框
CSS 边框具有 style、color、width 属性。
假如我们要将一个 HTML 元素边框设置为 5px 的红色实线边框，我们可以这样做：
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
记得在一个元素上可以同时应用多个 class，使用空格来分隔不同 class 即可， 例如：
<img class="class1 class2">
用 border-radius 添加圆角边框
border-radius 的属性值单位可以是 px（像素）。 请将猫咪图片 border-radius 的属性值设置为 10px。
注意： 这个挑战有多个解决方法。 例如，添加 border-radius 属性到 .thick-green-border 或 .smaller-image 都是可行的。
<style>
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius:10px;
}</style>
用 border-radius 制作圆形图
除像素外，你也可以使用百分比来指定 border-radius 的值。
给 div 元素添加背景色
background-color 属性可以设置元素的背景颜色。
如果想将一个元素的背景颜色改为 green，可以在 style 里面这样写：
.green-background {
background-color: green;
}
设置元素的id
除了 class 属性，每一个 HTML 元素都有一个 id 属性。
使用 id 有几个好处：你可以通过 id 选择器来改变单个元素的样式。在稍后的课程中，你还会了解到如何在 JavaScript 里面用它来选择和操作元素。
根据规范，id 属性应是唯一的。 尽管浏览器并非必须执行这条规范，但这是广泛认可的最佳实践。 因此，请不要给多个元素设置相同的 id。
设置 h2 元素的 id 为 cat-photo-app 的代码如下：
<h2 id="cat-photo-app">
使用 id 属性来设定元素的样式
通过 id 属性，你可以做一些很酷的事情。就像 class 一样，你可以使用 CSS 来设置他们的样式。
不过，id 不可以重复，它只能作用于一个元素上。 如果一个元素同时应用了 class 和 id，且两者设置的样式有冲突，会优先应用 id 中所设置的样式。
选择 id 为 cat-photo-element 的元素，并设置它的背景颜色为绿色。 可以在 style 标签里这样写：
#cat-photo-element {
background-color: green;
}
注意在 style 标签里，声明 class 的时候必须在名字前插入 . 符号。 同样，在声明 id 的时候，也必须在名字前插入 # 符号。
调整元素的内边距
你可能已经注意到了，所有的 HTML 元素都是以矩形为基础。
每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。
padding 用来控制着元素内容与 border 之间的空隙大小。
我们可以看到蓝色框和红色框是嵌套在黄色框里的。 注意红色框的 padding 比蓝色框的更多。
如果你增加蓝色框的 padding 值，其中的文本内容与边框的距离就也会变大。
调整元素的外边距
外边距 margin 用来控制元素的边框与其他元素之间的 border 距离。
在这里，我们可以看到蓝色框和红色框都在黄色框里。 请注意，红色框的 margin 值要比蓝色框的大，因此红色框看起来比蓝色框要小。
如果你增加蓝色的 margin 值，它也会增加元素边框到其他周围元素的距离。
给元素添加负外边距
元素的 margin（外边距） 用来控制元素 border（边框） 与其周围元素之间的距离大小。
如果你把元素的 margin 设置为负值，元素会变得占用更多空间。
给元素的每一侧添加不同的内边距
有时候，你会想给一个元素每个方向的 padding 都设置一个特定的值
CSS 允许你使用 padding-top、padding-right、padding-bottom、padding-left 属性来设置四个不同方向的 padding 值。
<style>.blue-box {
background-color: blue;
color: #fff;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}</style>
给元素的每一侧添加不同的外边距
有时候，你会想给一个元素每个方向的 margin 都设置成一个特定的值。
CSS 允许你使用 margin-top、margin-right、margin-bottom、margin-left 属性来设置四个不同方向的 margin 值。
<style>
.blue-box {
background-color: blue;
color: #fff;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}</style>
使用顺时针标记指定元素的内边距
如果不想每次都要分别声明 padding-top、padding-right、padding-bottom、padding-left 属性，可以把它们汇总在一行里面一并声明，像是这样:
padding: 10px 20px 10px 20px;
这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的内边距。
<style>
.blue-box {
background-color: blue;
color: #fff;
padding: 40px 20px 20px 40px;
}</style>
使用顺时针标记指定元素的外边距
让我们再试一次，不过这一次轮到 margin 了。
同样，每个方向的外边距值可以在一行里面汇总声明，而无需分别通过 margin-top、margin-right、margin-bottom、margin-left 分别声明，比如：
margin: 10px 20px 10px 20px;
这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的外边距值。
使用属性选择器来设置元素的样式
我们已经通过设置元素的 id 和 class 来显示想要的样式。 这就是 ID 选择器和 Class 选择器。 另外，也还有其他的 CSS 选择器可以让我们给特定的元素设置样式。
让我们再次通过猫咪图片项目来练习 CSS 选择器。
在这个挑战里，我们需要使用 [attr=value] 属性选择器来修改 CatPhotoApp 中复选框的样式。 这个选择器使用特定的属性值来匹配和设置元素样式。 例如，下面的代码会改变所有 type 为 radio 的元素的外边距。
[type='radio'] {
margin: 20px 0px 20px 0px;
}
理解绝对单位与相对单位
最近的几个挑战都是设置元素的内边距和外边距的 px 值，即像素。 像素是一个长度单位，它告诉浏览器应该如何调整元素的大小和位置。 其实除了 px，CSS 也有其他单位供我们使用。
单位长度的类型可以分成 2 种：相对和绝对。 绝对单位与长度的物理单位相关。 例如，in 和 mm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。
相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。 比如 em 的大小基于元素字体的字体大小。 如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。
Note: 有些单位长度选项是相对视窗大小来改变值的， 这种设定符合响应式网页设计的原则。
基础 HTML 和 HTML5
给html添加注释
给网站添加图片
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
注意：img 元素是没有结束标签的。
所有的 img 元素 必须 有 alt 属性。 alt 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。
注意： 如果图片是纯装饰性的，把 alt 的属性值设置为空是最佳实践。
理想情况下，alt 属性不应该包含特殊字符，除非有特殊需要。
让我们给上面例子的 img 添加 alt 属性。
网页间的跳转
你可以用 a（Anchor，简写为 a）来实现网页间的跳转。
a 需要一个 href 属性指向跳转的目的地。 同时，它还应有内容。
<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
用a实现网页内部的跳转
a（anchor）元素也可以用于创建内部链接，跳转到网页内的各个不同部分。
要创建内部链接，你需要将链接的 href 属性值设置为一个哈希符号 # 加上你想内部链接到的元素的 id，通常是在网页下方的元素。 然后你需要将相同的 id 属性添加到你链接到的元素中。 id 是描述网页元素的一个属性，它的值在整个页面中唯一。
当用户点击了 Contacts 链接，页面就会跳转到网页的 Contacts 区域。
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
将a嵌套在段落中
<p>
Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
</p>
文本是被包裹在 p 元素内，接下来是锚点元素 <a>（它需要结束标签 </a>），target 是锚点元素的一个属性，它用来指定链接的打开方式。 属性值 _blank 表示链接会在新标签页打开。 href 是锚点元素的另一个属性，它用来指定链接的 URL
用#号来创建链接占位符
href 属性的当前值是指向 “https://www.freecatphotoapp.com”。 请将 href 属性的值替换为#，以此来创建链接占位符。
创建一个无序列表
无序列表以 <ul> 开始，中间包含一个或多个 <li> 元素， 最后以 </ul> 结束
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
创建一个有序列表
有序列表以 <ol> 开始，中间包含一个或多个 <li> 元素。 最后以 </ol> 结束。
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
创建一个输入框
input 输入框可以让你轻松获得用户的输入。注意 input 输入框是没有结束标签的。
<input type="text">
给输入框添加一个占位符文本
占位符文本用户在 input 输入框中输入任何东西前的预定义文本。
<input type="text" placeholder="this is placeholder text">
创建一个表单
我们可以只通过 HTML 来实现发送数据给服务器的表单， 只需要给 form 元素添加 action 属性即可
<form action="url-where-you-want-to-submit-form-data">
<input>
</form>
给表单添加一个必填字段
当你设计表单时，你可以指定某些字段为必填项（required），只有当用户填写了该字段后，才可以提交表单。
如果你想把文本输入框设置为必填项，在 input 元素中加上 required 属性就可以了，例如：<input type="text" required>
创建一组单选按钮
radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。
单选按钮是 input 选择框的一种类型。
每一个单选按钮都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。
所有关联的单选按钮应该拥有相同的 name 属性。 创建一组单选按钮，选中其中一个按钮，其他按钮即显示为未选中，以确保用户只提供一个答案。
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 单选按钮的 id 属性值相同。 这使得辅助技术能够在标签和相关的 input 元素之间建立关联关系。
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
我们也可以在 label 标签中嵌入 input 元素：
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
创建一个复选框 多选框
checkboxes（复选框）就好比多项选择题，正确答案有多个。
复选框是 input 选择框的一种类型。
每一个复选框都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。
所有关联的复选框应该拥有相同的 name 属性。
使得 input 与 label 关联的最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 复选框的 id 属性值相同。
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
使用单选框和复选框的 value 属性
提交表单时，所选项的值会发送给服务端。 radio 和 checkbox 的 value 属性值决定了发送到服务端的实际内容。
<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
这里有两个 radio 单选框。 当用户提交表单时，如果 indoor 选项被选中，表单数据会包含：indoor-outdoor=indoor。 也就是所选项的 name 和 value 属性值。
如果没有指明 value 属性值，则会使用默认值做为表单数据提交，也就是 on。 在这种情况下，如果用户选中 “indoor” 选项然后提交表单，表单数据则会包含 indoor-outdoor=on。 这样的表单数据看起来不够直观，因此最好将 value 属性值设置为一些有意义的内容。
给单选按钮和复选框添加默认选中项
用 checked 属性把第一个复选框和单选按钮都设置为默认选中。
为此，只需将单词 checked 添加到 input 元素的内部。
<input type="radio" name="test-name" checked>
元素嵌套
div 元素也叫内容划分元素，是一个包裹其他元素的通用容器。
它也是 HTML 中出现频率最高的元素。
和其他普通元素一样，你可以用 <div> 来标记一个 div 元素的开始，用 </div> 来标记一个 div 元素的结束。
声明 HTML 的文档类型
之前的挑战涵盖了一些 HTML 元素和它们的用法。 另外有些元素为页面提供了整体结构，每个 HTML 文档中都应该有这些元素。
在文档的顶部，我们需要告诉浏览器网页所使用的 HTML 的版本。 HTML 是一个在不停发展的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。 大部分主流浏览器都支持最新的 HTML5 规范。 但是一些陈旧的网页可能使用的是老版本的 HTML。
你可以通过 <!DOCTYPE ...> 来告诉浏览器页面上使用的 HTML 版本，“...” 部分就是版本号。 <!DOCTYPE html> 对应的就是 HTML5。
! 和大写的 DOCTYPE 是很重要的，尤其是对那些老的浏览器。 但 html 无论大写小写都可以。
所有的 HTML 代码都必须位于 html 标签中。 其中 <html> 位于 <!DOCTYPE html> 之后，</html> 位于网页的结尾。
这是一个网页结构的列子。 你的 HTML 代码会在两个 html 标签之间。
<!DOCTYPE html>
<html>
</html>
定义 HTML 文档的 head 和 body
html 的结构主要分为两大部分：head 和 body。 网页的描述应放入 head 标签， 网页的内容（向用户展示的）则应放入 body 标签。
比如 link、meta、title 和 style 都应放入 head 标签。
这是网页布局的一个例子：
<!DOCTYPE html>
<html>
<head>
<meta />
</head>
<body>
<div>
</div>
</body>
</html>
基础 CSS
更改文本的颜色
我们通过修改 h2 元素的 style 属性来改变文本颜色。
我们需要修改 color 属性值。
以下是将 h2 元素设置为蓝色的方法
<h2 style="color: blue;">CatPhotoApp</h2>
请注意，需要在内联 style 声明末尾加上 ;。
使用元素选择器来设置元素的样式
在 CSS 中，页面样式的属性有几百个，你可以用来改变元素在页面上的外观。
当你输入 <h2 style="color: red;">CatPhotoApp</h2>，就可以用行内 CSS 设置 h2 元素的样式。
这是指定元素样式的一种方法，但有一个更好的方法来应用 CSS。
在代码的顶部，创建一个 style 声明区域，如下方所示：
<style></style>
在样式声明区域内，可以为所有 h2 元素创建一个 CSS selector。 如果想让所有 h2 元素在变成红色，可以添加下方的样式规则：
<style>
h2 {
color: red;
}
</style>
请注意，每个元素的样式规则都应该有开始和结束大括号（{ 和 }）。 还需要确保元素的样式定义在开始和结束样式标签之间。 你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束
使用class选择器设置单个元素的样式
CSS 的 class 具有可重用性，可应用于各种 HTML 元素。
一个 CSS class 声明示例如下所示：
<style>
.blue-text {
color: blue;
}
</style>
可以看到，我们在 <style> 样式声明区域里，创建了一个名为 blue-text 的 class 选择器。 你可以这样将 class 应用于 HTML 元素：<h2 class="blue-text">CatPhotoApp</h2>。 注意在 CSS style 元素里，class 名以一个句点开头。 在 HTML 元素的 class 属性中，class 名的开头没有句点。
使用class选择器设置多个元素的样式
通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。 你可以将 red-text class 添加到第一个 p 元素上。
更改元素的字体大小
字体大小由 font-size 属性控制，如下所示：
<style>
h1 {
font-size: 30px;
}
</style>
设置元素的字体族民
通过 font-family 属性，我们可以设置元素里的字体族名。
字体族名称（family-name）例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等
如果你想将 h2 元素的字体设置为 sans-serif，可以这样写：
<style>
h2 {
font-family: sans-serif;
}</style>
引入谷歌字体
在我们的网站上，除了使用系统提供的默认字体以外，我们也可以使用自定义字体。 网络上有很多字体库。 在这个例子中，我们将使用 Google 字体库。
Google 字体库是一个免费的 Web 字体库，我们只需要在 CSS 里设置字体的 URL 即可使用。
接下来，我们就要引入和使用 Google Fonts（注意：如果 Google 在你的地区被限制访问，你可以选择跳过这个挑战）。
要引入 Google Font，你需要从 Google Fonts 上复制字体的 URL，并粘贴到你的 HTML 里面。 在这个挑战中，我们需要引入 Lobster 字体。 因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到 style 标签之前。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
现在可以在 CSS 中使用 Lobster 字体，并像下面一样使用 Lobster 作为 FAMILY_NAME：
<style>
p{
font-family: FAMILY_NAME, GENERIC_NAME;
}
</style>
GENERIC_NAME 是可选的，它用来指明在其他字体不可用时的后备字体。
字体如何优雅降级
所有浏览器都有几种默认字体， 包括 monospace、serif 和 sans-serif。
在字体不可用的时候，你可以告诉浏览器通过“降级”去使用其他字体。
如果你想将一个元素的字体设置成 Helvetica，但当 Helvetica 不可用时，降级使用 sans-serif 字体，那么可以这样写：
<style>
p {
font-family: Helvetica, sans-serif;
}
</style>
通用字体名不区分大小写。 同时，也不需要使用引号，因为它们是 CSS 中的关键字。
调整图片的大小
CSS 的 width 属性可以控制元素的宽度。 和设置文本字号一样，我们会以 px（像素）为单位来设置图片的宽度。
例如，如果你想创建一个叫 larger-image 的 CSS class，来控制 HTML 元素的宽度为 500px，就可以这样写：
<style>
.larger-image {
width: 500px;
}
</style>
在元素周围添加边框
CSS 边框具有 style、color、width 属性。
假如我们要将一个 HTML 元素边框设置为 5px 的红色实线边框，我们可以这样做：
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
记得在一个元素上可以同时应用多个 class，使用空格来分隔不同 class 即可， 例如：
<img class="class1 class2">
用 border-radius 添加圆角边框
border-radius 的属性值单位可以是 px（像素）。 请将猫咪图片 border-radius 的属性值设置为 10px。
注意： 这个挑战有多个解决方法。 例如，添加 border-radius 属性到 .thick-green-border 或 .smaller-image 都是可行的。
<style>
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius:10px;
}</style>
用 border-radius 制作圆形图
除像素外，你也可以使用百分比来指定 border-radius 的值。
给 div 元素添加背景色
background-color 属性可以设置元素的背景颜色。
如果想将一个元素的背景颜色改为 green，可以在 style 里面这样写：
.green-background {
background-color: green;
}
设置元素的id
除了 class 属性，每一个 HTML 元素都有一个 id 属性。
使用 id 有几个好处：你可以通过 id 选择器来改变单个元素的样式。在稍后的课程中，你还会了解到如何在 JavaScript 里面用它来选择和操作元素。
根据规范，id 属性应是唯一的。 尽管浏览器并非必须执行这条规范，但这是广泛认可的最佳实践。 因此，请不要给多个元素设置相同的 id。
设置 h2 元素的 id 为 cat-photo-app 的代码如下：
<h2 id="cat-photo-app">
使用 id 属性来设定元素的样式
通过 id 属性，你可以做一些很酷的事情。就像 class 一样，你可以使用 CSS 来设置他们的样式。
不过，id 不可以重复，它只能作用于一个元素上。 如果一个元素同时应用了 class 和 id，且两者设置的样式有冲突，会优先应用 id 中所设置的样式。
选择 id 为 cat-photo-element 的元素，并设置它的背景颜色为绿色。 可以在 style 标签里这样写：
#cat-photo-element {
background-color: green;
}
注意在 style 标签里，声明 class 的时候必须在名字前插入 . 符号。 同样，在声明 id 的时候，也必须在名字前插入 # 符号。
调整元素的内边距
你可能已经注意到了，所有的 HTML 元素都是以矩形为基础。
每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。
padding 用来控制着元素内容与 border 之间的空隙大小。
我们可以看到蓝色框和红色框是嵌套在黄色框里的。 注意红色框的 padding 比蓝色框的更多。
如果你增加蓝色框的 padding 值，其中的文本内容与边框的距离就也会变大。
调整元素的外边距
外边距 margin 用来控制元素的边框与其他元素之间的 border 距离。
在这里，我们可以看到蓝色框和红色框都在黄色框里。 请注意，红色框的 margin 值要比蓝色框的大，因此红色框看起来比蓝色框要小。
如果你增加蓝色的 margin 值，它也会增加元素边框到其他周围元素的距离。
给元素添加负外边距
元素的 margin（外边距） 用来控制元素 border（边框） 与其周围元素之间的距离大小。
如果你把元素的 margin 设置为负值，元素会变得占用更多空间。
给元素的每一侧添加不同的内边距
有时候，你会想给一个元素每个方向的 padding 都设置一个特定的值
CSS 允许你使用 padding-top、padding-right、padding-bottom、padding-left 属性来设置四个不同方向的 padding 值。
<style>.blue-box {
background-color: blue;
color: #fff;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}</style>
给元素的每一侧添加不同的外边距
有时候，你会想给一个元素每个方向的 margin 都设置成一个特定的值。
CSS 允许你使用 margin-top、margin-right、margin-bottom、margin-left 属性来设置四个不同方向的 margin 值。
<style>
.blue-box {
background-color: blue;
color: #fff;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}</style>
使用顺时针标记指定元素的内边距
如果不想每次都要分别声明 padding-top、padding-right、padding-bottom、padding-left 属性，可以把它们汇总在一行里面一并声明，像是这样:
padding: 10px 20px 10px 20px;
这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的内边距。
<style>
.blue-box {
background-color: blue;
color: #fff;
padding: 40px 20px 20px 40px;
}</style>
使用顺时针标记指定元素的外边距
让我们再试一次，不过这一次轮到 margin 了。
同样，每个方向的外边距值可以在一行里面汇总声明，而无需分别通过 margin-top、margin-right、margin-bottom、margin-left 分别声明，比如：
margin: 10px 20px 10px 20px;
这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的外边距值。
使用属性选择器来设置元素的样式
我们已经通过设置元素的 id 和 class 来显示想要的样式。 这就是 ID 选择器和 Class 选择器。 另外，也还有其他的 CSS 选择器可以让我们给特定的元素设置样式。
让我们再次通过猫咪图片项目来练习 CSS 选择器。
在这个挑战里，我们需要使用 [attr=value] 属性选择器来修改 CatPhotoApp 中复选框的样式。 这个选择器使用特定的属性值来匹配和设置元素样式。 例如，下面的代码会改变所有 type 为 radio 的元素的外边距。
[type='radio'] {
margin: 20px 0px 20px 0px;
}
理解绝对单位与相对单位
最近的几个挑战都是设置元素的内边距和外边距的 px 值，即像素。 像素是一个长度单位，它告诉浏览器应该如何调整元素的大小和位置。 其实除了 px，CSS 也有其他单位供我们使用。
单位长度的类型可以分成 2 种：相对和绝对。 绝对单位与长度的物理单位相关。 例如，in 和 mm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。
相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。 比如 em 的大小基于元素字体的字体大小。 如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。
Note: 有些单位长度选项是相对视窗大小来改变值的， 这种设定符合响应式网页设计的原则。
给 HTML 的 body 元素添加样式
每一个 HTML 页面都有一个 body 元素。
我们可以通过设置 background-color 的属性值为 黑色，来证明 body 元素的存在。
请将以下代码添加到 style 标签里面：
body {
background-color: black;
}
从 body 元素继承样式
每一个 HTML 页面都含有 body 元素，我们也可以在 body 元素上使用 CSS 样式。
设置 body 元素样式的方法跟设置其他 HTML 元素样式的方式一样，并且其他元素也会继承 body 中所设置的样式。
首先，创建一个内容文本为 Hello World 的 h1 元素。
接着，在 body 的 CSS 规则里面添加 color: green;，这会将页面内所有字体的颜色都设置为 green。
最后，在 body 的 CSS 规则里面添加 font-family: monospace;，这会将 body 内所有元素的字体都设置为 monospace。
<style>
body {
background-color: black;
color:green;
font-family:monospace;
}
</style>
<h1>Hello World
</h1>
样式中的优先级
有时候，HTML 元素的样式会跟其他样式发生冲突。
就像 h1 元素不能同时设置绿色和粉色两种颜色。
让我们尝试创建一个字体颜色为粉色的 class，并应用于其中一个元素中。 猜一猜，它会 覆盖 body 元素的 color: green; CSS 规则吗？
创建一个能将元素的字体颜色改为粉色的 class，并命名为 pink-text。
给 h1 元素添加 pink-text class。
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text{
color:pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>
结论：class的优先级比body中的css规则高；
Class 选择器的优先级高于继承样式
我们的 pink-text class 覆盖了 body 元素的 CSS 样式！
我们刚刚证明了 class 会覆盖 body 的 CSS 样式。 那么下一个问题是，要怎么样才能覆盖 pink-text class 中所定义的样式？
创建一个 blue-text class，将元素的颜色设置为蓝色。 将它放在 pink-text class 下面。
将 blue-text class 应用于 h1 元素，看看它和该元素上的 pink-text class 哪一个会优先显示。
将多个 class 属性应用于一个 HTML 元素，需以空格来间隔这些属性，例如：
class="class1 class2"
注意： HTML 元素里应用的 class 的先后顺序无关紧要。
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text{
color:blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>
但是，在 <style> 标签里面声明的 class 顺序十分重要，之后的声明会覆盖之前的声明。 第二个声明的优先级始终高于第一个声明。 由于 .blue-text 是在后面声明的，所以它的样式会覆盖 .pink-text 里的样式。
对比
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.blue-text{
color:blue;
}
.pink-text {
color: pink;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>
ID 选择器优先级高于 Class 选择器
我们刚刚证明了浏览器读取 CSS 是由上到下的。 这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。 注意，如果我们在 h1 元素的类中，将 blue-text 放置在 pink-text 之前，它仍然会检查声明顺序，而不是使用顺序！
但我们还没有完成。 其实还有其他方法可以覆盖 CSS 样式。 你还记得 id 属性吗？
我们来通过给 h1 元素添加 id 属性，覆盖 pink-text 和 blue-text 类，使 h1 元素变成橘色。
给 h1 元素添加 id 属性，属性值为 orange-text。 设置方式如下：
<h1 id="orange-text">
h1 元素需继续保留 blue-text 和 pink-text 这两个 class。
在 style 元素中创建名为 orange-text 的 id 选择器。 例子如下：
#brown-text {
color: brown;
}
注意： 无论在 pink-text class 之前或者之后声明，id 选择器的优先级总是高于 class 选择器。
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
#orange-text{
color:orange;
}
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J2pCoeGQ-1651760079894)(https://cdn.jsdelivr.net/gh/512Crazypython/image/202205051828333.png)]
内联样式的优先级高于 ID 选择器
我们刚刚证明了，id 选择器无论在 style 标签的任何位置声明，都会覆盖 class 声明的样式。
其实还有其他方法可以覆盖 CSS 样式。 你还记得行内样式吗？
使用行内样式尝试让 h1 的字体颜色变白。 记住，内联样式看起来是像这样：
<h1 style="color: green;">
h1 元素应继续保留 blue-text 和 pink-text 这两个 class。
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 style="color:white" id="orange-text" class="pink-text blue-text">Hello World!</h1>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MhvdwFGI-1651760079894)(https://cdn.jsdelivr.net/gh/512Crazypython/image/202205051830042.png)]
Important 的优先级最高
耶！ 我们刚刚又证明了行内样式会覆盖 style 标签里面所有的 CSS 声明。
不过， 还有一种方式可以覆盖重新 CSS 样式。 这是所有方法里面最强大的一个。 在此之前，我们要考虑清楚，为什么我们要覆盖 CSS 样式。
很多时候，你会使用 CSS 库， CSS 库中的样式会意外覆盖你的 CSS 样式。 如果想保证你的 CSS 样式不受影响，你可以使用 !important。
让我们回到 pink-text 类声明。 pink-text 类的颜色样式已被之后的 class 声明、id 声明以及行内样式所覆盖。
给粉红文本元素的颜色声明添加关键词 !important，以确保 h1 元素为粉红色。
如下所示：
color: red !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>
使用十六进制编码获得指定颜色
你知道在 CSS 里面还有其他方式来代表颜色吗？ 其中一个方法叫十六进制编码，简称 hex。
日常生活中，我们使用的计数方法一般是 decimals，或十进制，即使用数字 0 到 9 来表示。 而 Hexadecimals（或 hex）基于 16 位数字， 它包括 16 种不同字符。 像十进制一样，0-9 的符号代表 0 到 9 的值。 然后，A、B、C、D、E、F 代表 10 至 15 的值。 总的来说，0 到 F 在十六进制里代表数字，总共有 16 个值。 你可以在此处找到更多关于十六进制信息。
在 CSS 里面，我们可以使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R）、绿（G）、蓝（B）。 例如，#000000 代表黑色，同时也是最小的值。 你可以在此处找到更多关于 RGB 颜色系统的信息。
body {
color: #000000;
}
将 body 元素的背景颜色由 black 改为它对应的十六进制编码 #000000。
使用十六进制编码混合颜色
回顾一下，十六进制编码使用 6 个十六进制字符来表示颜色，两个字符为一组，分别代表红（R）、绿（G）、蓝（B）。
通过三原色（红、绿、蓝），我们可以创建 1600 万种不同颜色。
例如，橘色是纯红色混合一些绿色而成，其中没有蓝色。 在十六进制编码里面，它可以写成 #FFA500。
0 是十六进制里面最小的数字，表示没有颜色。
F 是十六进制里面最大的数字，有最高的亮度。
<style>
.red-text {
color: #FF0000;
}
.green-text {
color: #00FF00;
}
.dodger-blue-text {
color: #1E90FF;
}
.orange-text {
color: #FFA500;
}
</style>
<h1 class="red-text">I am red!</h1>
<h1 class="green-text">I am green!</h1>
<h1 class="dodger-blue-text">I am dodger blue!</h1>
<h1 class="orange-text">I am orange!</h1>
使用缩写的十六进制编码
许多人对超过 1600 万种颜色感到不知所措， 并且很难记住十六进制编码。 幸运的是，你可以使用缩写形式。
例如，红色的 #FF0000 十六进制编码可以缩写成 #F00。 在这种缩写形式里，三个数字分别代表着红（R）、绿（G）、蓝（B）三原色。
这样，颜色的数量减少到了大约 4000 种。 且在浏览器里 #FF0000 和 #F00 是完全相同的颜色。
<style>
.red-text {
color: #F00;
}
.fuchsia-text {
color: #F0F;
}
.cyan-text {
color: #0FF;
}
.green-text {
color: #0F0;
}
</style>
<h1 class="red-text">I am red!</h1>
<h1 class="fuchsia-text">I am fuchsia!</h1>
<h1 class="cyan-text">I am cyan!</h1>
<h1 class="green-text">I am green!</h1>
使用 RGB 值为元素上色
RGB 值是在 CSS 中表示颜色的另一种方法。
黑色的 RGB 值：
rgb(0, 0, 0)
白色的 RGB 值：
rgb(255, 255, 255)
RGB 值与我们之前学到的十六进制编码不同。RGB 值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。
如果我们稍微计算一下，就不难发现这两种表示方式本质上是等价的。在十六进制编码中，我们用两个十六进制数表示一个颜色；这样，每种颜色都有 16 * 16（即 256）种可能。 所以，RGB 从零开始计算，与十六进制代码的值的数量完全相同。
下面是通过使用 RGB 值设置背景颜色为橘色的例子：body。
body {
background-color: rgb(255, 165, 0);
}
<style>
body {
background-color:rgb(0,0,0);
}
</style>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tA0kOIxF-1651760079897)(https://cdn.jsdelivr.net/gh/512Crazypython/image/202205051845694.png)]
使用 RGB 混合颜色
就像使用十六进制编码一样，你可以通过不同值的组合，来混合得到不同的 RGB 颜色。
<style>
.red-text {
color: rgb(255,0,0);
}
.orchid-text {
color: rgb(218,112,214);
}
.sienna-text {
color: rgb(160,82,45);
}
.blue-text {
color: rgb(0,0,255);
}
</style>
<h1 class="red-text">I am red!</h1>
<h1 class="orchid-text">I am orchid!</h1>
<h1 class="sienna-text">I am sienna!</h1>
<h1 class="blue-text">I am blue!</h1>x
使用 CSS 变量一次更改多个元素
CSS 变量可以实现仅需要更新一个值，就可以将更改应用到多个 CSS 样式属性的强大方法。
按照下面指示的来做，我们只需要改变三个值，多个样式将会同时被修改。
在 penguin class 里，将 black 改为 gray；gray 改为 white；yellow 改为 orange。
<style>
.penguin {
/* 只修改这一行下面的代码 */
--penguin-skin: black;
--penguin-belly: gray;
--penguin-beak: yellow;
/* 只修改这一行上面的代码 */
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}
.penguin-top {
top: 10%;
left: 25%;
background: var(--penguin-skin, gray);
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
background: var(--penguin-skin, gray);
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
background: var(--penguin-skin, gray);
width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
background: var(--penguin-skin, gray);
width: 30%;
height: 60%;
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg);
z-index: -1;
}
.right-cheek {
top: 15%;
left: 35%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
background: var(--penguin-belly, white);
width: 95%;
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.right-feet {
top: 85%;
left: 60%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
background: white;
width: 35%;
height: 35%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
background: var(--penguin-beak, orange);
width: 20%;
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
background: var(--penguin-beak, orange);
width: 16%;
height: 10%;
border-radius: 50%;
}
body {
background:#c6faf1;
}
.penguin * {
position: absolute;
}
</style>
<div class="penguin">
<div class="penguin-bottom">
<div class="right-hand"></div>
<div class="left-hand"></div>
<div class="right-feet"></div>
<div class="left-feet"></div>
</div>
<div class="penguin-top">
<div class="right-cheek"></div>
<div class="left-cheek"></div>
<div class="belly"></div>
<div class="right-eye">
<div class="sparkle"></div>
</div>
<div class="left-eye">
<div class="sparkle"></div>
</div>
<div class="blush-right"></div>
<div class="blush-left"></div>
<div class="beak-top"></div>
<div class="beak-bottom"></div>
</div>
</div>
<style>.penguin {
/* 只修改这一行下面的代码 */
--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
/* 只修改这一行上面的代码 */
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}</style>
创建一个自定义的 CSS 变量
为创建一个 CSS 变量，你只需要在变量名前添加两个连字符号，并为其赋值即可，例子如下：
--penguin-skin: gray;
这样就会创建一个 --penguin-skin 变量，它的值为 gray。 现在你可以在你的 CSS 中的其他地方使用这个变量来改变其他属性的值为灰色。
在 penguin class 里面，创建一个 --penguin-skin 变量，并将其值设置为 gray。
使用一个自定义的 CSS 变量
创建变量后，CSS 属性可以通过调用变量名来使用它对应的值。
background: var(--penguin-skin);
因为引用了 --penguin-skin 变量的值，使用了这个样式的元素背景颜色会是灰色。 请注意，除非变量名称完全匹配，否则将不会应用样式。
将 --penguin-skin 的值应用到 class 为 penguin-top、penguin-bottom、right-hand、left-hand 的 background 的属性值。
给 CSS 变量设置备用值
使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。
注意： 备用值不是用于增强浏览器的兼容性，它也不适用于 IE 浏览器。 相反，它是用来让浏览器在找不到你的变量时可以显示一种颜色。
下面是操作方式：
background: var(--penguin-skin, black);
如果你的变量没有设置，这将会把背景设置为 black。 提示：这对调试代码也会很有帮助。
通过浏览器降级提高兼容性
使用 CSS 时可能会遇到浏览器兼容性问题。 提供浏览器降级方案来避免潜在的问题会显得很重要。
当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。 举个例子，如果使用 CSS 变量来指定站点的背景色，IE 浏览器由于不支持 CSS 变量而会忽略背景色。 此时，浏览器会尝试使用其它值。 但如果没有找到其它值，则会使用默认值，也就是没有背景色。
这意味着如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。 这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。
我们使用了 CSS 变量来定义 .red-box 的背景色。 现在，我们通过在现有的声明之前添加另一个 background 声明，并将它的值设置为 red，来提升浏览器的兼容性。
<style>
:root {
--red-color: red;
}
.red-box {
background:red;
background: var(--red-color);
height: 200px;
width:200px;
}
</style>
<div class="red-box"></div>
继承 CSS 变量
当创建一个变量时，变量会在创建变量的选择器里可用。 同时，在这个选择器的后代选择器里也是可用的。 这是因为 CSS 变量是可继承的，和普通的属性一样。
CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承。
:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。 我们在 :root 里创建变量在全局都可用，即在任何选择器里都生效。
在 :root 选择器里定义变量 --penguin-belly 并设置它的属性值为 pink。 此时，你会发现变量被继承，所有使用该变量的子元素都会有粉色背景。
<style>
:root {
/* 只修改这一行下面的代码 */
--penguin-belly:pink;
/* 只修改这一行上面的代码 */
}
body {
background: var(--penguin-belly, #c6faf1);
}
.penguin {
--penguin-skin: gray;
--penguin-beak: orange;
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}
.right-cheek {
top: 15%;
left: 35%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
background: var(--penguin-belly, white);
width: 95%;
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.penguin-top {
top: 10%;
left: 25%;
background: var(--penguin-skin, gray);
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
background: var(--penguin-skin, gray);
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
background: var(--penguin-skin, gray);
width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
background: var(--penguin-skin, gray);
width: 30%;
height: 60%;
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg);
z-index: -1;
}
.right-feet {
top: 85%;
left: 60%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
background: white;
width: 35%;
height: 35%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
background: var(--penguin-beak, orange);
width: 20%;
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
background: var(--penguin-beak, orange);
width: 16%;
height: 10%;
border-radius: 50%;
}
.penguin * {
position: absolute;
}
</style>
<div class="penguin">
<div class="penguin-bottom">
<div class="right-hand"></div>
<div class="left-hand"></div>
<div class="right-feet"></div>
<div class="left-feet"></div>
</div>
<div class="penguin-top">
<div class="right-cheek"></div>
<div class="left-cheek"></div>
<div class="belly"></div>
<div class="right-eye">
<div class="sparkle"></div>
</div>
<div class="left-eye">
<div class="sparkle"></div>
</div>
<div class="blush-right"></div>
<div class="blush-left"></div>
<div class="beak-top"></div>
<div class="beak-bottom"></div>
</div>
</div>
更改特定区域的变量
当你在 :root 里创建变量时，这些变量的作用域是整个页面。
然后，你可以通过在一个特定的选择器中再次设置这些变量来重写这些变量
<style> .penguin {
/* 只修改这一行下面的代码 */
--penguin-belly:white;
/* 只修改这一行上面的代码 */
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}</style>
使用媒体查询更改变量
CSS 变量可以简化媒体查询的定义方式。
例如，当屏幕小于或大于媒体查询所设置的值，只要我们更新变量的值，那么使用了此变量的元素样式就都会更改。
在媒体查询声明的 :root 选择器里，重定义 --penguin-size 的值为 200px。 同时，重新定义 --penguin-skin 的值为 black， 然后通过缩放页面来查看它们是否生效。
<style>
:root {
--penguin-size: 300px;
--penguin-skin: black;
--penguin-belly: white;
--penguin-beak: orange;
}
@media (max-width: 350px) {
:root {
/* 只修改这一行下面的代码 */
--penguin-size:200px;
--penguin-skin: black;
/* 只修改这一行上面的代码 */
}
}
.penguin {
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: var(--penguin-size, 300px);
height: var(--penguin-size, 300px);
}
.right-cheek {
top: 15%;
left: 35%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
background: var(--penguin-belly, white);
width: 95%;
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.penguin-top {
top: 10%;
left: 25%;
background: var(--penguin-skin, gray);
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
background: var(--penguin-skin, gray);
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 5%;
left: 25%;
background: var(--penguin-skin, black);
width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(130deg);
z-index: -1;
animation-duration: 3s;
animation-name: wave;
animation-iteration-count: infinite;
transform-origin:0% 0%;
animation-timing-function: linear;
}
@keyframes wave {
10% {
transform: rotate(110deg);
}
20% {
transform: rotate(130deg);
}
30% {
transform: rotate(110deg);
}
40% {
transform: rotate(130deg);
}
}
.left-hand {
top: 0%;
left: 75%;
background: var(--penguin-skin, gray);
width: 30%;
height: 60%;
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg);
z-index: -1;
}
.right-feet {
top: 85%;
left: 60%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left:-23%;
background: white;
width: 150%;
height: 100%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
background: var(--penguin-beak, orange);
width: 20%;
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
background: var(--penguin-beak, orange);
width: 16%;
height: 10%;
border-radius: 50%;
}
body {
background:#c6faf1;
}
.penguin * {
position: absolute;
}
</style>
<div class="penguin">
<div class="penguin-bottom">
<div class="right-hand"></div>
<div class="left-hand"></div>
<div class="right-feet"></div>
<div class="left-feet"></div>
</div>
<div class="penguin-top">
<div class="right-cheek"></div>
<div class="left-cheek"></div>
<div class="belly"></div>
<div class="right-eye">
<div class="sparkle"></div>
</div>
<div class="left-eye">
<div class="sparkle"></div>
</div>
<div class="blush-right"></div>
<div class="blush-left"></div>
<div class="beak-top"></div>
<div class="beak-bottom"></div>
</div>
</div>
应用视觉设计
使用 text-align 属性创建视觉平衡
web 内容大部分都是文本。 CSS 里面的 text-align 属性可以控制文本的对齐方式。
text-align: justify; 将文本隔开，使每行的宽度相等。
text-align: center; 可以让文本居中对齐。
text-align: right; 可以让文本右对齐。
text-align: left; 是默认值，它可以让文本左对齐。
<!--请让内容文本为 “Google” 的 h4 标签居中对齐， 然后将介绍 Google 创立历程的段落文本两端对齐。-->
<style>
h4 {
text-align:center;
}
p {
text-align:justify;
}
.links {
margin-right: 20px;
}
.fullCard {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Google</h4>
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
使用 width 属性调整元素的宽度
你可以使用 CSS 里的 width 属性来指定元素的宽度。 属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。 下面这段代码可以把图片的宽度设置为 220px：
img {
width: 220px;
}
为卡片元素添加 width 属性，并将它的宽度设置为 245px。 使用 fullCard class 来选择卡片元素。
<!--为卡片元素添加 `width` 属性，并将它的宽度设置为 245px。 使用 `fullCard` class 来选择卡片元素。-->
<style>
h4 {
text-align: center;
}
p {
text-align: justify;
}
.links {
margin-right: 20px;
text-align: left;
}
.fullCard {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
width:245px;
}
.cardContent {
padding: 10px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Google</h4>
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
