层叠样式表 CSS 深入学习(一) 简介与几种使用方法

首先,在浏览 CSS 教程之前您需要至少了解 HTML 超文本标记语言,关于 HTML 推荐 布啦布啦 的在线教程,或许你会奇怪网上已经有如此多的 CSS 教程,为什么我还要写这些文章,那么请耐心把本文看完,或许你会发现些许不同,这也是为什么我同样推荐给具有一定 CSS 水平的朋友阅读的原因,因为有些原本你自认为已经掌握的东西或许跟你想的会有所不同 ^_^

文章中的内容即适合完全没有 CSS 基础的朋友学习查阅,也可供具有一定 CSS 基础的朋友参考提高之用,文中一些个人经验是本人从事纯 XTML+CSS 工作近三年的宝贵收获,现分享给大家,希望能让已经或即将从事这份工作的朋友能够少走一些弯路,从而利用有限的时间获得更大的成就。

一、层叠样式表 CSS (Cascading Style Sheets) 简介:

初期技术人员构造出 HTML 的时候,由于网页在初期仅仅是作为网络出版使用,当时的 HTML 主要侧重于定义内容,比如使用 P 标记表示一个段落,使用 H 标记表示标题等等,却没有对于外观样式如颜色、效果及各种修饰等等做出规范。

随着网络的迅猛发展 HTML 被广泛应用,上网的人们当然希望网页做得漂亮些,因此 HTML 排版和界面效果的局限性日益暴露。为了解决这个问题,人们当然走了不少弯路用了一些不好的方法,比如为 HTML 标记增加很多的属性值(如 <p align=”center”></p> 等)、将文本变成图片、过多的利用表格 TABLE 来排版(记得五年前在大学初接触网页制作的时候我也是滥用表格来排版),用空白的图片填充白色的空间等,所带来的直接后果便是代码逐渐臃肿,维护变的异常困难,直到层叠样式表 CSS 的出现。

层叠样式表 CSS 可算是网页技术的一个突破,它解决了网页界面排版的难题,从而同时解决了 W3C 中 结构(Structure) 表现(Presentation) 的分离和应用。从此 HTML 的标签将只用来定义网页的内容结构(Structure),而 CSS 则用来决定这些网页内容如何表现(Presentation)。

二、层叠样式表 CSS 的使用方法:

层叠样式表可通过以下方法使用即:内嵌样式(Inline Style) 内部样式表(Internal Style Sheet) 外部样式表(External Style Sheet) 三种方法。

1、内嵌样式(Inline Style):即写在 HTML 标记里面仅对当前所在的标记生效。

黑色文字白色背景

2、内部样式表(Internal Style Sheet):即直接写在 HTML 标记内仅对所在的网页生效(其中 style 标签内部务必使用 <!– –> 标签包裹样式语句,以防止不支持 CSS 的浏览器或掌上阅读设备将其当作普通文本输出,虽然百度谷歌都没有这么做,但我们需要这么做)。





直接写在页面 body 正文中也是可以的

但不方便维护

3、外部样式表(External Style Sheet):是用来解决多数网页使用同样样式效果的,我们把整个页面所有的样式写在一个以 .css 为后缀的文件里,然后在每个需要用到这些样式的网页头部(HEAD)引用这个 CSS 文件这里可使用绝对路径或相对路径,推荐相对路径(其中 LINK 标签只能在 HTML 文件内使用,而 @import 可在 HTML 及 CSS 文件内使用。)




or



三、内容总结备忘:

1、层叠样式表 CSS 的出现解决了 W3C 关于 内容表现 分离的思想,并大大减少维护成本;

2、内部样式表务必使用 <!–    –> 包裹,防止不支持 CSS 的浏览器或掌上阅读设备将 CSS 当作普通文本输出;

3、即使弄懂了 CSS 优先级也尽量不要在你的样式表里出现重复定义样式因为各个浏览器在这点上跟你的理解可能有所不同。