您的位置: 首页 > 技术文档 > 网页制作 > 标记语言——应用CSS
元素层叠级别及z-index剖析 回到列表 曹鹏 CSS 视频教程
 标记语言——应用CSS

作者:zergine 时间: 2008-07-22 文档类型:翻译 来自:蓝色理想

第 1 页 标记语言——应用CSS [1]
第 2 页 标记语言——应用CSS [2]
第 3 页 标记语言——应用CSS [3]
第 4 页 标记语言——应用CSS [4]

方法D:行内样式

<h1 style="font-family: Georgia, serif; color: orange;">This is a Title</h1>

这是我们所接触的第四种CSS应用方法--行内样式,几乎任何标签都能加上style属性,让你能直接对标签应用CSS样式规则,与上面的例子一样.

由于行内样式是层叠最底层,因此他们会覆盖所有外部样式的声明,以及声明在<head>的<style>标签内的规则.

这是个在页面各处加上样式的简单做法,但是使用它必须付出代价.

样式绑死在标签上

如果在为页面制定样式的时候太依赖方法D,那么就没有做到把内容和展示方式分离,回头修改的时候必须深入标记源代码,把CSS放到分离得到文件中,维护起来就简单很多.

滥用方法D与使用<font>之类的显示效果标签污染标记源代码没什么差别,这些设计细节向来应该放在其他地方.

小心使用

在现实情况中,当然有时用行内样式的机会,在需要为页面加上样式,但是无法存取外部文件,或是不能修改<head>的时候,它能救你一命,或者暂时套用样式,不打算与其它标签共用的时候也会用到.

举例来说,如果网站上有个预告慈善义卖的页面,稍后就会取下,而你想为这个页面设计一套独特的样式,那么或许就将这些样式规则内嵌到标签里,而不把他们加到永久样式表里.

这就动手吧,不过要注意这些样式无法轻易更改,或是横跨页面让整个网站使用.

归纳

我们看了四种为标记内容应用CSS的不同方法,发现每种方法在应付特殊情况时都具有各自的优点.让我们复习一下每个方法,以及它们的优缺点.

方法A:

  • 需要把样式方在每个页面的<head>内,无法让许多页面共享同一份样式表,而且必须在每次读取页面时重新下载.
  • 放在<style>内的样式无法完全对老旧浏览器隐藏.
  • 适合在测试,开发阶段使用,标记内容与样式能放在相同文档里一起修改.

方法B:

  • 让一组样式能在许多页面之间甚至整个网站内公用.
  • 外部样式表只会下载一次,浏览器会作缓存,节省重复访问的下载时间.
  • 把共享的样式放在一个文档里,代表设计变更易于维护.
  • 以<link>标签引用的样式表无法对老旧浏览器隐藏.

方法C:

  • 让一组样式能在许多页面之间甚至整个网站内公用.
  • 外部样式表只会下载一次,浏览器会作缓存,节省重复访问的下载时间.
  • 把共享的样式放在一个文档里,代表设计变更易于维护.
  • @import能对Netscape 4.x浏览器隐藏样式内容.

方法D:

  • 样式定义在行内,让显示效果与标记内容靠得太近.
  • 无法与其它标签,整个文档甚至全站公用样式定义.
  • 维护十分麻烦,缺乏效率.
  • 适用于暂时性的问题,或者无法存取外部档案,修改页面<head>的时候使用.

现在看完了所有把样式与标签语法链接在一起做法,让我们更进一步,在"技巧延伸"中看看替换样式表.

下文:Chapter 11 打印样式

本文链接:http://www.blueidea.com/tech/web/2008/5974.asp 

出处:蓝色理想
责任编辑:bluehearts

上一页 标记语言——应用CSS [3] 下一页

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
标记语言——打印样式
css基础教程属性篇之四
如何给 legend 标签设定宽度
定位后无法选择容器内容解决方案
line-height属性的继承问题
作者文章 更多作者文章
标记语言——打印样式
标记语言——精简标签
标记语言——再谈清单
标记语言——锚点
标记语言——短语元素
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:4/41个记录/页 转到 页 共4个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2