第十三篇：代码的优化，删繁就简
从可以看出，尽管页面不是很漂亮，但是该有的块都有了，字体位置和大小也都调好了，然后是背景也都做了简单的添加。
但是在编辑过程中，会发现，这个代码中有很多的代码是十分一致的，有没有一种可能，这些代码可以集中表示，或者写的短一些？从中国大学的课程学习上，我学到了这样一个知识。
CSS代码来集中管理样式。
具体怎么操作呢，先来看下我之前的程序代码。
整齐是很整齐，但是大篇幅的重复内容，这些重复的都是样式，也就是style里的内容。在HTML5中，我们可以给一个标签添加两个标记，用来确定这个标签，或者说是找到这个标签，一个是id，就是给标签添加一个唯一的编码，像是身份证，全文档只有他一个，不允许重复，这样就可以唯一标识一个标签。
还有一个是class，就是给标签起个名字，这个名字可以允许其他标签使用，因为姓名重复的人有很多，在文档中，只要是class名字一样的，就会使用同一种样式，至少部分是一样的。
关于标签的样式，可以先做一个实验，然后在改变我们的页面样式，这样会稳妥一些。
首先添加一个新的网页，名字就叫YSCSS，里边先写上四个div块，分别添加这是样式四个文字。
写上四个id，分别是cs，然后先看下效果。
这是浏览器的基本样式，都是一样的。然后我把cs2改成cs1试试，系统应该会报错。
很灵敏，修改完，就直接说这个id有问题，看到这个提示，就明白id重复了。然后我再写个class试试。
Class是没有报错的，允许重名。那么接下来就看看CSS样式都怎么导入到样式中，如何起作用，又存在哪些规则。
首先是使用id来导入样式。
分别是四种颜色，对应四个样式，id导入样式的方法是在代码开始的head标签中间插入一个style标签，这个style标签中就是书写样式的位置，以后页面中的所有样式都可以写到这里。Id的样式需要使用“#”作为前缀，标识这是一个id标签的样式，是唯一连接一个标签的。
然后再使用class标签来设置一个样式，看下效果。
Class也可以通过导入样式，来分别控制四个块的样式，导入的方式是把样式写入style标签中，使用“.”作为前缀，这个点就是提示我们，这是一个class标签，可以控制多个标签的样式，也可以只控制一个标签的样式，看具体使用了，但是如果你修改了这个标签中的样式，就会影响到其他使用的标签。为啥呢，接下来看下实例。
先把两个样式的名字改成一样的，这样就可以共用一个样式了，然后我把class4中的样式修改一下。
会发现，本来是只想修改第四个文字的样式的，但是因为第一个文字也是用了文字四的样式，所以修改文字四的样式就会影响到文字一，在以后的设计过程中，如果没有特殊要求，可以尽量采用不一样的名字，或者样式分开设计，怎么分开呢？就是标签独有的样式使用id来设计，公共的样式使用class来设计。
这样，再修改文字四的样式时可以修改id中的样式。
这样就可以实现样式的分离和统一设置，那么样式间又是如何区分谁显示谁不显示呢？就像刚刚，id4中设置了文字大小，class4中也设计了文字大小，浏览器如何知道该去显示谁？
这个问题我先摸索下，课堂上讲了很多，我也要消化消化。