HTML教程CSS样式表.doc

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