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

update css01

Browse Source
This commit is contained in:
qianguyihao
2018-01-09 18:15:24 +08:00
parent 94981bf8fb
commit 3723fd4ecd
6 changed files with 83 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
02-CSS/01-CSS样式表和选择器.md
View File

@@ -1,15 +1,17 @@
> 本文最初于2015-10-01发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新。以下是正文。
> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
## 主要内容
## 本文主要内容
- CSS概述
- CSS和HTML结合的三种方式：`行内样式表`、`内嵌样式表`、`外部样式表`
- CSS四种基本选择器：`标签选择器`、`类选择器`、`ID选择器`、`通用选择器`
- CSS三种扩展选择器：`组合选择器`、`后代选择器`、`伪类选择器`
- CSS几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器`、`伪类选择器`
- CSS样式优先级
@@ -24,8 +26,6 @@
- JS：JavaScript 。从**交互**的角度描述页面**行为**。
## CSS 概述
CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，**定义网页的显示效果**。简单一句话：CSS将网页**内容和显示样式进行分离**，提高了显示功能。
@@ -299,17 +299,17 @@ text-decoration:none;
PS：css没啥难的，就是要把属性给记忆准确。
## CSS和HTML结合的方式
## CSS和HTML结合的方式（样式表）
CSS和HTML结合的方式，其实就是问你css的代码放在哪里比较合适。CSS代码理论上的位置是任意的，**但通常写在`<style>`标签里**。只要是`<style>`标签里的代码，那就是css代码，浏览器就是这样来进行解析的。
CSS和HTML的结合方式有3种：
- **行内样式**：采用style属性。范围只针对此标签适用
- **内嵌样式表**：采用`<style>`标签完成。范围针对此页面
- **行内样式**：在某个特定的标签里采用style**属性**。范围只针对此标签。
- **内嵌样式表**：在页面的head里采用`<style>`**标签**。范围针对此页面。
- **引入外部样式表css文件**的方式。这种方式又分为两种：
1、采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
2、采用import，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
- 1、采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
- 2、采用import，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
> 两种引入样式方式的区别：外部样式表中不能写<link>标签,但是可以写import语句。
@@ -441,16 +441,16 @@ CSS的选择器分为两大类：基本选择题和扩展选择器。
**基本选择器：**
- 标签选择器：针对一类标签
- ID选择器：针对特定的一个标签使用
- 类选择器：针对你想要的所有标签使用
- 标签选择器：针对**一类**标签
- ID选择器：针对某**一个**特定的标签使用
- 类选择器：针对**你想要的所有**标签使用
- 通用选择器（通配符）：针对所有的标签都适用（不建议使用）
下面来分别讲一讲。
### 1、标签选择器：选择器的名字代表html页面上的标签
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“**共性**”，无法描述某一个元素的“个性”。
@@ -494,7 +494,9 @@ p{
【总结】需要注意的是：
（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input。
（2）无论这个标签藏的多深，一定能够被选择上。
（3）选择的所有，而不是一个。
@@ -527,26 +529,24 @@ id选择器的选择符是“#”。
**一个标签可以被多个css选择器选择：**
一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义（第二层含义，后续介绍）。
比如，我们可以同时让标签选择器和id选择器作用于同一个标签。如下：
20170710_1737.png
![](http://img.smyhvae.com/20170710_1737.png)
然后我们通过网页的审查元素看一下效果：
20170711_1540.png
如果选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？
实际上，css有着非常严格的计算公式，能够处理冲突，这个放到后续介绍。
![](http://img.smyhvae.com/20170711_1540.png)
现在，假设选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？
实际上，css有着非常严格的计算公式，能够处理冲突.
一个标签可以被多个css选择器选择，共同作用，这就是“**层叠式**”的第一层含义（第一层含义和第二层含义，放到css基础的第三篇文章里讲）。
### 3、类选择器：规定用圆点`.`来定义
优点：灵活。
、针对**你想要的所有**标签使用。优点：灵活。
css中用`.`来表示类。举例如下：
@@ -563,11 +563,11 @@ css中用`.`来表示类。举例如下：
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-07.png)
class属性和id非常相似，任何的标签都可以携带class属性。
和id非常相似，任何的标签都可以携带id属性和class属性。class属性的特点：
特性1：类选择器可以被多种标签使用。
- 特性1：类选择器可以被多种标签使用。
特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下：（正确）
- 特性2：同一个标签可以使用多个类选择器。用**空格**隔开。举例如下：（正确）
```html
<h3 class="teshu zhongyao">我是一个h3啊</h3>
@@ -575,7 +575,10 @@ class属性和id非常相似，任何的标签都可以携带class属性。
初学者常见的错误，就是写成了两个class。举例如下：（错误）
```html
<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>
```
**类选择器使用的举例：**
@@ -584,7 +587,7 @@ class属性和id非常相似，任何的标签都可以携带class属性。
比如，我们现在要做下面这样一个页面：
20170711_1639.png
![](http://img.smyhvae.com/20170711_1639.png)
正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化。对应css里的代码如下：
@@ -624,7 +627,7 @@ class属性和id非常相似，任何的标签都可以携带class属性。
举例如下：
20170711_1706.png
![](http://img.smyhvae.com/20170711_1706.png)
上图所示，css和js都在用同一个id，会出现不好沟通的情况。
@@ -1205,9 +1208,9 @@ div的儿子p。和div的后代p的截然不同。
##我的公众号
下图是我的微信公众号（生命团队id：`vitateam`），欢迎有心人关注。<font color=#0000ff>**博客园分享技术，公众号分享心智**</font>。
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
我会很感激第一批关注我的人。**此时，年轻的我和你，一无所有；而后，富裕的你和我，满载而归。**
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](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)

4
02-CSS/02-CSS属性.md
View File

@@ -680,8 +680,8 @@ url ( url ) :　 IE6.0 用户自定义光标。使用绝对或相对 url
##我的公众号
下图是我的微信公众号（生命团队id：`vitateam`），欢迎有心人关注。<font color=#0000ff>**博客园分享技术，公众号分享心智**</font>。
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
我会很感激第一批关注我的人。**此时，年轻的我和你，一无所有；而后，富裕的你和我，满载而归。**
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](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)

12
02-CSS/03-CSS的继承性和层叠性.md → 02-CSS/03-CSS样式表的继承性和层叠性.md
View File

@@ -38,6 +38,11 @@
## CSS的层叠性
层叠性的含义：一个标签可以被多个
### 层叠性：计算权重
很多公司如果要笔试，那么一定会考层叠性。
@@ -427,6 +432,13 @@ img
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

12
02-CSS/04-盒子模型.md
View File

@@ -453,5 +453,15 @@ border-left-width: 0;
##
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

10
02-CSS/05-浮动.md
View File

@@ -962,3 +962,13 @@ text-indent: 2em;
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)