《网页设计与制作(CSS).docx》由会员分享,可在线阅读,更多相关《网页设计与制作(CSS).docx(8页珍藏版)》请在金锄头文库上搜索。
1、XXX大学专题小论文题目:网页设计与制作实践CSS院 别专 业电子商务年 级二年级学 生学 号指导教师二一四年四月CSS摘要:随着时代的发展,网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计,日益被网站建设者所注重。网页设计作为用户界面交互设计的延伸,实在新的媒体和新的技术支持实现一个全新的设计创作领域。设计创作网页与循环其特有的特点和结构思路,具备可实际行和外观时尚。本论文将对网页设计的开发语言开展研究和讨论。主要介绍CSS相关的知识。关键词:网页设计;CSS;模型;目录一。网页设计概述 3二、Css简介 3三、Css基础语法 3四、派生选择器 4五、id和类选择器 4六、Cs
2、s框架型结构 5七、定为基础和相对绝对定位 5参考文献 7 一。网页设计概述网页是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台,离开网站(或者只是利用第三方网站)去谈电子商务是不可能的。企业的网址被称为“网络商标”,也是企业无形资产的组成部分,而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。二、Css简介随着Internet的迅猛发展,HTML被广泛应用,上网的人们当然希望网页做得漂亮些,因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题,人们也走了不少弯路,用了一些不好的方法,比如给HTML增加很多的属性结果将代码变
3、得很臃肿,将文本变成图片,过多利用Table来排版,用空白的图片表示白色的空间等。直到CSS出现。CSS可算是网页设计的一个突破,它解决了网页界面排版的难题。可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout)。CSS的英文是CascadingStyleSheets,中文可以翻译成串联式样式表。CSS按其位置可以分成三种:1)内嵌样式(InlineStyle)2)内部样式表(InternalStyleSheet)3)外部样式表(ExternalStyleSheet)三、Css基础语法CSS语法由三部分构成:选择器、属性和值:sel
4、ectorproperty:value选择器(selector)通常是你希望定义的HTML元素或标签,属性(property)是你希望改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration):bodycolor:blue上面这行代码的作用是将body元素内的文字颜色定义为蓝色。在上述例子中,body是选择器,而包括在花括号内的的部分是声明。声明依次由两部分构成:属性和值,color为属性,blue为值。示列:H1.mylayoutborder-width:1;border:solid;text-align:center;c
5、olor:red这个标题使用了Style。这个标题没有使用Style。四、派生选择器通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。在CSS1中,通过这种方式来应用规则的选择器被称为上下文选择器(contextualselectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在CSS2中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使HTML代码变得更加整洁。五、id和类选择器id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以#来
6、定义。下面的两个id选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:#red color:red; #greencolor:green;下面的HTML代码中id属性为red的P元素显示为红色,二id属性为green的P元素显示为绿色。#sidebarpfont-style:italic;text-align:right;margin-top:0.5em;#sidebarh2font-size:1em;font-weight:normal;font-style:italic;margin:0;line-height:1.5;text-align:right;六、Css框架型结
7、构CSS框模型(BoxModel)规定了元素框处理元素内容、内边距、边框和外边距的方式。元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:在CSS中,width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加
8、元素框的总尺寸。假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素,就需要将内容的宽度设置为70像素七、定为基础和相对绝对定位CSS为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对CSS2中定位的支持远胜于对其它方面的支持,对此不应感到奇怪。另一方面,CSS1中首次提出了浮动,它以N
9、etscape在Web发展初期增加的一个功能为基础。浮动不完全是定位,不过,它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。CSS有三种基本的定位机制:普通流、浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在X(HTML)中的位置决定。块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(LineBox),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以
10、增加这个框的高度。在下面的章节,我们会为您详细讲解相对定位、绝对定位和浮动。CSS相对定位相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。如果将top设置为20px,那么框将在原位置顶部下面20像素的地方。如果left设置为30像素,那么会在元素左边创建30像素的空间,也就是将元素向右移动。CSS绝对定位绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样。参考文献1、网页制作人民邮电出版社,2001年10月张长富李匀著,2、信息技术江苏科学技术出版社,2001年1乔春源,樊天岳等。3、网页设计与Web数据库发布技术清华大学出版社魏应彬著。