简介

第 25 / 119 卷日期：2016-04-13

var para=document.getElementById("para");

para.style.color="blue";

将字体变成了蓝色，CSS+HTML 让页面有序的工作着，但是 JavaScript 却打乱了这些秩序，有着唯恐世界不乱的精彩，也难怪被冠以小三之名了——或许终于可以理解，

为什么以前人们对于 JavaScript 没有好感了——不过这里要讲的是正室，也就是 CSS，这时还没有 JavaScript。

图 29: Red Fonts

简介

这不是一篇专业讲述CSS的书籍，所以我不会去说CSS是怎么来的，有些东西我们既然可以很容易从其他地方知道，也就不需要花太多时间去重复。诸如重构等这些的目

的之一也在于去除重复的代码，不过有些重复是不可少的，也是有必要的，而通常这些东西可能是由其他地方复制过来的。

到目前为止我们没有依赖于任何特殊的硬件或者是软件，对于我们来说我们最基本的需求就是一台电脑，或者可以是你的平板电脑，当然也可以是你的智能手机，因为他

们都有个浏览器，而这些都是能用的，对于我们的 CSS 来说也不会有例外的。

CSS(Cascading Style Sheets)，到今天我也没有记得他的全称，CSS还有一个中文名字是层叠式样式表，事实上翻译成什么可能并不是我们关心的内容，我们需要关心的是

他能做些什么。作为三剑客之一，它的主要目的在于可以让我们方便灵活地去控制Web 页面的外观表现。我们可以用它做出像淘宝一样复杂的界面，也可以像我们的书本一样

简单，不过如果要和我们书本一样简单的话，可能不需要用到 CSS。HTML 一开始就是依照报纸的格式而设计的，我们还可以继续用上面说到的编辑器，又或者是其他的。

如果你喜欢DreamWeaver那也不错，不过一开始使用IDE可无助于我们写出良好的代码。

忘说了，CSS 也是有版本的，和 Windows，Linux 内核等等一样，但是更新可能没有那么频繁，HTML 也是有版本的，JS 也是有版本的，复杂的东西不是当前考虑的内

容。

是这样子。

<!DOCTYPE html> <html>

<body> <p style="font-size: 22px;color:#f00;text-align: center;padding-left: 20px

<p style="font-size:44px;color:#3ed;text-indent: 2em;padding-left: 2em;"

</body> </html>

虽然我们看到的还是一样的:

图 30: No Style

于是我们就按各种书上的建议重新写了上面的代码

<!DOCTYPE html> <html>

<head> <title>CSS example</title>

font-size: 22px;

color:#f00;

text-align: center;

padding-left: 20px;

} .para2{

color:#3ed;

text-indent: 2em;

padding-left: 2em;

} </style>

</head> <body>

<p class="para">如果没有一个好的结构</p> <p class="para2">那么以后可能就是这样子。。。。</p>

</body> </html>

总算比上面好看也好理解多了，这只是临时的用法，当文件太大的时候，正式一点的写法应该如下所示:

<!DOCTYPE html> <html>

<head> <title>CSS example</title>

<body> <p class="para">如果没有一个好的结构</p>

<p class="para2">那么以后可能就是这样子。。。。</p> </body>

</html>

我们需要

<!DOCTYPE html> <html>

<head> <title>CSS example</title>

<body>

<p class="para2">那么以后可能就是这样子。。。。</p> </body>

</html>

然后我们有一个像 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, }

全站分卷索引 · 119 卷