《精》第四章 CSS样式表_样式控制.pptVIP

WEB基础 单元目标 背景样式的控制 文本样式的控制 图像样式的控制 网页中的导航 超级链接的控制 鼠标指针的控制 列表的控制 表格的控制 表单元素的控制 常用的样式属性 背景颜色 在HTML中，设置网页的背景颜色利用的是body标记中的bgcolor属性，而在CSS中不但可以设置网页的背景颜色，还可以设置文字的背景颜色。 在CSS中，网页元素的背景颜色使用background-color属性来设置，属性值为某种颜色。 背景图像 设置背景图像，使用background-image属性实现。 仍然以上面的实例为基础，在CSS样式部分，增加如下样式代码： body{ background-image:url(bg.gif); } 背景图像平铺 在默认情况下，图像会自动向水平和竖直两个方向平铺。 如果不希望平铺，或者只希望沿着一个方向平铺，可以使用background-repeat属性来控制。该属性可以设置为以下4种之一： repeat：沿水平和竖直两个方向平铺，这也是默认值。 no-repeat：不平铺，即只显示一次。 repeat-x：只沿水平方向平铺。 repeat-y：只沿竖直方向平铺。 创建基础页面 创建一个基本的网页 设置文字的倾斜效果 CSS中的font-style属性正是用来控制字体倾斜的，它可以设置为“正常”、“意大利体”和“倾斜”3种样式，分别如下： font-style:normal; font-style:italic; font-style:oblique; 设置文字的倾斜效果 正常字体与“意大利体”，及“倾斜体”的对比 转换英文字母大小写 例如下面3个文字段落分别可以实现单词的首字母大写、所有字母大写和所有字母小写。 p.one{ text-transform:capitalize; } /* 单词首字母大写 */ p.two{ text-transform:uppercase; } /* 全部大写 */ p.three{ text-transform:lowercase; } /* 全部小写 */ 控制文字的大小 p{ font-family: Arial, Times New Roman; font-size:12px;} 字号单位可以是像素，也可以是em，1em=16px 设置文字装饰效果 text-decoration属性设置 设置段落首行缩进 Text-indent属性是以各种长度为属性值，为了缩进两个字的距离。 例如，对网页代码的p2段落进行如下设置： #p2{ text-indent:2em; } 设置段落首行缩进 这里再举一个不太常用的例子，如果希望首行不是缩进，而是凸出一定距离，也称为“悬挂缩进”，请看如下代码： #p2{ padding-left:2em; text-indent:-2em; } 设置字词间距 设置段落内部的文字行高 设置段落之间的距离 控制文本的水平位置 设置文字与背景的颜色 设置文字与背景的颜色 设置图像边框 样式表的边框属性 设置不同方向的边框属性 对象缩放 图文混排 图像的对齐方式 图文的垂直对齐方式 图文的垂直对齐方式 图文的垂直对齐方式 设置列表的项目符号 通常的项目列表主要采用ul或者ol标记，然后配合li标记列出各个项目，简单的列表代码如下，其效果如图所示。 设置列表的项目符号 通过使用list-style-type属性来控制列表的项目符号类型。 disc : 　 CSS1　实心圆 circle : 　 CSS1　空心圆 square : 　CSS1　实心方块 decimal : CSS1　阿拉伯数字 lower-roman : 　 CSS1　小写罗马数字 upper-roman : 　CSS1　大写罗马数字 lower-alpha : 　 CSS1　小写英文字母 upper-alpha : 　 CSS1　大写英文字母 none : 　 CSS1　不使用项目符号 设置图像项目符号 除了传统的各种项目符号外，CSS还提供了属性list-style-image，可以将项目符号显示为任意的图片。 设置图像项目符号 还可以通过背景图像的设置来制作列表的项目符号，这样会更具有灵活性。 设置表格的边框 网页中的表单元素 简单美化表单 彩色下拉菜单 总结 本章重点介绍了CSS样式表的基本语法规则以及相关概念，并且详细介绍了CSS样式在网页制作中的各种应用方法。