菜鸟学前端――css基础篇
一、CSS是神马？
CSS是Cascading Style Sheet的缩写，译为层叠样式表，用来控制网页样式，并允许将样式信息与网页内容分离(如链接式)的一种标记性语言。它是UI表现层（Presentation）的核心元素。CSS以HTML技术为基础，对其进行扩展，使其更加丰富多彩，美轮美奂。试问只有HTML的标签，而没有CSS样式的修饰，那么这个网页是什么样子的呢？
二、怎么用CSS？
俗话说“学以致用”，那么如何使用CSS呢？下面介绍常用的四种方式。
（1）行内样式
行内样式，是一种内嵌到标签里面的样式，那最直接、有效（优先级最高），也最难维护和二次利用。所以呢，尽量少用之。我的经验是，在修复静态界面样式的时候，为了不影响其它界面，可以在指定的标签内修改style属性。
下面以万能程序员宝典――“hello world”作演示。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu</title>
</head>
<body>
<p style="color:blue; font-size:35px;">hello world</p>
</body>
</html>
其中style可以看成样式属性，可以对其进行设置。
(2) 内嵌式
内嵌式主要在html中的head部声明，可以被整个html使用。它作用域更广，可以服务于整个html文档。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu</title>
<style type="text/css">
p {
color:blue; font-size:35px;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
(3) 链接式
这是一种使用频率非常高的方式，使得HTML与CSS样式分离设计，使得css文件可以被多个HTML调用使用，更容易维护（但以我的经验来看，修改公共css样式要小心，不能为了美化一个元素，而影响其他页面的效果）。
test.css样式文件
p {
color:blue; font-size:35px;
}
hello.html文件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu</title>
<link href="test.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>hello world</p>
</body>
</html>
(4) 导入样式
导入样式可以看成上述内嵌式和链接式的结合体。通过导入式，可以将css样式导入到html的head中，在页面初始化时完成。链接式，是当解析元素时，才导入这个元素的样式。如果css样式很大的话，使用导入样式速度要比链接式要慢。
test.css样式文件
p {
color:blue; font-size:35px;
}
hello.html文件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu</title>
<style type="text/css">
@import url(test.css);
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
综上，上述四种方式引用CSS效果都是一样的，如下图：
三、CSS选择器---控制html样式的利剑
如果想用CSS更好的控制HTML的样式，通晓CSS选择器是必然的。掌握了CSS选择器，就可以在css样式中任意书写样式，从而达到隔岸观火、远程控制HTML的样式本领。
常见的CSS选择器有7种，接下来举例介绍。
（1）标记选择器
其实在HTML中已经内嵌了很多标记，如<h2>、<li>等，它们都有特定的样式。
为了节省时间，下面举例采用内嵌式举例，开发中仍建议以链接式为主。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu</title>
<style type="text/css">
h3 {
color:green;
font-size:25px;
}
</style>
</head>
<body>
<h3>hello world</h3>
</body>
</html>
这里通过标记选择器对<h3>进行了样式设计。
(2) 选择器集体声明
为了提高效率，有时会将一个相同的属性设置赋给多个标记。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu</title>
<style type="text/css">
h3,p {
color:green;
font-size:25px;
}
</style>
</head>
<body>
<h3>hello world</h3>
<p>hello world</p>
</body>
</html>
(3) ID选择器
ID通常是唯一标识，建议在开发网页的时候，对ID要起一个全部网页中的唯一标识。在CSS选择器中，可以根据标签的ID定位到标签，从而只对特定的标签进行CSS样式设置。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu</title>
<style type="text/css">
#id1 {
color:green;
font-size:25px;
}
#id2 {
color:blue;
font-size:35px;
}
</style>
</head>
<body>
<h3 id="id1">hello world</h3>
<p id="id2">hello world</p>
</body>
</html>
上述页面设计中，在样式中通过“#id1”和“#id2”进行匹配元素，从而对元素设置不同的样式。
(4) 类别（class）选择器
如果说ID是对唯一元素进行匹配，那么class选择器就是对一类元素进行匹配。class可以同时设置多个class相同的元素。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu</title>
<style type="text/css">
.class1 {
color:green;
font-size:25px;
}
.class2 {
color:blue;
font-size:35px;
}
</style>
</head>
<body>
<h3 class="class1">hello world</h3>
<p class="class2">hello world</p>
<p class="class2">hello world</p>
</body>
</html>
(5) 选择器的嵌套
选择器的嵌套，一般作用两种标记之间的另外一对标记。这样做之后，只对中间的标记起作用。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu</title>
<style type="text/css">
h3 b {
color:blue;
font-size:35px;
}
</style>
</head>
<body>
<h3>hello <b>I am Test</b> world</h3>
</body>
</html>
上述的CSS样式，只对"I am Test"起作用。
(6) 子选择器
子选择器有点类似Jquery中层次选择器（将在后面的博客中介绍），通过一个标记去寻找这个标记的子标记，然后对子标记进行样式设置。它的层级符号位">"。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu</title>
<style type="text/css">
div.myDiv > ul > li > a {
color:blue;
font-size:35px;
}
</style>
</head>
<body>
<div class="myDiv">
<ul>
<li><a href="#">hello</a></li>
</ul>
</div>
</body>
</html>
（7）属性选择器
属性选择器有点类似Jquery中属性过滤选择器，它主要通过属性去匹配标记，然后对这些标记进行样式设置。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu</title>
<style type="text/css">
a[title] {
color:blue;
font-size:35px;
}
</style>
</head>
<body>
<div class="myDiv">
<ul>
<li><a href="#" title="TestCss">hello</a></li>
</ul>
</div>
</body>
</html>