《网页设计与制作教程ppt课件》由会员分享，可在线阅读，更多相关《网页设计与制作教程ppt课件（56页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作教程,机械工业出版社同名教材 配套电子教案 2005.8,3.1 CSS简介 3.2 在网页中插入样式表的方法及定义 3.3 多重样式表的层叠 3.4 样式表的属性单位 3.5 样式表的常用属性,第3章 高效定制网页样式CSS,CSS（Cascading Style Sheets）中文翻译为层叠样式表单，简称样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，像文字的大小、色彩以及图片位置等，都是设置显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依
2、据层次顺序处理。,3.1 CSS简介,1. 在HTML文档中定义样式表 可以在HTML文档的和标记之间插入一个.，在其中定义样式。其格式为： 【例3-1】 【例3-2】,3.2 在网页中插入样式表的方法及定义 3.2.1 内部样式表,2. 用class选择符定义样式 用类选择符能够把相同的标记分类定义为不同的样式。其格式为： 【例3-3】,3.2 在网页中插入样式表的方法及定义 3.2.1 内部样式表,3. 用id选择符定义样式 id选择符是用来对某个单一元素定义单独的样式。定义id选择符时要在id名称前加上一个“#”号。与类选择符相同，定义id选择符也有两种方法。 用id选择符定义样式的格式
3、为： ,3.2 在网页中插入样式表的方法及定义 3.2.1 内部样式表,还有一种用法，在选择符中加上HTML“标记”名，其格式为： 【例3-4】,3.2 在网页中插入样式表的方法及定义 3.2.1 内部样式表,4. 使用span选择符 span在样式表中作为一个选择符使用，而且它也能接受style、class和id。span元素加入到HTML中，它允许网页制作者给出样式，但无须附加在一个HTML的结构标记上。 span是一个内嵌元素，所以它可以作为HTML中的元素使用。span没有结构的意义，它纯粹是应用样式，所以当样式表失效时它就失去任何作用。 【例3-5】,3.2 在网页中插入样式表的方法
4、及定义 3.2.1 内部样式表,5. 使用div选择符 div在功能上与span相似，最主要的差别在于div（division，部分的简称）是一个块级标记。div可以包含段落、标题、表格甚至其它部分。这使div便于建立不同集成的类，如章节、摘要或备注。 【例3-6】,3.2 在网页中插入样式表的方法及定义 3.2.1 内部样式表,行内样式（Inline styles）也称内嵌样式，是在HTML标记中插入style属性，再定义要显示的样式，而style属性的内容就是CSS的属性和值。用这种方法，可以很简单的对某个标记单独定义样式。但是，利用这种方法定义样式时，作用范围只可控制该标记。其格式为：
5、style属性可以应用于除basefont、param和script之外的任意body标记（包括body本身）。 【例3-7】,3.2 在网页中插入样式表的方法及定义 3.2.2 行内样式,链入外部样式表（Linked styles）就是当浏览器读取到HTML文档的样式表链接标记时，将向所链接的外部样式表索取样式。样式表保存为一个样式表文件（.css），然后在网页中用标记链接到这个样式表文件，这个标记必须放到页面的.区内。其格式为： . . 【例3-8】,3.2 在网页中插入样式表的方法及定义 3.2.3 链入外部样式表文件,导入外部样式表（Imported styles）就是当浏览器在读取H
6、TML文件时，复制一份样式表到这个HTML文件中。导入外部样式表是指在内部样式表的里导入一个外部样式表文件。其格式为： 【例3-9】,3.2 在网页中插入样式表的方法及定义 3.2.4 导入外部样式表文件,根据规定，样式表的优先级别从到到低为：行内样式、内部样式、链接样式、导入样式和缺省浏览器样式。浏览器将按照上述顺序执行样式表的规则。 样式表的层叠性就是继承性，样式表的继承规则是，外部的元素样式会保留下来继承给这个元素所包含的其他元素。所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。遇到冲突的地方会以最后定义的为准。,3.3 多重样式表的
7、层叠,1. 长度单位 长度单位有相对长度单位和绝对长度单位两种类型。 相对类型是指相对于该属性前一个属性的单位值为基础，来完成目前的设置。 绝对类型使用的单位，将不会随着显示设备的不同而改变，换句话说，属性值使用绝对单位时，不论在哪种设备上显示都是一样的，如屏幕上的1cm与打印机上的1cm是一样长的。 相对值单位确定一个相对于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是首选的。 一个长度的值由可选的正号“+”或负号“-”，接着一个数字，后跟标明单位的两个字母组成。在一个长度值之中不能有空格。,3.4 样式表的属性单位 3.4.1 长度、百分比单位,2. 百分比单位 百分比单位也是一
8、种常用的相对类型。百分比值总是相对于另一个值来说的，该值可以是长度单位或是其他单位。每一个可以使用百分比值单位指定的属性，同时也自定义了这个百分比值的参照值。大多数情况下，这个参照值是该元素本身的字体尺寸。并非所有属性都支持百分比单位。 一个百分比值由可选的正号“+”或负号“-”，接着一个数字，后跟百分号“%”。例如： p line-height: 150% /* 本段文字的高度为标准行高的1.5倍 */ hr width: 80% /* 线段长度是相对于浏览器窗口的80% */ 注意，不论使用哪种单位，在设置时，数值与单位间不要加空格。,3.4 样式表的属性单位 3.4.1 长度、百分比单位
9、,在HTML标记中只提供了两种设置色彩的方法：十六进制数和色彩名称。CSS则提供了三种定义色彩的方法：十六进制数、rgb函数（整数或百分数）和色彩名称。 1. 用十六进制数方式表示色彩值 要使用RGB概念指定色彩时，使用一个#号，加上6个十六进制的数字表示，表示方法为：#RRGGBB。其中前两个数字代表红光强度（Red），中间两个数字代表绿光强度（Green），后两个数字代表蓝光强度（Blue）。以上三个参数的取值范围为：00FF，参数必须是两位数。对于只有一位的，应在前面补零。这种方法共可表示256256256种色彩，即16M种色彩。而红色、绿色、黑色、白色的十六进制设置值分别为：#ff00
10、00、#00ff00、#0000ff、#000000、#ffffff。例如：div color: #ff0000 ,3.4 样式表的属性单位 3.4.2 色彩单位,2. 用rgb函数方式表示色彩值 在CSS中，可以用rgb函数设置出所要的色彩。语法为：rgb(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中也提供
11、了与HTML一样的用色彩名称表示色彩的方式。CSS只提供了16种色彩名称，见表2-1。例如： div color: red ,3.4 样式表的属性单位 3.4.2 色彩单位,1. 字体（font-family） 语法：font-family : 字体名称 参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应使用引号括起。 说明：用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows系统，其字体名就如Word中的“字体”列表中所列出的字体名称。 示例： body font-family: gill sans, new baskervill
12、e, serif h2 color: red; margin: 10px; font-family: 华文新魏, 楷体_GB2312 ,3.5 样式表的常用属性 3.5.1 字体属性（Font Properties）,2. 字号（font-size） 语法：font-size : 绝对尺寸 | 相对尺寸 | 百分数 参数：绝对尺寸根据对象字体进行调节。可选xx-small | x-small | small | medium | large | x-large | xx-large 相对尺寸是相对于父对象中字体尺寸进行相对调节。 百分数取值是基于父对象中字体的尺寸。 示例：所有包含在中的文字的
13、尺寸将是30points，因为中的字号是相对于的字号（20pt）的1.5倍。 p font-size: 20pt b font-size: 1.5em h3 font-size: 20px ,3.5 样式表的常用属性 3.5.1 字体属性（Font Properties）,3. 字体风格（font-style） 语法：font-style : italic | oblique | normal 参数：italic为斜体。对于没有斜体变量的特殊字体，将应用oblique。normal为正常的字体，声明此值将取消之前设置。 说明：将文本字体设置为斜体。 示例： h3 font-style: ita
14、lic ,3.5 样式表的常用属性 3.5.1 字体属性（Font Properties）,4. 字重（font-weight） 语法：font-weight : bold | number | normal 参数： bold为粗体，相当于number为700，也相当于b标记的作用。number取值100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900。normal为正常的字体，相当于number为400，声明此值将取消之前设置。 说明：设置文本字体的粗细。作用由用户端系统安装的字体的特定字体变量映射决定，系统选择最近的匹配。也就是说，用户可能看
15、不到不同值之间的差异。 示例： P font-weight: bold h1 font-weight:800 ,3.5 样式表的常用属性 3.5.1 字体属性（Font Properties）,5. 文字变形（text-transform） 语法：text-transform: uppercase | lowercase | capitalize | none 参数：uppercase使所有字母大写显示，lowercase使所有字母小写显示，capitalize使每个单词的第1个字母大写显示，none使所有继承的文字变形参数被忽略，文字将以原来的形式显示。 说明：设置字母的大小写。 示例： h
16、1 text-transform: uppercase b text-transform: capitalize ,3.5 样式表的常用属性 3.5.1 字体属性（Font Properties）,6. 文字修饰（text-decoration） 语法：text-decoration : underline | blink | overline | line-through | none 参数：underline为下划线，blink为闪烁，overline为上划线，line-through为贯穿线，none为无装饰。 说明：设置对象中文本的修饰。对象a、u、ins的文字修饰默认值为underline。对象strike、s、del的默认值是line-through。如果应用的对象不是文本，则此属性不起作用。 示例： div text-decoration : underlin
