《CSS DIV论文》由会员分享，可在线阅读，更多相关《CSS DIV论文（15页珍藏版）》请在金锄头文库上搜索。
1、湖 南 农 业 大 学毕业论文关于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 网页背景图不滚动的技巧
2、74.4 用CSS改变鼠标形状的技巧84.5 设计图形与文字位置的技巧95 结论10参考文献11致谢11关于WEB网页设计中CSS的应用学 生：覃 兵指导老师：王志明 （湖南农业大学成人教育学院，长沙410128）摘 要： 本文从维护方便、下载浏览迅速、强大的样式功能、容易阅读网页原始文件等四个方面介绍了在WEB页中使用CSS的优势。以及从CSS样式表以style属性值的形式加入WEB页、在网页文件的HEAD元素间加入CSS样式表、链接到外部的CSS文件加入WEB页等三个方面介绍了CSS加入WEB页的方法。并从设计网页文字样式、表格内容强制换行、网页背景图不滚动、CSS改变鼠标形状、在网页中设
3、计图形与文字位置等五个方面论述了CSS设计WEB页的一些技巧。关键词： CSS；方法；样式表；网页；HTML1 前言在WEB网页的设计中，HTML只定义了网页的结构和各个要素，而让浏览器自己决定各要素以何种形式显示。不说HTML的网页缺少动感，就是在网页内容的排版布局上也有很多困难，如果不是专业人员或特别有耐心的人，很难让网页按自己的构思和创意来显示信息。即便是掌握了HTML语言精髓的人也要通过多次地测试，才能驾驭好这些信息的排版，过程十分漫长和痛苦。为了Internet的发展，让更多人早日踏进这个多姿多彩的世界，新的HTML辅助工具呼之欲出。在制作WEB网页时，如果我们通过CSS，可以实现对
4、网页布局的控制。CSS中文名字是“层叠样式表”或者“串接样式表”，常常简称为样式表。CSS是一种灵活的工具，它将定义内容结构的部分和定义格式的部分分离，从而实现对页面布局更多的控制。CSS在保持HTML简单明了的基础上，从另一角度控制页面外观。样式表它能为网页上的元素精确地定位，可以让网页设计者象导演一样，轻易地控制由文字、图片组成的演员们，在网页这个舞台上按剧本要求好好地表演。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式控制来帮忙了。以前两者在网页上的分布是交错结合的，查看修改很不方便，而现在CSS把两者分开就会大大方便网页的设计者。内容结构和格式控制相分
5、离，使网页可以光由内容构成，而将所有网页的格式控制指向某个CSS样式表。2 CSS的优势设计网页加入CSS技术，与传统的HTML相比有很大的优势。2.1 维护方便使用CSS可以将网页内容和网页格式分开设计，网页内容的设计就交给HTML，而格式的设计则交给CSS即可。若要修改页面内容的格式只需要修改CSS，而不需要去修改HTML代码。2.2 下载浏览迅速 使用CSS可以缩短网页下载时间，因为同样一组标题只需要一次格式设置，即可提供相同标签重复使用。而浏览者则只需要下载一次声明该格式的CSS程序代码，即可提供给整个网站的所有网页使用。2.3 强大的样式功能CSS提供设置网页格式的功能比HTML多，
6、所有的HTML提供的标签都可以通过CSS设置要显示的格式。运用CSS提供的样式，可以代替需要绘制软件制作的文字特效功能，无形中也使网页“瘦身”。2.4 容易阅读网页原始文件可以将CSS的代码独立地放在一个文件中（扩展名为.CSS），但是所有用到它的网页都会受到影响。对于使用HTML设计的网页而言，含CSS功能的网页的源文件阅读起来更为轻松易懂；对于网站的管理员而言，负责的站点越大越能体会到CSS带来的便利性。3 样式表的加入方法3.1 以style属性值的形式加入这种样式的使用方法是以“Style”属性值的形式加入到网页文件的字里行间，特点是“定义某一个标签的样式单风格”，只对所定义的标签起作
7、用，并非对整个页面起作用。例如：以style属性值的形式加入张家界桑植职中1在上面，由于使用代码张家界桑植职中，对“张家界桑植职中”定义了文字的颜色和大小，所以只有“张家界桑植职中”的文字颜色和大小改变，而其它内容的颜色和大小没有改变。3.2 在网页文件的HEAD元素间加入样式表是指将CSS代码直接插入每个页面HTML的区，使用标签。这个方法适用于指定某个网页，除了展现外在的 CSS 文档定义好的网页风格外，同时还要展现本身HTML文档内加注的 CSS 。如果内在加注的 CSS 叙述与外在连结的 CSS 叙述相冲突的话，网页的展现将以内在加注的 CSS 叙述为主。 特别值得注意的是，为了防止不
8、支持CSS 的浏览器误将标签间的 CSS 风格叙述当成普通字串，而展现于网页上，最好将CSS的叙述文字插入标签之间。它的写法是： 本页标题!各种CSS语句开始本页内容下面举一个例子，例如：HEAD元素间加入样式表桑植职业中等专科学校美丽的校园班级信息在上面，由于使用H2font-size:60;font-family:隶书;COLOR=red，所以只有“桑植职业中等专科学校”和“美丽的校园”的字号为60、字体为隶书、颜色为红色，而“班级信息”为H3，不是H2，所以它没被设置成H2格式。3.3 链接到外部的CSS文件 这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开。您只要
9、在一个 CSS 档内（扩展名为 .CSS）定义好网页的外观风格，所有连接到此 CSS 档的网页，便会依照CSS文档的指示，设计出定义好的风格。调用CSS文件的基本语法如下：本页标题上面语法中*.css是单独保存的样式表文件，其中不能包含标识符，并且只能以css为后缀扩展名。LINK REL属性表示样式表将以何种方式与HTML文档结合。取值范围：stylesheet:指定一个外部的样式表；Alternate stylesheet：指定使用下个交互样式表。上述三种样式的加入方式可以同时使用，也可以根据需要单一或成对地使用。如果各加入方式间相互冲突，则在HEAD元素间加入的样式的优先级高于外部链接的
10、CSS文件样式，字里行间加入的样式的优先级高于在HEAD元素间加入的样式（即当三种样式都作用于某一个内容元素，产生冲突时，那么这个元素只有优先满足3.1的样式后，才满足与3.2的不冲突样式，最后满足与3.3的不冲突样式）。这样一层一层地补充下去，就体现了“阶层性风格控制”。一方面集中统筹整个网站的网页风格，另一方面又可根据各个网页、各个段落的特殊需要，分别调配不同的风格。所以，这种控制方式又称为“阶层性”的风格控制。4 CSS设计WEB页的部分技巧4.1 CSS设计网页文字样式的技巧在CSS语法规则中可以分类定义文字的风格。例如： 设置字体你好！朋友，欢迎光临！Hello，everybody，welcome in !下面做一些简单的说明：（1）在CSS语法规则中这样定义了文字的风格，标签间的字符为“宋体”，“大小12pt”，字符是“倾斜”的，颜色“#ff0033”，字符背景色“#ffcccc”。同理，标签.之间的文字字体“arial”，大小“12pt”，颜色“#66ff66”。（2）上面的CSS格式里，h1和h2称为“选择对象”，font-size以及color等称为“属性”，属性后面的称为“参数”。（3）通过css可以控制任何HTML标签的风格。例如：，
