CSS让网页更容易设计与维护

CSS语法立意让网页内容与视觉呈现分离,一方面使得页面维护工作更容易,不会因内容或视觉效果改变影响到另一方,这样的页面设计,也对搜寻引擎更为友善,更容易搜寻到页面内容。

CSS,Cascading Style Sheets

串接样式表,网页外观的控制语法

World Wide Web最早是以文件的概念组成,希望透过网页与超链接,让文件与知识更容易连接援引。从HTML语法大量使用文件概念的标签(例如代表标题的<H1>,代表段落的<P>),就不难看出WWW的这个特质。

然而WWW比起早期其它网络媒介更迷人的地方,在于它能直接在页面嵌入并呈现图片,这个改变让WWW发展迅速,也让页面视觉装饰大为盛行。但网页先天的文件性格,让图像排版设计难以施展手脚,于是像利用巢状表格与图像拼组而成的页面开始盛行,以求达到精准元素定位与更精美的视觉效果。这个潘多拉盒子一开,造成了许多失控的乱象,让页面原始码难以阅读与维护。

为了提高网页在视觉上可以有更多元的表现,W3C在1996年推出CSS第一版,提供解决之道。不过由于CSS有赖于浏览器的支持,因此长久以来CSS的推展情况一直不佳,一直到IE 6、Firefox等主流浏览器支持CSS,才渐渐改善。

CSS语法立意让网页内容与视觉呈现分离,一方面使得页面维护工作更容易,不会因内容或视觉效果改变影响到另一方,这样的页面设计,也对搜寻引擎更为友善,更容易搜寻到页面内容。其次,CSS也可以增加页面在不同媒介的呈现效果。同一份页面,可依据用途不同,例如在屏幕显示或打印,而自动切换不同的CSS语法,让呈现最佳化。也由于读取页面的媒介越来越多元(如手机、PDA),CSS可以弹性调整呈现方式,都更加彰显CSS在网页上的优势。

Selector

选取器

要透过CSS为HTML的元素套用样式效果,首先须指向特定元素,像是标题、段落或超链接等,而这个指定的方法,就称为选取器。

最基本的选取器,是指定HTML卷标元素的名称,另外还有ID选取器、类别选取器、虚拟类别、子系、旁系等,不过这些CSS的选取方法,每种浏览器的支持不一,像IE 6就不支援子系或旁系的选取器。

Divist

滥用DIV标签的设计人员

事实上,善用CSS串接与继承的特性,就能创造出精准、丰富的视觉效果。但是并非仅靠CSS,滥用语法的情况就能改善。

过去盛行巢状表格排版,导致Web原始码难以阅读与维护。不过CSS设计人员如不善用串接与继承,而以大量DIV区块语法作页面排版,将使页面原始码充斥DIV标签,这往往和使用巢状表格一样,难以阅读,这种设计人员便称为「Divist」。CSS并非万灵丹,须靠设计人员正确运用,才能达到效果。

Quirk Mode

怪癖模式

浏览器改版时,通常都会加强对网页标准语法的支持,不过这也意味着,依照过去浏览器特性写出来的页面,在呈现上会有问题,为了保持向前兼容,浏览器通常会设计标准模式与「怪癖」模式,确保一些旧网站能用较宽松、容错率较高的语法解译方式呈现。

浏览器会依网页宣告的DOCTYPE与DTD,决定页面呈现将依照标准模式或怪癖模式。

Cascade Rule

串接规则

CSS具备串接的规则和明确度,用来处理样式冲突的情况。串接规则会依重要性排序,决定采用哪一种样式。

在串接规则中,重要性最高的是标示有「!import」的使用者样式,其次是同样标有「!import」的作者样式表。

在没有标「!import」时,作者样式表的重要性高于使用者。透过重要性规定,浏览器就能决定呈现哪一种样式,而如果重要性一致时,则后出的规则会覆写较早的规则。

时间: 2024-10-04 06:47:29

CSS让网页更容易设计与维护的相关文章

《网站设计 开发 维护 推广 从入门到精通》—— 第1章 网页设计基础

第1章 网页设计基础 网站设计 开发 维护 推广 从入门到精通 利用Dreamweaver CC中的可视化编辑功能,可以快速创建网页而不需要编写任何代码,这对于网页制作者来说,工作变得很轻松.文本是网页中最基本和最常用的内容,是网页信息传播的重要载体.学会在网页中使用文本和设置文本格式对于网页设计人员来说是至关重要的. 学习目标 网页设计的相关术语 网页美工常用工具 网页版面布局设计 常见的版面布局形式 文字与图像版式设计

技巧总结:CSS提高网页的维护更新效率

css|技巧|网页 随着互联网经济的不断发展,互联网上的专业网站.公众服务网站以及企业门户的数量都在飞速的增长,各网站的信息量也呈爆炸性增长的趋势.面对这些庞大的信息量,我们对网页中每一个栏目的增删,都会是一个很复杂的过程.为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变几百个网页的外观,而其个性化的表现未受任何损失.为了能充分用好样式表的强大性和灵活性,笔者就怎样有效使用样式表,来谈谈自己的一些心得体会. 1.在一个网页中同时调用CSS的多种引入方式 在HT

设计一个基于CSS的网页模板

css|模板|设计|网页 这是一个教你如何一步一步学习建立基于CSS制作网站的开始,这个教程将由几个部分组成.第一部分是讲述如何在photoshop中制作导航按扭的:第二部分将讲述背景的制作,再下一个是讲述标题(header)和页面的设计规划的,在最后是CSS和XHTML的应用的执行.现在也许有些人想知道为什么在我的教程里要以导航按扭的制作来开始,呵呵,其实我最初的目的是要讲述一段关于这些简单按扭的制作方法的小教程的,但是即然这个想法开始了,为什么不做一个全面的讲解呢!建立一个像玻璃面一样的导航

网页设计中如何让CSS控制网页背景?

css|控制|设计|网页|网页背景|网页设计 在符合标准的网页设计中如何用CSS控制网页的背景呢?包括背景的颜色,背景的图片等一些问题,在本教程中一次给你讲清楚. ·背景颜色 background-color 我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的.这个的默认值是transparent(透明色). 例:body{background-color:yellow}H1{background-color:#000000} ·背景图片 backgr

网页设计经验分享;没有CSS时网页的可看性

文章简介:网页设计经验分享;没有CSS时网页的可看性. 先上示例,首页酒店模块的效果图如下: 代码结构如下: <dl>< dt>酒店</dt>< dd>北京</dd>< dd>上海</dd>< /dl>< ul>< li>北京酒店列表</li>< li>北京酒店列表</li>< li>上海酒店列表</li>< li>

网页设计:用网页技术CSS实现网页背景渐变

css|渐变|设计|网页|网页背景|网页设计 用网页技术CSS实现网页背景渐变的四种代码设置. 一.从上往下渐变 body{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);} 二.从左上至右下渐变 body{FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50

《网站设计 开发 维护 推广 从入门到精通》—— 1.1 网页设计的相关术语

1.1 网页设计的相关术语 在具体学习网页设计与制作前,需要了解什么是静态网页和动态网页,动态网页是怎么交互的,为以后的学习打好基础. 1.1.1 什么静态网页 在网站设计中,纯粹HTML格式的网页通常称为"静态网页",早期的网站一般都是由静态网页制作的,静态网页是以.htm..html..shtml和.xml等为后缀.在HTML格式的网页上,也可以出现各种动态的效果,如GIF格式动画.Flash滚动字幕等.这些"动态效果"只是视觉上的,与下面将要介绍的动态网页不同

《网站设计 开发 维护 推广 从入门到精通》—— 1.3 网页版面布局设计

1.3 网页版面布局设计 网页设计要讲究编排和布局,虽然网页设计不同于平面设计,但它们有许多相近之处,应加以利用和借鉴.为了达到最佳的视觉表现效果,应讲究整体布局的合理性,使浏览者有一个流畅的视觉体验. 1.3.1 网页版面布局原则 网页在设计上与平面设计有许多共同之处,如报纸等,因此也要遵循一些设计的基本原则.熟悉一些设计原则,再对网页的特殊性作一些考虑,便不难设计出美观大方的页面来.网页页面设计有以下基本原则,熟悉这些原则将对页面的设计有所帮助. 1.主次分明,中心突出 在一个页面上,必须考

《网站设计 开发 维护 推广 从入门到精通》——1.3 网页版面布局设计

1.3 网页版面布局设计 网页设计要讲究编排和布局,虽然网页设计不同于平面设计,但它们有许多相近之处,应加以利用和借鉴.为了达到最佳的视觉表现效果,应讲究整体布局的合理性,使浏览者有一个流畅的视觉体验. 1.3.1 网页版面布局原则网页在设计上与平面设计有许多共同之处,如报纸等,因此也要遵循一些设计的基本原则.熟悉一些设计原则,再对网页的特殊性作一些考虑,便不难设计出美观大方的页面来.网页页面设计有以下基本原则,熟悉这些原则将对页面的设计有所帮助. 1.主次分明,中心突出在一个页面上,必须考虑视