Web网页设计和制作小论文_第1页
Web网页设计和制作小论文_第2页
Web网页设计和制作小论文_第3页
Web网页设计和制作小论文_第4页
Web网页设计和制作小论文_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、web网页设计和制作刘伟锋(天渖iv人学软件学院，天萍300330)(tianjin institute of software engineering, tianjin 300330)摘要：css全称为“层咎样式表(cascading style sheets)”，是一种为html m页内容设定统一 规则的样式表。本文主要介绍了 css的基本概念，css基本语法、样式表类型及应用方法、css选择 器、标签元索的分类、css布局模型等知识。关键词:css；概念；语法:样式表；选择器；标签类型；布局模概abstract : css full name is” cascading style sh

2、eets”，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 words css; concepts; sy

3、ntax; style sheet type; selector; tag type; layout mode1. 引言网站变得越来越普及，对w开发技术和丁具的要求也越来越高。h前，成熟的网页的 新标准是w3c,模式是html +css + javascript。即html是m页的结构，css是网页的 样式，javascript是行为。就是盖房子一样，先要把结构建出来，然/t：用css来装饰， javascript就像电影特效会ii:整个设计变得更加生动。网站作为一种信息传播的载体，除了 w html所搭建的合理的架构以外，更多的需要css的点缀，以达到更广泛的传播信息的 作川。2. 初始cs

4、s2.1 概念css （cascading style sheets,层叠样式表）是对网页元素外观进行精确控制的一组设置 规则，于1996年正式推岀。css是控制网贞布只样式的基础，是能够使网贝表现勾内容 分离的一种样式设计语言。在网页设计中，css主要用于定义html内容在浏览器内的显 示样式，如文字大小、颜色、字体加粗等；可对网页中元素位置的排版进行像素级精确控 制，支持儿乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。css不仅可 以静态地修饰网贝，还可以配合各种脚本语言动态地对网页各元素进行格式化。2.2 优势css作为一款n前最优秀的表现设计语言，其优势主要有：可以支持众多

5、浏览器，实 现了在众多平台及浏览器下对样式的表现最为接近；真实实现了表现与内界分离；拥有样 式设计的强大控制力；具有优越的继承性，最大限度的达到了代码重用，从而降低了维护 成木。2.3 角色所有html页面都足由“内各、结构、表现和行为”这儿方面组成。即根据内祚设计 结构和表现，最后再对其进行“行为”的控制操作。如下图表1所示网页设计的整个系统 架构：> 内容层：足网页实际要传达的真正倌息，包含数裾、文捫或者i冬i片等。> 结构层：是由文档的主体部分，再加上结构化标记组成。> 表现层：是你赋予内容一种样式，就是文椚看起來的样子。> 行为：是对内容的交互及操作效果。其中，

6、css作为-种表现而单独存在，它实现了表现与结构的分离。对于网页的修改， 可以只对css的修改而带來网页样式的变化。3. css基本语法css样式由选择符和声明组成，而声明乂由属性和值组成，如下图农2所示:选择符：又称选择器，指明m页屮要应用样式规则的元素，如木例屮的网页 中的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。声明：在英文人括号“”中的就是声明，属性和值之叫用英文冒号“:”分 隔。当有多条声明吋，中间可用英文分号“;”分隔，如下所示：p font-size: 12px;color:red;4. css三种基本样式css样式的代码插入奋三种形式:内联式、嵌入式、外部式

7、4.1内联式把css代码直接写在现有的html标签中，如下代码:<p style="color:redm>红色文本 </p>css样式代码要每岳style=”双引号屮，如果卉多条css样式代码设置可以写在一起， 中间用分号隔开。如卜代码：<p style="color:red;font-size:12px"这里文字是红色。</p>4.2嵌入式将 css 样式代码写在1（181716 type=”text/css”样式代码/style/head标签2 间。 如下面代码实现把span：标签中的文字设置为红色：style typ

8、e="text/css"spancolor:red;/style4.3外部式（外联式）把css代码写在一个单独的外部文件中，此css样式文件以“.css”为扩展名，在 head内）（不是在31脚标签内）使用link标签将css样式文件链接到html文件 內，如下面代码：link href= ”样式文件名.css" rel="stylesheet" type="text/css" /注意:a）css样式文件名称以有意义的奥文字母命名，如main.cssob）rcl="stylcshcctn type="te

9、xt/css"是固定写法不可修改。c）linkfe签位置一般写在head标签之内。4.4三种方法的优先级：在相同“权值“下：內联式 嵌入式外部式并且，嵌入式外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。5. css选择器所冇html语言都是通过不同的css选择器进行控制的，通过它告诉css要给什么 东w设置格式，川户只需要通过选择对不同的html标签进行控制，并赋予各种样式声明， 即吋实现各种效果。每一条css样式声明（定义）由两部分组成，形式如下：选择器样式;在之前的部分就是“选择器”，“选择器”指明了中的“样況的作用对象，也就足“样 式”作用于网页中的哪些元索。常见

10、的选择器冇：标签选择器、类选择器、id选择器、了 选择器、后代选择器、通用选择器、伪类选择器、分组选择器。下面将详细介绍各类选择 器。5.1标签选择器标签选择器其实就足html代码巾的标签。ilkhtml、body、hl、p、img。 例如下面代码：p font-size: 12px;line-height:l .6em;上而的css样式代码的作用：为p标签没置12px字号，行间距设置1.6em的样式。 5.2类选择器类选择器在css样式编码中是最常用到的，其语法如下：.类选器名称css样式代码;注意:a）英点、开头；b）其中类i器名称可以任意起名（但不要起中文）使川方法：第一步：使用合适的标

11、签把要修饰的a容标记起来，如卜span文 /span第三少：使用class=”类选择器名称"为标签设置一个类，如下：span class=” stress ”文木/span第h步：设置类选器css样式，如下：.stress coloured;/*类前面要加入一个英文圆点*/5.3 id选择器id选择器类似于类选择符，但也有一些秉要的区别：i. 为标签设置id=id名称' 而不是class=n类名称n。ii. id选择符的前面是井号（#）号，而不是英文岡点（.）。注：类和id选择器的区别相同点：可以应用于任何元素 不同点：1） id选择器只能在文档中使用一次。与类选择器不|uj

12、,在一个html文档 屮，id选择器只能使用一次，而且仅一次。而类选择器可以使用多次。可以使用类选择器列表方法为一个元素同吋设置多个样式。我们可以为一个元素同吋 设多个样式，但只可以用类选择器的方法实现，id选择器5.4子选择器子选择器，即人于符号（），用于选择指定标签元素的第一代子元素。如下例代码：.foodliborder: 1 px solid red;）这行代码会使class名为food卜的子元素li加入红色实线边桐。5.5包含（后代）选择器乜含（后代）选择器即加入空格，川于选择措定标签元素下的后辈元素。如如下例代码:<!doctype html<html><h

13、ead><meta http-equiv=r,content-typem content=r,text/html; charset=utf-8m> <title>子选择符<八:16><style type=mtext/cssm>.food>liborder:lpx solid red;/*添加边棍样式（粗细为lpx，颜色为红色的实 线”/.first>spanborder:lpx solid red;</style></head><body><p class="first”&g

14、t;三年级时，<span>我还是一个<span>胆小如鼠/span的小女孩 </span>,上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直 没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p><hl> 食物 </hl><ul class="fooct><li>水果 <ul><li> 香蕉 </li><li> 苹果 </li>|<li>梨</li></ul>&

15、lt;/li></ul></body></html>这行代码会使文字内容中的“胆小如鼠”字体颜色变为红色。注：后代选择器与子选择器的区别：总结： 作用于元素的第一代盾代，空格作用于元素的所冇活代。5.6通用选择器通用选择器是功能敁强大的选择器，它使用一个（*）兮指定，它的作用是匹配hnnl 屮所奋鉍签元素，如卜'使川k面代将html屮任意鉍签元素字体颜色全部没s为红色：* coloured;5.7伪类选择符伪类选择符允许给html不存在的韧签（fa;签的某利|状态）设s样式，比如说我们给 html巾一个标签元素的鼠标滑过的状态來设置字体颜色：a

16、:hover colorred;.卜.iflf一行代码就是为a标签鼠标滑过的状态设置字体颜色变红。这样就会给a标签中 的文字加上鼠标猾过字体颜色变为红色特效。5.8分组选择符当你想为htmhp多个标签元素设置同一个样式时，可以使川分组选择符（，），如t 代码为hl、span标签|uj时设置字体颜色为红色：hl，spancolor:red;6. 元素分类在css屮，html中的标签元素人体被分为三种不同的类型：块状元素、内联元素（乂 叫行a元素）和内联块状元素。常用的块状元素有：div、p、hl.“h6、ol、ul、dl、table、address、blockquote、form常用的内联元素有

17、：a、span、br、i、em、strong、label、q、var、cite、code 常用的内联块状元素有：img、input7. css布局7.1 盒模型盒了模型是css控制页側时一个很重要的概念，所冇页中的元素都讨以看成是一个 盒子，传统的表格排版足通过人小不-的表格和表格嵌套来排版网页内界的，现在仓了 css，就讨以通过css定义大小不一的盒了和盒了嵌套来编排网页。盒模型的方式代码简 洁，更新方便，能兼界更多的浏览器。7.2 css布局模型清楚了 css盒模型的基木概念、盒模型类型，我们就可以深入探讨网页布局的基木模 型了。介局模型与盒模型一样都是css最基本、最核心的概念。但介局模

18、型是建立在盒模 型基础之上，又不同于我们常说的css布局样式或css布局模板。如果说布局模型是木， 那么css布问模板就是末了，是外在的表现形式。在网页中，元素有三种布局模型：流 动模型（flow）、浮动模型（float）、层模型（layer）a. 流动模型流动（flow）足默认的m页布局模式。也就是说网页在默认状态k的html网页元素 都是根据流动模型来分布网页内容的。流动布局模型具冇2个比较典型的特征:第一点，块状元素都会在所处的包含元素a自上而下按顺序垂直延伸分介，因为在默 认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占裾位置。如 右侧代码编辑器中三个块状元素标签

19、(div, hi, p)宽度显示为100%。第二点，在流动模型k,内联元素都会在所处的包含元素内从左到右水t分布显示。b. 浮动模型块状元素在页wf中独占一行，但如果想让两个块状元素并排显示，可通过设置元素浮 动实现。任何元素在默认情况下是不能浮动的，伹可以用css定义为浮动，如div、 ptable、img等元素都可以被定义为浮动。c. 层模型层介局模型就像是阉像软件photoshop巾非常流行的阁层编辑功能一样，毎个阁层能 够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但 是在网页上局部使用层布局还是有其方便之处的。如何让html元素在网贝中精确定位，就像阁像

20、软件photoshop中的阁层一样nj以对 每个图层能够精确定位操作。css定义丫一组定位(positioning)属性来支持层布局模型。层模型有三种形式:绝对定位(position: absolute)、相对定位(position: relative)、固定定 位(position: fixed)a)绝对定位如果想为元素设置层模型屮的绝对定位，需要设置positiomabsokite(表示绝对定位)， 这条语句的作用将元素从文&流中拖山来，然£；使用left、right、top、bottom属性相对p 其最接近的-个具柯定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相 对于body元素，即相对于浏览器窗u。如k而代码町以实现div元素相对于浏览器窗口句右移动loopx,向k移动50px。b)相对定位如

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论