第三章 CSS技术.ppt

1、第3章CSS技术,教学目的,了解CSS基本概念 了解CSS基本语法 了解CSS常用属性描述方法,教学内容,3.1 CSS简介,DHTML（Dynamic HTML，动态HTML）开发技术，主要包括CSS（Cascading Style Sheets，层叠样式表）、脚本语言、HTML4.0及其以上版本和支持动态效果的浏览器。,3.1.1 什么是CSS,CSS中文译为层叠样式表，它是对WEB页面显示效果进行控制的一套标准。 样式就是页面显示的文字、图片等元素的格式、风格。 层叠样式也就是指当页面同一元素在显示时受到多种样式控制时，将按照一定的层次顺序处理。 可以使用任何的文本编辑软件来编写CSS文

2、件，编写好的文件以扩展名“.css”保存。,3.1.2 CSS的作用,CSS扩充了HTML标记的属性设定，使得页面显示效果更加丰富，表现效果更加灵活，更具有动态性。 使用CSS可以将页面样式定义和HTML文件分离，使得页面开发及维护工作更易进行。 可以定义一个CSS文件，而让所有显示样式相同的页面文件都调用这个CSS文件， 也可以在一个页面文件中调用多个CSS样式表。,3.1.3 CSS的特点,将网页的内容结构和格式控制分开。 可以精确控制页面的所有元素。 页面显示效果更加丰富。 支持多种浏览器。,3.2 CSS的基本语法,CSS定义的基本语法格式为： 选择符规则列表 选择符是指要使用该样式的

3、对象（我们将在3.2.3节详细介绍），它可以是一个或多个HTML标记、ClASS选择符或ID选择符，如果为多个则使用逗号“,”进行分隔。 规则列表是由一个或多个属性定义语句组成的样式规则，各语句间使用分号“;”进行分隔。 属性定义语句的语法格式为：“属性名：属性值”。 如：h3font-family:隶书;color:blue h2,h3font-family:宋体;color:red myfontfont-size:20pt #myfontfont-size:20pt,3.2.1 CSS基本格式,在页面文件中对CSS的定义有以下几种方式： （1）直接在页面文件中使用HTML标记的style属

4、性。 这种方式可以直接在HTML标记中定义该标记的显示样式，并且该样式定义只能用于这个标记。其语法格式为： 如： 程序代码见程序清单3-1，运行结果。,3.2.1 CSS基本格式,（2）在页面文件中定义内部样式表 。 这种方式通过标记来定义样式，其语法格式为： 其中使用了HTML注释标记，是为了当有浏览器不支持CSS语句时，遇到该语句段就会忽略该段内容。 程序代码见程序清单3-2，运行结果。,3.2.1 CSS基本格式,（3）在页面文件中嵌入外部样式表 。 为了让多个页面文件可以共享CSS样式定义，我们可以将CSS语句段编写为单独的一个CSS文件，然后将它嵌入到页面文件中。其语法格式为： 其中

5、外部CSS样式表文件名是以“.css”为扩展名的CSS文件，如果该文件和当前页面文件处于同一目录，则直接给出文件名，否则给出其相对路径。 程序代码见程序清单3-3，样式表文件代码， 运行结果。,3.2.1 CSS基本格式,（4）链接外部样式表 。 这种方式和嵌入外部样式表的方式相似，也要访问外部样式表，但是嵌入外部样式表时是将样式文件直接加载到import语句处，而链接外部样式表是直接向样式文件索取样式。其语法格式为： 程序代码见程序清单3-4，运行结果。,3.2.2 CSS注释语句,CSS的注释语句是位于“/*”和“*/”标记之间的语句内容。 程序代码见程序清单3-2 。,3.2.3 CSS

6、选择符,CSS选择符主要有HTML标记、CLASS选择符和ID选择符三种。,表3-1 CSS选字符的定义和使用,3.2.4 样式表的层叠顺序,由于HTML标记在使用中常常有嵌套情况出现，那么对于控制同一页面内容的嵌套标记，究竟哪一个样式起作用？ 先看一个例子。程序代码见程序清单3-5，运行结果 （1）直接在页面文件中使用HTML标记的style属性定义的样式优先级最高； （2）其他的样式定义按照在页面文件中出现的顺序，越后出现的优先级越高； （3）CLASS选择符的优先级高于ID选择符 （4）没有被定义样式控制的内容将使用浏览器的默认样式,3.3 CSS基本属性,CSS的基本属性主要包括背景属

7、性、文本属性、字体属性、边界属性、边框属性、边距属性、列表属性和定位属性等。,3.3.1 CSS背景属性,CSS中有关背景的属性有对背景颜色的设置属性和对背景图片的设置属性，主要包括 ： background-color 用于设置背景颜色，其属性设置语法为： background-color：颜色 | transparent background-image 用于设置要加载的背景图片，其属性设置语法为： background-image：url(背景图片的地址) | none background-repeat 用于设置背景图片的排列方式，其属性设置语法为： background-repeat

8、：repeat | repeat-x | repeat-y | no-repeat,3.3.1 CSS背景属性,CSS中有关背景的属性有对背景颜色的设置属性和对背景图片的设置属性，主要包括 ： background-attachment 用于设置移动滚动条时背景图片位置是否固定，其属性设置语法为： background-attachment：scroll | fixed background-position 用于设置背景图片的插入位置，其属性设置为： background-position：x位置值 y位置值 （可以为百分比，数值，关键字） 程序代码见程序清单3-6，运行结果。,3.3.2

9、CSS文本属性,CSS中有关文本的属性主要包括： text-indent 用于设置文本的首行缩进值，默认属性值为0（即不缩进）。其属性设置语法为： text-indent：长度 text-align 用于设置文本段落的水平对齐方式，其属性设置语法为： text-align：left | right | center | justify vertical-align 用于设置文本段落的垂直对齐方式，其属性设置语法为： vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom,程序代

10、码见程序清单3-13，运行结果,3.3.2 CSS文本属性,CSS中有关文本的属性主要包括： line-height 用于设置文本的行距，其属性设置语法为： line-height：normal | 百分比 | 长度值 letter-spacing 用于设置字符的间距，其属性设置语法为： letter-spacing：normal | 长度值 程序代码见程序清单3-7，运行结果。,3.3.3 CSS字体属性,CSS中有关字体的属性主要包括： font-family 用于设置文字的字体，其属性设置语法为： font-family：字体1，字体2， font-style 用于设置文字的效果，其属性

11、设置语法为： font-style：normal | italic | oblique font-size 用于设置文字的大小，其属性设置语法为： font-size：长度 | 关键字 font-weight 用于设置字体的粗细，其属性设置语法为： font-weight：normal|bold|bolder|lighter| 100900,3.3.3 CSS字体属性,CSS中有关字体的属性主要包括： font-variant 用于设置文字的变形属性，其属性设置语法为： font-variant：normal | small-caps text-decoration 用于设置文字的显示效果，其

12、属性设置语法为： text-decoration：underline | overline | line-through| blink | none text-transform 用于设置文字的转换，其属性设置语法为： text-transform：capitalize | uppercase | lowercase | none 程序代码见程序清单3-8，运行结果。,3.3.4 CSS边界属性,CSS中主要使用margin属性来控制元素边界与网页其他内容的水平和垂直间距（百分比和数值）。其属性设置语法为： margin：距离（四个方向一样） margin：距离1（上下） 距离2（左右） ma

13、rgin：距离1（上） 距离2（左右） 距离3（下） margin：距离1（上） 距离2（水平右） 距离3（下） 距离4（水平左） 距离可以为具体数字或百分比。 我们也可以给四个边界单独设置具体数值，其属性设置语法为： margin-top：距离 | auto margin-right：距离 | auto margin-bottom：距离 | auto margin-left：距离 | auto,3.3.5 CSS边框属性,在CSS中可以使用border属性来控制元素的边框宽度、样式、颜色。其中使用border-width设置边框宽度，使用border-style设置边框显示样式，使用bord

14、er-color设置边框颜色，每一属性都可以单独设置四个方向的属性值。 border-width 如：border-width: thin（上） medium（右） thick（下） 10px（左）; 可以使用border-top-width、border-right-width、border-bottom-width和border-left-width来设置上、右、下、左四个方向的边框宽度，它们的属性值均可设为：thin | medium | thick | 长度。,3.3.5 CSS边框属性,border-style 可以使用border-top-style、border-right-st

15、yle、border-bottom-style和border-left-style来设置上、右、下、左四个方向的边框样式，它们的属性值均可设为：none | dotted | dashed | solid | double | groove | ridge | inset | outset。 border-color 可以使用border-top-color、border-right-color、border-bottom-color和border-left-color来设置上、右、下、左四个方向的边框颜色，它们的属性值均为颜色值，可以选择CSS的颜色表示方式进行设置。,3.3.6 CSS边距

16、属性,在CSS中可以使用padding来设置元素的内容与元素边框之间的距离。我们可以通过设置padding属性值控制四个方向的距离，也可以使用padding-top、padding-right、padding-bottom和padding-left分别设置上、右、下、左四个方向的距离，其属性设置语法和margin属性类似 。 边界、边框、边距属性使用示例 程序代码见程序清单3-9，运行结果。,3.3.7 CSS列表属性,CSS中主要使用list-style来设置文字列表属性，控制列表的符号和位置等。其基本属性设置语法为： list-style：符号类型，位置 我们也可以将这些属性通过使用lis

17、t-style-type、list-style-position和list-style-image分别进行设定。,3.3.7 CSS列表属性,list-style-type 用于设置列表的符号类型，其取值可为： none | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha list-style-image 用于设置使用指定图像作为列表的符号，其值为该图像的URL地址。语法描述为： list-style-image：url(“该图像的URL地址”) list-style-position 用于设置列表的项目符号的位置，其取值可为outside 或inside 程序代码见程序清单3-10，运行结果。,3.3.8 CSS定位属性,CSS中有关定位的属性主要包括： top 用于设置元素与浏览器窗口上方的距离 left 用于设置元素与浏览器窗口左