第2章 CSS(样式控制与页面布局).ppt

1、2.4 CSS: 样式控制与页面布局,2.4.1 网页布局与页面元素定位 2.4.2 CSS样式控制 2.4.3 页面布局,2.4 CSS: 样式控制与页面布局,样式style 指元素在浏览器中呈现的形式。在XHTML中，使用style设置元素的样式，每个style内包含一个或多个属性，其一般形式为： style=属性名1:属性值1; 属性名2:属性值2; 属性名与属性值之间用冒号“:”分隔，如果一个样式中有多个属性，各属性之间用分号“;”隔开。 标记: 分区标记,2.4.1 网页布局,网页布局方式 左对齐（默认情况下，网页布局为水平左对齐显示） 居中 满宽度显示 网页水平居中显示，宽度固定

2、在body的style样式中，设置text-align属性为center。如果希望页面宽度固定，可以通过设置div的width属性实现，代码示例如下： ,2.4.1 网页布局,网页满宽度显示，宽度随浏览器显示界面大小自动调整 将固定宽度变为98%： ,2.4.1 页面元素定位,页面中的元素3种定位方式 1.流布局（static）(默认是该方式) 页面中的元素按照从左到右、从上到下的顺序显示，各元素之间不重叠。 2.坐标绝对定位（ absolute ） 元素显示在页中的位置由style样式的left、top、right、bottom以及z-index属性决定，具有相同z-index值的元素可以重

3、叠，其效果就像多张透明纸按顺序重叠在一起一样。z-index值大的元素会覆盖z-index值小的元素内容。 绝对定位元素的坐标位置是以它最近的具有position属性的父容器作为参照物的。见HTMLPosition1.htm 3.坐标相对定位relative方式 在流布局中的坐标相对定位，元素在页中显示的位置由 left、top以及z-index属性决定，具有相同z-index值的元素不重叠。 见HTMLPosition2.htm,2.4.2 CSS样式控制,CSS Cascading Style Sheets的缩写，称为级联样式表，也叫层叠式样式表。引入CSS的主要目的是为了将网页结构和表现

4、分离。 CSS定义样式的方式 内联式 嵌入式 外部链接式,2.4.2 CSS样式控制内联式,内联式 适用于单独控制某个元素样式的情况。 优点：设置样式直观、方便； 缺点：大量修改某些元素的样式时，需要对各个元素逐一修改，非常烦琐。 举例 第1章 1.1第1章第1节 1.2第1章第2节 第2章 2.1 第2章第1节 2.2 第2章第2节 ,2.4.2 CSS样式控制-嵌入式,嵌入式 :在区定义的样式 适用环境：适用于某个网页内的具有相同样式的元素。 优点：当修改某些元素的样式时，只需要修改head部分的样式即可，该网页内的所有具有相同样式的元素会自动应用新的样式。,2.4.2 CSS样式控制-嵌

5、入式,举例 无标题页 h1 font-size:30pt; color:Red; h2 font-size:20pt; color:Blue; 第1章 1.1第1章第1节 1.2第1章第2节 第2章 2.1 第2章第1节 2.2 第2章第2节 ,2.4.2 CSS样式控制-外部链接式,外部链接式 适用环境:多个网页内具有相同样式的元素，这种方式将样式保存在一个或者多个单独的.css文件中，当需要修改元素的样式时，只需要修改.css文件中的样式即可。 优点: 一旦修改了.css中的某个样式，凡是引用了指定.css文件的网页，都会自动应用新的样式。 如果某个元素既引用了.css文件，又有head部

6、分定义的样式，还有直接在标记内设置的样式，而这些样式的定义又发生了冲突。在这种情况下，浏览器会采用“就近使用”的原则，即采用与该元素位置最近的样式定义。,2.4.2 CSS样式控制-外部链接式,例题 1.Stylesheet.css: h1 color :Red; h2 color :Blue; , 外部链接式样式控制 第1章 1.1第1章第1节 1.2第1章第2节 第2章 2.1 第2章第1节 2.2 第2章第2节 ,2.4.2 CSS样式控制:CSS单位,1长度单位 CSS的长度单位分为绝对单位和相对单位两种，其中绝对单位有cm（厘米）、mm（毫米）、px（像素）、in（英寸）、pt（点，

7、1pt=1/72英寸）、pc（1pc=12点）；相对单位有（百分比）、em（当前浏览器字体中大写字母“M”的宽度）、ex（当前浏览器默认字体中小写字母“x”的高度）。,2.4.2 CSS样式控制:CSS单位,2颜色单位 （1）颜色名直接使用标准颜色名称； （2）#RRGGBB使用十六进制数表示颜色； （3）#RGB(rrr,ggg,bbb)使用十进制数表示颜色，R，G，B三个变量都是0255的整数，分别表示红、绿、蓝，注意次序不可颠倒； （4）rgb(rrr%,ggg%,bbb%)使用百分数表示颜色。 一般利用【样式生成器】的选色板选取合适的颜色，系统会自动根据所选颜色生成相应的代码。,2.4

8、.2 CSS样式控制:样式规则,样式规则指网页中元素的样式定义，包括元素的显示方式以及元素在页中的位置等。,2.4.2 CSS样式控制:样式规则,1HTML或XHTML元素 HTML或XHTML元素是最典型的选择符类型，设计者可以定义各种HTML或XHTML元素的样式，定义时直接使用选择符名称和大括号，然后在大括号内定义样式即可。例如： div color:red 该样式规则的含义是，div块内的所有字体都以红色显示。,2.4.2 CSS样式控制:样式规则,2自定义类（class） 自定义类以“.”为起始标志，用于定义HTML或XHTML元素中没有提供的标记样式，常用形式如下： .类名样式属性

9、1:值1; 样式属性2:值2; 注意：类名的左边有一个点“.”，表示是自定义类。利用样式生成器定义时，系统会自动加上这个点，但是在引用时不要带点。,2.4.2 CSS样式控制:样式规则,还可以指定某个元素内的自定义类，一般形式为： 样式定义选择符.类名样式属性1:值1; 样式属性2:值2; 例如 h1.first color:red; font-size:32pt; 含义是只有在h1中引用的first才采用红色32px的样式显示。,2.4.2 CSS样式控制:样式规则,3自定义ID 自定义ID以“#”为起始标志，例如： #customId1 color:red 引用时，使用id属性声明即可（注

10、意“id”为小写字母），例如： 本段落文字为红色 在同一个XHTML网页中，多个标记可以使用同一个自定义类，而id则只能为某一个标记使用。 如果在一个元素的样式定义中，既有HTML或XHTML标记，又有自定义类和自定义ID，则自定义ID的优先级最高，其次是自定义类，HTML或XHTML标记的优先级最低。,2.4.2 CSS样式控制:样式规则,4虚类 “虚类”是专用于超链接标记的选择符，使用虚类可以为访问过的、未访问过的、激活的以及鼠标指针悬停于其上的4种状态的超链接定义不同的显示样式。即： A:link未被访问过的超链接 A:visited已被访问过的超链接 A:active当超链接处于选中状态 A:hover当鼠标指针移动到超链接上,2.4.2 CSS样式控制:样式规则,5包含选择符 包含选择符用于定义具有层次关系的样式规则，它由多个样式选择符组成，一般格式为： 选择符1 选择符2 属性:值; 各选择符之间用空格分隔。例如： p b color:red 这种定义方式只对p所包含的b起作用，对单独的p或b均无效。,2.4.2 CSS样式控制:样式规则,6并列