3.4 样式与目标
如下所示，就是我们的样式
.para{ font-size: 22px; color:#f00; text-align: center; padding-left: 20px;
}我们的目标就是
如果没有一个好的结构
所以样式和目标在这里牵手了，问题是他们是如何在一起的呢？下面就是CSS与HTML沟通的重点所在了:
3.4.1 选择器
我们用到的选择器叫做类选择器，也就是class，或者说应该称之为class选择器更合适。与类选择器最常一起出现的是ID选择器，不过这个适用于比较高级的场合，诸如用JS控制DOM的时候就需要用到ID选择器。而基本的选择器就是如下面的例子:
p.para{ color:#f0f;
}将代码添加到style.css的最下面会发现“如果没有一个好的结构”变成了粉红色，当然我们还会有这样的写法
p>.para{ color:#f0f;
}为了产生上面的特殊的样式，虽然不好看，但是我们终于理解什么叫层叠样式了，下面的代码的重要度比上面高，也因此有更高的优先规则。
而通常我们可以通过一个
p{ text-align:left;
}这样的元素选择器来给予所有的p元素一个左对齐。
还有复杂一点的复合型选择器，下面的是HTML文件
<!DOCTYPE html><html><head> <title>CSS example</title> <link href="./style.css" rel="stylesheet" type="text/css" /></head><body> <p class="para">如果没有一个好的结构</p> <div id="content"> <p class="para2">那么以后可能就是这样子。。。。</p> </div></body></html>
还有CSS文件
.para{ font-size: 22px; color:#f00; text-align: center; padding-left: 20px;
}.para2{ font-size:44px; color:#3ed; text-indent: 2em; padding-left: 2em;
}p.para{ color:#f0f;
}div#content p { font-size:22px;
}3.5 更有趣的CSS
一个包含了para2以及para_bg的例子
<div id="content"> <p class="para2 para_bg">那么以后可能就是这样子。。。。</p> </div>
我们只是添加了一个黑色的背景
.para_bg{ background-color:#000;
}重新改变后的网页变得比原来有趣了很多，所谓的继承与合并就是上面的例子。
我们还可以用CSS3做出更多有趣的效果，而这些并不在我们的讨论范围里面，因为我们讨论的是be a geek。
或许我们写的代码都是那么的简单，从HTML到Javascript，还有现在的CSS，只是总有一些核心的东西，而不是去考虑那些基础语法，基础的东西我们可以在实践的过程中一一发现。但是我们可能发现不了，或者在平时的使用中考虑不到一些有趣的用法或者说特殊的用法，这时候可以通过观察一些精致设计的代码中学习到。复杂的东西可以变得很简单，简单的东西也可以变得很复杂。
