CSS的作用、类型与冲突

用户在应用CSS的时候，首先要了解CSS的作用、分类及应用会产生的冲突。

1.CSS的作用

通过灵活多变的定义后，CSS所能够指定的样式类型除了通用的颜色、字体、背景等样式外，还可以控制字符间距、填充距离、大小写等50个左右的样式，显示出强大的定义能力。

浏览者想要看的是网页上的内容结构，为了让浏览者更好地看到这些信息，需要通过格式控制来帮忙。以前，内容结构和格式控制在网页上的分布是交错结合的，查看修改很不方便，而现在把两者分开可以大大方便网页的设计者。内容结构和格式控制相分离，使得网页可以只由内容构成，而将所有网页的格式控制指向某个CSS样式表文件。其好处表现在以下两个方面：

第一，简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将只被保存一次）。

第二，只要修改保存着网站格式的CSS样式表文件，就可以改变整个站点的风格特色，在修改页面数量庞大的站点时显得格外有用。这避免了一个一个地修改网页，大大减少了重复劳动的工作量。

DreamweaverCC2015提供了对CSS样式创作的完美支持，利用DreamweaverCC2015，用户不需要了解CSS复杂烦琐的语法就可以创建出具有专业风格的CSS样式。不仅如此，DreamweaverCC2015还能够识别现存文档中定义的CSS样式，这更方便用户对现有文档进行修改。本节将使用循序渐进的方法带领读者领略CSS风采，书中大量的例子是制作优秀网页的最佳模板。CSS也是一种标记性语言，建议读者在阅读本章时一定要注意多上机实践操作，以达到良好的学习效果。

2.CSS的类型

层叠样式表的类型有3种，它们分别如下：

（1）HTML标记样式

HTML标记样式实际上是对现有HTML标记的一种重新定义。当创建或改变这类样式时，文档中所有应用该标记的文本格式都会自动被更新。例如可以利用CSS重新定义标题。标记＜h2＞;代表的格式，当修改其格式定义时，文档中所有使用＜h2＞;标记的文本格式都会自动变化。(www.xing528.com)

（2）自定义CSS样式

自定义CSS样式和某些字处理程序（如Word）中使用的样式概念类似，只是不再有字符样式和段落样式的区别。用户可以在任何文本上应用自定义的CSS样式，无论该文本是一个完整的文本块（例如一个完整的段落或是一个无序列表），还是一个局部的文本范围（例如在段落中选中的文本）。如果在一个文本块上应用自定义的CSS样式，DreamweaverCC2015会自动在文本块的块标记中添加class属性（例如，当为一个段落应用名为mystyle的样式时可能产生如下代码：＜pclass="mystyle"＞;）。如果在一个文本范围内应用CSS样式，则一个包含了class属性的span标记会被插入到文档中，并包围选中的文本。

（3）CSS选择器样式

它对某些特定的标记组合进行重新定义，也可以对所有包含了特定id属性的标记进行重新定义。例如，通过定义h2和em样式可以使文档中所有出现在h2标记中的带有被＜em＞;和＜/em＞;标记包容的文字自动应用该样式。用户也可以定义一个#mystyle样式，它可以应用到所有带有ID="mystyle"属性的文本上。对文本的常规格式化操作，会覆盖CSS样式。因此，如果用户希望用CSS样式控制段落的格式，必须删除所有常规设置的HTML格式或HTML样式。

3.CSS的冲突

在同一文本中应用两种或两种以上的样式，这些样式会相互冲突，从而产生不可预料的效果。浏览器根据以下规则显示样式属性：

1）如果在同一文本中应用两种样式，浏览器会显示出两种样式中除了冲突的属性之外的所有属性。

2）如果在同一文本中应用的两种样式是相互冲突的，浏览器显示出最里面的样式属性。

3）如果存在直接冲突，自定义样式的属性（应用class属性的样式）将覆盖HTML标记样式的属性。