3 样式控制与页面布局.ppt

1、第3章 样式控制与页面布局,第3章 样式控制与页面布局,3.1 样式与样式生成器 3.2 网页布局与页面元素定位 3.3 CSS样式控制 3.4 页面布局 3.5 样式控制与布局综合举例,3.1 样式与样式生成器,XHTML 每一个标记都是一个元素 样式 指元素在浏览器中呈现的形式。在XHTML中，使用style设置元素的样式，每个style内包含一个或多个属性，其一般形式为： style=属性名1:属性值1; 属性名2:属性值2; 属性名与属性值之间用冒号“:”分隔，如果一个样式中有多个属性，各属性之间用分号“;”隔开。,【例3-1】使用style设置样式。,3.1.1 在源视图下设置样式,

2、 无标题页 登鹳雀楼 王之涣 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 ,3.1.1 在源视图下设置样式,3.1.2 利用样式生成器设置样式,样式生成器 可以帮助设计者快速设置元素的样式，在“设计”视图下，选择某个元素，然后用鼠标右键单击该元素，在快捷菜单中选择“样式”命令，即可弹出如下图所示的“样式生成器”对话框。,3.1.2 利用样式生成器设置样式,“样式生成器”对话框分为两个窗格。左窗格列出8个常规类别（字体、背景、文本、位置、布局、边缘、列表和其他）。当选择某个类别时，右窗格显示所选类别下的选项。选择了样式选项并单击“确定”按钮后，样式生成器会自动在“源”视图中生成对应的

3、样式定义。 注意：当选择属性为“”时，不会向样式中添加任何代码。可以利用这个特点清除原来设置的样式。 【例3-2】利用样式生成器，在例3-1的基础上添加一个背景图。,3.1.2 利用样式生成器设置样式,3.1.2 利用样式生成器设置样式,3.2.1 网页布局,网页布局方式 左对齐（默认情况下，网页布局为水平左对齐显示） 居中 满宽度显示 网页水平居中显示，宽度固定 在body的style样式中，设置text-align属性为center。如果希望页面宽度固定，可以通过设置div的width属性实现，代码示例如下： ,3.2.1 网页布局,网页满宽度显示，宽度随浏览器显示界面大小自动调整 将固定

4、宽度变为百分比： ,3.2.2 页面元素定位,页面中的元素定位 分为流布局、坐标绝对定位、坐标相对定位 流布局（static） 页面中的元素按照从左到右、从上到下的顺序显示，各元素之间不重叠。如果不设置元素定位方式，则网页默认为流布局方式。 坐标绝对定位（ absolute ） 元素显示在页中的位置由style样式的left、top、right、bottom以及z-index属性决定，具有相同z-index值的元素可以重叠，其效果就像多张透明纸按顺序重叠在一起一样。z-index值大的元素会覆盖z-index值小的元素内容。left指元素的x坐标、top指元素的y坐标。 绝对定位元素的坐标位置

5、是以它最近的具有position属性的父容器作为参照物的。,3.2.2 页面元素定位,【例3-3】新建一个名为PositionExample1的Web应用程序项目，修改Default.aspx中body内代码为下面的内容，然后切换到“设计”视图，改变视图宽度，观察各 div位置的变化。,3.2.2 页面元素定位,（3）relative 在流布局中的坐标相对定位，元素在页中显示的位置由 left、top以及z-index属性决定，具有相同z-index值的元素不重叠。 【例3-4】设计一个页面，添加如图3-7所示的3个层。当调整浏览器宽度时，层的相对位置保持不变，且始终居中显示。,3.3.1 什

6、么是CSS,CSS Cascading Style Sheets的缩写，称为级联样式表，也叫层叠式样式表。引入CSS的主要目的是为了将网页结构和表现分离。 CSS定义样式的方式 内联式 嵌入式 外部链接式,3.3.1 什么是CSS,内联式 适用于单独控制某个元素样式的情况。 优点：设置样式直观、方便； 缺点：大量修改某些元素的样式时，需要对各个元素逐一修改，非常烦琐。 举例 第1章 1.1第1章第1节 1.2第1章第2节 第2章 2.1 第2章第1节 2.2 第2章第2节 ,3.3.1 什么是CSS,嵌入式 适用于控制一个网页内具有相同样式的多个元素。 优点：当修改某些元素的样式时，只需要修改

7、head部分的样式即可，该网页内的所有具有相同样式的元素会自动应用新的样式。 适用环境：适用于修改某个网页内的具有相同样式的元素。,3.3.1 什么是CSS,举例 无标题页 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节 ,3.3.1 什么是CSS,外部链接式 适用于控制多个网页内具有相同样式的元素，这种方式将样式保存在一个或者多个单独的.css文件中，当需要修改元素的样式时，只需要修改.css文件中的样式即可。 一旦修改

8、了.css中的某个样式，凡是引用了指定.css文件的网页，都会自动应用新的样式。 如果某个元素既引用了.css文件，又有head部分定义的样式，还有直接在标记内设置的样式，而这些样式的定义又发生了冲突。在这种情况下，浏览器会采用“就近使用”的原则，即采用与该元素位置最近的样式定义。,3.3.2 CSS单位,1长度单位 CSS的长度单位分为绝对单位和相对单位两种，其中绝对单位有cm（厘米）、mm（毫米）、px（像素）、in（英寸）、pt（点，1pt=1/72英寸）、pc（1pc=12点）；相对单位有（百分比）、em（当前浏览器字体中大写字母“M”的宽度）、ex（当前浏览器默认字体中小写字母“x”

9、的高度）。,3.3.2 CSS单位,2颜色单位 （1）颜色名直接使用标准颜色名称； （2）#RRGGBB使用十六进制数表示颜色； （3）#RGB(rrr,ggg,bbb)使用十进制数表示颜色，R，G，B三个变量都是0255的整数，分别表示红、绿、蓝，注意次序不可颠倒； （4）rgb(rrr%,ggg%,bbb%)使用百分数表示颜色。 一般利用【样式生成器】的选色板选取合适的颜色，系统会自动根据所选颜色生成相应的代码。,3.3.3 样式规则,在【解决方案资源管理器】中，添加一个样式表文件Stylesheet1.css。,3.3.3 样式规则,在【添加样式规则】对话框中选择某个元素，或者定义一个类

10、，或者定义一个元素ID，【确定】按钮即变为可用，单击【确定】按钮，就添加了一个样式规则。,3.3.3 样式规则,1HTML或XHTML元素 HTML或XHTML元素是最典型的选择符类型，设计者可以定义各种HTML或XHTML元素的样式，定义时直接使用选择符名称和大括号，然后在大括号内定义样式即可。例如： div color:red 该样式规则的含义是，div块内的所有字体都以红色显示。,3.3.3 样式规则,2自定义类（class） 自定义类以“.”为起始标志，用于定义HTML或XHTML元素中没有提供的标记样式，常用形式如下： .类名样式属性1:值1; 样式属性2:值2; 注意：类名的左边有

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

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