第4章--网页表现语言——CSS-网页设计与制作教程(第3版)-教学课件.ppt

《第4章--网页表现语言——CSS-网页设计与制作教程(第3版)-教学课件.ppt》由会员分享，可在线阅读，更多相关《第4章--网页表现语言——CSS-网页设计与制作教程(第3版)-教学课件.ppt（41页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第4章章 网页表现语言网页表现语言CSSCSS是CascadingStyleSheets（层叠样式单）的简称，更多的人把它称作样式单。4.1 CSS引入CSS的目的就是把结构与样式分离，网页的结构用XHTML的标记定义，网页的外观样式用CSS定义。当多个网页采用相同的外观样式时，只要建立一个定义样式的CSS文件，让XHTML调用这个CSS文件所定义的样式即可。4.2 把样式加到网页中的方法把样式加到网页中的方法当浏览器读取样式单时，要依照文本格式来读，可以使用4种方法把样式单加入到网页中：行内样式、内嵌一个样式单、链接到一个外部的样式单文件和导入多个外部样式单文件。4.2.1 行内样式行内样

2、式【例4-1】4.2.2 内嵌一个样式单内嵌一个样式单 .除了在.内分别定义各种选择符的样式外，如果多个选择符具有相同的样式，可以采用组合选择符，以减少重复定义的麻烦。其格式为：.【例4-2】【例4-3】4.2.4 导入多个外部样式单文件导入多个外部样式单文件导入外部样式单文件是指在嵌入样式单的.中插入多个外部样式单文件。其格式为：.【例4-5】4.3 新增加的新增加的HTML扩充标记和属性扩充标记和属性4.3.1 class与与id属性属性1.class属性属性定义带有类选择符的样式说明的格式为：元素名元素名.类选择符名类选择符名属性属性:属性值属性值;属性属性:属性值属性值.还有一种用法，

3、在选择符中省略XHTML“元素名”名，可以把几个不同的元素定义成相同的样式。其格式为：.类选择符名类选择符名属性属性:属性值属性值;属性属性:属性值属性值.或者*.类选择符名类选择符名属性属性:属性值属性值;属性属性:属性值属性值.【例4-6】2.id属性属性用id选择符定义样式的格式为：#id选择符名选择符名属性属性:属性值属性值;属性属性:属性值属性值.“id选择符名”就是元素的id标识，由网页设计者定义。【例4-7】4.3.2 与与定位标记定位标记HTML的文档结构分为两大类：块级结构与行级结构。在HTML中有div和span两个标记。1.标记标记标记的格式为：文文本本、图图像像或或表表

4、格格等等 文文本本、图图像像或或表表格格等等【例4-8】2标记标记的格式为：.【例4-9】4.5 样式单的属性单位样式单的属性单位4.5.1 长度、百分比单位长度、百分比单位1长度单位长度单位长度单位有相对长度单位和绝对长度单位两种类型。长度单位见表4-1。2百分比单位百分比单位百分比单位也是一种常用的相对类型。例如：pline-height:150%/*本段文字的高度为标准行高的1.5倍*/hrwidth:80%/*线段长度是相对于浏览器窗口的80%*/4.5.2 颜色单位颜色单位1用十六进制数方式表示颜色值用十六进制数方式表示颜色值在HTML中，要使用RGB概念指定颜色时，使用一个“#”号

5、，加上6个十六进制的数字表示，表示方法为：#RRGGBB。网页安全色是指使用256色模式时，无论在Windows还是在Macintosh系统中，用NetscapeNavigator和MicrosoftInternetExplorer浏览器都显示相同的颜色。4.6 样式单的常用属性样式单的常用属性参数中的“|”表示此属性值一次仅能选取其中一个，“|”表示此属性值可以复选多个。4.6.1 字体属性字体属性1字体（字体（font-family）语法：font-family:字体名称字体名称参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。说明：用font-family属

6、性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows系统，其字体名就如Word中的“字体”列表中所列出的字体名称。示例：bodyfont-family:gillsans,newbaskerville,serifh2color:red;margin:10px;font-family:华文新魏,楷体_GB2312【例4-12】3字体风格（字体风格（font-style）语法：font-style:italic|oblique|normal参数：italic为斜体。对于没有斜体变量的特殊字体，将应用oblique。normal为正常的字体，声明此值将取消之前设置。说明：将文本字体设

7、置为斜体。示例：h3font-style:italic4字重（字重（font-weight）语法：font-weight:bold|number|normal参数：bold为粗体，相当于number为700，也相当于b标记的作用。number取值100|200|300|400|500|600|700|800|900。normal为正常的字体，相当于number为400，声明此值将取消之前设置。示例：Pfont-weight:boldh1font-weight:8005文字变形（文字变形（text-transform）语法：text-transform:uppercase|lowercase|c

8、apitalize|none参数：uppercase使所有字母大写显示，lowercase使所有字母小写显示，capitalize使每个单词的第1个字母大写显示，none使所有继承的文字变形参数被忽略，文字将以原来的形式显示。示例：h1text-transform:uppercasebtext-transform:capitalize6文字修饰（文字修饰（text-decoration）语法：text-decoration:underline|blink|overline|line-through|none参数：underline为下划线，blink为闪烁，overline为上划线，line-

9、through为贯穿线，none为无装饰。示例：divtext-decoration:underlineoverline;h1text-decoration:underline;3行高（行高（line-height）语法：line-height:length|normal参数：length为由百分比数字或由数字、单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。normal为默认行高。示例：用数字设行距。数字设定行高的时候，浏览器将利用字号来确定行距，它将字号乘以设定的参数值。所以，在本例中，行高将是24pt。bfont-size:12pt;line-height:2用长度

10、单位（em及pt是最常用的单位）设定行距，既可以将行距缩小也可以将行距扩大。bfont-size:12pt;line-height:11pt用比例设定行距。在下例中，行距是长度10pt的140%，即14pt。bfont-size:10pt;line-height:140%4文字对齐（文字对齐（text-align）语法：text-align:left|right|center|justify 参数：left为左对齐，right为右对齐，center为居中，justify为两端对齐。说明：设置对象中文本的对齐方式。示例：利用文字对齐属性，可以控制段落的水平对齐。本属性只用于整块的内容，如、和。h

11、4text-align:centerdivtext-align:center5文字缩行（文字缩行（text-indent）语法：text-indent:length参数：length为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。说明：设置对象中的文本段落的缩进。本属性只应用于整块的内容。示例：ptext-indent:2em/*本段第1行的起始位置比其正常位置缩进了两个字符*/divtext-indent:-5px;divtext-indent:underline10%;4.6.3 控制控制BOX的属性的属性BOX包括：对象本身、围绕对象的空格填充（PADDING）、对象边框（

12、BORDER）、围绕边框的对象间隙（MARGIN），如图4-13所示。对象的尺寸与边框等样式单属性的关系，如图4-14所示。1外延边距属性（外延边距属性（Margins Properties）（1）顶边的外延边距（margin-top）语法：margin-top:length|auto参数：length是由数字和单位标识符组成的长度值或者百分数，百分数是基于父对象的高度。auto值被设置为对边的值。示例：bodymargin-top:11.5%bodymargin:1em2em3em4em/*定义文本的上、右、下、左的边距分别为1、2、3、4em*/（2）右边的外延边距（margin-righ

13、t）语法：margin-right:length|auto参数：同margin-top。说明：同margin-top。示例：bodymargin-right:11.5%;（3）底边的外延边距（margin-bottom）语法：margin-bottom:length|auto参数：同margin-top。示例：bodymargin-bottom:11.5%;（4）左边的外延边距（margin-left）语法：margin-left:length|auto参数：同margin-top。示例：bodymargin-left:11.5%;h4margin-top:20px;margin-bottom

14、:5px;margin-left:100px;margin-right:55px（5）外延边距（margin）语法：margin:length|auto参数：length是由数字和单位标识符组成的长度值或百分数，百分数是基于父对象的高度；对于内联对象来说，左右外延边距可以是负数值。auto值被设置为对边的值。示例：bodymargin:36pt24pt36ptbodymargin:11.5%bodymargin:10%10%10%10%（3）边框颜色（border-color）语法：border-color:color参数：color指定颜色。示例：bodyborder-color:silve

15、rredbodyborder-color:silverredrgb(223,94,77)bodyborder-color:silverredrgb(223,94,77)blackh4border-color:#ff0033;border-width:thickpborder-color:green;border-width:3pxpborder-color:#666699#ff0033#000000#ffff99;border-width:3px（4）顶边框宽度（border-top）语法：border-top:border-width|border-style|border-color参数：

16、该属性是复合属性。请参阅各参数对应的属性。示例：divborder-bottom:25pxsolidred;border-left:25pxsolidyellow;border-right:25pxsolidblue;border-top:25pxsolidgreen（5）右边框宽度（border-right）语法：border-right:border-width|border-style|border-color参数：该属性是复合属性。请参阅各参数对应的属性。说明：请参阅border-width属性。（6）底边框宽度（border-bottom）语法：border-bottom:borde

17、r-width|border-style|border-color 参数：该属性是复合属性。请参阅各参数对应的属性。说明：请参阅border-width属性。（7）左边框宽度（border-left）语法：border-left:border-width|border-style|border-color 参数：该属性是复合属性。请参阅各参数对应的属性。说明：请参阅border-width属性。示例：h4border-top-width:2px;border-bottom-width:5px;border-left-width:1px;border-right-width:1px3对象间隙（对

18、象间隙（Paddings Properties）对象间隙也称内补丁，位于对象边框和对象之间，包括了4项属性：padding-top（顶部间隙）、padding-right（右边间隙）、padding-bottom（底部间隙）、padding-left（左边间隙）。4.6.5 背景属性背景属性1颜色（颜色（color）语法：color:color参数：color指定颜色。请参阅颜色单位。示例：divcolor:#345456divcolor:rgb(100,14,200)divcolor:menudivcolor:redbcolor:#333399/*将所有的加重字以设定的颜色显示*/bcolo

19、r:rgb(51,204,0)2背景色（背景色（background-color）语法：background-color:color|transparent参数：color指定颜色，请参阅颜色单位。transparent使背景色透明。示例：pbackground-color:silverdivbackground-color:rgb(223,71,177)bodybackground-color:#98ab6fprebackground-color:transparentp.yellowbackground-color:#ffff663背景图像（背景图像（background-image）语法

20、：background-image:url(url)|none参数：url为使用绝对或相对地址指定背景图像的地址。none无背景图。示例：codebackground-image:url(comet.jpg)blockquotebackground-image:url(c:InetPubMyPixscomet.jpg)brbackground-image:url()bodybackground-image:nonebbackground-image:url(background.gif)（3）背景定位（background-position）语法：background-position:len

21、gth|length background-position:position|position参数：length为百分数或者由数字和单位标识符组成的长度值。position可取top|center|bottom|left|center|right示例：pbackground-image:url(background.gif);background-position:centerbottomdivbackground:url(images/aardvark.gif);background-position:35%80%;menubackground:url(images/aardvark.gi

22、f);background-position:35%2.5cm;abackground:url(images/aardvark.gif);background-position:3.25inbodybackground:url(images/aardvark.gif);background-position:topright5背景（背景（background）语法：background:background-color|background-image|background-repeat|background-attachment|background-position参数：该属性是复合属性。

23、请参阅各参数对应的属性。示例：段落规则的背景是浅绿色，背景图像垂直平铺，第1次平铺的位置在右上角。pbackground:url(background.gif)#ccffccrepeat-ytoprightdivbackground:redno-repeatscroll560%bodybackground:url(images/aardvark.gif)repeat-yprebackground:url(images/aardvark.gif)topcaptionbackground:fuchsia4.6.6 定位属性定位属性1定位方式（定位方式（position）语法：position:st

24、atic|absolute|relative参数：static为无特殊定位，对象遵循HTML定位规则。示例：h4position:absolute;left:100px;top:45pxdivposition:absolute;bottom:1in;left:1in;right:1in;top:1in;iposition:relative;left:40px;top:10pxdivposition:relative;top:-3px;left:6px;2左、右、上、下位置左、右、上、下位置语法：left:auto|length right:auto|length top:auto|length

25、 bottom:auto|length参数：auto无特殊定位，根据HTML定位规则载文档流中分配。length是由数字和单位标识符组成的长度值或百分数。必须定义position属性值为absolute或者relative，此取值方可生效。说明：设置对象与其最近一个定位的父对象左边相关的位置。示例：divposition:absolute;left:1indivposition:relative;top:-3px;right:6px;divposition:absolute;bottom:1in;3宽度（宽度（width）语法：width:auto|length参数：auto无特殊定位，根据H

26、TML定位规则在文档中分配。length是由数字和单位标识符组成的长度值，或者百分数，百分数是基于父对象的宽度，不可为负数。示例：divwidth:1in;divposition:absolute;top:-3px;width:6px;divposition:absolute;left:200px;top:40px;width:150px4高度（高度（height）语法：height:auto|length参数：同宽度（width）。说明：设置对象的高度。对于img对象来说，仅指定此属性，其width值将根据图片源尺寸等比例缩放。示例：divheight:1in;divposition:abs

27、olute;top:-3px;height:6px;divposition:absolute;left:200px;top:40px;height:150px5可视性（可视性（visibility）语法：visibility:inherit|visible|collapse|hidden示例：imgvisibility:inherit;float:right;h4visibility:hidden【例4-16】6层叠顺序层叠顺序z-index语法：z-index:auto|number参数：auto遵从其父对象的定位。number为无单位的整数值，可为负数。h2position:relativ

28、e;left:10px;top:0px;z-index:10h1position:relative;left:33px;top:-35px;z-index:1divposition:absolute;z-index:3;width:6px【例4-17】4.6.7 定位锚伪类定位锚伪类语法：a:link sRules 设置a对象在未被访问前的样式单属性。a:hover sRules 设置a对象在鼠标悬停时的样式单属性。a:active sRules 设置a对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式单属性。a:visited sRules 设置a对象在链接地址已被访问过时的样式单属

29、性。参数：sRules为样式单规则。示例：a:linkfont-size:9pt;text-decoration:none;color:bluea:hoverfont-size:125;text-decoration:underline;color:yellowa:activefont-size:125;text-decoration:none;color:greena:visitedfont-size:85;text-decoration:none;color:red【例4-18】4.6.8 鼠标属性鼠标属性语法：cursor:鼠标的属性鼠标的属性【例4-19】4.7 习题习题41将段落p分

30、成3种不同的类别，每一类应用不同的样式单说明。请把下面代码编写为完整的HTML文件，CSS可设置为外部或内部样式单文件。样式规则为：p.firstcolor:greenp.secondcolor:purplep.thirdcolor:graypbcolor:red/*之内加重显示的文字以红色显示*/pfont-size:10ptbfont-size:1.5em/*所有包含在中的文字尺寸将是15pt，即10pt的1.5倍*/HTML部分代码为：Thefirstparagraph,withaclassnameoffirst.Thesecondparagraph,withaclassnameofsecond.Thethirdparagraph,withaclassnameofthird.EmmaThompson,ActressDramaticactor,inspiredcomedienne.Istherenothingshecantdo?2用CSS创建一个布局居中的页面，如图4-21所示。3.制作如图4-22所示的页面显示结果。本例需要图片文件asp.jpg。