4.3 代码结构
对于我们的上面的Red示例来说，如果没有一个好的结构，那么以后可能就是这样子。
如果没有一个好的结构
那么以后可能就是这样子。。。。
虽然我们看到的还是一样的:
No Style
于是我们就按各种书上的建议重新写了上面的代码
如果没有一个好的结构
那么以后可能就是这样子。。。。
总算比上面好看也好理解多了，这只是临时的用法，当文件太大的时候，正式一点的写法应该如下所示:
如果没有一个好的结构
那么以后可能就是这样子。。。。
我们需要
如果没有一个好的结构
那么以后可能就是这样子。。。。
然后我们有一个像app.js一样的style.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;
}
这代码和JS的代码有如此多的相似
var para={
font_size:'22px',
color:'#f00',
text_align:'center',
padding_left:'20px',
}
而22px、20px以及#f00都是数值，因此：
var para={
font_size:22px,
color:#f00,
text_align:center,
padding_left:20px,
}
目测差距已经尽可能的小了，至于这些话题会在以后讨论到，如果要让我们的编译器更正确的工作，那么我们就需要非常多这样的符号，除非你乐意去理解:
(dotimes (i 4) (print i))
总的来说我们减少了符号的使用，但是用lisp便带入了更多的括号，不过这是一种简洁的表达方式，也许我们可以在其他语言中看到。
\d{2}/[A-Z][a-z][a-z]/\d{4}
上面的代码，是为了从一堆数据中找出“某日/某月/某年”。如果一开始不理解那是正则表达式，就会觉得那个很复杂。
这门语言可能是为设计师而设计的，但是设计师大部分还是不懂编程的，不过相对来说这门语言还是比其他语言简单易懂一些。
4.4 样式与目标
如下所示，就是我们的样式
.para{
font-size: 22px;
color:#f00;
text-align: center;
padding-left: 20px;
}
我们的目标就是
如果没有一个好的结构
所以样式和目标在这里牵手了，问题是他们是如何在一起的呢?下面就是CSS与HTML沟通的重点所在了:
4.4.1 选择器
我们用到的选择器叫做类选择器，也就是class，或者说应该称之为class选择器更合适。与类选择器最常一起出现的是ID选择器，不过这个适用于比较高级的场合，诸如用JS控制DOM的时候就需要用到ID选择器。而基本的选择器就是如下面的例子:
p.para{
color:#f0f;
}
将代码添加到style.css的最下面会发现“如果没有一个好的结构”变成了粉红色，当然我们还会有这样的写法
p>.para{
color:#f0f;
}
为了产生上面的特殊的样式，虽然不好看，但是我们终于理解什么叫层叠样式了，下面的代码的重要度比上面高，也因此有更高的优先规则。
而通常我们可以通过一个
p{
text-align:left;
}
这样的元素选择器来给予所有的p元素一个左对齐。