网页设计与制作教程第7章--使用CSS修饰网页元素课件

1、网页设计与制作教程（HTML+CSS+JavaScript）第2版机械工业出版社第7章 使用CSS修饰网页元素7.1 文本控制 7.1.1 设置字体的类别CSS提供font-family属性来控制文字的字体类型。语法：font-family : 字体名称参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。【演练7-1】字体设置，本例页面7-1.html的显示效果如图7-1所示。7.1 文本控制 7.1.2 设置字体的尺寸在CSS样式中使用font-size属性设置字体的尺寸，其值可以是绝对值也可以是相对值。语法：font-size : 绝对尺寸 | 相对尺寸【演练7

2、-2】字体尺寸设置，本例页面7-2.html的显示效果如图7-2所示。7.1 文本控制 7.1.3 设置字体的粗细CSS中使用font-weight属性设置字体的粗细，包含normal、bold、bolder、lighter、100、200、300、400、500、600、700、800和900多个属性值。语法：font-weight : bold | number | normal | lighter | 100-900【演练7-3】字体粗细设置，本例页面7-3.html的显示效果如图7-3所示。7.1 文本控制 7.1.4 设置字体的倾斜CSS中的font-style属性用来设置字体的倾斜

3、。语法：font-style : normal | italic | oblique【演练7-4】字体倾斜设置，本例页面7-4.html的显示效果如图7-4所示。7.1 文本控制 7.1.5 设置文字的颜色在CSS样式中，对文字增加颜色修饰十分简单，只需添加color属性即可。color属性的语法格式：color:颜色值;【演练7-5】文字颜色设置，本例页面7-5.html的显示效果如图7-5所示。7.1 文本控制 7.1.6 设置文字的背景颜色在HTML中，可以使用标签的bgcolor属性设置网页的背景颜色，而在CSS里，不仅可以用background-color属性来设置网页背景颜色，还可

4、以设置文字的背景颜色。语法：background-color : color | transparent【演练7-6】设置文字的背景颜色，显示效果如图7-6所示。7.1 文本控制 7.1.7 设置文本的修饰使用CSS样式可以对文本进行简单的修饰，text属性所提供的text-decoration属性，主要实现文字加下划线、顶线、删除线及文字闪烁等效果。语法：text-decoration : underline | blink | overline | line-through | none【演练7-7】字体修饰设置，本例页面7-7.html的显示效果如图7-7所示。7.2 段落控制 7.2.

5、1 设置文字的对齐方式使用text-align属性可以设置元素中文本的水平对齐方式。语法：text-align : left | right | center | justify 【演练7-8】设置文字的对齐方式，本例页面7-8.html的显示效果如图7-8所示。7.2 段落控制 7.2.2 设置段落的首行缩进首行缩进指的是段落的第一行从左向右缩进一定的距离。语法：text-indent : length【演练7-9】设置段落的首行缩进，本例页面7-9.html的显示效果如图7-9所示。7.2 段落控制 7.2.3 设置首字下沉在CSS样式中伪对象:first-letter可以实现对象内第一个

6、字符的样式控制。【演练7-10】设置首字下沉，本例页面7-10.html的显示效果如图7-10所示。7.2 段落控制 7.2.4 设置行高段落中两行文字之间垂直的距离称为行高。在HTML中是无法控制行高的，在CSS样式中，使用line-height属性控制行与行之间的垂直间距。语法：line-height : length | normal【演练7-11】设置行高，本例页面7-11.html的显示效果如图7-11所示。7.2 段落控制 7.2.5 设置字符间距letter-spacing字符间距属性，可以设置字符与字符间的距离。语法：letter-spacing ：length | norma

7、l【演练7-12】设置字符间距，7-12.html的显示效果如图7-12所示。7.2 段落控制 7.2.6 设置文字的截断在CSS样式中“text-overflow”属性可以实现文字的截断效果。语法：text-overflow ：clip | ellipsis【演练7-13】设置文字的截断，7-13.html的显示效果如图7-13所示。7.3 设置图像样式7.3.1 设置图像边框图像的边框就是利用border属性作用于图像元素而呈现的效果。【演练7-14】设置图像边框，7-14.html的显示效果如图7-15所示。7.3 设置图像样式7.3.2 设置图像缩放使用CSS样式控制图像的大小，可以通

8、过width和height两个属性来实现。【演练7-15】设置图像缩放，本例页面7-15.html的显示效果如图7-16所示。7.3 设置图像样式7.3.3 设置背景图像CSS除了可以设置背景颜色，还可以用background-image设置背景图像。语法：background-image : url(url) | none【演练7-16】设置背景图像，7-16.html的显示效果如图7-17所示。7.3 设置图像样式7.3.4 设置背景重复背景重复（background-repeat）属性的主要作用是设置背景图片以何种方式在网页中显示。语法：background-repeat : repea

9、t | no-repeat | repeat-x | repeat-y【演练7-17】设置背景重复，7-17.html的显示效果如图7-18所示。7.3 设置图像样式7.3.5 设置背景图像定位可以通过background-position属性来改变图像的插入位置。语法：background-position : length | lengthbackground-position : position | position1使用关键字进行背景定位关键字参数的取值及含义如下：top：将背景图像同元素的顶部对齐。bottom：将背景图像同元素的底部对齐。left：将背景图像同元素的左边对齐。ri

10、ght：将背景图像同元素的右边对齐。center：将背景图像相对于元素水平居中或垂直居中。7.3 设置图像样式7.3.5 设置背景图像定位2使用长度进行背景定位长度参数可以对背景图像的位置进行更精确的控制，实际上定位的是图像左上角相对于元素左上角的位置。3使用百分比进行背景定位使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比位置对齐。7.3 设置图像样式7.3.5 设置背景图像定位【演练7-20】使用百分比进行背景定位，本例页面7-20.html的显示效果如图7-21所示。7.4 设置表格样式7.4.1 常用的CSS表格属性1border-collapse属性设置表格的

11、边框是合并成单边框，还是分别有各自的边框。语法：border-collapse : separate | collapse【演练7-21】使用合并边框技术制作细线表格，本例页面7-21.html的显示效果如图7-24所示。7.4 设置表格样式7.4.1 常用的CSS表格属性2border-spacing属性border-spacing属性用来设置相邻单元格边框间的距离。语法：border-spacing : length | length【演练7-22】使用border-spacing属性设置相邻单元格边框间的距离，本例页面7-22.html的显示效果如图7-25所示。7.4 设置表格样式7.

12、4.1 常用的CSS表格属性3caption-side属性caption-side属性用于设置表格标题的位置。语法：caption-side : top| bottom | left |right4empty-cells属性empty-cells属性用于设置当表格的单元格无内容时，是否显示该单元格的边框。语法：empty-cells : hide | show7.4 设置表格样式7.4.1 常用的CSS表格属性【演练7-23】使用empty-cells属性设置表格单元格无内容时隐藏单元格的边框，本例页面7-23.html的显示效果如图7-26所示。7.4 设置表格样式7.4.2 制作畅销活动排

13、行榜【演练7-24】使用隔行换色表格制作畅销活动排行榜，本例页面7-24.html的显示效果如图7-27所示。7.5 设置表单样式7.5.1 CSS美化常用的表单元素1美化文本域【演练7-25】使用CSS美化文本域，本例页面7-25.html的显示效果如图7-28所示。7.5 设置表单样式7.5.1 CSS美化常用的表单元素2美化按钮【演练7-26】使用CSS美化按钮，本例页面7-26.html的显示效果如图7-29所示。7.5 设置表单样式7.5.1 CSS美化常用的表单元素3制作登录框【演练7-27】使用CSS制作登录框，本例页面7-27.html的显示效果如图7-30所示。7.5 设置表

14、单样式7.5.2 光影世界联系我们表单【演练7-28】制作光影世界联系我们表单，本例页面7-28.html在浏览器中的显示效果如图7-31所示。7.6 综合案例制作光影世界网络融资平台页面7.6.1 页面布局规划通过成熟的构思与设计，光影世界网络融资平台页面的效果如图7-32所示，页面布局示意图如图7-33所示。7.6 综合案例制作光影世界网络融资平台页面7.6.2 页面的制作过程1前期准备（1）栏目目录结构在栏目文件夹下创建文件夹images和style，分别用来存放图像素材和外部样式表文件。（2）页面素材将本页面需要使用的图像素材存放在文件夹images下。（3）外部样式表在文件夹styl

15、e下新建一个名为style.css的样式表文件。2制作页面7.6 综合案例制作光影世界网络融资平台页面7.6.2 页面的制作过程1前期准备（1）栏目目录结构在栏目文件夹下创建文件夹images和style，分别用来存放图像素材和外部样式表文件。（2）页面素材将本页面需要使用的图像素材存放在文件夹images下。（3）外部样式表在文件夹style下新建一个名为style.css的样式表文件。2制作页面7.7 实训制作家具商城会员注册页面制作家具商城会员注册页面制作家具商城会员注册页面，页面效果如图7-34所示，布局示意图如图7-35所示。7.7 实训制作家具商城会员注册页面制作家具商城会员注册页面制作步骤。1前期准备（1）栏目目录结构在栏目