CSS基础
前言: Web技术这2年又高涨了,一个原因是较开发native mobile客户端,开发浏览器响应式页面的网站更省成本;二是native 与html的结合开发越来越广泛。所以掌握其基本技术是必须的,否则会在许多方面都很吃力。所以我学习web的目的不是想做前端,而是在移动开发拥抱html的时候不会感到无所适从。
css为页面添加样式,增强和改进内容的外观。
css规则剖析:
CSS的构建基础:规则(rule)
![](http://images0.cnblogs.com/blog/378648/201303/02134701-c512cb0ea58845bba9c210602cad88aa.png)
选择符 (selector):确定样式所应用到的目标元素范围
CSS 选择符
(1)全体选择符
*,选择文档中的每一个元素
* { color: b1ue; }
(2) 元素选择符[类型(type) 选择符]
使用标签名选择一种元素的所有实例
em { color: red; }
(3) 类选择符
n以class属性中有指定类名的元素为目标
n以一个圆点(.)开始
n.info { color: purple; }
(4) ID选择符
选择具有指定标识符的元素
以一个"#"符号开头
#introduction { color: green; }
(5) 伪类选择符
选择处于特定状态的元素
以冒号( : )开头。
:link { color: blue; }
:visited { color: purple; }
(6). 后代选择符[上下文选择符(contextual selector)]
两个或多个用空格分隔的基本类型的选择符(全体、元素、类、伪类和ID选择符)
选择文档树中匹配该位置的元素。
#introduction .info p * { color: pink; }
:active { color: red; }
:hover { color: green; }
:focus { color: orange; }
(7). 组合选择符
把两种或多种类型的选择符组合使用
如一个元素选择符加一个ID选择符,或者一个ID选择符加一个类选择符
组合能够进一步增强选择符的具体性
p.info { color: blue; }
(8) 分组选择符
把几个选择符聚集起来作为一条规则的组成部分
避免重复
逗号分隔
p, hl, h2 { color: blue; }
(9). 高级选择符(新的版本)
属性选择符(attribute se1ector)
伪元素选择符(pseudo element selector)
子选择符(child selector)
毗邻同胞选择符(adjacent sibling selector)
具体性与层叠
比较具体的选择符>较不具体的选择符
![](http://images0.cnblogs.com/blog/378648/201303/02135439-6f5a8431c438428db74ab0b99c368c68.png)
层叠: 具体性相同时后面的声明会盖过前面的声明
将样式表附加到文档
(1) 内联样式:style属性中加入css样式声明
![](http://images0.cnblogs.com/blog/378648/201303/02135752-e66e0ccbdb55402f8c19bc69b0fca713.png)
避免使用内联样式,因为它把表现性因素与标记代码放一起
(2) 嵌入式样式表 : 把样式规则嵌入到文档的head元素内部
![](http://images0.cnblogs.com/blog/378648/201303/02135932-5024aa9989f642e797b852262176e381.png)
(3) 外部样式表: css规则
![](http://images0.cnblogs.com/blog/378648/201303/02140036-0db05d0c53b947c280a0d606cdc27ca1.png)
层叠顺序
层叠顺序 (cascade order)机制:按其出现的顺序:后面的规则盖过前面的规则,
![](http://images0.cnblogs.com/blog/378648/201303/02140222-ee6943bf8d614d50b53dc97f8cf3a0bb.png)
最靠近内容的样式获胜!
css的基础差不多就是这些,内容参照《深入浅出HTML》。
作者:老Zhan
出处:http://www.cnblogs.com/mybkn/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。