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 | 用于分页的盲人用点字法打印 |
| 用于打印机 |
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 | 合作伙伴 |