网页设计与制作教程

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