update css 01

2017-07-27 10:12:50 +08:00 · 2017-07-27 10:12:50 +08:00 · ddfab9759e
commit ddfab9759e
parent 44c80b4386
3 changed files with 277 additions and 35 deletions
--- a/01-html/02-html标签图文详解（二）.md
+++ b/01-html/02-html标签图文详解（二）.md
@ -3,10 +3,6 @@
 > 本文最初于2015-10-02发表于[博客园](http://www.cnblogs.com/smyhvae/p/4852863.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新。以下是正文。


-HTML标签超详细的图文演示再来一波~~~
-
-如果还没有看过昨天的福利的，那可要抓紧喽，传送门：[HTML标签----图文详解](http://www.cnblogs.com/smyhvae/p/4850684.html)
-
 ## 本文主要内容

 - 列表标签：`<ul>`、`<OL>`、`<dl>`
--- a/02-CSS/01-CSS图文详解（一）----CSS选择器介绍.md
+++ b/02-CSS/01-CSS图文详解（一）----CSS选择器介绍.md
@ -1,7 +1,7 @@


+> 本文最初于2015-10-01发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新。以下是正文。

-01-CSS图文详解（一）----CSS选择器介绍


 ## 主要内容
@ -1028,6 +1028,48 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
 PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。 


+
+### 浏览器的兼容性问题
+
+IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下：
+
+- windows xp 	操作系统安装的IE6
+- windows vista 操作系统安装的IE7
+- windows 7 	操作系统安装的IE8
+- windows 8 	操作系统安装的IE9
+- windows10 	操作系统安装的edge
+
+浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。
+
+为了测试浏览器CSS 3的兼容性，我们可以在网上搜"css3 机器猫"关键字，然后在不同的浏览器中打开如下链接：
+
+- <http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/>
+
+测试结果如下：
+
+20170711_1939.png
+
+
+
+我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率：
+
+IE9	5.94%
+IE8 21.19%
+IE7 4.79%
+IE6 4.11%
+
+我们可以在<http://html5test.com/results/desktop.html>中查看
+
+20170711_1948.png
+
+我们要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟IE6较劲。
+
+我们可以用「IETester」软件看看css在各个浏览器中的显示效果。
+
+
+
+
+
 ### 1.儿子选择器，用符号`>`表示

 > IE7开始兼容，IE6不兼容。
@ -1155,33 +1197,6 @@ div的儿子p。和div的后代p的截然不同。
 这种选择器作用不大。


-
-
-
-	
-
-
-## CSS样式表的冲突解决
-
- 1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
- 3、外部样式表的ID选择器  > 内嵌样式表的标签选择器
-
-> 总结：就近原则。ID选择器优先级最大。
-
-举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）
-
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-14.png)
-
-另外还有两个冲突的情况：
-
- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：	**定义**的样式表中，谁最近，就用谁。
- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
-
-例如：
-
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-16.png)
-
 > 注：本文将持续更新。

 ##我的公众号
@ -1192,5 +1207,3 @@ div的儿子p。和div的后代p的截然不同。

 ![](http://7sby7r.com1.z0.glb.clouddn.com/cnblogs/%E7%94%9F%E5%91%BD%E5%9B%A2%E9%98%9F%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg)

-
-
--- a/02-CSS/02-CSS的继承性和层叠性.md
+++ b/02-CSS/02-CSS的继承性和层叠性.md
@ -0,0 +1,233 @@
+02-CSS的继承性和层叠性
+
+
+
+
+## CSS的继承性
+
+我们来看下面这样的代码：
+
+20170724_2359.png
+
+上方代码中，我们给div标签增加红色属性，却发现，div里的每一个子标签`<p>`也增加了红色属性。于是我们得到这样的结论：
+
+> 有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是**继承性。**
+
+继承性是从自己开始，直到最小的元素。
+
+但是呢，如果再给上方的代码加一条属性：
+
+20170725_2122.jpg
+
+上图中，我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。
+
+以下属性具有继承性：color、 text-开头的、line-开头的、font-开头的。
+
+**关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承。**
+
+
+以后当我们谈到css有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。
+
+
+
+
+## CSS的层叠性
+
+### 层叠性：计算权重
+
+很多公司如果要笔试，那么一定会考层叠性。
+
+**层叠性：就是css处理冲突的能力。** 所有的权重计算，没有任何兼容问题！
+
+CSS像艺术家一样优雅，像工程师一样严谨。
+
+我们来看一个例子，就知道什么叫层叠性了。
+
+
+
+20170725_2132.png
+
+
+上图中，三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。
+
+当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
+
+> **id的数量，类的数量，标签的数量**
+
+因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
+
+针对上面这句话，我们接下来举一些复杂一点的例子。
+
+
+### 层叠性举例
+
+#### 举例1：计算权重
+
+20170725_2138.png
+
+如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。
+
+PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！
+
+#### 举例2：权重相同时
+
+20170725_2250.png
+
+上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。
+
+
+#### 举例3：具有实战性的例子
+
+20170726_2221.png
+
+现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。
+
+如果写成下面这种代码是无法实现的：
+
+20170726_2225.png
+
+无法实现的原因很简单，计算一下三个选择器的权重就清楚了，显然第二个样式被第一个样式表覆盖了。
+
+正确的做法是：（**非常重要**）
+
+20170726_2229.png
+
+上图中，第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果：**所有人当中，让某一个人为红，让其他所有人为蓝。**
+
+这种方式好用是好用，但用好很难。
+
+就拿上方代码来举例，为了达到这种效果，即为了防止权重不够，比较稳妥的做法是：**把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。**
+
+
+上面这个例子很具有实战性。
+
+
+#### 举例4：继承性造成的影响
+
+这里需要声明一点：
+
+ >如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。
+
+为了验证上面这句话，我们来看看下面这样的例子：
+
+
+20170727_0843.png
+
+另外：**如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。**举例如下：
+
+20170727_0845.png
+
+
+
+### 权重问题大总结
+
+通过列举上面几个例子，我们对权重问题做一个总结：
+
+- （1）先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，就近原则。
+
+- （2）如果没有选中，那么权重是0。如果大家都是0，就近原则。
+
+### 题目演示
+
+CSS的层叠性讲完了，我们来做几个题目吧。
+
+#### 题目1 
+
+20170727_0928.png
+
+
+#### 题目2
+
+20170727_0929.png
+
+
+#### 题目3
+
+20170727_0930.png
+
+#### 题目4
+
+20170727_0931.png
+
+
+
+
+
+
+## CSS样式表的冲突解决
+
+- 1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
+- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
+- 3、外部样式表的ID选择器  > 内嵌样式表的标签选择器
+
+> 总结：就近原则。ID选择器优先级最大。
+
+举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）
+
+![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-14.png)
+
+另外还有两个冲突的情况：
+
+- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：	**定义**的样式表中，谁最近，就用谁。
+- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
+
+例如：
+
+![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-16.png)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+