《第4章网页表现语言—CSS.ppt》由会员分享，可在线阅读，更多相关《第4章网页表现语言—CSS.ppt（41页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
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.3 链接到一个外部样式单文件链接到一个外部样式单文件格式为：.样式单文件的格式为：选择符选择符1属性属性:属性值属性值;属性属性:属性值属性值;./*注释内容注释内容*/选择符选择符2属性属性:属性值属性值;属性属性:属性值属性值;.选择符选择符n属性属性:属性值属性值;属性属性:属性值属性值;.【例4-4】4.2.4 导入多个外部样式单文件导入多个外部样式单文件导入外部样式单
3、文件是指在嵌入样式单的.中插入多个外部样式单文件。其格式为：.【例4-5】4.3 新增加的新增加的HTML扩充标记和属性扩充标记和属性4.3.1 class与与id属性属性1.class属性属性定义带有类选择符的样式说明的格式为：元素名元素名.类选择符名类选择符名属性属性:属性值属性值;属性属性:属性值属性值.还有一种用法，在选择符中省略XHTML“元素名”名，可以把几个不同的元素定义成相同的样式。其格式为：.类选择符名类选择符名属性属性:属性值属性值;属性属性:属性值属性值.或者*.类选择符名类选择符名属性属性:属性值属性值;属性属性:属性值属性值.【例4-6】2.id属性属性用id选择符定
4、义样式的格式为：#id选择符名选择符名属性属性:属性值属性值;属性属性:属性值属性值.“id选择符名”就是元素的id标识，由网页设计者定义。【例4-7】4.3.2 与与定位标记定位标记HTML的文档结构分为两大类：块级结构与行级结构。在HTML中有div和span两个标记。1.标记标记标记的格式为：文文本本、图图像像或或表表格格等等 文文本本、图图像像或或表表格格等等【例4-8】2标记标记的格式为：.【例4-9】4.4 多重样式单的层叠多重样式单的层叠一般原则是，最接近目标的样式定义优先级最高。样式单的优先级别从高到低为：行内样式、内部样式、链入外部样式、导入外部样式和默认浏览器样式。浏览器将
5、按照上述顺序执行样式单的规则。【例4-10】h3color:red;text-align:left;font-size:8pt;background:ivory然后在内嵌样式单中也定义了h3标记的text-align和font-size属性：h3text-align:right;font-size:20pt/*标题3文字向右对齐；尺寸为20pt*/那么这个网页叠加后的样式就是（文字颜色为红色；向右对齐；尺寸为20pt）：h3color:red;text-align:right;font-size:20pt;background:ivory【例4-11】4.5 样式单的属性单位样式单的属性单位4
6、.5.1 长度、百分比单位长度、百分比单位1长度单位长度单位长度单位有相对长度单位和绝对长度单位两种类型。长度单位见表4-1。2百分比单位百分比单位百分比单位也是一种常用的相对类型。例如：pline-height:150%/*本段文字的高度为标准行高的1.5倍*/hrwidth:80%/*线段长度是相对于浏览器窗口的80%*/4.5.2 颜色单位颜色单位1用十六进制数方式表示颜色值用十六进制数方式表示颜色值在HTML中，要使用RGB概念指定颜色时，使用一个“#”号，加上6个十六进制的数字表示，表示方法为：#RRGGBB。网页安全色是指使用256色模式时，无论在Windows还是在Macinto
7、sh系统中，用NetscapeNavigator和MicrosoftInternetExplorer浏览器都显示相同的颜色。2用用rgb函数方式表示颜色值函数方式表示颜色值在CSS中，可以用rgb函数设置出所要的颜色。语法为：rgb(R,G,B)。例如：divcolor:rgb(132,20,180)divcolor:rgb(12,200,50%)3用颜色名称方式表示颜色值用颜色名称方式表示颜色值CSS也提供了与HTML一样的用颜色名称表示颜色的方式，见表3-2。例如：divcolor:red4.6 样式单的常用属性样式单的常用属性参数中的“|”表示此属性值一次仅能选取其中一个，“|”表示此属
8、性值可以复选多个。4.6.1 字体属性字体属性1字体（字体（font-family）语法：font-family:字体名称字体名称参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。说明：用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows系统，其字体名就如Word中的“字体”列表中所列出的字体名称。示例：bodyfont-family:gillsans,newbaskerville,serifh2color:red;margin:10px;font-family:华文新魏,楷体_GB2312【例4-12】2字号（字号（f
9、ont-size）语法：font-size:绝对尺寸绝对尺寸|相对尺寸相对尺寸|百分数百分数参数：绝对尺寸根据对象字体进行调节。可选xx-small|x-small|small|medium|large|x-large|xx-large示例：所有包含在中的文字的尺寸将是30pt，因为中的字号是相对于的字号（20pt）的1.5倍。pfont-size:20ptbfont-size:1.5emh3font-size:20pxpfont-size:15ptbfont-size:300%bodyfont-family:宋体;font-size:9ptpfont-family:宋体;font-size:
10、11pt【例4-13】3字体风格（字体风格（font-style）语法：font-style:italic|oblique|normal参数：italic为斜体。对于没有斜体变量的特殊字体，将应用oblique。normal为正常的字体，声明此值将取消之前设置。说明：将文本字体设置为斜体。示例：h3font-style:italic4字重（字重（font-weight）语法：font-weight:bold|number|normal参数：bold为粗体，相当于number为700，也相当于b标记的作用。number取值100|200|300|400|500|600|700|800|900。n
11、ormal为正常的字体，相当于number为400，声明此值将取消之前设置。示例：Pfont-weight:boldh1font-weight:8005文字变形（文字变形（text-transform）语法：text-transform:uppercase|lowercase|capitalize|none参数：uppercase使所有字母大写显示，lowercase使所有字母小写显示，capitalize使每个单词的第1个字母大写显示，none使所有继承的文字变形参数被忽略，文字将以原来的形式显示。示例：h1text-transform:uppercasebtext-transform:ca
12、pitalize6文字修饰（文字修饰（text-decoration）语法：text-decoration:underline|blink|overline|line-through|none参数：underline为下划线，blink为闪烁，overline为上划线，line-through为贯穿线，none为无装饰。示例：divtext-decoration:underlineoverline;h1text-decoration:underline;4.6.2 文本属性文本属性1字间距（字间距（word-spacing）语法：word-spacing:length|normal参数：len
13、gth是由数字和单位标识符组成的长度值，允许为负值。normal恢复为默认间距。示例：h3word-spacing:1emdivword-spacing:10px2字母间距（字母间距（letter-spacing）语法：letter-spacing:length|normal 参数：length是由数字和单位标识符组成的长度值，允许为负值。normal恢复为默认间隔。示例：divletter-spacing:6pxdivletter-spacing:0.5pth3letter-spacing:10px3行高（行高（line-height）语法：line-height:length|normal
14、参数：length为由百分比数字或由数字、单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。normal为默认行高。示例：用数字设行距。数字设定行高的时候，浏览器将利用字号来确定行距，它将字号乘以设定的参数值。所以，在本例中，行高将是24pt。bfont-size:12pt;line-height:2用长度单位（em及pt是最常用的单位）设定行距，既可以将行距缩小也可以将行距扩大。bfont-size:12pt;line-height:11pt用比例设定行距。在下例中，行距是长度10pt的140%，即14pt。bfont-size:10pt;line-height:140%
15、4文字对齐（文字对齐（text-align）语法：text-align:left|right|center|justify 参数：left为左对齐，right为右对齐，center为居中，justify为两端对齐。说明：设置对象中文本的对齐方式。示例：利用文字对齐属性，可以控制段落的水平对齐。本属性只用于整块的内容，如、和。h4text-align:centerdivtext-align:center5文字缩行（文字缩行（text-indent）语法：text-indent:length参数：length为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。说明：设置对象中的文本段落的
16、缩进。本属性只应用于整块的内容。示例：ptext-indent:2em/*本段第1行的起始位置比其正常位置缩进了两个字符*/divtext-indent:-5px;divtext-indent:underline10%;4.6.3 控制控制BOX的属性的属性BOX包括：对象本身、围绕对象的空格填充（PADDING）、对象边框（BORDER）、围绕边框的对象间隙（MARGIN），如图4-13所示。对象的尺寸与边框等样式单属性的关系，如图4-14所示。1外延边距属性（外延边距属性（Margins Properties）（1）顶边的外延边距（margin-top）语法：margin-top:leng
17、th|auto参数：length是由数字和单位标识符组成的长度值或者百分数，百分数是基于父对象的高度。auto值被设置为对边的值。示例：bodymargin-top:11.5%bodymargin:1em2em3em4em/*定义文本的上、右、下、左的边距分别为1、2、3、4em*/（2）右边的外延边距（margin-right）语法：margin-right:length|auto参数：同margin-top。说明：同margin-top。示例：bodymargin-right:11.5%;（3）底边的外延边距（margin-bottom）语法：margin-bottom:length|au
18、to参数：同margin-top。示例：bodymargin-bottom:11.5%;（4）左边的外延边距（margin-left）语法：margin-left:length|auto参数：同margin-top。示例：bodymargin-left:11.5%;h4margin-top:20px;margin-bottom:5px;margin-left:100px;margin-right:55px（5）外延边距（margin）语法：margin:length|auto参数：length是由数字和单位标识符组成的长度值或百分数，百分数是基于父对象的高度；对于内联对象来说，左右外延边距可以
19、是负数值。auto值被设置为对边的值。示例：bodymargin:36pt24pt36ptbodymargin:11.5%bodymargin:10%10%10%10%2边框属性（边框属性（Borders Properties）（1）所有边框宽度（border-width）语法：border-width:medium|thin|thick|length参数：medium为默认宽度，thin为小于默认宽度，thick为大于默认宽度。length由数字和单位标识符组成的长度值，不可为负值。示例：spanborder-style:solid;border-width:thinspanborder-s
20、tyle:solid;border-width:1pxthin（2）边框样式（border-style）语法：border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset参数：border-style属性包括了多个边框样式的参数：bodyborder-style:doublegroovebodyborder-style:doublegroovedashedpborder-style:double;border-width:3pxpborder:5pxdoublepurple/*定义了四条一样的边框*/
21、【例4-14】（3）边框颜色（border-color）语法：border-color:color参数：color指定颜色。示例：bodyborder-color:silverredbodyborder-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;bord
22、er-width:3px（4）顶边框宽度（border-top）语法：border-top:border-width|border-style|border-color参数：该属性是复合属性。请参阅各参数对应的属性。示例：divborder-bottom:25pxsolidred;border-left:25pxsolidyellow;border-right:25pxsolidblue;border-top:25pxsolidgreen（5）右边框宽度（border-right）语法：border-right:border-width|border-style|border-color参数：
23、该属性是复合属性。请参阅各参数对应的属性。说明：请参阅border-width属性。（6）底边框宽度（border-bottom）语法：border-bottom:border-width|border-style|border-color 参数：该属性是复合属性。请参阅各参数对应的属性。说明：请参阅border-width属性。（7）左边框宽度（border-left）语法：border-left:border-width|border-style|border-color 参数：该属性是复合属性。请参阅各参数对应的属性。说明：请参阅border-width属性。示例：h4border-to
24、p-width:2px;border-bottom-width:5px;border-left-width:1px;border-right-width:1px3对象间隙（对象间隙（Paddings Properties）对象间隙也称内补丁，位于对象边框和对象之间，包括了4项属性：padding-top（顶部间隙）、padding-right（右边间隙）、padding-bottom（底部间隙）、padding-left（左边间隙）。4.6.4 布局属性布局属性1浮动（浮动（float）语法：float:none|left|right参数：none为对象不浮动，left为对象浮在左边，righ
25、t为对象浮在右边。示例：divclear:leftimgfloat:righth4float:left2清除（清除（clear）语法：clear:none|left|right|both参数：none允许两边都可以有浮动对象，both不允许有浮动对象，left不允许左边有浮动对象，right不允许右边有浮动对象。示例：如果想使一段文字包裹某一对象，而下一段文字不包裹，可以使用clear属性。pclear:left【例4-15】4.6.5 背景属性背景属性1颜色（颜色（color）语法：color:color参数：color指定颜色。请参阅颜色单位。示例：divcolor:#345456divc
26、olor:rgb(100,14,200)divcolor:menudivcolor:redbcolor:#333399/*将所有的加重字以设定的颜色显示*/bcolor:rgb(51,204,0)2背景色（背景色（background-color）语法：background-color:color|transparent参数：color指定颜色，请参阅颜色单位。transparent使背景色透明。示例：pbackground-color:silverdivbackground-color:rgb(223,71,177)bodybackground-color:#98ab6fprebackgro
27、und-color:transparentp.yellowbackground-color:#ffff663背景图像（背景图像（background-image）语法：background-image:url(url)|none参数：url为使用绝对或相对地址指定背景图像的地址。none无背景图。示例：codebackground-image:url(comet.jpg)blockquotebackground-image:url(c:InetPubMyPixscomet.jpg)brbackground-image:url(http:/F background-position:positi
28、on|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.gif);background-position:35%2.5cm;aback
29、ground: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参数：该属性是复合属性。请参阅各参数对应的属性。示例：段落规则的背景是浅绿色，背景图像垂直平铺，第
30、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:static|absolute|relative参数：static为无特殊定位
31、，对象遵循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 bottom:auto|length参数：auto无特殊定位，根据HTM
32、L定位规则载文档流中分配。length是由数字和单位标识符组成的长度值或百分数。必须定义position属性值为absolute或者relative，此取值方可生效。说明：设置对象与其最近一个定位的父对象左边相关的位置。示例：divposition:absolute;left:1indivposition:relative;top:-3px;right:6px;divposition:absolute;bottom:1in;3宽度（宽度（width）语法：width:auto|length参数：auto无特殊定位，根据HTML定位规则在文档中分配。length是由数字和单位标识符组成的长度值，
33、或者百分数，百分数是基于父对象的宽度，不可为负数。示例：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:absolute;top:-3px;height:6px;divposition
34、: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:relative;left:10px;top:0px;z-index:10h1posit
35、ion: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对象在链接地址已被访问过时的样式单属性。参数：sRules为样式单规则。示例：a:linkfont-size:
36、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分成3种不同的类别，每一类应用不同的样式单说明。请把下面代码编写为完整的HT
37、ML文件，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。