第6章++网页表现语言—CSS.ppt-道客多多

资源描述

1、制作：计算机学院邵黎,1,动态HTML是HTML、层叠样式表CSS和脚本语言的组合。,第六章网页表现语言CSS,制作：计算机学院邵黎,2,6.1 CSS简介,CSS （Cascading Style Sheet层叠样式表）是一种具有层次性的形式设置。 CSS作用在于让网页设计者在网页编排与空间配置上有更大的弹性。它的主要用途是定义网页数据的编排、显示、格式化及特殊效果。在CSS的配合下，HTML语言如虎添翼，发挥出了更大的效用。,制作：计算机学院邵黎,3,样式就是格式，在网页中，像文字的大小、色彩以及图片位置等，都是设置显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文

2、件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。,6.1.1 CSS的概念,制作：计算机学院邵黎,4,CSS就是让内容和样式分离开来，让HTML标记只控制网页的内容，而内容的样式则交由CSS来控制。在运用Style Sheet时，首先将内容的样式交给CSS来定义好，而HTML标记把事先定义好的样式直接用，只要负责内容的结构，不必再定义内容的样式。当多个网页采用相同的外观样式时，只要建立一个定义样式的CSS文件，让HTML调用这个CSS文件所定义的样式即可。,制作：计算机学院邵黎,5,多个网页调用同一个CSS文件,制作：计算机学院邵黎,6,优点：利用CSS制

3、作和管理网页都非常方便 CSS可以更加精细地控制网页的内容 CSS样式比HTML更加丰富多彩 CSS定义样式的方法灵活多样举例：LINE-HEIGHT的属性变化定义方法：在HTML文件内部定义、在HTML文件外部定义、分标记定义、分段定义。,制作：计算机学院邵黎,7,6.1.2 在网页中插入CSS的方法,当浏览器读取样式单时，要依照文本格式来读，可以使用4种方法把样式单加入到网页中：行内样式、内嵌一个样式单、链接到一个外部的样式单文件和导入多个外部样式单文件。,制作：计算机学院邵黎,8,1.行内样式即在HTML的各个标记中加入CSS标记内容。当只想加强网页中的某一个段落时，可以直接把样

4、式定义加入HTML文件，这时，必须用到HTML标记的STYLE属性。举例：HTML文件中加入Style Sheet 第三版教材【例4-1】,制作：计算机学院邵黎,9,2. 在HTML文件的标记内嵌入CSS的定义利用标记，将它集中放在标记内，不但可以展现CSS的风格，在管理HTML上也显得井然有序。,制作：计算机学院邵黎,10,一般形式：属性：TITLE=“” 提示文字TYPE=“” 指定样式表的MIME类型样式表举例1 举例2 ：对标记直接定义举例3、第三版教材【例4-2】,制作：计算机学院邵黎,11,除了在.内分别定义各种选择符的样式外，如果多个选择符具有相同的样式，可以采用

5、组合选择符，以减少重复定义的麻烦。其格式为：.第三版教材【例4-3】,制作：计算机学院邵黎,12,3.将CSS嵌入或链接至HTML文件如果有数个HTML文件要共用相同的CSS，为了避免重复定义样式表，可以将样式单定义在单独的文本文件，然后将其嵌入或连接至HTML文件。,制作：计算机学院邵黎,13,这样的设计能够有效的管理整个网页，HTML标记只负责文章内容的结构，而CSS控制版面编排，将网页的文字内容与网页的版面设计分开处理。最后将CSS所定义的形式以Link的方式和HTML结合在一起。,制作：计算机学院邵黎,14,标记的用途是定义目前文件与其他文件之间的关联，它必须放在HTML文件的头

6、标记内。格式为：. ,制作：计算机学院邵黎,15,样式单文件的格式为：选择符1属性:属性值; 属性:属性值; . /* 注释内容 */ 选择符2属性:属性值; 属性:属性值; . . 选择符n属性:属性值; 属性:属性值; . 举例：CSS文件连接到HTML文件样式表、举例：链接外部样式表第三版教材【例4-4】：链接外部样式表,制作：计算机学院邵黎,16,4. 导入多个外部样式单文件指在嵌入样式单的.中插入多个外部样式单文件。其格式为：. ,制作：计算机学院邵黎,17,导入与链接外部样式单文件的区别是一个HTML文件只能链接一个外部样式单，而一个HTML文件可以导入多个外部样式单

7、。最接近目标的样式定义优先权最高，高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。第三版教材【例4-5】：链接外部样式表,制作：计算机学院邵黎,18,5. 在HTML文件中套用样式类别在样式表文件中定义不同的样式类别（style class），然后在HTML文件中套用不同的样式类别。,制作：计算机学院邵黎,19,6.1.3 CLASS（类）与ID（引用）,在设计方面，经常会将同类型的文字内容指定同一种风格的字体样式，以便浏览者能够依照字体或颜色来辨别文章主副标题。在CSS里，是以CLASS的标记来区分各种的类别。类（Class）是个很有用的特性，可以让某个元素每次出现时都指

8、定同一样式。,制作：计算机学院邵黎,20,方法：样式名前面加一个点号就生成了样式类（CLASS）。如: .LOGOFONT-SIZE:15PT;COLOR:BLUELOGO是定义的样式类名。如果在元素的开始标志中插入CLASS=ClassName，将其变成一个类的成员，则它会遵循这个类的规范。如： . 样式类、举例：选择性定义样式、第三版教材【例4-6】,制作：计算机学院邵黎,21,ID是样式表的另一特性，可以帮助标识元素和向元素增加属性。在样式表中，可以将ID与某个规则相联系，然后给特定元素指定这个ID，则特定元素将采用这个规则。其语法结构为：,制作：计算机学院邵黎,22

9、,如： #SPACELETTER-SPACING：20PX;FONT-STYLE:ITALIC;COLOR:PINK如果将这个选择器指定为页面中任何元素的ID属性值，则元素可以采用规则声明中的样式。如：是利用ID属性把样式名SPACE“贴”到标记H2上，表示H2选择了该样式指定的规则。举例：ID属性的选择性定义方式、举例：ID定义样式的使用、新教材：例3-4 第三版教材【例4-7】例4-7的样式,制作：计算机学院邵黎,23,HTML的文档结构分为两大类：块级结构与行级结构。在HTML中有div和span两个标记。标记的格式为：文本、图像或表格等文本、图像或表格等 ,6.1.4

10、与定位标记,制作：计算机学院邵黎,24,的格式为： . . 样式表样式表、举例：CLASS与ID的运用第三版教材【例4-8】、【例4-9】,制作：计算机学院邵黎,25,6. 2 CSS的基本语法,首先了解层叠样式表CSS的结构。样式区块：是标记和注解标记所组成的区块。选择器（Selector）：是HTML组件。一个选择器可以由多个标记组成。声明（Declaration）：大括号中的内容，可以包括多个赋值。是HTML组件的样式，诸如颜色、字体、对齐方式等。选择器-声明对叫规则（rule）类别（Class）：是针对HTML文件中某些组件所特别设计的样式定义。,制作：计算机学院

11、邵黎,26,一般方式：标记名称属性变化1：特色1；属性变化2：特色2；属性变化3：特色3;,样式区块,选择器（Selector）,类别（Class）,声明（Declaration）,制作：计算机学院邵黎,27,一般原则是，最接近目标的样式定义优先级最高。样式单的优先级别从高到低为：行内样式、内部样式、链入外部样式、导入外部样式和默认浏览器样式。浏览器将按照上述顺序执行样式单的规则。,6. 3 多重样式单的层叠,制作：计算机学院邵黎,28,例如： h3color: red; text-align: left; font-size: 8pt; background:ivory 然后

12、在内嵌样式单中也定义了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】,制作：计算机学院邵黎,29,长度、百分比单位长度单位有相对长度单位和绝对长度单位两种类型。百分比单位也是一种常用的相对类型。例如： p line-heig

13、ht: 150% /* 本段文字的高度为标准行高的1.5倍 */ hr width: 80% /* 线段长度是相对于浏览器窗口的80% */,6.4 样式单的属性单位,制作：计算机学院邵黎,30,制作：计算机学院邵黎,31,颜色单位用十六进制数方式表示颜色值在HTML中，要使用RGB概念指定颜色时，使用一个“#”号，加上6个十六进制的数字表示，表示方法为：#RRGGBB。,制作：计算机学院邵黎,32,用rgb函数方式表示颜色值在CSS中，可以用rgb函数设置出所要的颜色。语法为：rgb(R,G,B) 例如：div color: rgb(132,20,180) div color:

14、rgb(12,200,50%) 用颜色名称方式表示颜色值 CSS也提供了与HTML一样的用颜色名称表示颜色的方式。例如：div color: red ,制作：计算机学院邵黎,33,参数中的“|”表示此属性值一次仅能选取其中一个，“|”表示此属性值可以复选多个。,6.5 样式单的常用属性,制作：计算机学院邵黎,34,6.5.1 设置字体样式（FONT）,对于Font的控制，字体样式可以设置Font-weight、Font-size、Font-family、Font-variant、Font-style等属性。,制作：计算机学院邵黎,35,1. Font-weight样式用来指定字体粗细

15、属性设置分为：一般粗细Normal，默认值。绝对粗细、相对粗细。语法：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 举例：FONT-WEIGHT的属性变化,制作：计算机学院邵黎,36,2. Font-size样

17、 15pt b font-size: 300% body font-family:“宋体“; font-size: 9pt pfont-family:“宋体“; font-size: 11pt 举例：FONT-SIZE的属性变化。举例：控制文字的大小第三版教材【例4-13】,制作：计算机学院邵黎,38,3. Font-style样式用来指定字体为基本字体字或斜体字。属性的设置可为：Normal、Oblique（倾斜）、Italic（斜体）。语法：font-style : italic | oblique | normal 参数：italic为斜体。对于没有斜体变量的特殊字体，将应用ob

18、lique。normal为正常的字体，声明此值将取消之前设置。说明：将文本字体设置为斜体。示例： h3 font-style: italic ,制作：计算机学院邵黎,39,4. Font-family样式用来指定文字的字体。默认为宋体。语法：font-family : 字体名称参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。说明：用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows系统，其字体名就如Word中的“字体”列表中所列出的字体名称。,制作：计算机学院邵黎,40,示例： body font-fam

19、ily: “gill sans“, “new baskerville“, serif h2 color: red; margin: 10px; font-family: 华文新魏, 楷体_GB2312 举例：FONT-STYLE及FONT-FAMILY的属性变化第三版教材【例4-12】,制作：计算机学院邵黎,41,5. Font-variant样式用来显示英文字母其属性的设置可为Normal、Small-caps（小型大写字）举例：FONT-VARIANT的属性变化综合举例：样式表1 、2、3,制作：计算机学院邵黎,42,6.5.2 设置文字样式（TEXT）,TEXT可控制文字的表现

20、方式，对齐位置、缩排效果及层次变化。通过TEXT的属性设置，网页的版面会变得活泼，文字样式可以设置Text-align、Text-decoration、Text-indent、Text-transform等属性。,制作：计算机学院邵黎,43,1. Text-align样式用来指定文字的对齐方式属性设置有4种：Left、Right、Center、Justify（左右对齐）。语法：text-align : left | right | center | justify 示例：利用文字对齐属性，可以控制段落的水平对齐。本属性只用于整块的内容，如、和。 h4 text-align: center

21、 div text-align : center 举例：TEXT-ALIGN的属性变化,制作：计算机学院邵黎,44,2.文字修饰Text-decoration 其属性设置有none（无设置效果，默认）、 underline（设置底线）、overline（设置顶线）、 line-through（设置删除线）、blink为闪烁。语法：text-decoration : underline | blink | overline | line-through | none 示例： div text-decoration : underline overline; h1 text-decorati

22、on : underline; 举例：TEXT-DECORATION的属性变化举例：加线效果,制作：计算机学院邵黎,45,3. Text-indent用来指定文字向右缩排的距离属性设置可以按绝对长度或百分比为单位设置。度量单位有：厘米cm、毫米mm、英寸in、像素点px、点数pt、%等。length允许为负值。语法：text-indent : length 说明：本属性只应用于整块的内容。示例： p text-indent: 2em /* 比其正常位置缩进了两个字符 */ div text-indent : -5px; div text-indent : underline 10%;

23、举例：TEXT-INDENT的属性变化,制作：计算机学院邵黎,46,4. 文字变形Text-transform用来控制字母大小写的转换。属性设置可为None（不更改大小写）、Lowercase（全部改为小写）、Uppercase（全部改为大写）、Capitalize（每个单词的第一个字母改大写）四种。,制作：计算机学院邵黎,47,语法：text-transform: uppercase | lowercase | capitalize | none 示例： h1 text-transform: uppercase b text-transform: capitalize 举例：TEXT-

24、TRANSFORM的属性变化举例：英文字母大小写转换,制作：计算机学院邵黎,48,6.5.3 设置行距的高度（LINE）,Line-height用来指定每行文字的行距。属性设置可为点数（pt）、像素点（px），或相对于字母标记的百分数（%）。如设置值为Normal表示一般行距；数值n表示n倍行高。百分数（如300%）表示行距为目前行距的300%（3倍）。 Line-height标记可制作具有层次排列的文字效果。常与Font-size标记一起合用。,制作：计算机学院邵黎,49,示例：用数字设行距。数字设定行高的时候，浏览器将利用字号来确定行距，它将字号乘以设定的参数值。所以，在本例中，

25、行高将是24pt。b font-size: 12pt; line-height: 2 用长度单位设定行距（em及pt是最常用的单位），既可以将行距缩小也可以将行距扩大。b font-size: 12pt; line-height: 11pt 用比例设定行距。在下例中，行距是字号高度10pt的140%，即14pt。b font-size: 10pt; line-height: 140% 举例：LINE-HEIGHT的属性变化举例：控制段落行距,制作：计算机学院邵黎,50,6.5.4 设置字符间距（LETTER）,Letter-spacing用来设置字与字的间距。可控制字母之间或中文字之间的

26、距离。属性设置可为绝对长度，如点数（pt），像素点（px）等。语法：letter-spacing : length | normal 参数：length是由数字和单位标识符组成的长度值，允许为负值。Normal表示一般行距。举例：LETTER-SPACING的属性变化举例：控制字符间距,制作：计算机学院邵黎,51,6.5.5 设置文字对齐方式（VERTICAL）,Vertical-align用来设置文字垂直对齐的位置。这个样式通常是用来指定图片和四周的文字的对齐方式。属性设置可为Baseline（对齐组件的文字底部，默认值）、Sub（下标）、 super（上标）、 top （对齐组件

27、的顶端）、middle （对齐组件的中点）、 bottom （对齐组件的底部）、 text-top （对齐组件的文字顶端） text-bottom （对齐组件文字的底部）。举例：VERTICAL-ALIGN的属性变化举例：控制垂直方向的位置,制作：计算机学院邵黎,52,语法：word-spacing : length | normal 参数：length是由数字和单位标识符组成的长度值，允许为负值。normal恢复为默认间距。示例： h3 word-spacing: 1em div word-spacing : 10px ,6.5.6 设置字间距（word-spacing）,制作：计算

28、机学院邵黎,53,6.6 显示颜色和背景样式 6.6.1 显示文本颜色（color）,在CSS中,Color标记是用来显示字体的颜色。语法：color : color 表示方法如示例： div color: rgb(100,14,200) div color: red b color: #333399 /* 将所有的加重字以设定的颜色显示 */ b color: rgb(51,204,0) PColor:#0000FF ,制作：计算机学院邵黎,54,6.6.2 设置背景样式（BACKGROUND）,层叠样式表CSS提供的背景样式有Background-attachment、Backgro

29、und-color、 Background-image、 Background-position、Background-repeat、 Background。,制作：计算机学院邵黎,55,1.背景色Background-color指定HTML组件的背景颜色。利用此标记可以设置某一段落或某一区域的背景色。语法：background-color : color | transparent 参数：color指定颜色，transparent使背景色透明。,制作：计算机学院邵黎,56,示例： p background-color: silver div background-color: rgb(

30、223,71,177) body background-color: #98ab6f pre background-color: transparent p.yellow background-color: #ffff66 举例：网页背景和文字背景举例：背景色的设置样式表,制作：计算机学院邵黎,57,2.背景图像Background-image指定HTML组件的背景图像。使用这个样式可以在网页或某一区域设置背景图片。以Background-image:URL（文件名）的方式表示。语法：background-image : url(url) | none 参数：url为使用绝对或相对地址

31、指定背景图像的地址。none无背景图。,制作：计算机学院邵黎,58,示例： code background-image: url(“comet.jpg“) blockquote background-image: url(“c:InetPubMyPixscomet.jpg“) font background-image: url(http:/F body background-image: none b background-image: url(background.gif) 举例：背景图案的设置举例：网页背景图片,制作：计算机学院邵黎,59,3.固定背景Background-atta

32、chment 用来控制背景图片是否跟着网页的内容移动。设置值有Scroll和Fixed两种，前者背景图片会随着网页内容卷动，而后者背景图案固定不动，不会跟着网页内容移动而移动，又被称为浮水印。语法：background-attachment : scroll | fixed 说明：该属性只用于页面背景，即标签内设定的背景图像。,制作：计算机学院邵黎,60,示例： body background-attachment: fixed; background-image: url(background.gif) html background-image: url(“anasazi.tif“);

33、 background-attachment: fixed; 举例：背景图片的固定举例1：背景图案不跟着网页移动举例2：背景图案跟着网页移动,制作：计算机学院邵黎,61,4.背景重复Background-repeat用来指定HTML组件的背景图片是否重复排列。一般情况，背景图片会在水平和垂直方向重复排列，填满浏览器窗口。当设置了Background-repeat样式，可以不重复贴图。设置值可为repeat（默认值）、no-repeat（不做重复排列，原样显示）、repeat-x（在水平方向重复排列背景图片）、repeat-y（在垂直方向重复排列背景图片）。,制作：计算机学院邵黎,62,

34、语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y 示例： p background: url(“images/aardvark.gif“); background-repeat: no-repeat menu background: url(“images/aardvark.gif“); background-repeat: repeat-y; 举例：1 2 3 4 5 6 7,制作：计算机学院邵黎,63,5. 背景定位 Background-position用来指定背景图片从哪个位置开始显示。设置值可以是浏览器：

36、gif); background-position: center bottom div background: url(“images/aardvark.gif“); background-position: 35% 80%; menu background: url(“images/aardvark.gif“); background-position: 35% 2.5cm; body background: url(“images/aardvark.gif“); background-position: top right 例如：PBackground-image:URL(bg100.j

37、pg); Background-repeat:no-repeat;Background-position:5cm 2cm，表示背景图片bg100.jpg是要从段落的水平方向5cm处及垂直方向2cm处开始显示，而且不重复排列。,制作：计算机学院邵黎,65,6. 用Background可以综合表示Background-attachment、Background-color、 Background-image、 Background-position、Background-repeat等样式。语法：background : background-color | background-image

38、| background-repeat | background-attachment | background-position,制作：计算机学院邵黎,66,示例：段落规则的背景是浅绿色，背景图像垂直平铺，第1次平铺的位置在右上角。 p background:url(background.gif) #ccffcc repeat-y top right div background: red no-repeat scroll 5 60% body background: url(“images/aardvark.gif“) repeat-y pre background: url(“imag

39、es/aardvark.gif“) top caption background: fuchsia ,制作：计算机学院邵黎,67,例如：Pbackground:url(bg100.jpg) no-repeat top right表示背景图片是要从段落的右上方开始显示，而且不重复排列，它相当于： Pbackground-image:url(bg100.jpg); background-repeat:no-repeat; background-position:top right 举例,制作：计算机学院邵黎,68,6.7 控制BOX的属性,BOX包括：对象本身、对象边框（BORDER）、围绕

40、边框的对象间隙（MARGIN）、围绕对象的空格填充（PADDING）。主要指设置指定元素周围样式。,制作：计算机学院邵黎,69,对象的尺寸与边框等样式单属性的关系,制作：计算机学院邵黎,70,6.7.1 设置外延边距（MARGIN）,在CSS中，标记MARGIN用来指定网页的上、下、左、右边缘所需留下的空白间距（外补丁）。有四种属性： MARGIN-TOP、 MARGIN-BOTTOM、 MARGIN-LEFT、 MARGIN-RIGHT。,制作：计算机学院邵黎,71,（1）顶边的外延边距（margin-top）语法：margin-top : length | auto 参数说明

41、：length是由数字和单位标识符组成的长度值或者百分数，百分数是基于父对象的高度。auto值被设置为对边的值。示例：body margin-top: 11.5% ,制作：计算机学院邵黎,72,（2）右边的外延边距（margin-right）语法：margin-right : length | auto 示例：body margin-right: 11.5%; （3）底边的外延边距（margin-bottom）语法：margin-bottom : length | auto 示例：body margin-bottom: 11.5%; ,制作：计算机学院邵黎,73,（4）左边的外延边距

42、（margin-left）语法：margin-left : length | auto 示例： body margin-left: 11.5%; h4 margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px bodymargin: 1em 2em 3em 4em /* 定义文本的上、右、下、左的边距分别为1、2、3、4em */ 举例：MARGIN的属性变化举例：设置空白区域,制作：计算机学院邵黎,74,6.7.2 设置边框（BORDER）,可以利用BORDER的标记设置边线的颜色、样式、厚

44、otted（点线）、dashed（短线）、solid （实线）、double（双线）、groove（3D凹槽）、ridge（3D凸槽有菱形效果）、inset（3D凹边）、outset（3D凸边）。,制作：计算机学院邵黎,76,示例： body border-style: double groove body border-style: double groove dashed p border-style: double; border-width: 3px pborder:5px double purple /* 定义了四条一样的边框 */,制作：计算机学院邵黎,77,（2）所有边框宽度

45、（border-width）语法：border-width : medium | thin | thick | length 参数：medium为默认宽度，thin为小于默认宽度，thick为大于默认宽度。length由数字和单位标识符组成的长度值，不可为负值。示例：span border-style: solid; border-width: thin span border-style: solid; border-width: 1px thin ,制作：计算机学院邵黎,78,（3）边框颜色（border-color）语法：border-color : color 参数：color

46、指定颜色。示例： body border-color: silver red body border-color: silver red rgb(223, 94, 77) body border-color: silver red rgb(223, 94, 77) black h4 border-color: #ff0033; border-width: thick p border-color: green; border-width: 3px p border-color: #666699 #ff0033 #000000 #ffff99; border-width: 3px ,制作：计算

48、（7）左边框宽度（border-left）语法：border-left : border-width | border-style | border-color 示例： div border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green h4border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px 举例：1、2、3、4、5、立体按钮、第三版教材【例4-14】,制作：计算机学院邵黎,81,6.7.3 设置对象边距（PADDING）,在CSS中，段落区域与区块边界之间的距离（对象间隙）利用PADDING设置。对象间隙也称内补丁，位于对象边框和对象之间，PADDING用来指定文字内容与区块边界顶端、底端、左边、右边的空白间距。样式的属性为： PADDING -TOP 、 PADDING -RIGHT 、 PADDING -BOTTOM、 PADDING -LEFT。大小值可以是绝对值或相对值，默认为0。举例：PADDING的属性变化举例：内容与边框的间距,

展开阅读全文