CSS层叠样式表电子书.pdfVIP

第 章 CSS 层叠样式表 CSS 简介 CSS 样式的定义及使用 CSS 选择器分类 样式表的注释及继承 CSS 样式的优先级 CSS 属性详解 CSS 滤镜 CSS 是 Cascading Style Sheets 英文单词的缩写，中文意思就是层叠样式表。CSS 是 由 W3C 组织指定的一种非常实用的网页元素定义规则。CSS 能让网页制作者有效地指 定和改善网页的显示效果。CSS 是对 HTML 的补充，利用 CSS 可以节省许多重复性的 格式设定。CSS 除了可以轻松地获知网页元素的显示位置和格式外，还能产生滤镜、图 像淡化、网页淡入淡出的渐变效果。 ·52 · JavaScript 从入门到精通 3.1 CSS 简介 在样式表出现之前，Web 页面设计者只能使用各个 HTML 标签提供的标准格式，对于文本、段落 以及其他一些元素的展示没有多少变化性和灵活性。样式表的出现改变了这种状况，使Web 设计者能 够控制颜色、字体、边界以及各个 HTML 对象的多个方面。这种强大的功能使 Web 页面的创建更丰富、 更亲切。样式表可以看作是一个显示样本，用来配合标记语言达到在浏览器中显示文件的效果。当浏 览器读取到标记语言内指定的样式表后，浏览器将按照样式表中的规则来显示标记语言文件。 3.1.1 CSS 的简介 在 HTML 文档中，尽管可以通过一些文本格式标签来达到控制文本显示效果的作用，但它们的功 能有限。例如，在一个 HTML 文档中有几十张图片，设计者需要将所有图片的边距都修改为 10 像素， 那么通常的做法只能是手工逐个修改img标签的属性，耗费了大量的重复劳动。 这个弊端可以用 CSS 样式表来解决，通过将显示和结构分开的方法，在修改样式时甚至可以不用 打开文档本身。当浏览器读取到 HTML 文档内所指定的样式表后，浏览器将按照样式表中定义的规则 来显示该文档。 为了更好地体会 CSS 的工作方式，首先举一个简单的例子，其中包含了一个CSS 规则的定义。示 例代码如下： html head title使用CSS/title /head body style=font-size:32px;color:red;font-family:宋体;background-color:gray;text-decoration:underline hello word!!! /body /html 代码运行结果如图 3-1 所示。 图3-1 使用 CSS 显示文本 从图 3-1 的设计代码中可以看出，在body标签中对要显示的文本进行了显示格式的设置，如字 第 3 章 CSS 层叠样式表 ·53 · 体、颜色、背景等。除了style关键字外，文档中的其他部分和普通的 HTML 文档一样。只要修改style 中设置的具体规则，即可方便地改变整个文档的样式和显示效果。 3.1.2 CSS 的特点 在 HTML 文档中使用 CSS 样式表具有如下几方面的优点。 简化 HTML 文件的建立：将 HTML 文档与样式表分别建立。在建立 HTML 文档时就不需要 考虑文件的显示方式，而专心于其内容的组织，多注意文档的结构而不是显示效果。这样在 建立 HTML 文档时自然简单得多。 独立性与灵活性：将 HTML 文档与样式表分开建立，这样两者之间具有独立性。要改变内容