洗白白
你懂得
@@ -367,29 +335,33 @@ CSS和HTML的结合方式有3种: > 两种引入样式方式的区别:外部样式表中不能写标签,但是可以写import语句。 **具体操作如下:** + 我们先在html页面的同级目录下新建一个`a.css`文件,那说明这里面的代码全是css代码,此时就没有必要再写` ``` - 空格就表示后代。`.div1 p` 表示`.div1`的后代所有的`p`。 这里强调一下:这两个标签不一定是连续紧挨着的,只要保持一个后代的关联即可。也就是说,选择的是后代,不一定是儿子。 - 举例: ```html @@ -750,18 +711,14 @@ css中用`.`来表示类。举例如下: 上面css中的`div div p`,也能使文字的颜色变红。通过浏览器的审查元素,我们可以看到 p元素的祖先列表: -  - 讲到这里,我们再提一个sublme的快捷键。 - 在sublime中输入`p#haha`,按tab键后,会生成``。 在sublime中输入`p.haha`,按tab键后,会生成``。 - ### 2、交集选择器:定义的时候紧密相连 定义交集选择器的时候,两个选择器之间紧密相连。一般是以标签名开头,比如`div.haha`,再比如`p.special`。 @@ -808,10 +765,8 @@ h3.special{  - 注意,交集选择器没有空格。所以,没有空格的`div.red`(交集选择器)和有空格的`div .red`(后代选择器)不是一个意思。 - 交集选择器可以连续交:(一般不要这么写) ```css @@ -822,9 +777,6 @@ h3.special.zhongyao{ 上面这种写法,是 IE7 开始兼容的,IE6 不兼容。 - - - ### 3、并集选择器:定义的时候用逗号隔开 三种基本选择器都可以放进来。 @@ -841,17 +793,14 @@ p,h1,#mytitle,.one{  - ## 一些 CSS3 选择器 -> 所有的css3选择器,我们放在HTML5和CSS3课上介绍。暂时先接触一部分。 - -PS:我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。 - - +> 所有的 CSS3 选择器,我们放在 CSS3 的内容里介绍。本文暂时先接触一部分。 ### 浏览器的兼容性问题 +> 我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。 + IE: 微软的浏览器,随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下: - windows xp 操作系统安装的IE6 @@ -868,12 +817,8 @@ IE: 微软的浏览器,随着操作系统安装的。所以每个windows都 测试结果如下: - -  - - 我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率: - IE9 5.94% @@ -889,7 +834,6 @@ IE: 微软的浏览器,随着操作系统安装的。所以每个windows都 我们可以用「IETester」软件看看css在各个浏览器中的显示效果。 - ### 1.子代选择器,用符号`>`表示 > IE7开始兼容,IE6不兼容。 @@ -922,7 +866,6 @@ div的儿子p。和div的后代p的截然不同。 ``` - ### 2.序选择器 > IE8开始兼容;IE6、7都不兼容 @@ -976,7 +919,6 @@ div的儿子p。和div的后代p的截然不同。 } ``` - ### 3.下一个兄弟选择器 > IE7开始兼容,IE6不兼容。 @@ -1009,16 +951,13 @@ div的儿子p。和div的后代p的截然不同。`也增加了红色属性。于是我们得到这样的结论: > 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是**继承性。** @@ -34,35 +30,26 @@  - - 上图中,我们给div加了一个border,但是发现只有div具备了border属性,而p标签却没有border属性。于是我们可以得出结论: - 关于文字样式的属性,都具有继承性。这些属性包括:color、 text-开头的、line-开头的、font-开头的。 - 关于盒子、定位、布局的属性,都不能继承。 - 以后当我们谈到css有哪些特性的时候,我们要首先想到继承性。而且,要知道哪些属性具有继承性、哪些属性没有继承性。 - - - ## CSS的层叠性 很多公司如果要笔试,那么一定会考层叠性。 - ### 层叠性:计算权重 - **层叠性:就是css处理冲突的能力。** 所有的权重计算,没有任何兼容问题! CSS像艺术家一样优雅,像工程师一样严谨。 我们来看一个例子,就知道什么叫层叠性了。 -  @@ -70,20 +57,20 @@ CSS像艺术家一样优雅,像工程师一样严谨。 当多个选择器,选择上了某个元素的时候,要按照如下顺序统计权重: -> **id的数量,类的数量,标签的数量** +- id 选择器 +- 类选择器、属性选择器、伪类选择器 +- 标签选择器、伪元素选择器 因为对于相同方式的样式表,其选择器排序的优先级为:ID选择器 > 类选择器 > 标签选择器 针对上面这句话,我们接下来举一些复杂一点的例子。 - ### 层叠性举例 #### 举例1:计算权重  - 如上图所示,统计各个选择器的数量,优先级高的胜出。文字的颜色为红色。 PS:不进位,实际上能进位(奇淫知识点:255个标签,等于1个类名)但是没有实战意义! @@ -94,12 +81,10 @@ PS:不进位,实际上能进位(奇淫知识点:255个标签,等于1 上图可以看到,第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后,因此以第二个样式为准(就近原则)。 - #### 举例3:具有实战性的例子  - 现在我要让一个列表实现上面的这种样式:第一个li为红色,剩下的li全部为蓝色。 如果写成下面这种代码是无法实现的: @@ -112,14 +97,12 @@ PS:不进位,实际上能进位(奇淫知识点:255个标签,等于1  - 上图中,第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果:**所有人当中,让某一个人为红,让其他所有人为蓝。** 这种方式好用是好用,但用好很难。 就拿上方代码来举例,为了达到这种效果,即为了防止权重不够,比较稳妥的做法是:**把第二个样式表照着第一个样式表来写,在此基础上,给第二个样式表再加一个权重。** - 上面这个例子很具有实战性。 #### 举例4:继承性造成的影响 @@ -169,10 +152,8 @@ PS:不进位,实际上能进位(奇淫知识点:255个标签,等于1