CSS DIV论文.doc
湖 南 农 业 大 学毕业论文关于WEB网页设计中CSS的应用 学生姓名：覃 兵 年级专业：2008级 计算机科学与技术 指导老师及职称：王志明 讲师 学 院：成人教育学院湖南·长沙提交日期：20 年 月目 录摘要1关键词11前言12CSS的优势22.1维护方便22.2下载浏览迅速22.3强大的样式功能22.4容易阅读网页原始文件23 样式表的加入法23.1 以style属性值的形式加入23.2在网页文件的HEAD元素间加入样式表33.3 链接到外部的CSS文件44 CSS设计WEB页的部分技巧54.1 CSS设计网页文字样式的技巧54.2 表格内容强制换行的技巧64.3 网页背景图不滚动的技巧74.4 用CSS改变鼠标形状的技巧84.5 设计图形与文字位置的技巧95 结论10参考文献11致谢11关于WEB网页设计中CSS的应用学 生：覃 兵指导老师：王志明 （湖南农业大学成人教育学院，长沙410128）摘 要： 本文从维护方便、下载浏览迅速、强大的样式功能、容易阅读网页原始文件等四个方面介绍了在WEB页中使用CSS的优势。以及从CSS样式表以style属性值的形式加入WEB页、在网页文件的HEAD元素间加入CSS样式表、链接到外部的CSS文件加入WEB页等三个方面介绍了CSS加入WEB页的方法。并从设计网页文字样式、表格内容强制换行、网页背景图不滚动、CSS改变鼠标形状、在网页中设计图形与文字位置等五个方面论述了CSS设计WEB页的一些技巧。关键词： CSS；方法；样式表；网页；HTML1 前言在WEB网页的设计中，HTML只定义了网页的结构和各个要素，而让浏览器自己决定各要素以何种形式显示。不说HTML的网页缺少动感，就是在网页内容的排版布局上也有很多困难，如果不是专业人员或特别有耐心的人，很难让网页按自己的构思和创意来显示信息。即便是掌握了HTML语言精髓的人也要通过多次地测试，才能驾驭好这些信息的排版，过程十分漫长和痛苦。为了Internet的发展，让更多人早日踏进这个多姿多彩的世界，新的HTML辅助工具呼之欲出。在制作WEB网页时，如果我们通过CSS，可以实现对网页布局的控制。CSS中文名字是“层叠样式表”或者“串接样式表”，常常简称为样式表。CSS是一种灵活的工具，它将定义内容结构的部分和定义格式的部分分离，从而实现对页面布局更多的控制。CSS在保持HTML简单明了的基础上，从另一角度控制页面外观。样式表它能为网页上的元素精确地定位，可以让网页设计者象导演一样，轻易地控制由文字、图片组成的演员们，在网页这个舞台上按剧本要求好好地表演。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式控制来帮忙了。以前两者在网页上的分布是交错结合的，查看修改很不方便，而现在CSS把两者分开就会大大方便网页的设计者。内容结构和格式控制相分离，使网页可以光由内容构成，而将所有网页的格式控制指向某个CSS样式表。2 CSS的优势设计网页加入CSS技术，与传统的HTML相比有很大的优势。2.1 维护方便使用CSS可以将网页内容和网页格式分开设计，网页内容的设计就交给HTML，而格式的设计则交给CSS即可。若要修改页面内容的格式只需要修改CSS，而不需要去修改HTML代码。2.2 下载浏览迅速 使用CSS可以缩短网页下载时间，因为同样一组标题只需要一次格式设置，即可提供相同标签重复使用。而浏览者则只需要下载一次声明该格式的CSS程序代码，即可提供给整个网站的所有网页使用。2.3 强大的样式功能CSS提供设置网页格式的功能比HTML多，所有的HTML提供的标签都可以通过CSS设置要显示的格式。运用CSS提供的样式，可以代替需要绘制软件制作的文字特效功能，无形中也使网页“瘦身”。2.4 容易阅读网页原始文件可以将CSS的代码独立地放在一个文件中（扩展名为.CSS），但是所有用到它的网页都会受到影响。对于使用HTML设计的网页而言，含CSS功能的网页的源文件阅读起来更为轻松易懂；对于网站的管理员而言，负责的站点越大越能体会到CSS带来的便利性。3 样式表的加入方法3.1 以style属性值的形式加入这种样式的使用方法是以“Style”属性值的形式加入到网页文件的字里行间，特点是“定义某一个标签的样式单风格”，只对所定义的标签起作用，并非对整个页面起作用。例如：<HTML><HEAD><TITLE>以style属性值的形式加入</TITLE></HEAD><BODY><p style=”color:red;font-size:20pt”>张家界桑植职中</p>1</BODY></HTML>在上面，由于使用代码<p style=”color:red;font-size:20pt”>张家界桑植职中</p>，对“张家界桑植职中”定义了文字的颜色和大小，所以只有“张家界桑植职中”的文字颜色和大小改变，而其它内容的颜色和大小没有改变。3.2 在网页文件的HEAD元素间加入样式表是指将CSS代码直接插入每个页面HTML的<head>区，使用<Style></style>标签。这个方法适用于指定某个网页，除了展现外在的 CSS 文档定义好的网页风格外，同时还要展现本身HTML文档内加注的 CSS 。如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。 特别值得注意的是，为了防止不支持CSS 的浏览器误将标签间的 CSS 风格叙述当成普通字串，而展现于网页上，最好将CSS的叙述文字插入<!- - >标签之间。它的写法是： <HTML><HEAD><TITLE>本页标题</TITLE><STYLE TYPE=”text/css”><!各种CSS语句</STYLE></HEAD><BODY>开始本页内容</BODY></HTML>下面举一个例子，例如：<HTML><HEAD><title>HEAD元素间加入样式表</title><STYLE type="text/css"><!-H2font-size:60;font-family:隶书;COLOR=red-></STYLE></HEAD><BODY><H2>桑植职业中等专科学校</H2><P><H2>美丽的校园</H2></P><P><H3>班级信息</H3></P></BODY></HTML>在上面，由于使用H2font-size:60;font-family:隶书;COLOR=red，所以只有“桑植职业中等专科学校”和“美丽的校园”的字号为60、字体为隶书、颜色为红色，而“班级信息”为H3，不是H2，所以它没被设置成H2格式。3.3 链接到外部的CSS文件 这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要在一个 CSS 档内（扩展名为 .CSS）定义好网页的外观风格，所有连接到此 CSS 档的网页，便会依照CSS文档的指示，设计出定义好的风格。调用CSS文件的基本语法如下：<HTML><HEAD><TITLE>本页标题</TITLE><LINK REL="stylesheet" HREF="*.css" TYPE="text/css"></HEAD></HTML>上面语法中*.css是单独保存的样式表文件，其中不能包含<style>标识符，并且只能以css为后缀扩展名。LINK REL属性表示样式表将以何种方式与HTML文档结合。取值范围：stylesheet:指定一个外部的样式表；Alternate stylesheet：指定使用下个交互样式表。上述三种样式的加入方式可以同时使用，也可以根据需要单一或成对地使用。如果各加入方式间相互冲突，则在HEAD元素间加入的样式的优先级高于外部链接的CSS文件样式，字里行间加入的样式的优先级高于在HEAD元素间加入的样式（即当三种样式都作用于某一个内容元素，产生冲突时，那么这个元素只有优先满足3.1的样式后，才满足与3.2的不冲突样式，最后满足与3.3的不冲突样式）。这样一层一层地补充下去，就体现了“阶层性风格控制”。一方面集中统筹整个网站的网页风格，另一方面又可根据各个网页、各个段落的特殊需要，分别调配不同的风格。所以，这种控制方式又称为“阶层性”的风格控制。4 CSS设计WEB页的部分技巧4.1 CSS设计网页文字样式的技巧在CSS语法规则中可以分类定义文字的风格。例如：<html><head> <title>设置字体</title><style type="text/css"><!-h2 font-family: "宋体" font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCCh1 font-family: "Arial" font-size: 12pt; color: #66FF66-></style></head><body><h2>你好！朋友，欢迎光临！</h2><h1>Hello，everybody，welcome in !</h1></body></html>下面做一些简单的说明：（1）在CSS语法规则中这样定义了文字的风格，标签<h2></h2>间的字符为“宋体”，“大小12pt”，字符是“倾斜”的，颜色“#ff0033”，字符背景色“#ffcccc”。同理，标签<h1>.</h1>之间的文字字体“arial”，大小“12pt”，颜色“#66ff66”。（2）上面的CSS格式里，h1和h2称为“选择对象”，font-size以及color等称为“属性”，属性后面的称为“参数”。（3）通过css可以控制任何HTML标签的风格。例如：<td>，<p>，<body>，<table>，<tr>，<th>等。只要在HTML的<head>区内的<style type="text/css">和</style>之间指定对应标签的风格（字体，颜色，字体大小）即可。（4）如果你需要定义的一些标签的风格相同，可以这样做，将他们写在一起，这样又可以减少代码了：例：H1, P, TD font-family: arial font-size: 12pt上面的代码表示：所有位于<H1>、<P>和<TD>标签内的字符将用Arial字体，12pt显示。（5）通过CSS设置的风格对于javascripts输出的结果也是有效的。为了有效地控制输出的字符大小，一般使用CSS。（6）注意：有的比较老的浏览器并不支持式样单语法，会将<style type="text/css"></style>间的文本显示出来，若要避免这种情况的发生，最好加入<!- 和 ->。（7）在<style type="text/css"> 中的 TYPE="text/css" 的作用是设定采用何种类型，浏览器在执行到这里就知道了，这样以来，不支持CSS的浏览器可以忽略样式表。4.2 表格内容强制换行的技巧在table或Div里显示文章的时候，如果文字太多， Table/Div便会被撑开，有时候会造成页面很难看，为了避免表格因为图片尺寸或者过长的英文字符而变形撑开，这时可以给Table/Div设置如下样式：word-break：break-all；word-wrap:break-word；例如：<html><head><title>用CSS设置表格内容强制换行</title></head><body><table width="300" border="1" cellspacing="0" cellpadding="0" style="table-layout: fixed;" ><tr> <td width="100" height="200" bgcolor="#9933CC" style="word-break: break-all;word-wrap:break-word;">ssdasadsaddddddddddddddddddxcxxxxdddddddddddddddddddddddddddddsssssssssssssssdxxxxxxxx </td><td>中国</td><td>中华人民共和国</td></tr><tr> <td>中国</td> <td width="100" height="100" bgcolor="#9933CC" style="word-break: break-all; word-wrap:break-word;"> treetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetreetretreetreetree</td> <td>五星红旗</td></tr></table> </body></html>上例中单词超长的时候能自动截断单词分行，避免上述情况的发生。 “tree”单元格的高度、宽度小于内容的高度和宽度，但这个单元格没有被撑开，并且每行的最后一个英文单词“tree”没被分散打开。其中，“word-break:break-all;”是强制英文单词断行，“word-wrap: break-word;”是自动换行。其换行原理是当设定的单元格宽度小于内容宽度时，则每行内容的最后一个英文单词不被打散，而是整个单词移到下一行的开始位置。4.3 网页背景图不滚动的技巧WEB页中，经常设置背景图，再在背景图上面显示内容。我们在设计网页时，如何使背景图不随文字一起“滚动”，利用CSS可以实现这样的目的。下面代码中“D:My DocumentsMy Pictures1.jpg”就是网页中的背景图像路径，可以换成需要的背景图像：例如：<html><head><title> 背景图案不动</title><style type=text/css><!-BODY background:purple url(D:My DocumentsMy Pictures1.jpg);background-repeat:repeat-y;background-attachment:fixed-></style></head><body>1<P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P></body></html>上例中“background-repeat”是指背景图片的重复与否以及重复方式。重复方式有no-repeat，repeat，repeat-x，repeat-y四种属性。其中“no-repeat”是指无论背景图片的大小,只显示单个背景图片。“repeat”指背景图横向和纵向重复连续显示。“repeat-x”指背景图横向重复连续显示。“repeat-y”指背景图纵向重复连续显示。“background-attachment:fixed”是为了防止输入文字过多时背景图片随着文字一起滚动，对图片起固定作用。4.4 用CSS改变鼠标形状的技巧鼠标常以斜向上的空白箭头显示（普通指针），移到文本上时变为有头的竖线（插入指针），移到超级链接上变为手形（手形指针）。我们用css可控制鼠标的显示效果，例如可使鼠标移到普通文本上也显示成手型。用css控制的语法如下: <span style="cursor:*">文本或其它页面元素</span> 可把 * 换成如下效果中的一种： hand(手型指针)、crosshair(十字型)、text(插入指针)、wait(沙漏指针)、default(普通指针)、help(帮助指针)、e-resize(左右缩放指针)、ne-resize(右上缩放指针)、n-resize(上下缩放指针)、nw-resize(左上缩放指针)。 例如：<html><head><title>用CSS改变鼠标形状</title></head><body><span style="cursor: help">中华人民共和国</span> </body></html>4.5 设计图形与文字位置的技巧好的WEB页，经常会出现图形与文字混排的效果。图片与文字的位置层次关系非常复杂，有的文字在图形上面，有的在图形的左侧，有的在图形的右侧，还有的在图形的周围等等其它效果，这些效果我们可以用CSS来完成。下面这个例子做的是图片在环绕文字的左上角效果。<html><head><title>文字与图片的位置</title></head><body>张家界桑植职业中等专科学校张家界桑植职业中等专科学校张家界桑植职业中等专科学校<P><style> div width:300px; border:1px solid red img float:left; width:100px; height:100px </div></style> <div> <img src="D:My DocumentsMy Pictures1.jpg" /> 关天门山的历史文化传说也有很多，流传最久影响最大的是“野拂藏宝”和“鬼谷修易”的传说。“野拂藏宝”是传李自成兵败后，由其侄李过将所有财宝秘密运至天门山藏匿，李过并因此在天门山寺出家为僧，法号“野拂”。“鬼谷修易”是传鬼谷子在天门山绝壁上的鬼谷洞内隐居，研习易经，并传授当地百姓强身健体的鬼谷神功，也就是现在名闻天下的大庸硬气功。李自成的财宝真的藏匿天门山吗？野拂和李过是否确为一人？鬼谷子缘何在天门山隐居修行？大庸硬气功是否为鬼谷子所传？如果都是无稽之谈，为什么会在当地代代流传?还有许多有关“灵泉”、“求儿洞”、“独角瑞兽”等等传说在当地家喻户晓，妇孺皆知。</div></p><p><H1>欢迎大家来天门山做客！</H1></p></body></html>上例中，通过float：left把图片定位在文字的左侧，我们可以把float:left改为float:right，这样，图片就到了文字的右侧。5 结论我们不难发现CSS在WEB页的设计中，具有很重要的作用，在标准网页设计中CSS负责网页内容的格式表现,它是一种设计网页样式的工具。借助CSS的强大功能,网页将在你丰富的想象力下千变万化。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同页的外观和格式。如今网页的排版格式越来越复杂，很多效果需要通过CSS来实现，现代网页制作离不开 CSS技术， 用CSS不仅可以做出美观工整令浏览者赏心悦目的网页，还能给网页添加许多神奇的效果。CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。我们使用CSS，只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得十分有用。避免了一个一个网页的修改，大大减少了重复劳动的工作量，当你面对的是有数百个网页的站点时，CSS简直象是神对我们的恩赐！参考文献：1 张月玲. 网页设计与编程M. 西北工业大学出版社，2004：71932 唐永恒. 网络程序设计M. 人民邮电出版社，2008：61733 潘善亮，董金祥. 一个基于WEB的信息系统设计及实现J. 计算机应用， 1998，12：26284 丁卫颖，李奕，吴戈. CSS精粹M. 天津人民出版社，2007：36475 于鹏. 网页设计语言教程（HTML / CSS）M. 电子工业出版社，2003：1351756 王晓雨. CSS技术在WEB设计中的应用 J. 电脑学习，2008，3：39407 (美）巴特利特著，周哲玉等译. CSS入门经典M. 人民邮电出版社，2007：10258 李松峰，张程. 写给大家看的CSS书M. 人民邮电出版社，2009：25629 雷宁. 零基础学HTML+CSSM. 机械工业出版社，2009：16317210 关涛. CSS从入门到精通M. 化学工业出版社，2009：2833致 谢本论文是在我的指导老师王志明讲师的亲切关怀和悉心指导下完成的，他广博的学识、深厚的学术素养、严谨的治学精神和一丝不苟的工作作风使我终生受益。从内容的选择到最终成文, 王志明讲师都始终给予我细心的指导和不懈的支持，在思想上也给我以无微不至的关怀，在此谨对王志明讲师致以诚挚的谢意和崇高的敬意。在论文的写作过程中，也得到了许多同学的宝贵建议，同时还得到许多同事、老师的支持和帮助，在此一并致以诚挚的谢意。正是由于你们的帮助和支持，我才能克服一个一个的困难和疑惑，直至本文的顺利完成。在论文即将完成之际，我的心情久久无法平静，从选题到顺利成文，有多少可敬的师长、同学、朋友给了我无言的帮助，在这里请接受我诚挚的谢意！最后向对本文进行评审并提出宝贵意见的各位专家表示衷心地感谢！
