方法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>的时候使用.
现在看完了所有把样式与标签语法链接在一起做法,让我们更进一步,在"技巧延伸"中看看替换样式表.
站长工具
相关文章
请稍等，评论加载中...