CSS发展史

html-css023

CSS发展史,第1张

CSS发展史

CSS(Cascading Style Sheets,层叠样式表)是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名,并使用于Web和其他媒介,如XML文档中。1996年12月W3C推出了CSS规范的第一个版本,1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定,到目前为止该标准还没有最终定稿。

CSS1.0

选择器:要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,就需要用到CSS选择器。选择器大致分为派生选择器、ID选择器和类选择器,用来定义希望应用样式的HTML元素或者标签。

样式属性:该属性主要包括Font字体、Text文本、Background背景、Position定位、Dimensions尺寸、Layout布局、Margin外边框、Border边框、Padding内边框、List列表、Table表格和Scrollbar滚动条等,用于定义网页的一些样式变化。

伪类属性:主要定义了针对描述对象a的link、hover、active、visited和针对节点的first-letter、first-child、first-line等几个伪类属性。

保存方式:用户可以直接存储在HTML网页中,也可以将CSS样式代码存储为独立的样式表文件。

CSS2.0

选择器:css2提供了更多强大的选择器,用来定位HTML节点或者标记

符号名称

含义

示例

*

用于匹配任何标记

*{color:red}

>

用于指定父子节点关系

AAA >CCC >DDD >{color:red}匹配父节点分别为CCC和AAA的节点DDD节点

用于匹配在某一层有某个父节点的节点

AAA CCC DDD {color:blue}匹配包含父节点CCC的父节点AAA的节点DDD

+

用于表示在同一个级别节点之间的关系

AAA+BBB{color:red}表示,有一个兄弟节点AAA的节点BBB

名称[表达式]

选择包含特殊属性值的节点

BBB[text="xyz"]{color:blue} 表示包含text属性值为xyz的BBB标签

位置模型:在CSS2中进一步增强了位置属性功能,增加了relative、absolute和fixed等几个值

值名称

含义

relative

元素框相对父节点偏移某个距离,元素仍保持其未定位前的形状,它原本所占的空间仍保留

absolute

元素框从文档流中完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样

fixed

元素框的表现类似于absolute值,不过其包含块是视窗本身

z-index

用来指定相互重叠的元素的叠放顺序,数字较大的元素会叠放在数值较小的元素前面

布局、表格样式:CSS2对display属性进行了扩充,用户可用该属性指定元素是否会显示以及如何显示,也可以使用该属性配合位置和浮动进行页面的布局。另外,用户还可以将一个非表格的结构化文档显示为一个表格样式。

媒体类型:用于对不同的媒体类型定义不同的样式。

属性名称

含义

aural

用于语音和音频合成器

embossed

用于分页的盲人用点字法打印

print

用于打印机

screen

用于计算机显示器

braille

用于盲人用点字法触觉回馈设备

projection

用于方案展示如幻灯片

伪类:CSS2增加了focus(将样式添加到被选中的元素)、:first-child(将特殊的样式添加到元素的第一个子元素)、:lang(允许创作者来定义指定的元素中使用的语言)。

光标样式:增加了cursor属性,用于指定设备应该显示怎样的光标类型。

值名称

含义

default

默认光标(通常是一个箭头)

auto

默认,浏览器设置的光标

crosshair

光标呈现为十字线

pointer

光标呈现为指示链接的指针(一只手)

move

此光标指示某对象可被移动

e-resize

此光标指示矩形框的边缘可被向右移动

text

此光标指示文本

wait

此光标指示程序正忙(通常是一只表或沙漏形状)

help

此光标指示可用的帮助(通常是一个问号或一个气球)

DIV+CSS其实是一种错误的叫法,标准的叫法应该是XHTML+CSS,因为DIV与table都是XHTML或HTML语言中的一个标记,而CSS只是一种样式表现。DIV+CSS已经将内容和表现分割开来,所以修改网页时只需指定内容修改即可。

CSS常用命令规则

名称

含义

名称

含义

header

页头

content/Container

内容

footer

页脚

nav

导航

sidebar

侧栏

column

栏目

wrapper

页面外围控制整体布局宽度

left

左侧

right

右侧

center

中间

loginbar

登录条

logo

标志

banner

广告

main

页面主题

hot

热点

news

新闻

download

下载

subnav

子导航

menu

菜单

submenu

子菜单

search

搜索

friendlink

友情链接

copyright

版权

scroll

滚动

content

内容

tab

标签页

list

文章列表

msg

提示信息

title

栏目标题

joinus

加入

guild

指南

service

服务

register

注册

status

状态

vote

投票

partner

合作伙伴

CSS没有发布的概念,俗称是标准规范,实际上只是个建议,并不是强制执行的,W3C也只不过是个民间组织。至于CSS3何时确定的,反正CSS2.1是今年6月7日最终定稿的。

CSS3不是解决CSS2的问题,而是新的标准特性,不是补丁。而且刚才说了,只是建议,浏览器厂商没有义务遵守,就算遵守的了,也需要更新版本逐步完善,就算完善了,也得用户升级才行。而且这是个循序渐进的过程,不是说新的出来旧的就不用了。

最近闲来无事,上W3C转了一圈,粗略地浏览了一下尚未发布的CSS3,虽然还未被W3C正式发布出来,但还是能从已有的资料中窥出一些端倪,一个很明显的特征,CSS3制订得越来越细致了,某些细节之处完全超乎你所能想象的到的范围。

在这里不提及CSS3的语法,因为对于目前尚未有软件支持的CSS3,任何语法的探讨都像是空中楼阁,毫无意义可言。以下我就列举一下CSS3中部分新内容。

1、最令人欣喜的一个发现就是用CSS终于也能做出圆角表格了!经常有人在论坛上问怎么做圆角表格,回答无非是用图片或VML技术,这一回,CSS族们也可以骄傲地说一声:CSS同样可以!对应属性:border-radius。2、以往对网页上的文字加特效只能用filter这个属性,这次CSS3中专门制订了一个加文字特效的属性,而且不止加阴影这种效果哦。对应属性:font-effect。3、丰富了对链接下划线的样式,以往的下划线都是直线,这次可不一样了,有波浪线、点线、虚线等等,更可对下划线的颜色和位置进行任意改变,哈哈~~下划线的世界从此不再单一。(还有对应顶线和中横线的样式,效果与下划线类似)对应属性:text-underline-style,text-underline-color,text-underline-mode,text-underline-position。4、我们在做笔记时经常要在文字下点几个点或打个圈什么的,以示重点,CSS3也开始加入了这项功能,这应该在某些特定网页上很有用。对应属性:font-emphasize-style和font-emphasize-position。

除了这些比较醒目的特征外,还有许多的相关属性,只是有的效果看参考图感觉一般,就不提了;还有的碍于本人英文一般,有的并没有看透其所以然,不敢胡乱写上来,望见谅。

题外话:这次的CSS3对日文颇为照顾哦,有几个属性是专门针对日文的,或许W3C觉得英文没有什么可挖掘的了,开始转到亚洲文字上了。