第3章 CSS技术37620.ppt

第3章 CSS技术 一.CSS的基础知识 CSS是为了简化Web页面的更新工作而诞生的，它的功能非常强大，它将让网页变得更加美观，维护更加方便。CSS跟HTML一样，也是一种标记语言，甚至很多属性都来源于HTML，它也需要通过浏览器解释执行。任何懂得HTML的人都可以掌握，非常容易。 CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它是HTML功能的扩展，使网页设计者能够以更有效的方式设计出更具表现力的网页效果。 1. 样式表和HTML的关系 样式表(StyleSheets)技术诞生于1996年，全称是层叠样式表(Cascading StyleSheets，简称CSS)。那什么是样式呢？样式其实就是格式，对网页来说，像文字的大小、颜色以及图片位置等，都是网页显示信息的样式。那层叠又是什么意思？意思是当我们在HTML文件中引用数个定义样式文件（CSS文件）时，若数个样式文件间所定义的样式发生冲突，将依据层次处理。 样式表是HTML的表兄弟。样式表的产生是由于最初的HTML标准还不尽人意，用HTML制作网页就像是用画笔绘制一幅图画，只有那些对网页制作痴迷而执着的人才可能精确地实现预定的结果。正是在这种情况下，样式表技术诞生了，样式表的目的是为了“对布局、字体、背景和其他图文效果实现更加精确的控制”。 2. 样式表的基本结构 3.如何在网页中加入css 二. CSS的属性 1. 设置字体样式 3. 颜色及背景 4. 美化网页与超链接的设置 5. CSS定位 三. CSS滤镜 本教程结束 张成文 2007年3月21日 关键字方法与百分比方法对比表 100% 100% bottom right=right bottom 50% 100% bottom=bottom center=center bottom 0% 100% bottom left=left bottom 100% 50% right=right center=center right 50% 50% center=center center 0% 50% left=left center=center left 100% 0% right top=top right 50% 0% top=top center=center top 0% 0% top left=left top 以百分比表示 以关键字表示 (7) 背景 语法：background：值 允许值：背景颜色||背景图像||背景重复||背景附件||背景位置 初始值：未定义 说明：背景属性是一个更明确的背景——关系属性的略写。以下是一些背景的声明： body{background:white url(tree.jpg)} h1{background:#7fffd4} p{background:url(tree.jpg)#f0f8ff fixed} table{background:#0c0 url(tree.jpg) no-repeat bottom right} (1) 网页链接属性anchor 在CSS里，可以通过网页链接属性anchor来设置网页链接文字的效果。 网页链接属性anchor语法说明 在此属性内设置样式时，则上述四种属性将同时引用此值。 a 当鼠标移到超链接文字上方时，超链接文字所显示的样式。 a:hover 当鼠标点击超链接后，超链接文字所显示的样式。 a:active 已链接过的超链接文字的样式。 a:visited 尚未链接过的超链接文字的样式。 a:link (2) 设置滚动条属性scrollbar 在CSS里，可以通过滚动条属性scrollbar来美化滚动条。美化滚动条的参数见下表所示，并搭配下图说明。 流动条 滚动条scrollbar的参数说明 设置A区域内内小三角形的颜色。 scrollbar-arrow-color 设置B区域的滚动条轨道颜色。 scrollbar-track-color 设置A区域的3D阴影。 scrollbar-darkshadow-color 设置A区域的3D光影。 scrollbar-3dlight-color 设置A区域的边框颜色。 scrollbar-highlight-color 设置A区域阴影的颜色。 scrollbar-shadow-color 设置A区域的颜色。 scrollbar-face-color 说 明 参数值 (3) 光标属性的设置cursor 在CSS中，可以通过光标属性cursor来设置光标的图形，cursor属性共提供了16种属性值，如下表所示。