解析CSS在网页中的应用

开篇：润墨网以专业的文秘视角，为您筛选了一篇解析CSS在网页中的应用范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘要:随着网络信息化技术的发展,网页制作也得到蓬勃的发展。制作网页我们都知道它离不开HTML、css和Javascript,它们之间是缺一不可。HTML是基础架构它是用来显示网页的内容;CSS是用来渲染网页和美化页面;Javascript是负责实现网页的动态性和交互性。然而在实际制作网页中使用传统的HTML来实现网页美工的设计是十分麻烦的,此时我们就用到了CSS。从这里我们也看到CSS在网页制作中扮演着很重要的角色,它不仅可以使网页进行美化还可以对代码实现瘦身,增强代码的可读性。本文主要介绍CSS的概念、CSS的优点和CSS控制页面的方法。

关键词:网页 HTML CSS

1、序言

如今网站设计师都应用Web标准来设计和建立网站,而CSS是当前web标准中的常用术语之一。使用CSS样式可以非常灵活并更好地控制确切的网页外观,从精确的布局定位到特定的字体和样式,更重要得是它的网页布局方法可以使外观和行为结构分离,使得站点的访问和维护更加容易。因此有必要了解如何在网页中应用CSS来建立一个符合标准的网页。

2、CSS的认识

2.1 CSS的概念

CSS（cascading style sheet）是一种样式表（stylesheet）技术,它是控制网页内容和外观的一种标记性语言,它不需要编译,直接由浏览器解释执行。我们也把它称为层叠样式表。CSS是1996年有W3C审核通过的,并且推荐使用。CSS的使用使得HTML能更好的适应页面的美工设计和网页布局。

2.2 CSS的优势

随着网页技术的发展,在没有引进CSS样式表技术以前,传统的HTML为了实现页面的美化和布局显得越来越麻烦,其中也暴露出HTML的维护困难、标记不足、页面过于臃肿和定位困难的缺陷。随着CSS的引入,CSS基本解决了关于HTML的缺陷,并且充分的体现了CSS的优势,其优势如下:(1)提高页面浏览的速度,其中对于一些用图片实现的功能,可以使用CSS实现,从而减少了带宽的成本,使浏览速度提高。(2)结构清晰,可以统一一个或者多个网页的风格。(3)支持所有的浏览器,更方便搜索引擎的搜索,并且可能给一个较好的评价。(4)强大的字体控制和排版能力,利用CSS属性可以设置字体、颜色、背景图片等页面格式,有利于页面的排版。(5)表现和内容相分离,将网页中对于页面排版和布局从设计中剥离出来形成一个独立的文件,有利于后期的维护和改版并且减少了网页的无效性。

2.3 CSS样式使用

CSS和HTML都是标记性语言,它们也都是纯文本文件。因此我们可以使用记事本和UltraEdit来进行编辑,当然现在网上有很多的关于CSS的编辑器也可以使用,不过通过我制作网页的经验,这里推荐Dreamweaver的代码模式。在Dreamweaver这款软件提供了很好的语法着色和语法提示功能。

2.4 CSS的样式规则

CSS它是由两部分组成的:选择符和样式表定义。其中选择符是指样式的名称,样式定义是用来定义样式的属性和属性值。例如:

h2{

color:#0000FF;font-size:20px;

}

其中h2是选择符;color和font-size是属性;#0000FF和20px是分别对应属性的属性值。其中属性和属性值需要用冒号隔开,如果样式表定义中间有多个定义要用分号隔开。

3、CSS的样式类型

CSS可以灵活的应用到网页页面中并且能很好的控制页面,我们必须熟悉关于CSS的样式类型,一般情况我们把它分为四种:行间样式表、内部样式表、链入外部样式表和导入样式表。

3.1 行间样式表

行间样式是CSS编码中最直接的一种类型,它直接放置在HTML标记中的var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model03'; WebPageSpeed =453; UrchinTrack();中并且使用了Style属性,例如:

标题

CSS标记var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model03'; WebPageSpeed =453; UrchinTrack();

行间样式表虽然使用起来很直接简单,但是我们在实际应用时不提倡使用行间样式表,因为如果我们在页面中使用了行间样式表我们会发现在每一个标记中就会使用一次Style属性,这就使得页面的内容过胖,后期维护非常的麻烦,也是使得内容过于凌乱,并且它也不符合CSS的内容与表现分离的原则。

3.2 内部样式表

内部样式表与行间样式表有一定的相似之处,它也是编写在页面中,所不同的是它是将CSS写在之中,并且以开始结束。例如:

内部样式表

p{

color:#FF0000;

font-size:25px;

font-weight:bold;

}

-->

CSS标记效果是红色、25像素、加粗

var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model03'; WebPageSpeed =453; UrchinTrack();

根据上述代码我们可以看到内部样式表把所有的CSS代码集中到了一个区域,而且使得页面的var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model03'; WebPageSpeed =453; UrchinTrack();中减少了很多重复的代码,并且可以感觉到内部样式表的利用率要比行间样式表的利用率要高。当然它也有它的缺点:内部样式表只对当前页面有效,不能够跨页面执行,增加了后期维护的成本。所以我们在制作大型网站时,不提倡使用内部样式表。