add: CSS 基础回顾
This commit is contained in:
qianguyihao
@@ -1,11 +1,8 @@
|
||||
|
||||
|
||||
|
||||
> 本文最初于2017-07-29发表于[博客园](http://www.cnblogs.com/smyhvae/p/7253929.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
|
||||
## 本文重点
|
||||
|
||||
- CSS的继承性
|
||||
@@ -23,7 +20,6 @@
|
||||
|
||||
|
||||
|
||||
|
||||
上方代码中，我们给div标签增加红色属性，却发现，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
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 层叠性：权重计算的问题大总结（非常重要）
|
||||
|
||||
层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。
|
||||
@@ -181,14 +162,11 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
||||
|
||||
|
||||
|
||||
|
||||
上面这个图非常重要，我们针对这个图做一个文字描述：
|
||||
|
||||
- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
|
||||
- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
|
||||
|
||||
|
||||
|
||||
### CSS样式表的冲突的总结
|
||||
|
||||
- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
|
||||
@@ -210,66 +188,53 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 题目演示
|
||||
|
||||
CSS的层叠性讲完了，我们来做几个题目吧。
|
||||
|
||||
#### 题目1
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 题目2
|
||||
|
||||
|
||||
|
||||
|
||||
#### 题目3
|
||||
|
||||
|
||||
|
||||
|
||||
#### 题目4
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 权重问题深入
|
||||
|
||||
### 同一个标签，携带了多个类名，有冲突：
|
||||
|
||||
这里需要补充两种冲突的情况：
|
||||
|
||||
- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级： **定义**的样式表中，谁最近，就用谁。
|
||||
- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：**定义**的样式表中，谁最近，就用谁。
|
||||
- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
|
||||
|
||||
|
||||
例如：（就近原则）
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，**文字显示的颜色均为红色**。因为这和在标签中的挂类名的书序无关，只和css的顺序有关。
|
||||
|
||||
|
||||
### !important标记
|
||||
### !important标记：优先级最高
|
||||
|
||||
来看个很简单的例子：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，显然id选择器的权重最大，所以文字的颜色是红色。
|
||||
|
||||
如果我们想让文字的颜色显示为绿色，只需要给标签选择器的加一个`!important`标记，此时其权重为无穷大。如下：
|
||||
|
||||
|
||||
|
||||
|
||||
important是英语里面的“重要的”的意思。我们可以通过如下语法：
|
||||
|
||||
```
|
||||
@@ -288,7 +253,6 @@ font-size:60px !important;
|
||||
|
||||
错误的语法：
|
||||
|
||||
|
||||
```
|
||||
font-size:60px; !important; 不能把!important写在外面
|
||||
font-size:60px important; 不能忘记感叹号
|
||||
@@ -298,7 +262,6 @@ font-size:60px important; 不能忘记感叹号
|
||||
|
||||
**（1）!important提升的是一个属性，而不是一个选择器**
|
||||
|
||||
|
||||
```css
|
||||
p{
|
||||
color:red !important; 只写了这一个!important，所以只有字体颜色属性提升了权重
|
||||
@@ -316,10 +279,8 @@ font-size:60px important; 不能忘记感叹号
|
||||
|
||||
所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）。
|
||||
|
||||
|
||||
**（2）!important无法提升继承的权重，该是0还是0**
|
||||
|
||||
|
||||
比如HTML结构：
|
||||
|
||||
```html
|
||||
@@ -352,21 +313,15 @@ font-size:60px important; 不能忘记感叹号
|
||||
|
||||
|
||||
|
||||
|
||||
PS：! important做站的时候，不允许使用。因为会让css写的很乱。
|
||||
现在，我们知道层叠性能比较很多东西：
|
||||
选择器的写法权重，谁离的近，谁写在下面。
|
||||
|
||||
|
||||
PS：做网站的时候，!important 尽量不要用。否则会让css写的很乱。
|
||||
|
||||
## 知识回顾
|
||||
|
||||
> 我们把以上内容和上一篇文章做一个简单的知识回顾。
|
||||
|
||||
|
||||
### CSS属性
|
||||
|
||||
> css属性，面试的时候会有笔试，笔试没有智能感应的。
|
||||
> css属性，面试的时候会有笔试，笔试没有智能提示的。
|
||||
|
||||
加粗，倾斜，下划线：
|
||||
|
||||
@@ -376,7 +331,6 @@ font-style:italic;
|
||||
text-decoration:underline;
|
||||
```
|
||||
|
||||
|
||||
背景颜色、前景色：
|
||||
|
||||
```
|
||||
@@ -405,45 +359,34 @@ div,p
|
||||
*
|
||||
```
|
||||
|
||||
|
||||
IE7能够兼容的：儿子选择器、下一个兄弟选择器。如下：
|
||||
|
||||
```
|
||||
div>p
|
||||
h3+p
|
||||
```
|
||||
|
||||
IE8能够兼容的：
|
||||
|
||||
```
|
||||
ul li:first-child
|
||||
ul li:last-child
|
||||
```
|
||||
|
||||
### css两个性质
|
||||
|
||||
- 继承性：好的事儿。继承从上到下，哪些能？哪些不能？
|
||||
|
||||
- 层叠性：冲突，多个选择器描述了同一个属性，听谁的？
|
||||
|
||||
|
||||
再看几个题目：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
权重问题大总结，最后有个例子，比较难，暂时略掉。
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
@@ -451,6 +394,3 @@ ul li:last-child
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user