基于css层叠样式表的webweb设计

基于css层叠样式表的webweb设计

web设计理念自20世纪90年代以来，1895年的le确立了web语言。web标准从1.0扩展到4.0。随着网络技术的发展，web语言的有限域也得到了显示，例如，web结构非常简单，数据和性能非常混合。Web设计者不再满足简单的设计实现美观的网页,他们提出的新的需求,在Web设计中采用Web标准建站,这样建站的优点是:代码简洁,提高网页访问速度;网站改版简单,因为结构、表现和行为分离,只需修改CSS文件可实现所有页面的改变。CSS层叠样式表单(CascadingStyleSheet)是将样式信息与网页内容分离的一种标记性语言。Web设计中对于网页样式的控制是通过CSS层叠样式表来实现的,CSS就是设置网页上HTML元素属性的语言。下面就从页面背景、网站导航超级链接和页面布局3个方面研究CSS在Web设计中的应用。1网络风格的应用1.1网页文件的创建在Web设计的过程中,我们要重视色彩的应用,首先映入眼帘的是网站的色彩,因此,在页面中控制背景通常是网站设计时一个很重要的步骤。CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。纯色背景用到背景颜色background-color属性,相关的属性值是RGB颜色分量、十六进制颜色值和颜色英文关键词。此属性不仅可以设置页面的背景颜色,几乎所有的HTML元素的背景色都可以通过它来设定,这样可以设定不同的HTML元素的各种背景色来实现页面分块。我们在网页代码中看到语句“background-color:#0000FF”,指的是把网页背景色设置为蓝色。背景图像的创建用到背景图片background-image属性,相关的属性值url()。在Web设计中,图片一般存放在文件夹images里,因此,如在网页中看到语句background:url(images/bg.gif),此句中的url为相对路径,指使用的背景图片为bg.gif,存放在images文件夹中。在网页中,我们经常会看到一种渐变背景,用Dreamweaver结合着Photoshop软件可以自行创建渐变背景,然后使用CSS来针对渐变背景图片进行设置,实现步骤如下:首先运用Photoshop软件创建一个图片文件,将前景色设置为5CACFE,背景色设置FFFFFF;使用“渐变工具”,自上而下拉,填充图片文件。其次,使用“单列选择”工具选择1像素宽、700像素高的页面,另存为bg.gif格式,再次,页面文件的制作。创建一个网页文件,设置其页面内嵌样式表的声明。在CSS中添加body属性,对图片设定水平方向重复显示。在属性中添加与图片底部颜色一致的页面背景色。1.2超链接技术的实现在网站中,所有的页面通过超级链接而形成一个有机的整体。因此,在Web设计中对超级链接的控制是CSS的一个重要的应用,而实现超链接技术的关键在于a链接对象的样式控制,CSS链接样式如下:a:link指未被访问过的链接;a:active指正在点击的链接;a:hover是鼠标悬停时的样式;a:visited是链接地址被访问过时的样式。通过CSS来设置超链接有无下划线、超链接文字颜色等样式。1.2.1鼠标文化修改加下划线默认的超级链接会有下划线,这样会影响美观,可以对网页所有超级链接设为无下划线,当鼠标经过时改变文字颜色并加下划线,核心代码为:a{color:#333;text-decoration:none;}a:hover{color:#333;text-decoration:underline;}1.2.2像样式的设计原理用小图形取代文字作为链接按钮,可以使网页更为美观。可使用background属性给超级链接添加背景图片,并可实现超级链接翻转效果,带背景图像样式的设计核心是:准备两张相同大小但不同效果的背景图片,一张图片用在a标签上,即是超级链接的背景;另一张图片应用在hover伪类上,当鼠标滑过超级链接时,背景图片更换为应用在hover伪类上的背景图片,核心代码如下:a{background:url(../images/img1.jpg)?repeat-x;}a:hover{background:url(../images/img2.jpg)repeat-x;}1.2.3boear-清水色按钮立体样式的设计核心:一是利用边框线的颜色变化来制造视觉错觉,把右边框和底部边框结合,把顶部边框和左边框结合,利用颜色的深浅变化来模拟一种凸凹变化的过程;二是利用超链接背景的变化来实现立体效果,超链接背景可设置相对深色效果,当鼠标移过时,再定义浅色,核心代码如下:a:link,a:visited{……background-color:#efd6d9;border-top:1pxsolid#e3dfdf;/*边框实现阴影效果/border-left:1pxsolid#e3dfdf;border-bottom:1pxsolid#676565;border-right:1pxsolid#676565;}a:hover{……background-color:#e7c4ca;/*改变背景色/border-top:1pxsolid#676565;/*边框变换实现凸凹效果/border-left:1pxsolid#676565;border-bottom:1pxsolid#e3dfdf;border-right:1pxsolid#e3dfdf;}1.3页面结构的实现2005年之前Web设计主要是使用表格布局页面,但是随着网页制作技术的发展,表格布局页面存在着代码冗余、后台代码多、网速慢等问题,因此,出现了流行的页面布局方式DIV+CSS技术,DIV+CSS布局是利用Div对象把页面划分为几个区域,区域中标记了将要显示的信息,而这些信息的样式表现则由CSS来实现。如图1所示,页面使用<div>标记把网页分成头部(#header),内容部分(#main)和底部(#footer)3个块,内容部分分成左侧(#left)和右侧(#right),这是页面的布局结构;CSS样式可对这些块进行定位、添加样式;然后对每个块内添加相应的内容,如文字、图片等;因CSS样式与HTML文件内容分离,并且HTML文件调用CSS文件,如果要改变HTML文件中的内容,只需要更改CSS样式文件,这样使网站的维护和更新变得更方便。图1中的结构设计代码如下:页面整体布局的大区块划分DIV用ID标识,ID要求命名唯一;整体布局中大区块下的小块,样式放到类样式中,然后使用class应用该样式。2使用网络时，应注意以下几点2.1背景重复的同化学法书写CSS代码时,采用样式的简写形式,方便修改与维护。常见的背景(background)、边界(margin)、填充(padding)、边框(border)常需要进行缩写,背景的CSS缩写形式为:background(背景):背景附件、背景颜色、背景图像、背景位置、背景重复。用缩写性质来代替,可将代码简写为:.search{background:#3c3b3burl(images/icon.gif)no-repeat50%50%}对于边界(margin)、填充(padding)缩写时属性的次序是从顶部开始的,围绕盒子按顺时针次序继续。margin:顶部边界、右侧边界、底部边界、左侧边界padding:顶部填充、右侧填充、底部填充、左侧填充border:边框宽度、边框风格、边框颜色.submain{margin-top:50px;margin-right:30px;margin-bottom:22px;margin-left:30px;padding-top:3px;padding-right:6px;padding-bottom:5px;padding-left:9px;border-width:1px;border-style:solid;border-color:#000;}用缩写性质,可将代码缩写为:2.2产品目录两种方式当遇到属性和值相同的选择符,如“#”和“.”,可以用逗号进行分隔,如“#logo,#head{float:left:},.contact_tel,.contact_mobile{margin-right:8px;padding-left:20px;}这样只需要书写一次或者更改一次即可实现,这样做减少了CSS代码量,同时也改善了CSS的代码结构。考虑到不同浏览器对CSS支持的程度不同,可以通过通配符定义将所有元素的填充、边框