CSS基础

前言： Web技术这2年又高涨了，一个原因是较开发native mobile客户端，开发浏览器响应式页面的网站更省成本；二是native 与html的结合开发越来越广泛。所以掌握其基本技术是必须的，否则会在许多方面都很吃力。所以我学习web的目的不是想做前端，而是在移动开发拥抱html的时候不会感到无所适从。

css为页面添加样式，增强和改进内容的外观。

css规则剖析：

CSS的构建基础：规则(rule)

 

选择符 (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)

 

 

具体性与层叠

比较具体的选择符>较不具体的选择符

 

 

层叠： 具体性相同时后面的声明会盖过前面的声明

 

将样式表附加到文档

(1) 内联样式：style属性中加入css样式声明

 

 

避免使用内联样式,因为它把表现性因素与标记代码放一起

 

(2) 嵌入式样式表 ： 把样式规则嵌入到文档的head元素内部

 

 

 

(3) 外部样式表: css规则

 

 

 

 

层叠顺序

层叠顺序 (cascade order)机制:按其出现的顺序：后面的规则盖过前面的规则,

 

 

 最靠近内容的样式获胜！ 

 

 

css的基础差不多就是这些，内容参照《深入浅出HTML》。