update css01
This commit is contained in:
qianguyihao
parent
94981bf8fb
commit
3723fd4ecd
@ -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
|
||||
|
||||
|
||||
然后我们通过网页的审查元素看一下效果：
|
||||
|
||||
20170711_1540.png
|
||||
|
||||
如果选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？
|
||||
实际上，css有着非常严格的计算公式，能够处理冲突，这个放到后续介绍。
|
||||
|
||||
|
||||
现在，假设选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？
|
||||
实际上，css有着非常严格的计算公式，能够处理冲突.
|
||||
|
||||
一个标签可以被多个css选择器选择，共同作用，这就是“**层叠式**”的第一层含义（第一层含义和第二层含义，放到css基础的第三篇文章里讲）。
|
||||
|
||||
|
||||
### 3、类选择器：规定用圆点`.`来定义
|
||||
|
||||
优点：灵活。
|
||||
|
||||
、针对**你想要的所有**标签使用。优点：灵活。
|
||||
|
||||
|
||||
css中用`.`来表示类。举例如下：
|
||||
@ -563,11 +563,11 @@ css中用`.`来表示类。举例如下：
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化。对应css里的代码如下：
|
||||
|
||||
@ -624,7 +627,7 @@ class属性和id非常相似，任何的标签都可以携带class属性。
|
||||
|
||||
举例如下：
|
||||
|
||||
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`）。
|
||||
|
||||
我会很感激第一批关注我的人。**此时，年轻的我和你，一无所有；而后，富裕的你和我，满载而归。**
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
@ -680,8 +680,8 @@ url ( url ) : IE6.0 用户自定义光标。使用绝对或相对 url
|
||||
|
||||
##我的公众号
|
||||
|
||||
下图是我的微信公众号（生命团队id：`vitateam`），欢迎有心人关注。<font color=#0000ff>**博客园分享技术，公众号分享心智**</font>。
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
|
||||
|
||||
我会很感激第一批关注我的人。**此时，年轻的我和你，一无所有；而后，富裕的你和我，满载而归。**
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
@ -38,6 +38,11 @@
|
||||
|
||||
## CSS的层叠性
|
||||
|
||||
|
||||
层叠性的含义：一个标签可以被多个
|
||||
|
||||
|
||||
|
||||
### 层叠性：计算权重
|
||||
|
||||
很多公司如果要笔试，那么一定会考层叠性。
|
||||
@ -427,6 +432,13 @@ img
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -453,5 +453,15 @@ border-left-width: 0;
|
||||
|
||||
|
||||
|
||||
##
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -962,3 +962,13 @@ text-indent: 2em;
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
16
推荐链接.md
16
推荐链接.md
@ -22,3 +22,19 @@
|
||||
- 交付
|
||||
|
||||
|
||||
|
||||
|
||||
### 2018-01-09
|
||||
|
||||
- [翻译 | 像 JavaScript 一样思考](http://www.ituring.com.cn/article/497284)
|
||||
|
||||
在MacTalk的小密圈里看到有人分享。
|
||||
|
||||
|
||||
|
||||
- [大前端公共知识杂谈](https://time.geekbang.org/column/article/241)
|
||||
|
||||
|
||||
- [小白谈数据脱敏](http://www.54tianzhisheng.cn/2017/10/28/Data-Desensitization/)
|
||||
|
||||
- [不管做什么，和对的人在一起最重要]()
|
||||
Loading…
Reference in New Issue
Block a user