CSS——传送石_(:з」∠)_（真名是
级联样式表），是一项从内容中分离样式的标准化技术。
这个技术比以后将要介绍到的
javascript来得不纠结很多，没有经历多少无硝烟的战争（可以参看微软和网景的javascript大战）：更符合文科森和艺术家的思维。
CSS很直观，写一段优雅的样式表，刷新浏览器就可以看到效果。这个技术成就了很多美不胜收的页面，但是华丽并不代表随意，CSS是一个严谨的艺术。
我们还需要请出上一篇中的HTML树，顺便再补充两个重要的HTML属性，这样可以很好地理解分离、解耦的实现方法。
假设有一个应用场景，我们需要找到HTML树中红色框的枝干节点——<LI>。
我们站在树下观察一阵子，当然也可以做一只猴子从<HTML>根节点爬上去找！
视角1：从树根开始，<HTML>的子节点<BODY>，<BODY>子节点的<OL>的第一个子节点就是我们需要的<LI>标签；
视角2：第一个<LI>节点！。
视角1和2，在计算机君看来都一样，实际上都是一个猴子爬树的过程。猴子会问每一个爬过的节点：“亲爱的，是你吗？”，如果节点给出肯定的答复，猴子就会停下来，这样这个节点就找到了。如果对方默不作声，猴子会继续爬树，寻寻觅觅。
视角2比视角1更为直接，也更为接近我们的思维。但是两种找节点的方式都和CSS无关，后面介绍javascript时，还会回到这两种视角。这里抛出来，是为了引出另外一种定位节点的方法。
没错，HTML君又回来了，实现方法是什么呢？
还是属性，id和class属性。
id是identification的缩写——标签的身份证，如果一个标签有id属性，那么它在HTML文件中是独一无二的。
<p id="pegeon">动物</p>
<p id="lion">动物</p>
此p非彼p，此动物非彼动物，虽然他们在外观上看上去一样。
有些时候，我们希望一次性找到一堆标签：给它们附上统一的颜色，统一的行为，或者是希望一次性批量地删除他们。
class属性，可以在HTML文件中标志一系列标签，多个相同或者不同的标签可以有同样的class属性。
<p id="pegeon" class="soul">动物</p>
<p id="lion" class="soul">动物</p>
id、class属性如同钩子一般，通过这些钩子，可以迅速地找到所有的标签。“钩子”使得样式或者是CSS可以和内容分离，在调用样式时，CSS可以通过钩子迅速地找到标签，并且施展魔法。
勾住特定标签的行为被称作“选择”，选择的方法即选择器，我们学习选择器最基本的用法。
a. 通过id钩子选择一个特定的标签
#id {
}
例如选择id为pegeon的鸽子标签：
#pegeon {
}
b.通过class钩子选择一个或多个标签
.class {
}
例如选择class为soul的标签（们）：
.soul {
}
c.选择所有的同一种标签
标签名 {
}
例如选择所有的<p>标签：
p {
}
在分离样式之前，我们需要对原来的HTML做一个改造，去掉其中有关样式的部分（字体、粗细、颜色、居中等），并且在特定的地方加上钩子。
例如：
<h1>
<center>
<font color="red">
<b>
鸽子的晚餐
</b>
</font>
</center>
</h1>
修改为：
<h1 id=" resturant_name">
鸽子的晚餐
</h1>
我们直接给出修改后的鸽子餐厅点菜页面，修改前的HTML代码可以对比上一篇文章：
<html>
<head>
<title>怪鸽子餐厅特色菜，最好的味道给热爱鸽子的你们。</title>
<meta name="keywords" content="鸽子,晚餐,美味,自由,亭子">
<meta name="description" content="一个美味的鸽子餐厅，只提供鸽子肉">
</head>
<body>
<h1 id="resturant_name">
鸽子的晚餐
</h1>
<hr>
<ol>
<li class="pegeon">
香辣鸽子
</li>
<li class="pegeon">
红烧鸽子
</li>
<li class="pegeon">
原味炖鸽子
</li>
</ol>
<input type="radio">上菜吧！</input>
<input type="radio">再等等！</input>
<br>
<br>
<input type="button" value="确定" onclick = "alert('收到您的菜单，怪鸽子餐厅很荣幸为您服务，鸽子的晚餐稍后就到。');"></input>
</body>
</html>
仔细一看，所有样式均被我们移除了，结构瞬间变得简单许多。当这里，分离的第一步完成：在内容中移除了样式，内容也变得相对单纯起来：内容即内容，与样式、行为无关，做内容就专心地做内容。
预览一下：虽然变丑了，但是我们会逐步尝试让怪鸽子餐厅的菜单页面恢复以前的样子，甚至更漂亮。
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
