HTML教程CSS样式表.docVIP

HTML教程CSS样式表什么是CSS样式表上一章的课程里，我们学习了表单以及表单中的各种元素，常用的表单元素有：文本框( text)、密码框(password)、单选按钮(radio)、复选框(checkbox)、列表框 (selectoption)、按钮(button、submit和reset)、多行文本框 (textarea)。另外，还学习了框架，包括框架的基本结构、如何创建多个复杂的窗口、框架窗口之间的链接等。 从本章开始，我们将学习CSS(Cascading Style Sheet，层叠式样式表)，其中重点是样式的基本语法和如何创建常见的样式规则（如创建无下划线的超链接样式，设置细边框文本框样式，创建常见的文字、 颜色等样式等）；难点是内嵌样式、行内样式、样式表文件的使用场合。 为什么需要CSS样式表 通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性， 通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。此外，使用样式表能有效地分离网页的内容与外观控制，从而便于美工与程序员之间的分工 协作，发挥各自的优势。 为什么需要CSS样式表主要是基于以下几点原因： (1) HTML标签的外观样式比较单一。 大家在学习前面几章时，不知发现没有？前面几章网页中的文字的字体、颜色、大小、超链接、间距等样式都比较单一，为了弥补这个缺点，就需要使用CSS样式表来对HTML标签进行控制，从而实现更加丰富多彩的效果。 (2) 样式表的作用相当于华丽的衣服。 同样的内容，采用不同的CSS样式文件，可以看到不同的布局和效果。从美工的角度来看，可以更容易地调整页面外观，调整页面里某个部分的文字或者图 片等，从而实现复杂多变的页面效果，因此样式表相当于一个页面甚至一个网站的华丽的衣服。如图1所示，就是内容相同，外观不同的两个页面。 图1 内容相同样式不同的页面 (3) 样式表能实现内容与样式的分离，方便团队开发。WANGYEXX.COM 由于当今社会竞争日趋激烈，分工越来越细，每个人做的事越来越单一，我们开发一个网站也不例外，往往需要美工和程序设计人员的配合，美工做样式，程 序员写内容，为了迎合这种需要，就出现了样式表。样式表能把内容结构和格式控制相分离，使网页可以仅由内容构成，而将所有的网页格式通过CSS样式表文件 来控制，从而方便美工和程序员分工协作、各司其职、各尽其能，为开发出优秀的网站提供了有力的保障。 样式表由样式规则组成，这些规则告诉浏览器如何显示文档。一个样式(STYLE)的基本语法由3部分构成：selector(中文叫选择器，有点怪怪的，就用英文吧！)，属性(property)和属性值(value)。样式表的基本语法 网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。 一、样式表的基本结构 STYLE和/STYLE标签之间的所有内容都是样式规则，样式规则的第一部分称为选择器。每个选择器都有属性以及对应的属性值。下面让我们先来看一个样式表的基本结构，使我们对样式表有个感性的认识。 样式表的基本结构为： STYLE type=text/css !--文档样式表开始，类型为CSS样式--?P { ???? color:red; ???? font-family:隶书; ???? font-size:24px;?? }?? …… ?!--样式规则--/STYLE !--文档样式表结束-- 文档样式表一般位于HTML文件的头部，即HEAD和／HEAD标签之间，定义的样式规则就可应用到当前页面中。这些样式规则表示什么意思？下面我们就来了解一下样式规则的组成及其含义。 二、样式规则 层叠样式表是一组规则，用于定义文档的样式。例如，可以创建一个样式规则，来指定所有P标题的颜色均为浅绿。可以用来修饰网页中所有P标签的样式。 样式规则示例如下： P { color:red; font-family:隶书; font-size:24px;} !--选择器{属性:属性的值;}-- 其中，规则的第一部分称为选择器。每个选择器都有属性以及对应的属性值。上面的示例中P是规则选择器。括在大括号内的部分称为声明。声明由两部分组成：冒号前面的部分是属性，冒号后面的部分是该属性的值。一个选择器可以有多个属性，它们可以写在一起，用分号隔开。WANGYEXX.COM P { color:red; font-family:隶书; font-size:24px;} !--color 颜色属性 font-family 字体属性 font-size 字体大小属性-- 示