预览加载中，请您耐心等待几秒...

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

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共20页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

第一章CSS层叠样式表（基础篇） 就是“层叠样式表”。将CSS引入到网页中是网页编辑的一大革命吧~通过设置CSS，我们可以随意地控制网页中字体的大小、颜色等，便于统一网站的整体风格；可以方便地为网页中的各个元素设置背景颜色和图片并进行精确的定位控制；可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊等只有在图象处理软件中才能实现的效果；可以与脚本语言相结核，在网页中实现很多动态滤镜效果。下面我们就来详细说明CSS的语法和在网页中的编辑。由于这篇内容较多，就分为两篇讲解。本篇的主要内容是：HYPERLINK"http://www.lain1978.com/tutorial/5.php"\l"1"\t"_self"CSS的语法HYPERLINK"http://www.lain1978.com/tutorial/5.php"\l"2"\t"_self"如何将CSS添加到页面中HYPERLINK"http://www.lain1978.com/tutorial/5.php"\l"3"\t"_self"用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:#000000}td{font-family:"宋体";font-size:12px;color:#000000}a:link{color:#0000FF;text-decoration:none}a:visited{color:#666666;text-decoration:none}a: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代码的<head></head>之间就可以了。 <STYLEtype="text/css"><!--p{font-family:"宋体";font-size:12px;line-height:12pt;color:#000000}td{font-family:"宋体";font-size:12px;color:#000000}a:link{color:#0000FF;text-decoration:none}a:visited{color:#666666;text-decoration:none}a:active{color:green;text-decoration:none;}a:hover{color:#FF0000;background-color:#ff9900;text-decoration:underline}-