css的三种写法以及各自的优势和缺陷

首先说说怎样编写代码和调试代码：

不要在txt中直接的编写和调试，因为一旦出错，怎么也发现不了，很难。有时候就要删除重来，即使使用notepad也是一样。所以最好的编写和调试方式是在w3里面，除非存在外部文件链接和引用的情况，才只有使用txt进行编写。

使用w3还有一个好处是随时编写，随时查看结果啊，这个比txt里面强多了，避免了不断的去切换txt编写和html网页刷新。但是正如上面所说，一旦涉及文件和图片等外部引用，就没有办法。

所以正确的流程是：

从网页上或者txt文件里复制代码到w3里进行编写调试——完毕之后再粘贴复制到文章或者txt里面归档。

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

关于CSS的三种写法：

1，第一种写法，写在元素里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

上述写法中，有两行都是绿色背景色，诚然，这种实现方式可以直接写在table里。这里只为演示示范，重复的存在与对重复的简化处理。

这种写法的缺陷是：工作量大，修改麻烦，代码不简洁，看着累。存在大量的重复工作，这是与机器学的魅力相悖逆的，只要有重复的地方都应该归一化。方便修改。一处变处处变。

2，第2种写法，写在前面，也就是head里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<html>
<head>

<style type="text/css">
td{background-color:orange;color:white}

td.blue{background-color:blue;color:white}

</style>
</head>

<body bgcolor=yellow> 
<table width=100% border=0 padding=0>
<tr>

<td>大学</td>
<td class="blue">工学院</td>

<td >商学院</td>

</tr>
<tr>
<td class="blue">学校概况</td>
<td ></td>
<td class="blue"></td>
</tr>
</table>

</body>

</html>

对代码的一些解释：

td{}是总开关。写到前面来之后解决了同一个页面里面的重复问题，多行编写变成了一次编写，高效简洁。

也就是我可以实现对所有同类元素属性的一致控制。

td.blue{}是分开关。blue通过这种方式可以实现对同类元素不同位置不同情形特殊差异的分别处理。

这种方法的优点：写到前面来之后解决了同一个页面里面的重复问题，多行编写变成了一次编写，高效简洁。

既能实现对重复的消除和归一化，又能实现差异设置的需求。这就是css的魅力所在。

潜在缺陷：但是如果有多个页面的话，仍然存在重复编写的情况。

还有一个需要注意的地方就是：不要在head里面去写这样的注释，很容易导致代码不能正常读取。鉴别的方法就是，如果网页不能显示改动后的效果，可能就是代码编写错了，注释写在head里了，怎样检查？copy到w3里面去跑一下，就很容易发现问题所在。

2.2 所以，在这样一个分分合合的处理中，还可以更加进一步从总体一致控制走向局部精微差异控制。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<html>
<head>

<style type="text/css">
td{background-color:orange;color:white}
td.blue{background-color:blue;color:white}
td.red{background-color:red;color:white}
td.green{background-color:green;color:white}
</style></head>

<body bgcolor=yellow> 
<table width=100% border=0 padding=0>
<tr>
<td class="green">大学</td>
<td class="blue">工学院</td>

<td class="red">商学院</td>
</tr>
<tr>
<td class="blue">学校概况</td>
<td ></td>
<td class="blue"></td>
</tr>
</table>
</body>

</html>

td{}是总开关。全体一致。

td.blue{}是分开关。有三个和总开关的颜色不一致。

td.red{}和td.green{}却可以让每一个位置和情形都不一样。如果要这样做万花筒，则继续编写如下：td.c01{}，td.c02{}，td.c03{}。。。。。。

3，第3种写法，写在一个单独的文件里

第一个文件:index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

第2个文件:bgcolor.css

1
2
3
4

td{background-color:orange;color:white}
td.blue{background-color:blue;color:white}
td.red{background-color:red;color:white}
td.green{background-color:green;color:white}

其中，第二个文件的内容就是方式2中<style></style>里的内容，直接复制到css文件里面就可以了。关键是名字要对上号，index.html里面引用的名字href="bgcolor.css"必须和文件名字bgcolor.css对上号。就好像td.red这个命名必须和<td class="red">对上号一样。这就是文件和文件之间，文件内部不同章节之间的通信协议。打电话要拨对号码，记得前面加86还要加010。

所以这里还有一个一个问题是，如果bgcolor.css文件和index.html处在同一个目录，那么写法就是href="bgcolor.css"，如果bgcolor.css放在一个文件里，例如放在名为css的文件夹里，那么写法就应该是，href="css/bgcolor.css"。

css作为文件引用的时候，经常在css中改变了样式，但是可能刷新网页并没有什么变化，原因是可能浏览器没有更新，有缓存，所以应该等一会再刷新，或者直接新开一个不一样的浏览器。