《dreamweaver网页制作标准教程（配cdrom光盘）教学课件作者李建民第5章》由会员分享，可在线阅读，更多相关《dreamweaver网页制作标准教程（配cdrom光盘）教学课件作者李建民第5章（123页珍藏版）》请在金锄头文库上搜索。
1、第5章 CSS属性,5.1 样式表设计 5.2 CSS属性,5.1 样式表设计,5.1.1 样式表的定义及引用 样式表的作用是通知浏览器如何呈现文档，样式表的定义是CSS的基础。先来看一个使用CSS样式定义HTML文件的例子。 例5-1 下面是一个使用CSS对文字显示特性进行控制的HTML文件。 ,下一页,返回,5.1 样式表设计, h1font-family:“隶书“，“宋体“；font-size:14px;color:red .textfont-family:“宋体“；font-size:14px;color:red 这是一个CSS示例！ 这行文字应是红色的。 ,上一页,返回,下一页,5.
2、1 样式表设计,程序运行结果如图5-1所示。 在该例的头部使用了一个新的标记，这是CSS对样式进行集中管理的方法。在标记中定义了h1对象的样式和一个类选择器.text，在body中，间的文字的显示套用h1对象的样式，而，之间的文字因定义了其类名为text，故其显示套用类选择器.text定义的样式。,上一页,返回,下一页,图5-1,返回,5.1 样式表设计,1. 样式表定义 CSS样式表定义的基本语法为： 选择符规则表 选择符是指要引用样式的对象，它可以是一个或多个HTML标记（各个标记之间以逗号分开），如例5-1中的h1；也可以是类选择符（如例5-1中的.text）、id选择符或上下文选择符。
3、 规则表是由一个或多个样式属性组成的样式规则，各个样式属性间由分号隔开，每个样式属性的定义格式为：,上一页,返回,下一页,5.1 样式表设计,样式名：值 样式定义中可以加入注释，格式为： /*字符串*/ 例如，font-family:“宋体“; color:red等。以下是样式定义表的例子。 pfont-family:“宋体“; color:darkblue; background-color: yellow; font-size:9pt;/*字体大小*/ h1，h2font-family:“隶书“，“宋体“; color:#ff8800;text-align:center 例中定义了一个样式
4、表供HTML文件的标记使用，而例也定义了一个样式表供HTML文件的和标记使用。,上一页,返回,下一页,5.1 样式表设计,在例中，选择符由两个HTML标记组成，表示两种对象均遵循该样式定义。通常可以把描述同一个对象的样式集中在一起定义，如例；当对象的样式很多时，也可以按照样式的类别分开定义。例如例也可以分开定义为： pfont-family:“宋体“; font-size:9pt; pcolor:darkblue;background-color:yellow;,上一页,返回,下一页,5.1 样式表设计,2. 样式引用 在HTML文件中，样式引用的方式有以下几种。 （1）连接到外部样式表。如果
5、多个HTML文件要共享样式表（这些页面的显示特性相同或十分接近），则可以用如下的方法，即将样式表定义为一个独立的CSS样式文件，使用该样式表的HTML文件在头部用标记连接到这个CSS样式文件即可。例5-2给出了这种方式的用法。,上一页,返回,下一页,5.1 样式表设计,例5-2 先将样式定义存放于文件style.css（CSS样式文件的扩展名为.css），style.css文件中包含的内容如下所示。 h1font-family:“隶书“，“宋体“；color:#ff8800 pbackground-color:yellow; color:#000000 .textfont-family:“宋体
6、“; font-size:14pt;color:red HTML文件css1.htm要引用该样式表，其文件内容为：,上一页,返回,下一页,5.1 样式表设计, 连接外部CSS文件示例 ,上一页,返回,下一页,5.1 样式表设计,这是一个连接外部CSS文件的示例！ 这行文字应是红色的。 这一段的底色应是黄色。 通过浏览器浏览到的结果如图5-2所示。,上一页,返回,下一页,图5-2,返回,5.1 样式表设计,注意CSS样式文件不包含标记，因为标记是HTML标记，而不是CSS样式。 在HTML文件头部使用多个标记就可以连接到多个外部样式表。标记的属性主要有rel，href，type，media。re
7、l属性用于定义连接的文件和HTML文档之间的关系，通常取值为stylesheet。href属性指出CSS样式文件。type属性指出样式的类别，通常取值为text/css。media属性用于指定接受样式表的介质，默认值为screen（显示器），还可以是打印机、投影机等。,上一页,返回,下一页,5.1 样式表设计,（2）引入外部样式表。这种方式在HTML文件的头部的和标记之间，利用CSS的import声明引入外部样式表。格式为： import URL(“外部样式表文件名“)； 例如： ,上一页,返回,下一页,5.1 样式表设计,引入外部样式表的使用方式与连接到外部样式表很相似，都是将样式表定义单独
8、保存文件，在需要使用的HTML文件中进行说明。两者的本质区别是：引入方式在浏览器下载HTML文件时就将样式文件的全部内容复制到import关键字所在的位置，以替换该关键字。而连接方式在浏览器下载HTML文件时并不进行替换，而仅在HTML文件体部需要引用CSS样式文件中的某个样式时，浏览器才连接样式文件，读取需要的内容。,上一页,返回,下一页,5.1 样式表设计,（3）嵌入样式表。这种方式利用标记将样式表嵌在HTML文件的头部。例5-1就使用了这种方式。 标记内定义的前后加上注释符的作用是使不支持CSS的浏览器忽略样式表定义。标记的属性type指明样式的类别，因为对显示样式的定义标准除了有CSS
9、外，还有Netscape的JSS，其样式类别为type=“text/javascript“。Type的默认值为text/css。嵌入样式表的作用范围是本HTML文件。,上一页,返回,下一页,5.1 样式表设计,（4）内联样式。这种方式是在HTML标记中引用样式定义，方法是将标记的style属性值赋为所定义的样式规则。由于样式是在标记内部使用，故称为内联样式。 例如， 这是一个CSS示例！ 此时，样式定义的作用范围仅限于此标记范围之内。Style样式定义可以和原HTML属性一起使用。例如，,上一页,返回,下一页,5.1 样式表设计, style属性是随CSS扩展出来的，它可以应用于除basefo
10、nt、script和param之外的体部标记。还要注意，若要在一个HTML文件中使用内联样式，必须在该文件的头部对整个文档进行单独的样式表语言声明。即,上一页,返回,下一页,5.1 样式表设计, 内联样式主要应用于样式仅适用于单个页面元素的情况。因为它将样式和要展示的内容混在一起，自然会失去一些样式表的优点，其表现是样式定义和内容不能分离。所以这种方式尽量少用。 上述4种方式还可以混合使用，如例5-3。,上一页,返回,下一页,5.1 样式表设计,例5-3 设有两个样式表文件s1.css，s2.css和一个HTML文件example_css.htm，内容如下： 文件s1.css h2font-f
11、amily:“隶书“;color:#ff8800 pcolor:black; background-color:yellow; font-size:12pt 文件s2.css h3 font-family:“宋体“; color:blue; font-style:italic .textfont-family:“宋体“; font-size:10pt; color:red 文件example_css.htm,上一页,返回,下一页,5.1 样式表设计, CSS综合应用示例 a:visitedcolor:#0000ff; text-decoration:none,上一页,返回,下一页,5.1 样式
12、表设计,a:linkfont-family:“宋体“; font-size:12pt; color:#003333; background-color:#ffcc99; text-decoration:none import url(“s2.css“); 这是一个CSS样式文件综合示例！ 这行文字应是红色的。,上一页,返回,下一页,5.1 样式表设计,这一段的底色应是黄色。 这行文字由s2.css中的样式控制，应是斜体、蓝色。 超链接 CSS样式使用有4种方式： 连接、引入、嵌入和局部引用 本例在浏览器中的显示如图5-3所示。 本例中的样式定义中的a:link，a:visited，a:hove
13、r分别定义超链接在未被访问、已访问和鼠标位于超链接敏感区时的特性。,上一页,返回,下一页,图5-3,返回,5.1 样式表设计,5.1.2 相关的标记和属性 随着CSS的出现，有几个新的HTML标记和属性被增加到HTML中，以使样式表与HTML文档更简单地组合起来，它们是：类选择符和class属性、id选择符和id属性、上下文选择符、伪类、span标记和div标记。,上一页,返回,下一页,5.1 样式表设计,1. 类选择符和class属性 在样式引用的4种方式中，除了内联方式外，在其余3种方式下，样式表中的样式定义在整个页面范围内都有效。但有时在页面中可能不希望同一种标记都遵循同一种样式，或者希
14、望不同的标记能够遵循相同的样式。利用类选择符和标记的class属性就可以做到这两点。方法是：在标记中定义类选择符，在体部标记中将标记的class属性值设置为类名。 类选择符在样式表中具有样式值的类，有以下两种定义格式。,上一页,返回,下一页,5.1 样式表设计,（1）标记名.类名规则1；规则2 （2）类名规则1；规则2 前一种格式的类选择符指明所定义的样式只能用在特定的标记上。例如， ,上一页,返回,下一页,5.1 样式表设计,p.backbackground-color:#000000 本段文字的底色为#ddeeff 这是另一段 ,上一页,返回,下一页,5.1 样式表设计,本例定义了一个类b
15、ack的样式，供HTML文件的标记使用，即只有class属性为“back”的标记才遵循此样式。本例体部有两个标记，第一个设置了class属性值为back，而第二个未设置，所以只有第一个标记所管辖的内容遵循该样式，第二个则不遵循。 例5-3已经使用了第二种格式的类选择符，其中定义了类text，注意这相当于*.text，标记名是通配符表示的，匹配所有标记，即所有class属性值为text的标记都遵循此格式。这种类选择符可以使不同的标记遵循相同的样式，只要将标记的class属性值设置为类名即可。,上一页,返回,下一页,5.1 样式表设计,2. id选择符和id属性 id选择符用语定义一个元素独有的样
16、式，它与类选择符区别在于id选择符在一个HTML文件中只能引用一次，而类选择符可以多次引用。id选择符的定义格式为： #id名规则1；规则2 要引用id选择符定义的样式需在体部标记中设置id属性值，即将该id属性值设置为id名。例如，,上一页,返回,下一页,5.1 样式表设计, #colorid1color:green; id选择符与id属性结合使用可对此特定标记进行样式控制 ,上一页,返回,下一页,5.1 样式表设计,当一个样式只需要在任何文档中应用1次时，使用id是很合适的。前面我们已经提到，内联样式也适用此场合。两者相比，使用id更好些，因为它可以将样式定义和引用分开，并且可以应用于多个HTML文件。因此建议使用id方式，尽量少用内联样式。,上一页,返回,下一页,5.1 样式表设计,3. 上下文选择符 上下文选择符定义嵌套标记的样式。例如， h2 emcolor:darkred 该定义指明HTML文件中出现嵌套标记之处将引用该样式。上下文选择
