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 mode1. 引言网站变得越来越普及，对其开发技术和工具的要求也越来越高。目前，成熟的网页的新标准是W3C，模式是HTML +CSS + JavaScript。即HTML是网页的结构，CSS是网页的样式，JavaScript是行为。就是盖房子一样，先要把结构建出来，然后用CSS来装饰，JavaScript就像电影特效会让整个设计变得更加生动。网站作为一种信息传播的载体，除了有HTML所搭建的合理的架构以外，更多的需要CSS的点缀，以达到更广泛的传播信息的作用。2. 初始CSS2.1 概念CSS (Cascading Style Sheets，层叠样式表)是对网页元素外观进行精确控制的一组设置规则，于1996年正式推出。CSS是控制网页布局样式的基础，是能够使网页表现与内容分离的一种样式设计语言。在网页设计中，CSS主要用于定义HTML内容在浏览器内的显示样式，如 文字大小、颜色、字体加粗等；可对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。2.2 优势CSS作为一款目前最优秀的表现设计语言，其优势主要有：可以支持众多浏览器，实现了在众多平台及浏览器下对样式的表现最为接近；真实实现了表现与内容分离；拥有样式设计的强大控制力；具有优越的继承性，最大限度的达到了代码重用，从而降低了维护成本。2.3 角色所有HTML页面都是由“内容、结构、表现和行为”这几方面组成。即根据内容设计结构和表现，最后再对其进行“行为”的控制操作。如下图表1所示网页设计的整个系统架构： 内容层：是网页实际要传达的真正信息，包含数据、文档或者图片等。 结构层：是由文档的主体部分，再加上结构化标记组成。 表现层：是你赋予内容一种样式，就是文档看起来的样子。 行为：是对内容的交互及操作效果。其中，CSS作为一种表现而单独存在，它实现了表现与结构的分离。对于网页的修改，可以只对CSS的修改而带来网页样式的变化。3. CSS基本语法CSS样式由选择符和声明组成，而声明又由属性和值组成，如下图表2所示： 图表 1u 选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中的网页中的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。u 声明：在英文大括号“”中的就是声明，属性和值之间用英文冒号“:”分隔。当有多条声明时，中间可用英文分号“;”分隔，如下所示：pfont-size:12px;color:red;4. CSS三种基本样式CSS样式的代码插入有三种形式:内联式、嵌入式、外部式4.1 内联式把css代码直接写在现有的HTML标签中，如下代码：红色文本css样式代码要写在style=” ” 双引号中，如果有多条CSS样式代码设置可以写在一起，中间用分号隔开。如下代码：这里文字是红色。4.2 嵌入式将css样式代码写在样式代码标签之间。如下面代码实现把标签中的文字设置为红色：spancolor: red;4.3 外部式（外联式）把CSS代码写在一个单独的外部文件中，此css样式文件以“.css”为扩展名，在内）（不是在标签内）使用标签将CSS样式文件链接到HTML文件内，如下面代码：注意：a) css样式文件名称以有意义的英文字母命名，如 main.css。b) rel=stylesheet type=text/css 是固定写法不可修改。c) 标签位置一般写在标签之内。4.4 三种方法的优先级：在相同“权值“下：内联式嵌入式 外部式并且，嵌入式外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。5. CSS选择器所有HTML语言都是通过不同的CSS选择器进行控制的，通过它告诉CSS要给什么东西设置格式，用户只需要通过选择对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。每一条css样式声明（定义）由两部分组成，形式如下：选择器 样式;在之前的部分就是“选择器”，“选择器”指明了中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。常见的选择器有：标签选择器、类选择器、ID选择器、子选择器、后代选择器、通用选择器、伪类选择器、分组选择器。下面将详细介绍各类选择器。5.1 标签选择器标签选择器其实就是html代码中的标签。如、。例如下面代码：pfont-size:12px;line-height:1.6em;上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。5.2 类选择器类选择器在css样式编码中是最常用到的，其语法如下：.类选器名称css样式代码;注意：a) 英文圆点开头b) 其中类选器名称可以任意起名（但不要起中文）使用方法：第一步：使用合适的标签把要修饰的内容标记起来，如下：文本第二步：使用class=类选择器名称为标签设置一个类，如下：文本第三步：设置类选器css样式，如下：.stresscolor:red;/*类前面要加入一个英文圆点*/5.3 ID选择器ID选择器类似于类选择符，但也有一些重要的区别：i. 为标签设置id=ID名称，而不是class=类名称。ii. ID选择符的前面是井号（#）号，而不是英文圆点（.）。注：类和ID选择器的区别相同点：可以应用于任何元素不同点：1) ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。可以使用类选择器列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器5.4 子选择器子选择器，即大于符号(),用于选择指定标签元素的第一代子元素。如下例代码：.foodliborder:1px solid red;这行代码会使class名为food下的子元素li加入红色实线边框。5.5 包含（后代）选择器包含（后代）选择器即加入空格,用于选择指定标签元素下的后辈元素。如如下例代码：这行代码会使文字内容中的“胆小如鼠”字体颜色变为红色。注：后代选择器与子选择器的区别：总结：作用于元素的第一代后代，空格作用于元素的所有后代。5.6 通用选择器通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代将html中任意标签元素字体颜色全部设置为红色：* color:red;5.7 伪类选择符伪类选择符允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hovercolor:red;上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会给a标签中的文字加上鼠标滑过字体颜色变为红色特效。5.8 分组选择符当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为h1、span标签同时设置字体颜色为红色：h1,spancolor:red;6. 元素分类在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：、.、 、常用的内联元素有：、常用的内联块状元素有：、7. CSS布局7.1 盒模型盒子模型是CSS控制页面时一个很重要的概念，所有页面中的元素都可以看成是一个盒子，传统的表格排版是通过大小不一的表格和表格嵌套来排版网页内容的，现在有了CSS，就可以通过CSS定义大小不一的盒子和盒子嵌套来编排网页。盒模型的方式代码简洁，更新方便，能兼容更多的浏览器。7.2 css布局模型清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。在网页中，元素有三种布局模型：流动模型（Flow）、浮动模型 (Float)、层模型（Layer）A. 流动模型流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。B. 浮动模型块状元素在页面中独占一行，但如果想让两个块状元素并排显示，可通过设置元素浮动实现。任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、ptable、img 等元素都可以被定义为浮动。C. 层模型层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。层模型有三种形式：绝对定位(position: absolute)、相对定位(position: relative)、固定定位(position: fixed)a) 绝对定位如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。b) 相对定位如果想为元素设置层模型中的相对定位，需要设置position: relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。如下代码实现相对于以前位置向下移动50px，向右移动100px;c) 固定定位fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed属性功能相同。8. 结论CSS在Web设计领域是一个突破。CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。所以，希望通过本文对CSS样式主要属性和样式的介绍，对大家深入学习CSS有个很好的引导作用。9. 参 考 文 献1 温谦,主觯程.别具光芒CSS网页布局案例剖析M.北京:2梁静琳.DIV+CSS 布局技术在网页设计中的应用J.武汉工程职业技术学院学报， 2009， 21 （01 ） ；3毋建军.网页制作案例教程（HTML+CSS+ JavaScript）.清华大学出版社， 2011。9