webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add: CSS 基础回顾

Browse Source
This commit is contained in:
qianguyihao 2019-10-03 22:49:06 +08:00
parent 0ea740c0a7
commit 3975268ef4
8 changed files with 60 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
02-CSS基础/01-CSS属性：字体属性和文本属性.md
View File

@ -15,9 +15,9 @@
html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。 html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。
<font color="#0000FF">**CSS中的单位是必须要写的**，因为它没有默认单位。</font> <font color="#0000FF">**CSS中的单位是必须要写的**，因为它没有默认单位。</font>
- **绝对单位：** ### 绝对单位
1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。 1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。
各种单位的含义： 各种单位的含义：
@ -27,7 +27,8 @@ html中的单位只有一种，那就是像素px，所以单位是可以省略
- `pt`：点Points，或者叫英镑 (1点 = 1/72英寸) - `pt`：点Points，或者叫英镑 (1点 = 1/72英寸)
- `pc`：皮卡Picas (1 皮卡 = 12 点) - `pc`：皮卡Picas (1 皮卡 = 12 点)
- **相对单位：** ### 相对单位
`px`：像素 `px`：像素
`em`：印刷单位相当于12个点 `em`：印刷单位相当于12个点
`%`：百分比，相对周围的文字的大小 `%`：百分比，相对周围的文字的大小
@ -40,6 +41,10 @@ html中的单位只有一种，那就是像素px，所以单位是可以省略
## 字体属性 ## 字体属性
CSS中，有很多**非布局样式**（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。
这一段，我们先来讲一下字体属性。
### 行高 ### 行高
CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。 CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
@ -56,7 +61,6 @@ CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直
为了严格保证字在行里面居中，我们的工程师有一个约定： **行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除。 为了严格保证字在行里面居中，我们的工程师有一个约定： **行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除。
### 如何让单行文本垂直居中 ### 如何让单行文本垂直居中
小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。这个很好理解。 小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。这个很好理解。
@ -206,7 +210,6 @@ CSS样式中，常见的文本属性有以下几种：
![](http://img.smyhvae.com/2015-10-03-css-18.png) ![](http://img.smyhvae.com/2015-10-03-css-18.png)
## 列表属性 ## 列表属性
```html ```html
@ -230,8 +233,6 @@ ul li{
![](http://img.smyhvae.com/2015-10-03-css-26.png) ![](http://img.smyhvae.com/2015-10-03-css-26.png)
## overflow属性：超出范围的内容要怎么处理 ## overflow属性：超出范围的内容要怎么处理
`overflow`属性的属性值可以是： `overflow`属性的属性值可以是：
@ -295,12 +296,7 @@ ul li{
![](http://img.smyhvae.com/2015-10-03-css-31.png) ![](http://img.smyhvae.com/2015-10-03-css-31.png)
## 鼠标的属性 cursor
## 鼠标的属性cursor
鼠标的属性`cursor`有以下几个属性值： 鼠标的属性`cursor`有以下几个属性值：
@ -372,7 +368,6 @@ p:hover{
爆料一下，表示博主有两年多的平面设计经验，我做设计的时间其实比写代码的时间要长，嘿嘿··· 爆料一下，表示博主有两年多的平面设计经验，我做设计的时间其实比写代码的时间要长，嘿嘿···
## 导航栏的制作（本段内容请忽略） ## 导航栏的制作（本段内容请忽略）
现在，我们利用float浮动属性来把无序列表做成一个简单的导航栏吧，效果如下： 现在，我们利用float浮动属性来把无序列表做成一个简单的导航栏吧，效果如下：
@ -435,8 +430,6 @@ p:hover{
国庆这四天，连续写了四天的博客，白天和黑夜，从未停歇，只交替没交换，为的就是这每日一发。以后会不断更新的。 国庆这四天，连续写了四天的博客，白天和黑夜，从未停歇，只交替没交换，为的就是这每日一发。以后会不断更新的。
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
@ -446,4 +439,3 @@ p:hover{
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/2016040102.jpg)

96
02-CSS基础/03-CSS样式表和选择器.md
View File

@ -1,11 +1,5 @@
> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 > 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
## 本文主要内容 ## 本文主要内容
- CSS概述 - CSS概述
@ -14,15 +8,13 @@
- CSS几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器` - CSS几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器`
- CSS样式优先级 - CSS样式优先级
## 前言 ## 前言
现在的互联网前端分三层： 现在的互联网前端分三层：
- HTML：超文本标记语言。从**语义**的角度描述页面**结构**。 - HTML：超文本标记语言。从**语义**的角度描述页面**结构**。
- CSS：层叠样式表。从**审美**的角度负责页面**样式**。 - CSS：层叠样式表。从**审美**的角度负责页面**样式**。
- JS：JavaScript 。从**交互**的角度描述页面**行为**。 - JS：JavaScript。从**交互**的角度描述页面**行为**。
## CSS 概述 ## CSS 概述
@ -30,7 +22,6 @@ CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面
css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和css2.1不矛盾，必须先学2.1然后学3。 css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和css2.1不矛盾，必须先学2.1然后学3。
接下来我们要讲一下为什么要使用CSS。 接下来我们要讲一下为什么要使用CSS。
**HTML的缺陷：** **HTML的缺陷：**
@ -49,15 +40,12 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c
比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。 比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。
### CSS的重点知识点 ### CSS的重点知识点
盒子模型、浮动、定位 盒子模型、浮动、定位
### CSS 整体感知 ### CSS 整体感知
我们先来看一段简单的css代码： 我们先来看一段简单的css代码：
```html ```html
@ -98,12 +86,10 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c
![](http://img.smyhvae.com/20170710_1605.png) ![](http://img.smyhvae.com/20170710_1605.png)
我们写css的地方是style标签，就是“样式”的意思，写在head里面。后面的课程中我们将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面。 我们写css的地方是style标签，就是“样式”的意思，写在head里面。后面的课程中我们将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面。
如果在sublime中输入`<st`或者`<style`然后按tab键，可以自动生成的格式如下：（建议） 如果在sublime中输入`<st`或者`<style`然后按tab键，可以自动生成的格式如下：（建议）
```html ```html
<style type="text/css"></style> <style type="text/css"></style>
``` ```
@ -118,13 +104,10 @@ type表示“类型”，text就是“纯文本”，css也是纯文本。
css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。 css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。
## CSS语法 ## CSS语法
**语法格式：**（其实就是键值对） **语法格式：**（其实就是键值对）
```html ```html
选择器{ 选择器{
属性名: 属性值; 属性名: 属性值;
@ -132,7 +115,6 @@ css对换行不敏感，对空格也不敏感。但是一定要有标准的语
} }
``` ```
或者可以写成： 或者可以写成：
```css ```css
@ -150,7 +132,6 @@ css对换行不敏感，对空格也不敏感。但是一定要有标准的语
} }
``` ```
**解释：** **解释：**
- 选择器代表页面上的某类元素，选择器后一定是大括号。 - 选择器代表页面上的某类元素，选择器后一定是大括号。
@ -208,15 +189,12 @@ p{color: red;}
注意：CSS只有`/* */`这种注释，没有`//`这种注释。而且注释要写在`<style>`标签里面才算生效哦。 注意：CSS只有`/* */`这种注释，没有`//`这种注释。而且注释要写在`<style>`标签里面才算生效哦。
接下来，我们要开始真正地讲css的知识咯。 接下来，我们要开始真正地讲css的知识咯。
css怎么学？CSS有两个知识部分： css怎么学？CSS有两个知识部分：
1） 选择器，怎么选； 1） 选择器，怎么选；
2） 属性，样式是什么 2） 属性，样式是什么
## CSS的一些简单常见的属性 ## CSS的一些简单常见的属性
> 我们先来接触CSS的一些简单常见的属性，因为接下来需要用到。后期会专门用一篇文章来写CSS的属性。 > 我们先来接触CSS的一些简单常见的属性，因为接下来需要用到。后期会专门用一篇文章来写CSS的属性。
@ -231,7 +209,6 @@ color:red;
color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制(后期详细讲)。 color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制(后期详细讲)。
**字号大小：**（fos） **字号大小：**（fos）
```html ```html
@ -261,10 +238,8 @@ font是“字体” weight是“重量”的意思，bold粗。
```html ```html
font-weight: normal; font-weight: normal;
``` ```
normal就是正常的意思。 normal就是正常的意思。
**斜体：**（fsi） **斜体：**（fsi）
```html ```html
@ -279,7 +254,6 @@ italic就是“斜体”。
font-style: normal; font-style: normal;
``` ```
**下划线：**（tdu） **下划线：**（tdu）
```html ```html
@ -294,9 +268,6 @@ decoration就是“装饰”的意思。
text-decoration:none; text-decoration:none;
``` ```
PS：css没啥难的，就是要把属性给记忆准确。
## CSS和HTML结合的方式（样式表） ## CSS和HTML结合的方式（样式表）
CSS和HTML结合的方式，其实就是问你css的代码放在哪里比较合适。CSS代码理论上的位置是任意的，**但通常写在`<style>`标签里**。只要是`<style>`标签里的代码，那就是css代码，浏览器就是这样来进行解析的。 CSS和HTML结合的方式，其实就是问你css的代码放在哪里比较合适。CSS代码理论上的位置是任意的，**但通常写在`<style>`标签里**。只要是`<style>`标签里的代码，那就是css代码，浏览器就是这样来进行解析的。
@ -305,12 +276,11 @@ CSS和HTML的结合方式有3种：
- **行内样式**：在某个特定的标签里采用style**属性**。范围只针对此标签。 - **行内样式**：在某个特定的标签里采用style**属性**。范围只针对此标签。
- **内嵌样式表**：在页面的head里采用`<style>`**标签**。范围针对此页面。 - **内嵌样式表**：在页面的head里采用`<style>`**标签**。范围针对此页面。
- **引入外部样式表css文件**的方式。这种方式又分为两种： - **引入外部样式表css文件**的方式。这种引入方式又分为两种：
- 1、采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>` - 1、采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
- 2、采用import，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;` - 2、采用import，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
> 两种引入样式方式的区别：外部样式表中不能写<link>标签,但是可以写import语句。 > 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写import语句。
下面来详细的讲一讲这三种方式。 下面来详细的讲一讲这三种方式。
@ -320,8 +290,8 @@ CSS和HTML的结合方式有3种：
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。 该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
举例： 举例：
```html ```html
<p style="color:white;background-color:red">我不会就这样轻易的狗带</p> <p style="color:white;background-color:red">我不会就这样轻易的狗带</p>
``` ```
@ -347,8 +317,6 @@ CSS和HTML的结合方式有3种：
</style> </style>
<body> <body>
<p>洗白白</p> <p>洗白白</p>
<p style="color:blue">你懂得</p> <p style="color:blue">你懂得</p>
@ -367,29 +335,33 @@ CSS和HTML的结合方式有3种：
> 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写import语句。 > 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写import语句。
**具体操作如下：** **具体操作如下：**
我们先在html页面的同级目录下新建一个`a.css`文件，那说明这里面的代码全是css代码，此时就没有必要再写`<style>`标签这几个字了。 我们先在html页面的同级目录下新建一个`a.css`文件，那说明这里面的代码全是css代码，此时就没有必要再写`<style>`标签这几个字了。
`a.css`的代码如下： `a.css`的代码如下：
```css ```css
p{ p{
border: 1px solid red; border: 1px solid red;
font-size: 40px; font-size: 40px;
} }
``` ```
上方的css代码中，注意像素要带上px这个单位，不然不生效。 上方的css代码中，注意像素要带上px这个单位，不然不生效。
然后我们在html文件中通过`<link>`标签引入这个css文件就行了。效果如下： 然后我们在html文件中通过`<link>`标签引入这个css文件就行了。效果如下：
![](http://img.smyhvae.com/2015-10-03-css-04.png) ![](http://img.smyhvae.com/2015-10-03-css-04.png)
这里再讲一个补充的知识：link标签的rel属性 这里再讲一个补充的知识：**`<link>`标签的rel属性：**。其属性值有以下两种：
**`<link>`标签的rel属性：**
其属性值有以下两种： - `stylesheet`：定义的样式表
- `stylesheet`：定义的样式表 - `alternate stylesheet`：候选的样式表
- `alternate stylesheet`：候选的样式表
看字面意思可能比较难理解，我们来举个例子，一下子就明白了。 看字面意思可能比较难理解，我们来举个例子，一下子就明白了。
举例： 举例：
现在定义我们来定义3种样式表： 现在我们来定义3个样式表：
a.css：定义一个实线的黑色边框 a.css：定义一个实线的黑色边框
```css ```css
@ -464,7 +436,6 @@ p{
![](http://img.smyhvae.com/2015-10-03-css-06.png) ![](http://img.smyhvae.com/2015-10-03-css-06.png)
再比如说，我想让“生命壹号学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么我可以用`<span>`标签把“前端”这两个字围起来，然后给`<span>`标签加一个标签选择器。 再比如说，我想让“生命壹号学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么我可以用`<span>`标签把“前端”这两个字围起来，然后给`<span>`标签加一个标签选择器。
代码如下： 代码如下：
@ -510,7 +481,6 @@ p{
![](http://img.smyhvae.com/2015-10-03-css-08.png) ![](http://img.smyhvae.com/2015-10-03-css-08.png)
id选择器的选择符是“#”。 id选择器的选择符是“#”。
任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是： 任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
@ -619,12 +589,10 @@ css中用`.`来表示类。举例如下：
![](http://img.smyhvae.com/20170711_1706.png) ![](http://img.smyhvae.com/20170711_1706.png)
上图所示，css和js都在用同一个id，会出现不好沟通的情况。 上图所示，css和js都在用同一个id，会出现不好沟通的情况。
我们记住这句话：**类上样式，id上行为**。意思是说，`class`属性交给css使用，`id`属性交给js使用。 我们记住这句话：**类上样式，id上行为**。意思是说，`class`属性交给css使用，`id`属性交给js使用。
**上面这三种选择器的区别：** **上面这三种选择器的区别：**
- 标签选择器针对的是页面上的一类标签。 - 标签选择器针对的是页面上的一类标签。
@ -637,7 +605,6 @@ css中用`.`来表示类。举例如下：
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。 效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
举例： 举例：
```css ```css
@ -652,7 +619,6 @@ css中用`.`来表示类。举例如下：
![](http://img.smyhvae.com/2015-10-03-css-09.png) ![](http://img.smyhvae.com/2015-10-03-css-09.png)
## CSS的几种高级选择器 ## CSS的几种高级选择器
**高级选择器：** **高级选择器：**
@ -664,11 +630,8 @@ css中用`.`来表示类。举例如下：
下面详细讲一下这几种高级（扩展）选择器。 下面详细讲一下这几种高级（扩展）选择器。
### 1、后代选择器: 定义的时候用空格隔开 ### 1、后代选择器: 定义的时候用空格隔开
对于`E F`这种格式，表示**所有属于E元素后代的F元素**，有这个样式。空格就表示后代。 对于`E F`这种格式，表示**所有属于E元素后代的F元素**，有这个样式。空格就表示后代。
后代选择器，就是一种平衡：共性、特性的平衡。当要把**某一个部分的所有的什么**，进行样式改变，就要想到后代选择器。 后代选择器，就是一种平衡：共性、特性的平衡。当要把**某一个部分的所有的什么**，进行样式改变，就要想到后代选择器。
@ -687,12 +650,10 @@ css中用`.`来表示类。举例如下：
</style> </style>
``` ```
空格就表示后代。`.div1 p` 表示`.div1`的后代所有的`p`。 空格就表示后代。`.div1 p` 表示`.div1`的后代所有的`p`。
这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。 这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。
举例： 举例：
```html ```html
@ -750,18 +711,14 @@ css中用`.`来表示类。举例如下：
上面css中的`div div p`，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到 p元素的祖先列表： 上面css中的`div div p`，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到 p元素的祖先列表：
![](http://img.smyhvae.com/20170711_1836.png) ![](http://img.smyhvae.com/20170711_1836.png)
讲到这里，我们再提一个sublme的快捷键。 讲到这里，我们再提一个sublme的快捷键。
在sublime中输入`p#haha`，按tab键后，会生成`<p id="haha"></p>`。 在sublime中输入`p#haha`，按tab键后，会生成`<p id="haha"></p>`。
在sublime中输入`p.haha`，按tab键后，会生成`<p class="haha"></p>`。 在sublime中输入`p.haha`，按tab键后，会生成`<p class="haha"></p>`。
### 2、交集选择器：定义的时候紧密相连 ### 2、交集选择器：定义的时候紧密相连
定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如`div.haha`，再比如`p.special`。 定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如`div.haha`，再比如`p.special`。
@ -808,10 +765,8 @@ h3.special{
![](http://img.smyhvae.com/20170711_1852.png) ![](http://img.smyhvae.com/20170711_1852.png)
注意，交集选择器没有空格。所以，没有空格的`div.red`（交集选择器）和有空格的`div .red`（后代选择器）不是一个意思。 注意，交集选择器没有空格。所以，没有空格的`div.red`（交集选择器）和有空格的`div .red`（后代选择器）不是一个意思。
交集选择器可以连续交：（一般不要这么写） 交集选择器可以连续交：（一般不要这么写）
```css ```css
@ -822,9 +777,6 @@ h3.special.zhongyao{
上面这种写法，是 IE7 开始兼容的，IE6 不兼容。 上面这种写法，是 IE7 开始兼容的，IE6 不兼容。
### 3、并集选择器：定义的时候用逗号隔开 ### 3、并集选择器：定义的时候用逗号隔开
三种基本选择器都可以放进来。 三种基本选择器都可以放进来。
@ -841,17 +793,14 @@ p,h1,#mytitle,.one{
![](http://img.smyhvae.com/2015-10-03-css-10.png) ![](http://img.smyhvae.com/2015-10-03-css-10.png)
## 一些 CSS3 选择器 ## 一些 CSS3 选择器
> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。暂时先接触一部分。 > 所有的 CSS3 选择器，我们放在 CSS3 的内容里介绍。本文暂时先接触一部分。
PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。
### 浏览器的兼容性问题 ### 浏览器的兼容性问题
> 我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。
IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下： IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下：
- windows xp 操作系统安装的IE6 - windows xp 操作系统安装的IE6
@ -868,12 +817,8 @@ IE： 微软的浏览器，随着操作系统安装的。所以每个windows都
测试结果如下： 测试结果如下：
![](http://img.smyhvae.com/20170711_1939.png) ![](http://img.smyhvae.com/20170711_1939.png)
我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率： 我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率：
- IE9 5.94% - IE9 5.94%
@ -889,7 +834,6 @@ IE： 微软的浏览器，随着操作系统安装的。所以每个windows都
我们可以用「IETester」软件看看css在各个浏览器中的显示效果。 我们可以用「IETester」软件看看css在各个浏览器中的显示效果。
### 1.子代选择器，用符号`>`表示 ### 1.子代选择器，用符号`>`表示
> IE7开始兼容，IE6不兼容。 > IE7开始兼容，IE6不兼容。
@ -922,7 +866,6 @@ div的儿子p。和div的后代p的截然不同。
</div> </div>
``` ```
### 2.序选择器 ### 2.序选择器
> IE8开始兼容；IE6、7都不兼容 > IE8开始兼容；IE6、7都不兼容
@ -976,7 +919,6 @@ div的儿子p。和div的后代p的截然不同。
} }
``` ```
### 3.下一个兄弟选择器 ### 3.下一个兄弟选择器
> IE7开始兼容，IE6不兼容。 > IE7开始兼容，IE6不兼容。
@ -1009,16 +951,13 @@ div的儿子p。和div的后代p的截然不同。
<h3>我是一个标题</h3> <h3>我是一个标题</h3>
``` ```
效果如下： 效果如下：
![](http://img.smyhvae.com/20170711_1950.png) ![](http://img.smyhvae.com/20170711_1950.png)
这种选择器作用不大。 这种选择器作用不大。
##我的公众号 ##我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
@ -1026,4 +965,3 @@ div的儿子p。和div的后代p的截然不同。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.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) ![](http://img.smyhvae.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)

1
02-CSS基础/04-CSS选择器：伪类.md
View File

@ -209,7 +209,6 @@ a标签有4种伪类（即对应四种状态），要求背诵。如下：
当然了，在写`a:link`、`a:visited`这两个伪类的时候，要么同时写，要么同时不写。如果只写`a`属性和`a:link`属性，不规范。 当然了，在写`a:link`、`a:visited`这两个伪类的时候，要么同时写，要么同时不写。如果只写`a`属性和`a:link`属性，不规范。
## 动态伪类举例 ## 动态伪类举例
我们在第一段中描述过，下面这三种动态伪类，针对所有标签都适用。 我们在第一段中描述过，下面这三种动态伪类，针对所有标签都适用。

74
02-CSS基础/05-CSS样式表的继承性和层叠性.md
View File

@ -1,11 +1,8 @@
> 本文最初于2017-07-29发表于[博客园](http://www.cnblogs.com/smyhvae/p/7253929.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 > 本文最初于2017-07-29发表于[博客园](http://www.cnblogs.com/smyhvae/p/7253929.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。 > 以下是正文。
## 本文重点 ## 本文重点
- CSS的继承性 - CSS的继承性
@ -23,7 +20,6 @@
![](http://img.smyhvae.com/20170724_2359.png) ![](http://img.smyhvae.com/20170724_2359.png)
上方代码中，我们给div标签增加红色属性，却发现，div里的每一个子标签`<p>`也增加了红色属性。于是我们得到这样的结论： 上方代码中，我们给div标签增加红色属性，却发现，div里的每一个子标签`<p>`也增加了红色属性。于是我们得到这样的结论：
> 有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是**继承性。** > 有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是**继承性。**
@ -34,35 +30,26 @@
![](http://img.smyhvae.com/20170725_2122.jpg) ![](http://img.smyhvae.com/20170725_2122.jpg)
上图中，我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。于是我们可以得出结论： 上图中，我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。于是我们可以得出结论：
- 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。 - 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
- 关于盒子、定位、布局的属性，都不能继承。 - 关于盒子、定位、布局的属性，都不能继承。
以后当我们谈到css有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。 以后当我们谈到css有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。
## CSS的层叠性 ## CSS的层叠性
很多公司如果要笔试，那么一定会考层叠性。 很多公司如果要笔试，那么一定会考层叠性。
### 层叠性：计算权重 ### 层叠性：计算权重
**层叠性：就是css处理冲突的能力。** 所有的权重计算，没有任何兼容问题！ **层叠性：就是css处理冲突的能力。** 所有的权重计算，没有任何兼容问题！
CSS像艺术家一样优雅，像工程师一样严谨。 CSS像艺术家一样优雅，像工程师一样严谨。
我们来看一个例子，就知道什么叫层叠性了。 我们来看一个例子，就知道什么叫层叠性了。
![](http://img.smyhvae.com/20170725_2132.png) ![](http://img.smyhvae.com/20170725_2132.png)
@ -70,20 +57,20 @@ CSS像艺术家一样优雅，像工程师一样严谨。
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重： 当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
> **id的数量，类的数量，标签的数量** - id 选择器
- 类选择器、属性选择器、伪类选择器
- 标签选择器、伪元素选择器
因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器 因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
针对上面这句话，我们接下来举一些复杂一点的例子。 针对上面这句话，我们接下来举一些复杂一点的例子。
### 层叠性举例 ### 层叠性举例
#### 举例1：计算权重 #### 举例1：计算权重
![](http://img.smyhvae.com/20170725_2138.png) ![](http://img.smyhvae.com/20170725_2138.png)
如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。 如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。
PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！
@ -94,12 +81,10 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。 上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。
#### 举例3：具有实战性的例子 #### 举例3：具有实战性的例子
![](http://img.smyhvae.com/20170726_2221.png) ![](http://img.smyhvae.com/20170726_2221.png)
现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。 现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。
如果写成下面这种代码是无法实现的： 如果写成下面这种代码是无法实现的：
@ -112,14 +97,12 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
![](http://img.smyhvae.com/20170726_2229.png) ![](http://img.smyhvae.com/20170726_2229.png)
上图中，第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果：**所有人当中，让某一个人为红，让其他所有人为蓝。** 上图中，第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果：**所有人当中，让某一个人为红，让其他所有人为蓝。**
这种方式好用是好用，但用好很难。 这种方式好用是好用，但用好很难。
就拿上方代码来举例，为了达到这种效果，即为了防止权重不够，比较稳妥的做法是：**把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。** 就拿上方代码来举例，为了达到这种效果，即为了防止权重不够，比较稳妥的做法是：**把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。**
上面这个例子很具有实战性。 上面这个例子很具有实战性。
#### 举例4：继承性造成的影响 #### 举例4：继承性造成的影响
@ -169,10 +152,8 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
</body> </body>
</html> </html>
``` ```
### 层叠性：权重计算的问题大总结（非常重要） ### 层叠性：权重计算的问题大总结（非常重要）
层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。 层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。
@ -181,14 +162,11 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
![](http://img.smyhvae.com/20170727_2050.png) ![](http://img.smyhvae.com/20170727_2050.png)
上面这个图非常重要，我们针对这个图做一个文字描述： 上面这个图非常重要，我们针对这个图做一个文字描述：
- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。 - 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。 - 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
### CSS样式表的冲突的总结 ### CSS样式表的冲突的总结
- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则） - 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
@ -210,66 +188,53 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
![](http://img.smyhvae.com/2015-10-03-css-16.png) ![](http://img.smyhvae.com/2015-10-03-css-16.png)
### 题目演示 ### 题目演示
CSS的层叠性讲完了，我们来做几个题目吧。 CSS的层叠性讲完了，我们来做几个题目吧。
#### 题目1 #### 题目1
![](http://img.smyhvae.com/20170727_0851.png) ![](http://img.smyhvae.com/20170727_0851.png)
#### 题目2 #### 题目2
![](http://img.smyhvae.com/20170727_0853.png) ![](http://img.smyhvae.com/20170727_0853.png)
#### 题目3 #### 题目3
![](http://img.smyhvae.com/20170727_0855.png) ![](http://img.smyhvae.com/20170727_0855.png)
#### 题目4 #### 题目4
![](http://img.smyhvae.com/20170727_0857.png) ![](http://img.smyhvae.com/20170727_0857.png)
## 权重问题深入 ## 权重问题深入
### 同一个标签，携带了多个类名，有冲突： ### 同一个标签，携带了多个类名，有冲突：
这里需要补充两种冲突的情况： 这里需要补充两种冲突的情况：
- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级： **定义**的样式表中，谁最近，就用谁。 - 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：**定义**的样式表中，谁最近，就用谁。
- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。 - 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
例如：（就近原则） 例如：（就近原则）
![](http://img.smyhvae.com/20170727_2021.png) ![](http://img.smyhvae.com/20170727_2021.png)
上图中，**文字显示的颜色均为红色**。因为这和在标签中的挂类名的书序无关，只和css的顺序有关。 上图中，**文字显示的颜色均为红色**。因为这和在标签中的挂类名的书序无关，只和css的顺序有关。
### !important标记：优先级最高
### !important标记
来看个很简单的例子： 来看个很简单的例子：
![](http://img.smyhvae.com/20170727_2029.png) ![](http://img.smyhvae.com/20170727_2029.png)
上图中，显然id选择器的权重最大，所以文字的颜色是红色。 上图中，显然id选择器的权重最大，所以文字的颜色是红色。
如果我们想让文字的颜色显示为绿色，只需要给标签选择器的加一个`!important`标记，此时其权重为无穷大。如下： 如果我们想让文字的颜色显示为绿色，只需要给标签选择器的加一个`!important`标记，此时其权重为无穷大。如下：
![](http://img.smyhvae.com/20170727_2035_2.png) ![](http://img.smyhvae.com/20170727_2035_2.png)
important是英语里面的“重要的”的意思。我们可以通过如下语法： important是英语里面的“重要的”的意思。我们可以通过如下语法：
``` ```
@ -288,7 +253,6 @@ font-size:60px !important;
错误的语法： 错误的语法：
``` ```
font-size:60px; !important; 不能把!important写在外面 font-size:60px; !important; 不能把!important写在外面
font-size:60px important; 不能忘记感叹号 font-size:60px important; 不能忘记感叹号
@ -298,7 +262,6 @@ font-size:60px important; 不能忘记感叹号
**（1）!important提升的是一个属性，而不是一个选择器** **（1）!important提升的是一个属性，而不是一个选择器**
```css ```css
p{ p{
color:red !important; 只写了这一个!important，所以只有字体颜色属性提升了权重 color:red !important; 只写了这一个!important，所以只有字体颜色属性提升了权重
@ -316,10 +279,8 @@ font-size:60px important; 不能忘记感叹号
所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）。 所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）。
**（2）!important无法提升继承的权重，该是0还是0** **（2）!important无法提升继承的权重，该是0还是0**
比如HTML结构： 比如HTML结构：
```html ```html
@ -352,21 +313,15 @@ font-size:60px important; 不能忘记感叹号
![](http://img.smyhvae.com/20170727_2046.png) ![](http://img.smyhvae.com/20170727_2046.png)
PS：做网站的时候，!important 尽量不要用。否则会让css写的很乱。
PS：! important做站的时候，不允许使用。因为会让css写的很乱。
现在，我们知道层叠性能比较很多东西：
选择器的写法权重，谁离的近，谁写在下面。
## 知识回顾 ## 知识回顾
> 我们把以上内容和上一篇文章做一个简单的知识回顾。 > 我们把以上内容和上一篇文章做一个简单的知识回顾。
### CSS属性 ### CSS属性
> css属性，面试的时候会有笔试，笔试没有智能感应的。 > css属性，面试的时候会有笔试，笔试没有智能提示的。
加粗，倾斜，下划线： 加粗，倾斜，下划线：
@ -376,7 +331,6 @@ font-style:italic;
text-decoration:underline; text-decoration:underline;
``` ```
背景颜色、前景色： 背景颜色、前景色：
``` ```
@ -405,45 +359,34 @@ div,p
* *
``` ```
IE7能够兼容的：儿子选择器、下一个兄弟选择器。如下： IE7能够兼容的：儿子选择器、下一个兄弟选择器。如下：
``` ```
div>p div>p
h3+p h3+p
``` ```
IE8能够兼容的： IE8能够兼容的：
``` ```
ul li:first-child ul li:first-child
ul li:last-child ul li:last-child
``` ```
### css两个性质 ### css两个性质
- 继承性：好的事儿。继承从上到下，哪些能？哪些不能？ - 继承性：好的事儿。继承从上到下，哪些能？哪些不能？
- 层叠性：冲突，多个选择器描述了同一个属性，听谁的？ - 层叠性：冲突，多个选择器描述了同一个属性，听谁的？
再看几个题目： 再看几个题目：
![](http://img.smyhvae.com/20170727_0900.png) ![](http://img.smyhvae.com/20170727_0900.png)
![](http://img.smyhvae.com/20170727_0901.png) ![](http://img.smyhvae.com/20170727_0901.png)
![](http://img.smyhvae.com/20170727_0902.png) ![](http://img.smyhvae.com/20170727_0902.png)
![](http://img.smyhvae.com/20170727_0903.png) ![](http://img.smyhvae.com/20170727_0903.png)
权重问题大总结，最后有个例子，比较难，暂时略掉。
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
@ -451,6 +394,3 @@ ul li:last-child
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/2016040102.jpg)

12
03-CSS进阶/00-准备.md
View File

@ -8,17 +8,15 @@ css 进阶的主要内容如下。
- html 元素的分类和特性 - html 元素的分类和特性
- html 元素默认样式和定制化
- css 选择器 - css 选择器
- css 常见属性 - css 常见属性（非布局样式）
### 2、css 布局相关 ### 2、css 布局相关
- 布局属性和组合解析 - css 布局属性和组合解析
- 常见布局方案介绍 - 常见布局方案
- 三栏布局案例 - 三栏布局案例
@ -50,11 +48,11 @@ css 进阶的主要内容如下。
## 常见问题 ## 常见问题
> 不会css 的前端称之为伪前端。 > 不会 css 的前端称之为伪前端。
- html 元素的嵌套关系是怎么确定的？那些嵌套不可以发生？ - html 元素的嵌套关系是怎么确定的？那些嵌套不可以发生？
比如说，为什么 div 可以放在 a 标签里面？ - 比如说，为什么 div 可以放在 a 标签里面？
- css 选择器的权重是如何计算的？写代码时要注意什么？ - css 选择器的权重是如何计算的？写代码时要注意什么？

6
03-CSS进阶/01-HTML基础回顾.md
View File

@ -7,7 +7,7 @@
- html 元素的嵌套关系 - html 元素的嵌套关系
- html 元素的默认样式和定制化 - html 元素的默认样式和 CSS Reset
- html 常见面试题 - html 常见面试题
@ -126,7 +126,7 @@ div 是最常见的元素，大多数场景下，都可以用div（实在不行
按照内容分类： 按照内容分类：
20191003_1946.png ![](http://img.smyhvae.com/20191003_1946.png)
图片来源：<https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content> 图片来源：<https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content>
@ -140,7 +140,7 @@ div 是最常见的元素，大多数场景下，都可以用div（实在不行
**注意**：在 HTML5 中 `a > div` 是合法的， `div > a > div`是不合法的 ；但是在 html 4.0.1 中， `a > div` 仍然是不合法的。 **注意**：在 HTML5 中 `a > div` 是合法的， `div > a > div`是不合法的 ；但是在 html 4.0.1 中， `a > div` 仍然是不合法的。
## html 元素的默认样式和定制化 ## html 元素的默认样式和 CSS Reset
比如下拉框这种比较复杂的元素，是自带默认样式的。如果没有这个默认样式，则该元素在页面上不会有任何表现，则必然增加一些工作量。 比如下拉框这种比较复杂的元素，是自带默认样式的。如果没有这个默认样式，则该元素在页面上不会有任何表现，则必然增加一些工作量。

11
03-CSS进阶/02-CSS中的非布局样式.md Normal file
View File

@ -0,0 +1,11 @@
## 前言
CSS中，有很多**非布局样式**，这些样式（属性）和与布局无关，包括：
- 字体、字重、颜色、大小、行高
- 背景、边框
- 滚动、换行
- 装饰性属性（粗体、斜体、下划线）等。

11
17-前端综合/03-深圳IT互联网大厂有哪些（2019年版）.md
View File

@ -1,7 +1,7 @@
## 深圳IT互联网大厂有哪些（2019年版） ## 深圳IT互联网大厂有哪些（2019年版）
> 本文更新于201905。 > 本文最初更新于201905。
### 一线大厂 ### 一线大厂
@ -23,14 +23,19 @@
- oppo（深圳） - oppo（深圳）
- 商汤科技（人工智能领域独角兽）
- 平安系列（平安科技、平安寿险、平安产险、平安金融等，各自独立，可分开投简历） - 平安系列（平安科技、平安寿险、平安产险、平安金融等，各自独立，可分开投简历）
- 顺丰 - 顺丰
- 微众银行 - 微众银行
### 独角兽公司
- 商汤科技（人工智能领域的独角兽）
- 超级猩猩（运动健身领域的独角兽）
### 三线大厂 ### 三线大厂
- 有赞（深圳） - 有赞（深圳）