第5章-CSS页面布局及排版—3

1、5.3 CSS页面布局,CSS页面布局要求设计者根据页面中显示的内容，首先对页面有一个整体的框架规划，包括整个页面分为哪些区域，各个区域之间的父子关系等，并利用div元素对页面进行整体区域上的划分；然后对各个div元素进行CSS定位；最后再在各个div元素中添加相应的内容并用CSS进行样式控制。 利用CSS布局的页面，更新十分容易。下面以最简单且最常用的网页布局框架为例，介绍CSS页面布局的整体思路。,5.3.1 宽度固定且居中版式,宽度固定且居中的版式是网页设计中最常见的布局方式之一，如图所示。,5.3.2 “工”字型版式,“工”字型的版式，也是网页中常见的一种排版方式，如图所示。,5.4

2、CSS内容排版,CSS内容排版主要是利用CSS对HTML页面中的文字、图像、背景、列表、超链接、表格以及表单进行全方位的设置，从而制作出 丰富多彩的页面。,5.4.1 CSS设置文字样式,1字体 在CSS中，文字的字体是通过font-family属性来控制，例如： pfont-family:黑体, Arial,宋体; 浏览器在执行代码时按照顺序在计算机中查找所声明的字体，如果有则浏览器采用相应的字体显示，如果声明的字体都没有，则使用浏览器的默认字体显示。 font-family属性同时声明的多种字体之间要用英文逗号分隔开。一些字体的名称中间出现空格，如Times New Roman，需要用英文

3、的双引号将其括起来。,5.4.1 CSS设置文字样式,2.文字大小 CSS对文字大小是通过font-size属性来设置的，其值可以采用相对单位，也可以采用绝对单位。 例如：,p font-family:黑体,Arial,宋体; font-size:3mm; /* mm为绝对单位 */ divfont-size:12px; /* px为相对单位 */,【例5-18】文字大小设置效果示例。,5.4.1 CSS设置文字样式,3.文字的加粗 在CSS中是通过属性font-weight来设置的，可以设置很多不同的值，从而对文字设置不同的粗细，如表所示。,4.文字的倾斜 在CSS中斜体字是通过设置font

4、-style属性来实现的。 例如:,pfont-style:italic; /* 意大利体 */ pfont-style:normal; /* 正常 */ pfont-style:oblique; /* 倾斜 */,5.4.1 CSS设置文字样式,5. 文字的复合属性 为了简化CSS代码，可以利用font属性来设置文字的复合样式。font属性可以设置字体、文字大小、文字粗细、文字倾斜等，各属性值之间用空格隔开。 例如:,p font:bold italic 12px; /* 文字加粗、倾斜和大小为12像素 */ ,6. 文字的颜色 在CSS中文字颜色是通过color属性设置的。 例如:,h1c

5、olor:blue; h2color:#00f; h3color:#0000ff;,5.4.1 CSS设置文字样式,7.文字的下划线、顶划线和删除线 CSS中可以通过设置text-decoration属性来实现这些特殊效果，该属性取值如表所示。,可以将这些属性值同时赋给text-decoration，各取值之间用空格分开。,5.4.1 CSS设置文字样式,8.英文字母大小写转换 CSS通过设置英文段落的text-transform属性实现英文字母大小写转换。 例如：,p.onetext-transform:capitalize; /* 单词首字母大写 */ p.twotext-transfor

6、m:lowercase; /* 全部小写 */ p.threetext-transform:uppercase; /* 全部大写 */,5.4.1 CSS设置文字样式,9.文字间距 在CSS中，可以通过letter-spacing属性控制字母间距，word-spacing属性控制单词间距。可以使用相对单位或绝对单位。对于中文而言，要调整文字之间的距离，需要设置letter-spacing属性，而不是设置word-spacing属性。 【例5-19】文字之间间距的设置效果示例。,5.4.1 CSS设置文字样式,10.文字的水平对齐 在CSS中文字的水平对齐是通过属性text-align来控制的，

7、其值可以设置为左、中、右和两端对齐等。,5.4.1 CSS设置文字样式,11.文字的行高 在CSS中通过设置line-height属性可控制一行文字的高度，该属性值可以是绝对单位也可以是相对单位。 例如：,h3line-height：20px; /*行高为20像素*/ pline-height:1.5; /*行高为元素的font-size属性设置值的1.5倍*/ h4line-height:130%; /*行高为元素的font-size属性设置值的130%*/,具体使用line-height属性时要注意： （1）line-height是用来给一行内容的高度设定范围的。 （2）对于段落p中文字的

8、行间距，可以设置p元素的line-height属性。,5.4.1 CSS设置文字样式,12.段落首行缩进 在CSS中通过设置text-indent属性可以控制段落的首行缩进和缩进距离，其属性值可以采用各种长度单位，缩进两个中文汉字的距离，用“2em”。 ptext-indent:2em; 如果希望首行不是缩进，而是凸出一定距离，即“悬挂缩进”可以如下设置： ptext-indent:-2em;,5.4.1 CSS设置文字样式,12.段落首行缩进 【例5-22】段落的首行缩进和首字下沉效果示例。,5.4.1 CSS设置文字样式,13.段落之间的距离 在CSS中段落与段落之间的距离可通过设置p元素

9、的margin属性即可。 注意：相邻两个段落之间的距离应该是上面段落的下边距与下面段落的上边距中值较大的那个。 例如：,p margin:5px 0px; /* 上下外边距为5像素，左右外边距为0像素 */ ,5.4.2 CSS设置图像样式,1.图像边框 在CSS中可以通过设置border属性为图像添加各式各样的边框。相关内容请参考5.1.2节。 2.图像缩放 用CSS控制图像的大小，可通过设置width和height两个属性来实现。,5.4.2 CSS设置图像样式,3.图像的对齐 当图像与文字同时出现在页面上的时候，需要合理地将图像与文字进行排列以达到美观的目的，这时图像的对齐方式就显的很重

10、要。 （1）水平对齐 图像的水平对齐方式与文字水平对齐方式基本相同，都分为左、中、右对齐。不同的是图像的水平对齐方式不能直接通过设置图像的text-align属性来实现，而是通过设置其父元素的text-align属性来实现的。,5.4.2 CSS设置图像样式,3.图像的对齐 【例5-23】图像的水平对齐效果示例。,5.4.2 CSS设置图像样式,3.图像的对齐 （2）垂直对齐 图像垂直方向上的对齐方式主要体现在与文字搭配的情况下，特别是当图像的高度与文字高度不一致时。 在CSS中是通过vertical-align属性来设置元素的垂直对齐方式。属性值如表所示。另外vertical-align属性

11、在不同的浏览器下效果会有些差别。,5.4.2 CSS设置图像样式,3.图像的对齐 （2）垂直对齐 在默认情况下，行内图像的最下端，将与同行文字的基线对齐。 【例5-24】图像与文字垂直对齐效果示例。,5.4.2 CSS设置图像样式,3.图像的对齐 （2）垂直对齐 另外，图像的垂直对齐方式也可以用具体的数值来调整，正数和负数都可以使用，无论图像的高度是多少，均以图像底部为准。 例如：,img vertical-align:-30px ,5.4.3 CSS设置背景样式,1.背景颜色 在CSS中网页元素的背景颜色是通过设置background-color属性来实现，具体的颜色值的设定方法与文字颜色值

12、的设置方法一样。background-color属性可以用于设置各种网页元素的背景颜色。 例如：,body background-color:red; /* 设置整个网页背景颜色 */ h1 font-family:黑体； color:white; /* 设置标题文字颜色 */ background-color:blue; /* 设置标题背景颜色 */ ,5.4.3 CSS设置背景样式,2.背景图像 CSS中给页面元素添加背景图像是通过设置background-image属性来实现的，元素可以同时设置背景颜色和背景图像。显示时背景图像优先于背景颜色。 【例5-25】网页同时设置背景颜色和背景图

13、像效果示例。,5.4.3 CSS设置背景样式,3.背景图像的平铺 在默认情况下，当背景图像尺寸小于所在元素的尺寸时，背景图像会自动沿水平和垂直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以通过background-repeat属性来控制。该属性的值包括以下四种。 （1）reapeat：沿水平和垂直两个方向平铺，默认值。 （2）no-reapeat：不平铺。 （3）repeat-x：只沿水平方向平铺。 （4）repeat-y：只沿垂直方向平铺。,5.4.3 CSS设置背景样式,3.背景图像的平铺 【例5-26】背景图像平铺效果示例（其中使用的背景图像bg.jpg宽度只有8px，高

14、度为150px）,5.4.3 CSS设置背景样式,4.背景图像的位置 在背景图像设置为不平铺情况下时，背景图像默认显示在页面元素的左上角。在CSS中可以利用background- position属性来设置图像的位置。 在设置background-position属性时，一般给出两个值，其属性值设置如下： （1）第一个值用于设置水平方向的位置，可以设置为left、center或right之一。 （2）第二个值用于设置垂直方向的位置，可以设置为top、center或bottom之一。,5.4.3 CSS设置背景样式,4.背景图像的位置 此外，背景图像的位置还可以使用具体的数值、百分比来精确定位。 例如：,background-position:right bottom; /* 背景图像位置，右下 */ background-position:30% 70%; /* 背景位置，百分比 */ background-position:50px 100px; /* 背景位置，具体数值 */,采用百分比设置时，表示在水平方向上，背景图像的水平30%的位置与所在元素（这里是body）的水平30%的位置对齐，垂直方向类似。 采用具体数值时，图像的左上角处距离页面左侧边框为50px，距离页面上面边框为100px，随着浏览器窗口的改变，图像的绝对位置不变。,5.4.3 CSS设置背景样式