北京
15. 16. 在该例中,考虑声明的重要性,前景颜色color采用第10行规则中的声明,即呈现为红色。考虑选 择器的特指性,字体样式font-style采用第9行规则中的声明,即呈现为斜体。考虑就近原则,背景颜色 background-color采用第9行规则中的声明,即呈现为浅灰色。 3.4 框模型与定位模式 在CSS中,无论是HTML行内级元素还是块级元素,都被呈现为框(box)。下面介绍框模型及框 的定位模式。 图3-1 框模型示意图 3.4.1 框模型 首先介绍一下元素的框模型,如图3-1所示。 元素框的最内部分是实际的内容,直接包围内容 的是内边距,内边距的边缘是边框,边框以外是外边 距。内边距指定元素内容与边框的距离,外边距指定 元素框与相邻元素框之间的距离。 内边距、边框和外边距都可以细分为上、右、下、左 4个方向分别设置。 这样,一个元素框就包含4个边界和4个框。 (1)内容边界(也称内边界)和内容框。内容区的 大小可以用width和height属性设置,或者取决于实 际要呈现的内容。4条内容边界围成内容框。 (2)内边距边界和内边距框。内边距边界环绕着元素框的内边距。如果内边距的宽度为0,那么内 边距边界就和内容边界相同。4条内边距边界围成内边距框。 (3)边框边界和边框框。边框边界环绕着元素框的边框。如果边框的宽度为0,那么边框边界就和 内边距边界相同。4条边框边界围成边框框。 44 (4)外边距边界(也称外边界)和外边距框。外边距边界环绕着元素框的外边距。如果外边距的宽 度为0,那么外边距边界就和边框边界相同。4条外边距边界围成外边距框。 元素背景应用于由内容和内边距、边框组成的区域。边框通常会有自己的颜色。外边距是透明的。 3.4.2 相关术语 1.行内级框和行内框 CSS的display属性值指定为i'nline'、i'nline-block'或i'nline-table'的元素生成行内级框(inline-level box)。行内级框不需要从新的一行开始呈现,若干行内级框可以呈现在同一行。 默认情况下,HTML行内级元素生成行内级框。 行内级框又可分为行内框和原子行内级框。非替换行内级元素框以及display属性值指定为i'nline'的 元素框为行内框。替换行内级元素框以及display属性值指定为i'nline-block'或i'nline-table'的元素框为 原子行内级框。 行内框和原子行内级框的区别如下。 (1)当浏览器等宽度不足时,行内框的内容会被分断而在两行内呈现。原子行内级框则不会,它总 是被当作一个整体处理。 (2)行内框内容区大小不能设置,而原子行内级框的内容区大小是可以设置的。 (3)对于行内框,在垂直方向改变内边距、外边距和边框粗细不会影响自身及上下相邻元素框的布 局位置;而对于原子行内级框则会正常地产生相应的效果。 2.块级框、块框和块容器框 CSS的display属性值指定为b' lock'、l'ist-item'或t'able'的元素生成块级框。一个块级框总是独占一 行呈现。 默认情况下,HTML块级元素生成块级框。 可以作为块容器框的块级框也称为块框。块级框作为其父元素子成员,需要描述它与其父元素以 及与其兄弟元素之间的关系。块容器框作为框的容器,需要描述它与其后代元素之间的关系。块框是 兼具这两种功能的框。 除了表格框和替换元素块级框,其他块级框都属于块框。 块容器框不一定是块级框。除了块框,块容器框还包括非替换的行内级块框、非替换的表格单元格。 3.包含块 元素框的位置和大小一般是相对于一个特定矩形区域计算的,这个矩形区域被称为该元素的包含 块。元素包含块的确定规则如下。 (1)HTML文档根元素的包含块被称为初始包含块,即浏览器视口。 (2)如果元素的position属性值是s'tatic'或r' elative',则包含块为其最近的祖先块容器框的内容区。 (3)如果元素的position属性值是'absolute',则包含块由其最近的position属性值是'absolute'、 r' elative'或f'ixed'的祖先元素框确定,是该祖先元素框的内边距边界形成的矩形区。如果不存在这样的 祖先元素,包含块就是初始包含块。 (4)如果元素的position属性值是f'ixed',则包含块为初始包含块。 3.4.3 框的定位模式 在CSS中,元素框有以下3种基本的定位模式。 4 5 1.普通流 各元素框在各级包含块中从上到下、从左至右依次排列。position属性值为s' tatic'或r' elative'的元 素框在普通流中布局定位。 2.浮动 float属性值为l'eft'或r'ight'的非绝对定位框为浮动框。无论是行内级框还是块级框,变成浮动框 后,其默认大小将由其内容决定,但可以设置。浮动框脱离了普通流,但普通流中的框不会覆盖它,可以 在其周边布局定位。 浮动框分为左浮动框和右浮动框,它们会在其包含块内向左或向右浮动。 (1)浮动框会尽量往高处放。 浮动框的上外边界不能高于其包含块的上内边界。 浮动框的上外边界不能高于源文档中在该元素之前的元素生成的块框或者浮动框的上外边界。 浮动框的上外边界不能高于源文档中在该元素之前的元素所在的行框的顶端。 (2)浮动框会尽量往左/右浮动。 左浮动框的左外边界不能越过其包含块的左内边界。 左浮动框的左外边界不能越过之前已经生成的左浮动框的右外边界,或者其上外边界不能高于之 前已经生成的左浮动框的下外边界。 右浮动框具有上述类似的规则。 (3)更高的位置要比更左/右的位置优先。 3.绝对定位 position属性值为a' bsolute'和f'ixed'的元素框属于绝对定位。绝对定位的元素框相对于其包含块定 位。元素原先在普通流中所占的空间会关闭,就好像该元素原来不存在一样。 3.5 CSS 属性和属性值 本节介绍一些常用的CSS属性及其基本用法。 3.5.1 字体和文本 字体属性用于控制文本字符的显示格式,如使用的字体、大小、粗细等。这里介绍的字体属性包括 font-family、font-size、font-weight和font-style等。 文本属性用于控制文本的字符间距、对齐、装饰、空白处理等。这里介绍的文本属性包括textalign 、vertical-align、letter-spacing、line-height、text-decoration和white-space等。 (1)font-family。该属性用于设置字符字体。可以指定多种字体,按优先顺序排列,以逗号分隔。 如果在前面指定的字体不存在相应的字体库,浏览器会考虑使用在后面指定的字体。指定的字体可以 是某种具体的字体名,也可以是某种通用的字体系列名。例如: font-family: 宋体; font-family: Arial, Sans-serif; 该属性适用于所有元素,具有继承性。 (2)font-size。该属性用于设置字体大小,其取值可以是长度或百分数,但不可以是负值。长度是 整数、浮点数和长度单位组成的值,百分数是基于父元素字体的大小来计算的。例如: 46 font-size: 14px; 该属性适用于所有元素,具有继承性。 (3)font-weight。该属性用于设置字体粗细。理论上,字体粗细分为9级,100为最细,900为最 粗。实际上,浏览器不一定完全支持这9级,但会保证某级字体不会比它前一级的字体细。 也可以用标识符normal和bold作为值。默认值为normal,相当于400。bold表示粗体,相当 于700。 例如: font-weight: bold; 该属性适用于所有元素,具有继承性。 (4)font-style。该属性用于设置字体风格。其取值如下。 normal:正常字体。 italic:斜体。 oblique:倾斜。 例如: font-style: italic; 该属性适用于所有元素,具有继承性。 (5)text-align。该属性设置块内文字的水平对齐方式,其取值如下。 left:左对齐。 right:右对齐。 center:居中对齐。 justify:两端对齐。 例如: text-align: center; 该属性适用于块容器框,具有继承性。 (6)vertical-align。该属性设置行内级元素在行框内和表格单元格内容在单元格内的垂直对齐方 式。其取值可以是长度或百分数,可以是正值,也可以是负值。长度是整数、浮点数和长度单位组成的 值,百分数是基于元素本身行高(line-height)来计算的。属性值指定元素基于默认位置上升(正值)或下 降(负值)的距离。例如: vertical-align: 10px; /* 上升10px */ 该属性适用于行内级元素、表格单元格。该属性不具有继承性,但当应用于tr、tbody等元素时,将 影响其包含的所有单元格。 (7)letter-spacing。该属性设置文本字符(包括汉字)之间的间距。属性的默认值为normal,表示 由浏览器根据最佳状态设置字符间距。属性值可以取长度,即由整数、浮点数和长度单位组成的值,可 以是正值,也可以是负值。例如: letter-spacing: 3px; 该属性适用于所有元素,具有继承性。 4 7 (8)line-height。对于块容器框,该属性值指定框内各行框的最小高度,也决定了相邻行之间的间 距;对于行内框,该属性值指定该元素框的高度,也是计算其所在行框高度的基础。 属性的默认值为normal,表示由浏览器根据元素的字体大小设置一个合理值。属性值可以取长度 或百分数。百分数是基于该元素本身字体的大小来计算的。属性值也可以取数值,此时行高为该数值 乘以元素字体的大小。例如: line-height: 20px; /* 行高为20px */ line-height: 1.2; /* 行高为字体大小的1.2 倍*/ 该属性适用于所有元素,具有继承性。 (9)text-decoration。该属性控制是否为元素的内容文本添加装饰(用元素的前景颜色)。其取值 如下。 none:无修饰。 underline:下画线。 overline:上画线。 line-through:贯穿线。 blink:闪烁。 这些属性值可以同时设置,各属性值用空格分隔。例如: text-decoration: line-through; text-decoration: underline overline; /* 既有下画线,又有上画线*/ 该属性适用于所有元素,不具有继承性。通常,一个元素的该属性值会应用或传播至所有在正常流 的后代元素,但不包括浮动、绝对定位和原子行内级后代元素。 (10)white-space。该属性控制浏览器对元素内容中空白符号(空格、Tab制表符和换行符)的处 理。其取值及特性如表3-1所示,默认值为normal。 表3-1 white-space属性的取值及特性 值换 行 符空 白 符自动换行 normal 忽略合并允许 pre 保留保留不允许 nowrap 忽略合并不允许 pre-wrap 保留保留允许 pre-line 保留合并允许 该属性适用于所有元素,具有继承性。 3.5.2 颜色和背景 颜色和背景属性用于设置元素的前景颜色、背景颜色和背景图像等。这里介绍的颜色和背景属性 包括color、background-color、background-image和background-attachment等。 (1)color。该属性用于设置文本显示的前景颜色。指定颜色的常用方式如下。 颜色名:直接使用标准颜色名或浏览器支持的颜色名称。 48 #RRGGBB:各用两位十六进制数表示颜色中的红、绿、蓝含量。 rgb(rrr,ggg,bbb):使用十进制数表示颜色中的红、绿、蓝含量,其中,rrr、ggg和bbb都是0~255 的十进制数。 rgb(rrr%,ggg%,bbb%):使用百分比表示颜色中的红、绿、蓝含量。 例如: color: rgb(100%, 0%, 0%); /* 红色*/ 该属性适用于所有元素,具有继承性。 (2)background-color。该属性设置元素的背景颜色。默认值为transparent,表示没有背景色(透 明的),可以看到下层的内容。指定背景色的方式与指定前景色(color属性)的一样,可以是任何合法的 颜色值。例如: background-color: gray; 该属性适用于所有元素,不具有继承性。 (3)background-image。该属性用于设置元素的背景图像。例如: background-image: url(bg.gif); 该属性适用于所有元素,不具有继承性。 (4)background-attachment。该属性设置背景图像相对于浏览器视口是固定(fixed)的还是滚动 (scroll)的。默认值是scroll,此时背景图像会随元素在视口内滚动,即相对于元素是固定的。例如: background-attachment: fixed; 该属性适用于所有元素,不具有继承性。 3.5.3 尺寸、边距和边框 元素内容框的尺寸由width、height、max-width、max-height、min-width和min-height等属性控制。 元素内边距的尺寸由padding系列属性控制,外边距的尺寸由margin系列属性控制,边框通过 border属性设置。 (1)width、height。这两个属性分别设置元素内容框的宽度和高度。默认值为auto,表示宽度和高 度由元素内容固有的宽度和高度决定。可以用长度或百分数为属性设值,不能为负值。百分数是基于 包含块内容框的宽度和高度来计算的,此时包含块应该有明确的宽度和高度(不能是auto)。例如: width: 90%; width属性适用于除行内框、表格行和行组外的任何其他元素,不具有继承性。 height属性适用于除行内框、表格列和列组外的任何其他元素,不具有继承性。 (2)max-width、max-height。这两个属性分别设置元素内容框的最大宽度和最大高度,默认值为 none。例如: max-width: 800px; max-width属性适用于除行内框、表格行和行组外的任何其他元素,不具有继承性。 max-height属性适用于除行内框、表格列和列组外的任何其他元素,不具有继承性。 (3)min-width、min-height。这两个属性分别设置元素内容框的最小宽度和最小高度,默认值为0。 4 9 例如: min-height: 500px; min-width属性适用于除行内框、表格行和行组外的任何其他元素,不具有继承性。 min-height属性适用于除行内框、表格列和列组外的任何其他元素,不具有继承性。 (4)padding。该属性设置元素的内边距,默认值为0。padding属性值接受长度或百分数,但不允 许使用负值。百分数是基于其包含块的width值来计算的。例如: padding: 10px; /* 上、右、下、左的内边距均为10px */ padding: 10px 5px; /* 上、下为10px,左、右为5px */ padding: 20px 5px 10px 15px; /* 上为20px、右为5px、下为10px,左为15px */ 该属性适用于除表格行、行组、表格列、列组、表头和表脚外的任何其他元素,不具有继承性。 使用padding-top、padding-right、padding-bottom 和padding-left属性,可以分别设置上、右、下、左 的内边距。 (5)margin。该属性设置元素的外边距,默认值为0。margin属性值可以是长度或百分数,甚至允 许是负值。百分数是基于其包含块的width值来计算的。例如: margin: 10px; /* 上、右、下、左的外边距均为10px */ margin: 10px auto; /* 上、下为10px,左、右自动设置为对称*/ margin: 10px auto 0 auto; /* 上为10px,右为0,左、右自动设置为对称*/ 该属性适用于除表格单元格、表格行、行组、表格列、列组、表头和表脚外的任何其他元素,不具有继 承性。使 用margin-top、margin-right、margin-bottom、margin-left属性,可以分别设置上、右、下、左的外 边距。 (6)border。该属性用于为元素的4条边框设置相同的宽度、样式以及颜色。边框样式可以取以下 值:none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。例如: border: 5px solid red; 该属性适用于所有元素,不具有继承性。 使用border-top、border-right、border-bottom 和border-left属性,可以分别为某条边框设置宽度、 样式和颜色。 使用border-width属性可以为每条边框设置宽度(1~4个值)。例如: border-width: 5px; /* 4 条边框宽度均为5px */ border-width: 15px 5px; /* 上、下边框15px,左、右边框5px */ border-width: 15px 5px 15px 5px; /* 上、下边框15px,左、右边框5px */ 使用border-top-width、border-bottom-width、border-left-width和border-right-width属性,可以分 别设置某条边框的宽度。 使用border-style属性可以为每条边设置样式(1~4个值)。例如: border-style: outset; /* 4 条边框相同的样式*/ border-style: solid dotted dashed double; / * 每条边框具有不同的样式*/ 使用border-top-style、border-bottom-style、border-left-style和border-right-style属性,可以分别 50 设置某条边框的样式。 使用border-color属性可以为每条边框设置颜色(1~4个值)。例如: border-color: blue; border-color: blue red; 使用border-top-color、border-bottom-color、border-left-color和border-right-color属性,可以分别 设置某条边框的颜色。 3.5.4 定位与浮动 本节介绍与元素框定位相关的属性,包括position、top、left、bottom、right、float、clear等。 另外还会介绍z-index属性,它可以将元素定位在z轴的不同位置。 (1)position。该属性设置元素框的定位方式,下面介绍其可能的取值及相应的含义。 static:默认值。在普通流中进行布局。top、right、bottom 和left属性不可用。 relative:相对定位。相对于元素框在普通流中的正常位置产生一定的偏移。偏移量可由top、left 或right、bottom 属性指定。 相对定位框并没有脱离普通流,后续元素框在定位时也不会考虑它产生的偏移。 absolute:绝对定位。元素框在其包含块内进行定位。定位位置由top、left或right、bottom 属性 指定。绝 对定位框脱离了普通流,普通流中的元素框在定位时将忽略该元素。 fixed:固定定位。在初始包含块(即浏览器视口)内对元素框进行定位。定位位置由top、left或 right、bottom 属性指定。当使用滚动条移动视口中的内容时,固定定位框不移动。 固定定位框脱离了普通流,普通流中的元素框在定位时将忽略该元素。 position属性适用于所有元素,不具有继承性。 (2)top、left、bottom、right。这些属性适用于相对定位、绝对定位和固定定位的元素,用于设置相 对定位元素框相对于正常位置的偏移量,或者绝对定位、固定定位元素框在包含块、浏览器视口内的 位置。 (3)float。该属性指定元素框是否浮动至左侧、右侧或不浮动。其取值如下。 left:左浮动框。 right:右浮动框。 none:不浮动(默认值)。 该属性既可应用于行内级元素,也可应用于块级元素。无论是行内级元素还是块级元素,浮动后都 将变成浮动框。该属性不具有继承性。 (4)clear。该属性设置元素框的左右哪端不能有之前形成的浮动框。其取值如下。 left:元素框的上边框边界不能高于之前产生的任何左浮动框的下外边界。 right:元素框的上边框边界不能高于之前产生的任何右浮动框的下外边界。 both:元素框的上边框边界不能高于之前产生的任何左/右浮动框的下外边界。 none:默认值,元素框的左右两端都允许有之前形成的浮动框。 该属性适用于块级元素,不具有继承性。 (5)z-index。z轴定义为垂直延伸到显示区的轴,该属性设置元素框在z轴上的位置。当两个元素 框出现重叠时,它们在z轴上的位置就决定了谁覆盖谁。 51 该属性取整数,可以是正值,也可以是负值。默认情况下,初始包含块的z-index属性值为0,其他 元素与其父元素框取相同的值。如果将该属性值设置为正整数,那么值越大,元素框离用户就更近。如 果将该属性值设置为负整数,那么值越小,元素框离用户就越远。 该属性适用于相对定位、绝对定位和固定定位的元素,不具有继承性。 3.5 其他属性 5. 本节介绍的CSS属性包括display、visibility、overflow 、opacity和cursor等。 (1)display。默认情况下,HTML块级元素被呈现为块级框,行内级元素被呈现为行内级框。利 用该属性可以重新设置HTML元素生成的框的类型。其常见的取值如下。 inline:呈现为行内框。 block:呈现为块框。 inline-block:呈现为行内级块框。它是原子行内级框,也是块容器框。 list-item:呈现为一个主块框和一个符号框。 table:呈现为块级表格框。 inline-table:呈现为行内级表格框。 none:元素(包括子元素)不被呈现,不产生相应的框。 该属性适用于所有元素,不具有继承性。 (2)visibility。该属性指定元素框的可见性,其取值如下。 visible:默认值。元素框是可见的。 hidden:元素框是不可见的(完全透明),但仍影响布局。 colapse:对表格行、行组、列、列组,产生折叠效果;对其他元素,与值hidden相同。 该属性适用于所有元素,不具有继承性。 (3)overflow 。该属性指定块容器框的内容溢出边框时的处理方式,其取值如下。 visible:默认值。溢出内容可见,越出边框。 hidden:溢出内容隐藏。 scrol:显示滚动条,当溢出时,可利用滚动条查看。 auto:滚动条根据需要显示。当溢出时,显示滚动条。 该属性适用于块容器框,不具有继承性。 4)opct01. (aiy。该属性设置元素的不透明度,取值为0.~0,0表示完全透明,1表示完全不透明, 默认值为1。 该属性适用于所有元素,不具有继承性。 (5)cursor。该属性用于设置当鼠标指向元素时指针的类型。其取值如下。 auto:默认值。由浏览器设置指针。 pointer:呈现为指示超链接的指针(通常为手形)。 croshair:呈现为十字线。 text:呈现为指示文本的指针(通常为I型)。 wait:呈现为指示程序正忙的指针(通常是一块表或一个沙漏)。 help:呈现为帮助指针(通常是一个问号或一个气球)。 该属性适用于所有元素,具有继承性。 52 3.6 实战: 浮动框与行内级块框 本书实战以教务选课系统的开发为背景,正文部分各章的实战节及第16章介绍了管理员子系统的 开发,学生教师子系统的开发则作为实验题留给读者练习。 首先新建名为xk的PHP应用项目,删除自动创建的index.php文件,然后在源文件结点下新建名 为css、image和ls_admin的3个文件夹。 假设作为网站logo的图像文件logo.png已经生成,现在可以把它复制到image文件夹下。 3.6.1 管理员子系统页头 本节利用浮动定位等CSS技术创建如图3-2所示的页头,将用于管理员子系统的所有页面。 图3-2 页头示意图 首先在css文件夹下为项目新建名为xk.css的外部样式表文件。这里定义两组规则:一组是为所 有页面的有关HTML元素定义的一些基本规则;另一组是专门用于管理员子系统页头的若干规则。 代码如下: 1. /* 基本规则*/ 2. body { /* 规定了默认的字体、字号和字间距*/ 3. font-family:宋体; 4. font-size:14px; 5. letter-spacing:1.2px 6. } 7. .title {color:#458994; font-weight:700} 8. a {color:steelblue; text-decoration:none} 9. a:visited {color:steelblue} 10. a:hover {text-decoration:underline; font-weight:700;} 11. /* 管理员子系统页头规则*/ 12. .ah { /* 用于块级元素,如div 元素*/ 13. width:90%; /* 块级元素框的宽度是其容器宽度的90%*/ 14. background-color:#eeeeee; 15. margin:0 auto /* 块级元素框在其容器内水平居中*/ 16. } 17. .ah img {float:left; margin:1px 30px 1px 1px} 18. .ah span { 19. float:left; font-size:28px; font-weight:700; margin-top:22px 20. } 然后在ls_admin文件夹下创建head.html文件,用于呈现所要求的页头。代码如下: 1. 2. 3. 4.
11. 
12. 教务选课系统
13. ·
14. 管理员子系统
15.
16.
17.
18.
整个页头呈现为一个块框(body元素的div子元素),其中,img元素和3个span元素呈现为左浮
动框。默认情况下,3个span浮动框会顶着行的顶端呈现,利用margin-top属性可以调整其垂直位置。
浮动框脱离了普通流,页头块框的div在呈现其背景色时并不会考虑这些浮动框的存在,但它要包
含其最后一个div子元素。该div子元素位于所有浮动框的下方(其左右不能有浮动框),这样页头块框
的背景色就会自然覆盖上述所有的浮动框。
3.6.2 管理员子系统登录表单
这里利用行内级块框的特点创建管理员子系统的登录表单,如图3-3所示。
图3-3 利用行内级块框的特点创建管理员子系统的登录表单
首先在外部样式文件xk.css中定义用于表单呈现的两组规则:一组是所有表单共享的规则;另一
组是登录和注册表单专用的规则。代码如下:
1. /* 表单呈现规则*/
2. form {margin:10px 0}
3. form .label {
4. display:inline-block; /* 呈现为行内级块框*/
5. width:70px; /* 行内级块框的宽度*/
6. margin-right:10px
7. }
8. input,select { font-size: 12px; padding: 3px 1px }
9. input[type="submit"]{
12. 教务选课系统
13. ·
14. 管理员子系统
15.
16.