必威体育精装版版本的层叠样式表——CSS3.pptVIP

回忆;;第4章必威体育精装版版本的层叠样式表——CSS3;本章知识点;4.1CSS根底;为什么需要CSS样式表;为什么需要CSS样式表;4.1.1什么是CSS;样式表的根本语法;样式表的根本语法; STYLEtype=text/css

.red{

color:red;font-family:隶书;font-size:24px;

}

……

/STYLE;样式表的根本语法;样式表的三类应用方式;2．内部样式表;内嵌样式表;行内〔嵌入〕样式表;1．行内样式表;行内〔嵌入〕样式表;外部样式表文件;外部样式表文件; 链接〔LINK〕外部样式表; 导入〔@import〕外部样式表;3．外部样式表;接上;【例4-3】;4.1.3颜色与背景;【例4-4】;【例4-4】;4.1.4设置字体;【例4-5】;【例4-5】的运行结果;常用的样式属性;margin:mpx;

:mpxnpx;

:m1pxm2pxm3px;

:m1pxm2pxm3pxm4px;

padding同上

border:mpxsolidred;;常用的样式属性;4.1.5设置文本属性;1．设置文本对齐;【例4-6】;【例4-6】的运行结果;2．设置文本的修饰;【例4-7】演示设置文本修饰的例子;【例4-7】的运行结果;3．设置文本的缩进;【例4-8】演示设置文本缩进的例子;【例4-8】的运行结果;4．设置文本的字间距;【例4-9】演示设置文本字间距的例子;【例4-9】的运行结果;5．设置文本的行间距;【例4-10】演示设置文本行间距的例子;【例4-10】的运行结果;6．设置文本方向;【例4-11】演示设置文本方向的例子;【例4-11】的运行结果;7．处理文本中的空白符;【例4-12】演示禁止元素中的文本折行;【例4-12】的运行结果如下图;4.1.6超链接;【例4-13】;浏览【例4-13】的结果;【例4-14】;浏览【例4-14】的结果;CSS还包括下面的超链接样式;【例4-15】;4.1.7列表;1．设置列表项标记的类型;接上;【例4-16】设置无序列表和有序列表样式;2．设置列表项图像;【例4-17】设置无序列表项前面的图像;4.1.8表格;1．设置表格边框;浏览【例4-18】的结果;2．折叠边框;接上;CSS的其他表格属性;【例4-20】;接上;接上;浏览【例4-20】的结果;4.1.9CSS轮廓;CSS的轮廓属性;轮廓样式的可选值;轮廓宽度的可选值;【例4-21】设置元素轮廓的例子;浏览【例4-21】的结果;4.1.10浮动元素;【例4-22??;浏览【例4-22】的结果;4.2CSS3的新技术;4.2.1实现圆角效果;【例4-23】;浏览【例4-23】的结果;还可以使用下面的属性定义指定的圆角;【例4-24】;接上;浏览【例4-24】的结果;【例4-25】;浏览【例4-25】的结果;【例4-26】;浏览【例4-26】的结果;4.2.2多彩的边框颜色;使用这些属性的语法;前缀-moz;【例4-27】;浏览【例4-27】的结果;4.2.3阴影;不同的浏览器引擎中，实现box-shadow属性的方法略有不同;【例4-28】;浏览【例4-28】的结果;提示;4.2.6嵌入字体;参数说明;【例4-31】;浏览【例4-31】的结果;下载字体;4.2.4背景图片;接上;【例4-29】;浏览【例4-29】的结果;4.2.5多列;【例4-30】;浏览【例4-30】的结果;4.2.7透明度;【例4-32】在CSS3中实现不同透明度的图像;浏览【例4-32】的结果;【例4-33】在CSS3中实现不同透明度的层;浏览【例4-33】的结果;【例4-34】使用RGBA声明实现类似【例4-33】的不同透明度的层;4.4CSS3高级应用;4.4.1在页面中插入内容;2.插入图像

CSS3在页面中插入图像也是通过before和after选择器实现，在插入图像时，content属性赋值为图像文件的路径。

3.插入工程编号

使用CSS3插入工程编号通过两个步骤实现，第一步是将选择器content属性设置为counter，第二步是为待插入工程编号元素添加counter-incremen