====任务描述====
【原链接】http://ife.baidu.com/task/detail?taskId=2
任务目的
- 针对设计稿样式进行合理的HTML架构，包括以下但不限于：
- 掌握常用HTML标签的含义、用法
- 能够基于设计稿来合理规划HTML文档结构
- 理解语义化，合理地使用HTML标签来构建页面
- 掌握基本的CSS编码，包括以下但不限于：
- 了解CSS的定义、概念、发展简史
- 掌握CSS选择器的含义和用法
- 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式
任务描述
- 基于第一个任务“零基础HTML编码”的代码，参考 示例图（点击查看），在步骤一的代码基础上增加CSS样式代码的编写
任务注意事项
- 只需要完成HTML，CSS代码编写，不需要写JavaScript
- 示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定
- 尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性
- HTML 及 CSS 代码结构清晰、规范
====总结====
一. CSS样式的创建
1. 外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。
每个页面使用 <link> 标签链接到样式表，具体的css文件加载方式如下：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
2. 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>
3. 内联样式
直接写在现有的HTML标签中。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
当三者同时存在时，运用的优先级遵循“就近原则”，即：内联样式>内部样式表>外部样式表
二. CSS选择器
1. 标签选择器
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：
p{font-size:12px;line-height:1.6em;}
2. 类选择器
类选择器在css样式编码中是最常用到的。语法：
.类选器名称{css样式代码;}
3. ID选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
(1)为标签设置id="ID名称"，而不是class="类名称"。
(2)ID选择符的前面是井号（#）号，而不是英文圆点（.）。
#ID选择器名称{css样式代码;}
4. 子选择器
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如：
<ul class="food"> <li>水果 <ul> <li>香蕉</li> <li>苹果</li> <li>梨</li> </ul> </li> <li>蔬菜 <ul> <li>白菜</li> <li>油菜</li> <li>卷心菜</li> </ul> </li> </ul> 子选择器的css代码： .food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
5. 后代（包含）选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如：
.first span{color:red;}
【注意】>作用于元素的第一代后代，空格作用于元素的所有后代。
6. 通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
7. 伪类选择符
伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
8. 分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}