Web网页设计和制作小论文.docx

Web网页设计和制作刘伟锋（天津市大学软件学院，天津 300330）(Tianjin Institute of Software Engineering, Tianjin 300330) 摘 要 :CSS全称为“层叠样式表 (Cascading Style Sheets)”，是一种为HTML网页内容设定统一规则的样式表。本文主要介绍了CSS的基本概念，CSS基本语法、样式表类型及其应用方法、CSS选择器、标签元素的分类、CSS布局模型等知识。关键词：CSS；概念；语法；样式表；选择器；标签类型；布局模型Abstract : CSS full name is” Cascading Style Sheets”, it is a kind of HTML page content set unified rules of the style sheets. This paper mainly introduces the basic concepts of CSS,CSS basic syntax, style sheet type and its application method, CSS selector, tag element classification, CSS layout mode and other knowledge.Key wordsCSS; Concepts; Syntax; Style Sheet Type; Selector; Tag Type; Layout mode引言网站变得越来越普及，对其开发技术和工具的要求也越来越高。目前，成熟的网页的新标准是W3C，模式是HTML +CSS + JavaScript。即HTML是网页的结构，CSS是网页的样式，JavaScript是行为。就是盖房子一样，先要把结构建出来，然后用CSS来装饰，JavaScript就像电影特效会让整个设计变得更加生动。网站作为一种信息传播的载体，除了有HTML所搭建的合理的架构以外，更多的需要CSS的点缀，以达到更广泛的传播信息的作用。初始CSS概念CSS (Cascading Style Sheets，层叠样式表)是对网页元素外观进行精确控制的一组设置规则，于1996年正式推出。CSS是控制网页布局样式的基础，是能够使网页表现与内容分离的一种样式设计语言。在网页设计中，CSS主要用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等；可对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。优势CSS作为一款目前最优秀的表现设计语言，其优势主要有：可以支持众多浏览器，实现了在众多平台及浏览器下对样式的表现最为接近；真实实现了表现与内容分离；拥有样式设计的强大控制力；具有优越的继承性，最大限度的达到了代码重用，从而降低了维护成本。角色所有HTML页面都是由“内容、结构、表现和行为”这几方面组成。即根据内容设计结构和表现，最后再对其进行“行为”的控制操作。如下图表1所示网页设计的整个系统架构：内容层：是网页实际要传达的真正信息，包含数据、文档或者图片等。结构层：是由文档的主体部分，再加上结构化标记组成。表现层：是你赋予内容一种样式，就是文档看起来的样子。行为：是对内容的交互及操作效果。其中，CSS作为一种表现而单独存在，它实现了表现与结构的分离。对于网页的修改，可以只对CSS的修改而带来网页样式的变化。CSS基本语法CSS样式由选择符和声明组成，而声明又由属性和值组成，如下图表2所示：图表2选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中的网页中的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。声明：在英文大括号“{}”中的就是声明，属性和值之间用英文冒号“:”分隔。当有多条声明时，中间可用英文分号“;”分隔，如下所示：p{font-size:12px;color:red;}CSS三种基本样式CSS样式的代码插入有三种形式:内联式、嵌入式、外部式内联式把css代码直接写在现有的HTML标签中，如下代码：p style=color:red红色文本/pcss样式代码要写在style=” ” 双引号中，如果有多条CSS样式代码设置可以写在一起，中间用分号隔开。如下代码：p style=color:red;font-size:12px这里文字是红色。/p嵌入式将css样式代码写在headstyle type=”text/css”样式代码/style/head标签之间。如下面代码实现把span标签中的文字设置为红色：style type=text/cssspan{