CSS 教程之初识 CSS

CSS 是指层叠样式表(Cascading Style Sheets),HTML 4.0 之后添加了对 CSS 的支持,用于描述 HTML 网页的表现形式,以实现 HTML 页面内容与表现分离,极大提高了页面设计和编写的工作效率。

何为 CSS ?

开始学习 CSS 之前,你应该掌握 HTML/XHTML 的基本用法。

HTML 的深入学习离不开 CSS 样式的支持,你应该已经发现 HTML 仅能呈现一些信息,表现能力非常有限,我们很多时候都推荐引入了 CSS 样式一起使用,以提供元素更多的设置,使页面更加精美。

CSS 是 Cascading Style Sheet 的缩写,译为:层叠样式表,它是在 HTML 4 开始使用的,是为了更好的渲染 HTML 元素样式而引入的。

W3C 模式 Html + Css + Javascript,已经成为了目前网页设计与编写的基础 >>> Html 是网页的结构,CSS 是网页的样式,Javascript 是行为。可见 CSS 样式表的掌握对于 HTML 网页来说极其重要。

简单来说,CSS 专门用于渲染 HTML 元素标签的样式,使用 CSS 可以轻松实现页面的布局、内容与表现形式分离,可以极大的提高工作效率。

更具体的 >>>

CSS 用于定义网页的样式(美化网页),对网页中元素位置的排版、字体、颜色、背景等属性可以达到像素级的精确控制,CSS 不仅可以静态地修饰网页,还可以配合 JavaScript 动态地修改网页中元素的样式,而且市面上几乎所有的浏览器都支持 CSS。


CSS 发展史

20 世纪 90 年代初(1991) HTML 语言诞生,这时的 HTML 只包含很少的属性来控制网页的显示效果。伴随着 HTML 的成长,各式各样的样式语言也随之出现,不同的浏览器结合它们各自的样式语言来控制页面的显示效果。

经过不断的发展,HTML 中添加了越来越多的属性来满足页面设计者的需求,随着这些属性的增加,HTML 变的越来越杂乱,而且 HTML 页面也越来越臃肿,于是 CSS 便诞生了。

1994 年,W3C 组织(World WideWeb Consortium)成立,该组织对 CSS 的发展很感兴趣,为此还专门组织了一次讨论会。最终 CSS 的全部开发成员都加入了 W3C 组织,并负责 CSS 标准的制定,至此 CSS 的发展走上正轨。

W3C,中文名为 “万维网联盟”,由万维网的发明者 蒂姆·伯纳斯·李 于 1994 年 10 月在麻省理工学院计算机科学实验室成立,是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。

发展至今,CSS 总共经历了 4 个版本的迭代:

1)CSS 1.0

1996 年 12 月 W3C 发布了 CSS 的第一个版本 >>> CSS1.0(https://www.w3.org/TR/CSS1/)。

2)CSS 2.0

1998 年 5 月,CSS 2.0 版本正式发布(https://www.w3.org/TR/CSS2/)。

3)CSS 2.1

2004 年 2 月,CSS 2.1 正式发布。该版本在 CSS2.0 的基础上略微做了改动,删除了许多不被浏览器支持的属性。

4)CSS 3

早在 2001 年,W3C 就着手开始准备开发 CSS 的第三个版本,到目前为止该版本还没有最终定稿。虽然完整的 CSS3 标准还没有最终发布,但各主流浏览器已经开始支持其中的绝大部分特性。


CSS 特点

CSS 是 Web 领域的一个突破,它为 HTML 提供了一种描述元素样式的方式,使用 CSS 和 HTML 可以制作出外形优美的网页。总体来说 CSS 具有以下特点:

1)丰富的样式定义

CSS 提供了丰富的外观属性,可以在网页中实现各式各样的效果。例如:元素盒子模型设置、文本(字体、颜色、大小、格式化样式…)、页面背景色、背景图片等。

2)易于使用和修改

CSS 中提供了不同的样式信息嵌入方式,不仅可以定义在 HTML 元素的 style 属性中(内联样式或行内样式),也可以定义在 HTML 文档 <head> 标签内的 <style> 标签中(内部样式表),还可以定义在专门的 .css 格式的独立文件中(外部样式表),之后再将其引用到 HTML 文档。

推荐使用外部样式表的 CSS 嵌入方式,这样可以将 CSS 样式统一存放,方便后期维护。

3)多页面应用同一样式
v
前面提到了外部样式表的 CSS 嵌入方式,它不属于任何页面特有,我们可以在不同的页面引用这个 .css 格式的文件,这样就可以统一不同页面的风格。

4)样式层叠

层叠就是指可以对同一个 HTML 元素多次定义 CSS 样式,后面定义的样式会覆盖前面定义的样式。

例如整个站点引用了同样的 CSS 样式文件,但想要调整其中某个页面的某些元素,这时就可以 针对想要调整的元素单独定义一份样式文件并引用到页面中。这样后来单独定义的样式就会覆盖前面的样式,在浏览器同样只会看到最后设置的效果。

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,优先级如下:

内联样式 > 内部样式表 > 外部样式表 > 浏览器缺省设置(User Agent Stylesheet)。

5)页面压缩

一个网页其中通常包含大量的 HTML 元素,为了实现某些特殊效果我们往往还需要为这些元素定义样式文件,如果将它们放到一起就会使得我们的 HTML 文档过于臃肿。而使用外部样式表的样式定义方式,将 HTML 页面内容和样式实现分离,这样浏览器加载 HTML 文档所用的时间也会减少。

另外,CSS 样式可以重复使用,不同的元素可以使用相同的 CSS 样式,这样可以避免定义重复的样式,CSS 样式文件的体积也会相应的减小,从而进一步缩短页面加载的时间。


Author

Waldeinsamkeit

Posted on

2019-01-10

Updated on

2022-12-13

Licensed under

You need to set install_url to use ShareThis. Please set it in _config.yml.

Comments

You forgot to set the shortname for Disqus. Please set it in _config.yml.