那么以后可能就是这样子。。。。
Red
``` 只是， ``` javascript var para=document.getElementById("para"); para.style.color="blue"; ``` 将字体变成了蓝色，CSS+HTML 让页面有序的工作着，但是 JavaScript 却打乱了这些秩序，有着唯恐世界不乱的精彩，也难怪被冠以小三之名了——或许终于可以理解，为什么以前人们对于 JavaScript 没有好感了——不过这里要讲的是正室，也就是 CSS，这时还没有 JavaScript。  ###简介 这不是一篇专业讲述 CSS 的书籍，所以我不会去说 CSS 是怎么来的，有些东西我们既然可以很容易从其他地方知道，也就不需要花太多时间去重复。诸如重构等这些的目的之一也在于去除重复的代码，不过有些重复是不可少的，也是有必要的，而通常这些东西可能是由其他地方复制过来的。 到目前为止我们没有依赖于任何特殊的硬件或者是软件，对于我们来说我们最基本的需求就是一台电脑，或者可以是你的平板电脑，当然也可以是你的智能手机，因为他们都有个浏览器，而这些都是能用的，对于我们的 CSS 来说也不会有例外的。 CSS(Cascading Style Sheets)，到今天我也没有记得他的全称，CSS 还有一个中文名字是层叠式样式表，事实上翻译成什么可能并不是我们关心的内容，我们需要关心的是他能做些什么。作为三剑客之一，它的主要目的在于可以让我们方便灵活地去控制 Web 页面的外观表现。我们可以用它做出像淘宝一样复杂的界面，也可以像我们的书本一样简单，不过如果要和我们书本一样简单的话，可能不需要用到 CSS。HTML 一开始就是依照报纸的格式而设计的，我们还可以继续用上面说到的编辑器，又或者是其他的。如果你喜欢 DreamWeaver 那也不错，不过一开始使用 IDE 可无助于我们写出良好的代码。 忘说了，CSS 也是有版本的，和 Windows，Linux 内核等等一样，但是更新可能没有那么频繁，HTML 也是有版本的，JavaScript 也是有版本的，复杂的东西不是当前考虑的内容。 ####代码结构 对于我们的上面的 Red 示例来说，如果没有一个好的结构，那么以后可能就是这样子。 ```HTML如果没有一个好的结构
那么以后可能就是这样子。。。。
``` 虽然我们看到的还是一样的:  于是我们就按各种书上的建议重新写了上面的代码 ```HTML如果没有一个好的结构
那么以后可能就是这样子。。。。
``` 总算比上面好看也好理解多了，这只是临时的用法，当文件太大的时候，正式一点的写法应该如下所示: ```HTML如果没有一个好的结构
那么以后可能就是这样子。。。。
``` 我们需要 ```HTML如果没有一个好的结构
那么以后可能就是这样子。。。。
``` 然后我们有一个像 app.js 一样的 style.css 放在同目录下，而他的内容便是 ```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 的代码有如此多的相似 ```javascript var para={ font_size: '22px', color: '#f00', text_align: 'center', padding_left: '20px', } ``` 而22px、20px以及#f00都是数值，因此： ```javascript var para={ font_size: 22px, color: #f00, text_align: center, padding_left: 20px, } ``` 目测差距已经尽可能的小了，至于这些话题会在以后讨论到，如果要让我们的编译器更正确的工作，那么我们就需要非常多这样的符号，除非你乐意去理解: ```lisp (dotimes (i 4) (print i)) ``` 总的来说我们减少了符号的使用，但是用 lisp 便带入了更多的括号，不过这是一种简洁的表达方式，也许我们可以在其他语言中看到。 ``` \d{2}/[A-Z][a-z][a-z]/\d{4} ``` 上面的代码，是为了从一堆数据中找出“某日/某月/某年”。如果一开始不理解那是正则表达式，就会觉得那个很复杂。 这门语言可能是为设计师而设计的，但是设计师大部分还是不懂编程的，不过相对来说这门语言还是比其他语言简单易懂一些。 ###样式与目标 如下所示，就是我们的样式 ```css .para{ font-size: 22px; color: #f00; text-align: center; padding-left: 20px; } ``` 我们的目标就是 > 如果没有一个好的结构 所以样式和目标在这里牵手了，问题是他们是如何在一起的呢？下面就是 CSS 与 HTML 沟通的重点所在了: ###选择器 我们用到的选择器叫做类选择器，也就是 class，或者说应该称之为 class 选择器更合适。与类选择器最常一起出现的是 ID 选择器，不过这个适用于比较高级的场合，诸如用 JS 控制 DOM 的时候就需要用到 ID 选择器。而基本的选择器就是如下面的例子: ```css p.para{ color: #f0f; } ``` 将代码添加到 style.css 的最下面会发现“如果没有一个好的结构”变成了粉红色，当然我们还会有这样的写法 ```css p>.para{ color: #f0f; } ``` 为了产生上面的特殊的样式，虽然不好看，但是我们终于理解什么叫层叠样式了，下面的代码的权重比上面高，也因此有更高的优先规则。 而通常我们可以通过一个 ```css p{ text-align: left; } ``` 这样的元素选择器来给予所有的 p 元素一个左对齐。 还有复杂一点的复合型选择器，下面的是 HTML 文件 ```html如果没有一个好的结构
那么以后可能就是这样子。。。。
那么以后可能就是这样子。。。。