CSS样式的应用.ppt

《CSS样式的应用.ppt》由会员分享，可在线阅读，更多相关《CSS样式的应用.ppt（24页珍藏版）》请在三一文库上搜索。

1、1,网站规划与网页设计,电子工业出版社,2,5.1 CSS的特点和用途 5.2 CSS与HTML文档的结合方法 5.3 样式表语法 5.4 多重CSS的层叠 5.5 CSS的属性单位 5.6 CSS在网页中的应用,第5章 CSS样式的应用,3,CSS（Cascading Style Sheets）中文翻译为层叠样式表单，简称样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，文字的大小、色彩及图片位置等，都是设置显示内容的样式。层叠是指在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层

2、次顺序处理。 它的主要用途如下所述。 使页面的字体变得更漂亮，更容易编排，使页面效果真正达到赏心悦目。 用户可以轻松地控制页面的整体风格和布局。 如果站点上所有的页面都使用同一个CSS文件进行控制，那么可以对许多网页的风格格式同时进行更新，不用再一页一页地更新了。只要修改这个CSS文件中相应的代码，整个站点的所有页面都会随之发生变动。,5.1 CSS的特点和用途,4,CSS控制网页内容显示格式的方式是通过许多定义好的样式属性（如字号、段落控制等）来实现的，并将多个样式属性定义为一组可供调用的选择符（selector）。其实，选择符就是某一个样式的名称。当HTML文档中某个元素要使用该样式时，必

3、须使用该名称选择样式。在这里使用选择符这个名词的原因，是为了与W3C标准统一，其实可以直接把它当成样式名称，这样会比较好理解。 要想在浏览器中显示出样式表的效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读。这里介绍4种在页面中插入样式表的方法：内部样式、行内样式、链入外部样式和导入外部样式。,5.2 CSS与HTML文档的结合方法,5,5.2.1 内部样式 内部样式（embedded styles）是把样式表放到页面的区内，这些定义的样式就可以应用到页面中了。样式表是用标记插入的。定义的样式可以在整个HTML文档中调用。可以在HTML文档的和标记之间插入一个标记对，在其中

4、定义样式。其格式为： ,【例5-1】,6,5.2.2 行内样式 行内样式（inline styles）也称内嵌样式，是指在HTML标记中插入style属性，再定义要显示的样式，而style属性的内容就是CSS的属性和值。用这种方法，可以很简单地对某个标记单独定义样式。它的特点是“定义某一个标记的样式风格”，即只对所定义的标记起作用，并非对整个页面起作用。有时候这种方式非常有效，其格式为： style属性可以应用于除basefont，param和script之外的任意标记（包括本身）。,【例5-2】,7,5.2.3 链入外部样式 链入外部样式（linked styles）就是当浏览器读取到HTM

5、L文档的样式表链接标记时，将向所链接的外部样式表索取样式。先将样式表保存为一个样式表文件（.css），然后在网页中用标记链接这个样式表文件，这个标记必须放到页面的区内，其格式为： rel=“stylesheet“属性定义在网页中使用外部的样式表，type=“text/css“属性定义文件的类型为样式表文本，href属性用于定义.css文件的URL。,【例5-3】,8,5.2.4 导入外部样式 导入外部样式（imported styles）就是当浏览器读取HTML文件时，复制一份样式表到这个HTML文件中，即在内部样式表的标记对里导入一个外部样式表文件。其格式为： 导入外部样式表输入方式上更有优

6、势，实质上它相当于内部样式。,【例5-4】,9,5.3.1 用类（class）选择符定义样式 用类选择符能够把相同的标记分类定义为不同的样式。例如，希望同一种标记（如）在不同的地方使用不同的样式（一个段落向右对齐，一个段落居中），就可以先定义两个类，在应用时只要在标记中指定它属于哪一个类，就可以使用该类的样式了。其格式为： ,5.3 样式表语法 class与id类选择符,10,5.3.1 用类（class）选择符定义样式 还有一种用法，是在选择符中省略HTML“标记”名，这样可以把几个不同的元素定义成相同的样式。其格式为： 有无HTML“标记”的区别在于，若在定义类选择符前加上HTML标记，其

7、适用范围将只限于该标记所包含的内容。这种省略HTML标记的类选择符是最常用的定义方法，使用这种方法，可以很方便地在任意标记上套用预先定义好的类样式。,5.3 class与id类选择符,【例】,11,5.3.2 用id选择符定义样式 id选择符用来对某个单一元素定义单独的样式。 id选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。 定义id选择符时要在id名称前加上一个“#”号。与类选择符相同，定义id选择符也有两种方法。 第一种方法是用id选择符定义样式，格式为： ,5.3 class与id类选择符,【例】,12,5.3.2 用id选择符定义样式 还有一种方法，是在选择符

8、中加上HTML“标记”名，其格式为： “标记”是HTML的标记名称。若在id选择符前加上HTML的标记，其适用范围将只限于该标记所包含的内容。id选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。,5.3 class与id类选择符,13,5.3.3 对标签进行重新定义 标签选择器 其格式为： ,5.3 class与id类选择符,【例】,14,5.3.4 复合内容选择器 其格式为： ,5.3 class与id类选择符,【例】,body,div,p,a,ul,li,dl,dt,ddmargin:0; padding:0;,15,1 使用标记 标记用来定义网页上的一个特定区域，在

9、该区域的范围内可包含文字、图片、表格、窗体及其他标记等。在标记内的所有内容都将调用此标记所定义的样式，且区域与区域之间是彼此独立的。在定义区域间使用不同样式时，可使用标记。标记的格式为： . 或 . 2 使用标记 标记主要用来定义网页上的区域，通常用于比较大的范围；而标记也可以用来定义区域，但一般用于网页中某一个小问题段落，其格式为： . 或 .,5.3 样式表语法 与标记,16,前面介绍了在网页中插入样式表的4种方法，那么，当这4种方法同时出现时，浏览器会以哪种方法定义的规则为准呢？这就涉及了样式表的优先级别和叠加。一般原则是，最接近目标的样式定义优先级最高。高优先级样式将继承低优先级样式的

10、未重叠定义，但覆盖重叠的定义。根据规定，样式表的优先级别从高到低为：行内样式、内部样式、链接样式、导入样式和默认浏览器样式。浏览器将按照上述顺序执行样式表的规则。 样式表的层叠性就是继承性，样式表的继承规则是：外部的元素样式会保留下来，由这个元素所包含的其他元素继承；所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改；遇到冲突的地方会以最后定义的为准。,5.4 多重CSS的层叠,17,eg5-5: 首先链入一个外部样式表 h3 color:red; text-align:left; font-szie:8pt 然后在内部样式表中 h3 text

11、-align:right; font-size:20pt 页面叠加后的样式就是 h3 color:red; text-align:right; font-size:20pt eg5-6: div color:red; font-size:9pt p color:blue 这个段落的文字为蓝色9号字 ,5.4 多重CSS的层叠,18,5.5.1 长度、百分比单位 进行文字、排版、边界等设置时，常常会在属性值后加上长度单位或者百分比单位。 1长度单位 长度单位有相对长度单位和绝对长度单位两种类型。相对长度单位是指以该属性前一个属性的单位值为基础，来完成目前的设置。绝对长度单位，将不会随着显示设备的

12、不同而改变。换句话说，属性值使用绝对长度单位时，不论在哪种设备上显示都是一样的，例如，屏幕上的1cm与打印机上的1cm是一样长的。 P76页表5-1 对照表 由于相对长度单位确定的是一个相对于另一个长度属性的长度，因而它能更好地适应不同的媒体，所以它是首选的。,5.5 CSS的属性单位,19,5.5.1 长度、百分比单位 2百分比单位 百分比单位也是一种常用的相对类型。百分比值总是相对于另一个值来说的，该值可以是长度单位或其他单位。每一个可以使用百分比值单位指定的属性，同时也自定义了这个百分比值的参照值。在大多数情况下，这个参照值是该元素本身的字体尺寸。并非所有属性都支持百分比单位。 一个百分

13、比值由可选的正号“+”或负号“”，接着一个数字，后跟百分号“%”组成。如果百分比值是正的，正号可以不写。正负号、数字与百分号之间不能有空格。例如， p line-height: 150% /* 本段文字的高度为标准行高的1.5倍 */ hr width: 80% /* 线段长度是相对于浏览器窗口的80% */,5.5 CSS的属性单位,20,5.5.2 色彩单位 1用十六进制数表示色彩值 在HTML中，要使用RGB概念指定色彩时，前面是一个“#”号，再加上6个十六进制的数字表示，表示方法为：#RRGGBB。其中，前两个数字代表红光强度（Red），中间两个数字代表绿光强度（Green），后两个数

14、字代表蓝光强度（Blue）。以上三个参数的取值范围为：00ff，参数必须是两位数。对于只有一位的参数，应在前面补0。这种方法共可表示256256256种色彩，即16M种色彩。而红色、绿色、蓝色、黑色、白色对应的十六进制数分别为：#ff0000、#00ff00、#0000ff、#000000、#ffffff。例如， div color: #ff0000 如果每个参数各自在两位上的数字都相同，也可缩写为#RGB的方式。例如：#ff8800可以缩写为#f80。,5.5 CSS的属性单位,21,5.5.2 色彩单位 2用rgb函数表示色彩值 在CSS中，可以用rgb函数设置出所要的色彩，语法格式为：r

15、gb(R,G,B)。其中，R为红色值，G为绿色值，B为蓝色值。三个参数可取正整数值或百分数值，正整数值的取值范围为0255，百分数值的取值范围为色彩强度的百分比0.0%100.0%。例如， div color: rgb(132,20,180) div color: rgb(12%,200,50%) 3用色彩名称表示色彩值 在CSS中也提供了与HTML一样的用色彩英文名称表示色彩的方式。CSS只提供了16种色彩名称。例如， div color: red ,5.5 CSS的属性单位,22,5.6 CSS在网页中的应用,利用实现复杂的表格细线、虚线、内外框线不同。 利用制作页面不同区域的链接效果。,

16、【例5-8】,【例5-7】,23,1用CSS创建一个布局居中的页面，如图5-7所示。 2将段落p分成3部分，每一部分应用不同的样式表。请把下面代码补全，编写完整的HTML文件。CSS可设置为外部或内部样式表文件。 样式规则为： p.first color: green p.second color: purple p.third color: gray p b color: red /* 之内加粗显示的文字以红色显示 */ p font-size: 10pt b font-size: 1.5 em /* 所有包含在中的文字尺寸为15pt，即10pt的1.5倍 */ HTML部分代码为： 第一段，应用名称为“first“的类 第二段，应用名称为“second“的类 第三段，应用名称为“third“的类 Emma Thompson, Actress 之外标题的加粗文字不会以红色显示 Dramatic actor, inspired comedienne. Is there nothing she cant do?,习题5,24,3打开站长书库CSS教程页面（http:/