CSS层叠样式表(基础篇).doc

第一章 CSS层叠样式表（基础篇）就是“层叠样式表”。将CSS引入到网页中是网页编辑的一大革命吧通过设置CSS，我们可以随意地控制网页中字体的大小、颜色等，便于统一网站的整体风格；可以方便地为网页中的各个元素设置背景颜色和图片并进行精确的定位控制；可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊等只有在图象处理软件中才能实现的效果；可以与脚本语言相结核，在网页中实现很多动态滤镜效果。下面我们就来详细说明CSS的语法和在网页中的编辑。由于这篇内容较多，就分为两篇讲解。本篇的主要内容是：CSS的语法如何将CSS添加到页面中 用DW的CSS编辑器编辑css文件 CSS的语法在使用CSS前，我们先要对CSS的基本语法有所了解。如果你安装了Frontpage，不妨用*.css搜索一下你的硬盘，你会找到很多CSS文件。这都是FP自带的模板的CSS。你可以打开其中一个研究一下用DW和FP都能打开css文件，当然最简单的还是用记事本打开。下面我们来看一段CSS代码： p font-family: 宋体; font-size: 12px; line-height: 12pt; color: #000000td font-family: 宋体; font-size: 12px; color: #000000a:link color: #0000FF; text-decoration: nonea:visited color: #666666; text-decoration: nonea:active color:green;text-decoration: none;a:hover color: #FF0000;background-color:#ff9900;text-decoration: underline 第一行和第二行的p、td标签，分别定义了网页中文字和表格中文字的字体、大小和颜色。由于网页中的文字基本上都放置在表格中，所以需要定义表格中的文字属性。 font-family: 宋体 指定网页中的字体。font-size: 12px制定字体的大小。可以用12px或者是9pt。这两种字体大小在800和1024的分辨率下都比较好看。line-height: 12pt行与行之间的距离。 color: #000000字体的颜色。 #000000表示的是黑色。在网页编辑中，颜色是用十六进制数来表示的。你也可以用颜色的英文名称来表示，如红色的代码写成#ff0000，也可以写成red。第三行第六行的a标签，指定的是链接文本的变化控制。link表示超链接的文本在链接未被访问时的颜色，代码中指定颜色为0000ff（蓝色）。visited表示链接被访问过后的颜色为灰色（#666666）。active表示鼠标点击链接时链接的文本颜色为绿色。hover表示鼠标指向链接但未点击时的链接颜色为红色，背景颜色为橙色。text-decoration:none表示链接文本没有下划线。text-decoration: underline则表示链接文本有下划线。请大家仔细看这段代码，在下面的教程中，我们都将以这段代码作为例子。 如何将CSS添加到页面中在讲解如何编辑CSS前，我们先来说一下怎么把CSS添加到页面中，即怎么才能让编辑好的CSS对页面元素起作用呢？一般来说，有两种方法。一种方法是直接把CSS代码粘贴到html中。比如我们把下面一段代码粘贴入HTML代码的之间就可以了。不过这样做，我们只是定义了这个页面的CSS。如果一个网站有很多页面的话，一个一个页面粘贴代码是不大可能的。所以我还是建议大家用第二种办法第二种办法就是将css代码生成一个*.css的文件，然后将这个文件链接到所需的页面上。这样做一个很大的好处就是，你可以把网站上所有页面都链接到一个css文件，一旦这个css文件修改，那么所有的页面风格也随之改变。这就是css的好处之一。在DW里，链接CSS文件的方法是这样的：点击CSS样式窗口右下角的“编辑样式表”，就可以打开“编辑样式表”窗口，在此窗口单击“链接”，在弹出的链接中“浏览”，选择已经编辑好的CSS文件就可以了。【图5.1】 如果你使用FP来做主页，那么也可以使用类似的方法链接CSS文件。点击“格式”菜单栏，有一个“样式表链接”选项。选择“添加”，就可以选择CSS文件。【图5.2】 注意：以下这个问题是在用FP时很容易遇到的！有时候你会发现css无论如何也不会对网页字体起作用。你仔细检查代码，没发现有错啊！怎么回事？问题就出在，FP中有一个对字体进行设置的选项，有普通，1（8磅），2（10磅）等可选项。如果使用了css，切记把这里的选项选为“普通”。用DW的CSS编辑器编辑css文件讲了那么多，大家应该已经初步了解了css的基本代码吧。在Dreamweaver里，有非常方便的CSS编辑器，即使你对CSS代码不是很熟悉，也能编辑出css。在css样式编辑器中点击右下角的“新建样式”按钮，弹出“新建样式对话框”。按图中的设置选择相应的选项，最后“确定”，就会弹出一个对话框，让你定义新建的CSS文件的文件名和存放位置。 【图5.3】 设置完成后再点击CSS样式编辑器的“编辑样式表”按钮，就可以看到以下的对话框，1.css就是我们刚才创建的一个新的css文件。这个文件现在还没有内容。【图5.4】 从最开始我们研究的css代码中我们已经知道，我们常用的要重新定义的css标签是p、td和a。在上面的对话框中选择“新建”。以下的设置就是重新定义p标签，请注意图中的选项设置。【图5.5】 单击确定，我们就打开了css编辑器。这里才是真正的DW的css编辑器：）以下这个对话框中的设置就是对p标签的设置。通过这个设置，我们定义了网页中文字的字体、大小、颜色和行高。（td标签也是用同样的方法设置。也就是在上面“新建样式”的对话框中将标签改为td就可以了。）重新提一下，p标签是指对网页中元素的设置，td标签是指对表格中元素的设置。【图5.6】 好了，接下来是很重要的部分，就是如何对超链接风格进行设置。在“新建样式”对话框中选择 “使用css选择器”，我们可以看到标签里出现四个选择项。【图5.7】 a:active表示鼠标点击链接时链接风格；a:hover表示鼠标指向链接但未点击时的链接风格；a: link表示超链接的文本在链接未被访问时的风格；a:visited表示链接被访问过后的风格。 链接的风格包括链接文字的颜色、大小、背景颜色等等。四个标签的设置方法完全相同，我们选择其中一个做说明。比如hover标签定义的链接风格是：链接颜色为红色，背景颜色为橙色。【图5.8】 【图5.9】 好了，这章就先讲到这里吧，已经太长了大家可能注意到我没有对css编辑器中其他的属性做说明，比如“区块，盒子，边框”等等。光是对其做简单说明，恐怕不能使大家很好地理解它们地作用，还是在后面的具体例子中讲解比较好：）第二章 CSS层叠样式表（实例篇）本篇的主要内容是：CSS彩色链接的制作css对背景的定义css对区块的定义css对方框的定义css对边框的定义css对列表的定义css对定位的定义css对扩展的定义 CSS彩色链接的制作关于这个方面，蓝色理想有一份非常好的教程，偶没有必要把那么经典的教程重复一遍，大家直接去蓝色理想看吧（点击进入教程）这是做出后的链接文字特效：（要查看在浏览器中的特效，点这里）【图6.1】 css对背景的定义在第四章里我们讨论过用FP的样式编辑器来网页或表格的固定背景。在DW的css编辑器里同样也可以做到。在css样式窗口中按“新建样式表”，打开【图5.5】的对话框，标签可以随便起一个名字，我们就取名为“a”，创建自定义样式。可以将其定义在原来有的css文件中（比如我们在第五章里建立的1.css文件），也可以“仅对该文档”，则对a的重定义只对在编辑的这个有效，不会对其他文件产生影响。注意：这种创建自定义样式的方法，对区块、盒子、边框等分类都是适用的，不仅限于背景。【图6.2】 关于“背景”对话框的设置，很容易看懂。可以选择背景颜色和背景图像。对背景图像可以选择是否重复，是固定还是滚动，水平位置和垂直位置。自己试一下就明白了。按照【图6.2】设置好参数，这时css样式窗口会显示出.a的标签。这表示a标签已经重新定义了。双击a可以弹出图【6.2】，对属性进行修改。【图6.3】 要把这个定义应用到网页中，只需要单击a就可以了。我们来看一个例子，建立一个一行两列的表格，选中表格，单击a。a标签就被应用到这个表格中了。左边是纵向重复的背景图片，没有背景图片的地方就填充了背景颜色。真空尘埃真空尘埃真空尘埃 css对区块的定义 区块是什么意思呢？区块指的就是网页中的文本、图像、层等网页元素。这个属性主要用于控制区块中的内容的间距、对齐方式、文字缩进等等。这个就不加详细说明了。【图6.4】 css对方框的定义这个分类的参数较多。有盒子、边距和边界。CSS将网页中所有的块元素都看作是包含在一个盒子（BOX）中。【图6.5】 为了使大家了解这三个参数的意义，我们可以看这样一张示意图。中间的橙色表示区块内容，边界就是区块和红色边框之间的距离，边距就是边框和盒子之间的距离。【图6.6】 css对边框的定义通过对边框参数的设置，表格可以做出很多漂亮的效果。可以设置边框线的粗细，可以选择边框的颜色，可以选择边线的样式。记住一些特殊的样式，比如虚线、点划线等，只有在IE5.5以上的版本才能支持。【图6.7】 css对列表的定义这是对项目列表的控制。可以用图片来做列表项目的标志。【图6.8】 css对定位的定义 定位主要用于精确控制网页中的元素，主要是针对于层的。插句题外话，我不喜欢用层。一来浏览器对层的支持不好，再来层的定位不容易，很容易出现错位现象。有些人用层来代替表格对页面进行设计，我是不提倡的。层最好只用于做一些点缀效果比如在页面上随时间轴移动这样的效果。因为这个分类不大常用，我也不细说起参数了，大家自己研究研究吧。【图6.9】 css对扩展的定义 扩展分类包含两个部分。一个是分页符，是为了打印的页面设置分页符用的。视觉效果是为网页中的元素添加特殊的效果用的。光标：可以指定在某个元素上要使用的光标形状。滤镜：这是一个很奇妙的参数，共包括16种滤镜，用这些滤镜，甚至可以替代photoshop的一部分功能。我们将在下一章节中对滤镜进行详细说明。【图6.10】 第三章 CSS层叠样式表（滤镜篇）使用css滤镜，我们可以用一张图片做出很多类似phtoshop滤镜的效果。本篇的主要内容是：Alpha滤镜Blur滤镜Chroma滤镜Dropshadow滤镜FlipH、FlipV滤镜Glow滤镜Gray滤镜Invert滤镜Light滤镜Mask滤镜Shawdow滤镜 Wave滤镜 X-ray滤镜滤镜效果窗口就是【图6.10】。我们用一张图片做例子，学习各种滤镜特效。（btw：这是偶最近狂喜欢的多多宝宝，呵呵太可爱了太可爱了，怎么能那么可爱呢）咳咳，花痴发完了。进入正题吧Alpha滤镜语法：Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)参数和功能： 使对象产生透明度。参数名称功能参数Opacity图片的不透明度值从0100，0为完全透明，100为完全不透明FinishOpacity设置渐变的透明效果时，用来指定结束时的透明度值从0100，0为完全透明，100为完全不透明Style指定渐变的显示形状0：没有渐进；1：直线渐进；2：圆形渐进；3：矩形渐进StartX渐变透明效果开始的X坐标值StartY渐变透明效果开始的Y坐标值FinishX渐变透明效果结束的X坐标值FinishY渐变透明效果结束的Y坐标值示范：filter：alpha(opacity=80) 仅仅改变了图片的透明度 alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=85,finishx=150,finishy=85)有了一个直线的渐进效果 alpha(opacity=0,finishopacity=100,style=2,startx=0,starty=85,finishx=150,finishy=85)改变style2，可以得到圆形的渐进效果 alpha(opacity=0,finishopacity=100,style=2,startx=0,starty=85,finishx=150,finishy=85)改变style3，可以得到矩形的渐进效果Blur滤镜语法：Blur(Add=?, Direction=?, Strength=?)参数和功能： 使对象产生模糊效果。参数名称功能参数Add指定图片是否显示原来的模糊方向0：不显示原对象；1：显示原对象 Direction设置模糊的方向0（上），45（右上），90（右），135（右下），180（下），225（左下），270（左），315（左上）Strength指定模糊图像模糊的半径大小以pixels为单位，默认为5示范：blur(add=1,direction=90,strength=25)blur(add=0,direction=90,strength=25)Chroma滤镜语法：Chroma(Color=?)参数和功能： 某个颜色变透明。这个功能对图片的支持不是很好。参数名称功能参数color把图片或文字中的某个颜色变为透明RGB格式的颜色值Dropshadow滤镜语法：DropShadow(Color=?, OffX=?, OffY=?, Positive=?)参数和功能： 阴影效果。这个功能对图片的支持不是很好，普遍用于文字。参数名称功能参数Color指定阴影的颜色RGB格式的颜色值OffX指定阴影相对于对象在水平方向的偏移整数。正数表示阴影在对象右方，负数表示在左方。OffY指定阴影相对于对象在水垂直方向的偏移整数。正数表示阴影在对象上方，负数表示在下方。Positive指定阴影的透明度0：透明，无阴影；非0：阴影的强度示范： 文字效果DropShadow(Color=#000000, OffX=1, OffY=1, Positive=1)FlipH、FlipV滤镜无任何参数。FlipH使对象产生水平翻转效果；FlipV使对象产生垂直翻转效果。示范： FlipHFlipVGlow滤镜语法：Glow(Color=?, Strength=?)参数和功能： 使对象的外轮廓产生一种光晕效果。一般用于文字效果。参数名称功能参数Color指定光晕的颜色RGB格式的颜色值Strength指定光晕的范围设定值从1255，数字越大光晕越强示范： 文字效果Glow(Color=ff0000, Strength=2)Gray滤镜无任何参数。使图片由彩色变为灰白色调。示范： GrayInvert滤镜无任何参数。使图片产生照片底片的效果。示范： InvertLight滤镜语法：Light(?)参数和功能：模拟光源的投射效果。 不过要通过调用方法来实现，这就需要用到javascript动态滤镜编程。在这里就不细说了。方法功能AddAmbient加入包围的光源AddCone加入锥形光源Addpoint加入点光源Changcolor改变光的颜色Changstrength改变光源的强度Clear清除所有的光源MoveLight移动光源Mask滤镜语法：Mask(Color=?)参数和功能：在对象上建立一个覆盖于表面的膜。对图像的支持不好，普遍用