从头开始巩固CSS,跟着这位博主学习学习,总结的真不错,学习之后简单做个笔记吧 ^ _ ^(原文注:http://www.cnblogs.com/wangfupeng1988/p/4276321.html)
- 学习CSS的三个突破点。
1.浏览器如何加载和解析CSS——CSS的5个来源;
2.CSS和html如何结合起来——选择器;
3.CSS能控制那些显示方式——盒子模式、浮动、定位、背景、字体等;
-
样式来源
css之所以有“层叠”的概念,是因为有多个样式来源,通常css的样式来源有5个,开发人员只能接触到后面3个。
1. 浏览器默认样式表
浏览器自带的默认的样式,不同浏览器的默认样式有些地方是不一样。在写css时,都会首先设置 * {margin:0; padding:0;},解决浏览器兼容性问题。
2.用户样式表
浏览器自带的样式( 用户设置了字体和字号之后,它们会覆盖掉浏览器默认的样式。)
3.<link>引用的css文件
4.<style>中编写的样式代码
5.<a style=’ ’>中编写的样式代码
- 浏览器默认样式表:浏览器加载了html之后只为一件东西——dom树,浏览器把html变为dom树结构,就完成了对html的结构化。至于后来对视图的渲染,p是block、br换行,那是整合了css之后的事情。而浏览器整合css又是另一个路线,和解析html是分开的。这里的“css”就包含了浏览器默认样式。
(所以说,浏览器将载入的html变为dom树,但是此时没有任何显示样式。所以显示的样式,都是css定义的,浏览器只会通过css来渲染视图样式。一直还以为是浏览器内核自带的呢 @_@!!)
- 层叠规则:后者覆盖前者(增加!important,则不会覆盖,如下)
span{
color: blue !important;
font-weight:bolder;
}