CSS基础-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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》。
 
本文转自老Zhan博客园博客,原文链接:http://www.cnblogs.com/mybkn/archive/2013/03/02/2940012.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章