CSS3概述

Posted CN分享

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3概述相关的知识,希望对你有一定的参考价值。

前言

上次把html5基础部分写完了,各位应该大致知道如何写一个网页了,但仅仅具备HTML5的知识还是不够的。如果各位把只用HTML5写好的网页给人去看,估计没有几个好评的。设计出一个美观大方简约的网页,一直是我们的追求,然而仅通过HTML5去实现是十分困难的,因为HTML5语言仅仅定义了网页结构,并没有对文本样式做出过多的设计。这时为了解决这个问题,一种新的技术就此诞生了--CSSCSS的主要功能就是对页面进行布局、对字体、颜色、背景和其他图文效果的实现提供像素级的控制。对,就是像素级,就是这么牛逼。本文作为CSS3系列的第一文,依着以前的惯例,写个概述,让各位从总体上对CSS3有一个认识。

  • CSS3功能

  • CSS3发展历史

  • CSS3与浏览器

CSS功能

把网页结构与样式还有逻辑层放开,是当今网页设计的特点,这样不仅能够方便管理,更有利于后期的维护。作为网页样式的主力,CSS在此提供的最大优势就是,如果再后期维护中需要修改一些外观样式就只需要修改相应的代码即可。

CSS3概述

随着 Internet的不断发展,用户对页面效果的追求越来越高,这是只依赖 HTML这种结构化标记来实现已经不能满足网页设计者的需要了,主要表现在以下几个方面:


  • 维护困难。为了修改某个特殊标记,往往需要花费很长时间,尤其对整个网站而言,后期的修改和维护成本太高了。

  • 标记不足。HTML本身标记并不是很多,并且大部分都是为网页内容服务的,极少设计到内容样式。

  • 网页过于臃肿。由于没有统一的各种风格样式进行控制,HTML体积往往过大,阅读起来十分困难。

  • 定位困难。在进行整体页面布局的时候,HTML对于各个模块的位置调整就显得捉襟见肘了。

在对HTML进行一番各种“黑”之后,就要引出牛逼的CSS3了。的确,CSS3的出现使得可以将结构化标记与丰富的页面表现完美结合起来。

CSS3概述

CSSCascading Style Sheet),层叠样式表,或者成为 CSS样式表或样式表,其文件的扩展名为 .cssCSS是用于增强或者控制网页样式,并允许将样式信息与网页内容分离的一种标记性语言。
引用样式表的目的是将“网页结构代码”和网页样式风格代码”分离开,从而使网页设计设者可以对网页布局进行更多的控制。利用样式表可以将整个站点上的网页指向某个 CSS文件,设计者只需要修改 CSS文件即可,“牵一发而动全身”。
CSS3概述

CSS3发展历史

某度上是这样说的

1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯(Bert Bos)正在设计一个名为Argo的浏览器,于是他们决定一起设计CSS。

其实当时在互联网界已经有过一些统一样式表语言的建议了,但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中,一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合每个人的爱好。
哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议,1995年的www网络会议上CSS又一次被提出,博斯演示了Argo浏览器支持CSS的例子,哈肯也展示了支持CSS的Arena浏览器。

同年,W3C组织(World WideWeb Consortium)成立,CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准,层叠样式表的开发终于走上正轨。有越来越多的成员参与其中,例如微软公司的托马斯·莱尔顿(Thomas Reaxdon),他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底,CSS初稿已经完成,同年12月,层叠样式表的第一份正式标准(Cascading style Sheets Level )完成,成为w3c的推荐标准。

1997年初,W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。

在2001年5月,W3C完成了CSS3的工作草案。并且制定了CSS3的发展路线,比较详细稍微列出了所有模块,并计划在未来进一步逐步规划。

总结一下:CSS1主要定义了网页的基本属性,如字体、颜色、空白边等。CSS2在此基础上添加了些高级功能(如浮动和定位),以及一些高级的选择器。CSS3开始遵循模块化开发,标准被分为若干个相互独立的模块,这将有利于理清模块化规范之间的关系,从而达到减少文件体积的目的。

CSS3概述

CSS3与浏览器

CSS3制定完成后,增加了不少新功能,但是这些新的样式在浏览器中不能获得完全的支持。不同的浏览器对CSS3很多细节支持存在着差异,所以想要表达具体效果还得具体考虑到用户使用的浏览器,这也是一个比较让人烦恼的地方。本系列主要在Chrome上实现。

CSS3概述

当前主流的浏览器为了自己产品利益和推广,定义了很多的私有属性用于加强页面显示样式和效果,导致现在存在着许多浏览器的“私生子(私有属性)”。虽然使用私有属性可以快速构建效果,但是对于网页设计者绝对是一个麻烦事,老板要求不要放弃任何用户。如果所有浏览器都完全支持 CSS3样式的话,对于网页设计者绝对是一个好消息,到那个时候,整个 Web页面也将焕然一新。让我们期待那一天的到来吧。


CSS3概述

编辑不易,欢迎推广



以上是关于CSS3概述的主要内容,如果未能解决你的问题,请参考以下文章

CSS3简介(概述新特性浏览器支持情况)

Reactreact概述组件事件

css3转换概述

CSS3的calc()用法简单介绍

CSS3概述

Css3之基础-1 Css 概述样式表使用方式语法规范