diff --git a/02-CSS/01.md b/02-CSS/01.md deleted file mode 100644 index 6492d7a..0000000 --- a/02-CSS/01.md +++ /dev/null @@ -1,1198 +0,0 @@ - - - -01-CSS图文详解（一）----CSS选择器介绍 - - -## 主要内容 - - - CSS概述 - - CSS和HTML结合的三种方式：`行内样式表`、`内嵌样式表`、`外部样式表` - - CSS四种基本选择器：`标签选择器`、`类选择器`、`ID选择器`、`通用选择器` - - CSS三种扩展选择器：`组合选择器`、`后代选择器`、`伪类选择器` - - CSS样式优先级 - - - - -## 前言 - -现在的互联网前端分三层： - -- HTML：超文本标记语言。从**语义**的角度描述页面**结构**。 -- CSS：层叠样式表。从**审美**的角度负责页面**样式**。 -- JS：JavaScript 。从**交互**的角度描述页面**行为**。 - - - - -## CSS 概述 - -CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，**定义网页的显示效果**。简单一句话：CSS将网页**内容和显示样式进行分离**，提高了显示功能。 - -css的最新版本是css3，我们学习的是css2.1。 因为css3和css2.1不矛盾，必须先学2.1然后学3。 - - -接下来我们要讲一下为什么要使用CSS。 - -**HTML的缺陷：** - -1. 不能够适应多种设备 -2. 要求浏览器必须智能化足够庞大 -3. 数据和显示没有分开 -4. 功能不够强大 - -**CSS 优点：** - -1. 使数据和显示分开 -2. 降低网络流量 -3. 使整个网站视觉效果一致 -4. 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css） - -比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。 - - - -### CSS 整体感知 - - -我们先来看一段简单的css代码： - -```html - - - - - Document - - - -

我是大标题

-

- 我是内容 -

- - - -``` - -解释如下： - -20170710_1604.png - - -我们写css的地方是style标签，就是“样式”的意思，写在head里面。后面的课程中我们将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面。 - -如果在sublime中输入` -``` - -type表示“类型”，text就是“纯文本”，css也是纯文本。 - -但是，如果在sublime中输入`st`或者`style`然后按tab键，可以自动生成的格式如下：（不建议） - -```html - -``` - -css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。 - - - -## CSS语法 - -**语法格式：**（其实就是键值对） - - -```html -选择器{ - 属性名: 属性值; - 属性名: 属性值; -} -``` - - -或者可以写成： - -```css -选择器{ - k:v; - k:v; - k:v; - k:v; -} -选择器{ - k:v; - k:v; - k:v; - k:v; -} -``` - - -**解释：** - -- 选择器代表页面上的某类元素，选择器后一定是大括号。 -- 属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号）。 -- 属性名和冒号之间最好不要有空格（经验）。 -- 如果一个属性有多个值的话，那么多个值用 空格 隔开 - -**举例：** - -```css -p{color: red;} -``` - -**完整版代码举例：** - -```html - - - -

洗白白

-

你懂得

-

我不会就这样轻易的狗带

- -``` -效果： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-01.png) - -### css代码的注释 - -**格式：** - -```html - -``` - -注意：只有`/* */`这种注释，没有`//`这种注释。而且注释要写在` - - - - -

洗白白

-

你懂得

- -``` - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-03.png) - -### 3、CSS和HTML结合方式三：引入外部样式表css文件 - -**引入样式表文件**的方式又分为两种： - - （1）**采用``标签**。例如：`` - - - （2）**采用import**，必须写在` - - -

生命壹号学完了安卓，继续学前端哟

- - -``` - -【总结】需要注意的是： - -（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input。 -（2）无论这个标签藏的多深，一定能够被选择上。 -（3）选择的所有，而不是一个。 - - - -### 2、ID选择器：规定用`#`来定义 - -针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。 - -举例： - -```html -#mytitle{ - border:3px dashed green; -} -``` -效果： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-08.png) - - -id选择器的选择符是“#”。 - -任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是： - -- （1）只能有字母、数字、下划线。 -- （2）必须以字母开头。 -- （3）不能和标签同名。比如id不能叫做body、img、a。 - -另外，特别强调的是：**HTML页面，不能出现相同的id，哪怕他们不是一个类型**。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！ - -**一个标签可以被多个css选择器选择：** - -一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义（第二层含义，后续介绍）。 - -比如，我们可以同时让标签选择器和id选择器作用于同一个标签。如下： - -20170710_1737.png - -然后我们通过网页的审查元素看一下效果： - -20170711_1540.png - -如果选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？ -实际上，css有着非常严格的计算公式，能够处理冲突，这个放到后续介绍。 - - - - -### 3、类选择器：规定用圆点`.`来定义 - -优点：灵活。 - - - -css中用`.`来表示类。举例如下： - -```html -.one{ - width:800px; -} - -``` - -效果： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-07.png) - - -class属性和id非常相似，任何的标签都可以携带class属性。 - -特性1：类选择器可以被多种标签使用。 - -特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下：（正确） - -```html -

我是一个h3啊

-``` - -初学者常见的错误，就是写成了两个class。举例如下：（错误） - -

我是一个h3啊

- - -**类选择器使用的举例：** - -类选择器的使用，能够决定一个人的css水平。 - -比如，我们现在要做下面这样一个页面： - -20170711_1639.png - -正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化。对应css里的代码如下： - -```html - -``` - -然后让每个标签去选取自己想要用的类选择器： - -```html -

段落1

-

段落2

-

段落3

-``` - -也就是说： - -（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。 - -（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。 - -问题：到底用id还是用class？ - -答案：尽可能的用class，除非极特殊的情况可以用id。 - -原因：id是js用的。也就是说，js要通过id属性得到标签，所以css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。 - -举例如下： - -20170711_1706.png - - -上图所示，css和js都在用同一个id，会出现不好沟通的情况。 - -我们记住这句话：**类上样式，id上行为**。意思是说，`class`属性交给css使用，`id`属性交给js使用。 - - -**上面这三种选择器的区别：** - -- 标签选择器针对的是页面上的一类标签。 -- ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。 -- 类选择器可以被多种标签使用。 - -### 4、通配符`*`：匹配任何标签 - -通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。 - -效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。 - - -举例： - -```css -*{ - margin-left:0px; - margin-top:0px; -} - -``` - -效果： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-09.png) - - - -## CSS的几种高级选择器 - -**高级选择器：** - - - 后代选择器：用空格隔开 - - 交集选择器：用`.`隔开 - - 并集选择器（分组选择器）：用逗号隔开 - - 伪类选择器 - -下面详细讲一下这几种高级（扩展）选择器。 - - - -### 1、后代选择器: 定义的时候用空格隔开 - - -对于`E F`这种格式，表示**所有属于E元素后代的F元素**，有这个样式。空格就表示后代。 - -后代选择器，就是一种平衡：共性、特性的平衡。当要把**某一个部分的所有的什么**，进行样式改变，就要想到后代选择器。 - -后代选择器，描述的是祖先结构。 - -看定义可能有点难理解，我们来看例子吧。 - -举例1： - -```html - -``` - - -空格就表示后代。`.div1 p` 表示`.div1`的后代所有的`p`。 - -这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。 - - -举例： - -```html - -``` - -上方代码的意思是说：定义了`

`标签中的``标签中的``标签的样式。 -同理：h3和b和i标签不一定是连续紧挨着的，只要保持一个后代的关联即可。 - -效果： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-11.png) - -或者还有下面这种写法： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-12.png) - -上面的这种写法，`

`标签和``标签并不是紧挨着的，但他们保持着一种后代关系。 - -还有下面这种写法：（含类选择器、id选择器都是可以的） - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-13.png) - -我们在开头说了：**后代选择器，描述的是一种祖先结构**。我们举个例子来说明这句话： - -```html - - - - - Document - - - -
-
-
-
-

我是什么颜色？

-
-
-
-
- - -``` - -上面css中的`div div p`，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到 p元素的祖先列表： - -20170711_1836.png - -讲到这里，我们再提一个sublme的快捷键。 - -在sublime中输入`p.haha`，按tab键后，会生成`

`。 - -在sublime中输入`p#haha`，按tab键后，会生成`

`。 - - - -### 2、交集选择器 - -来看下面这张图就明白了： - -20170711_1851.png - -```css -h3.special{ - color:red; -} -``` - -选择的元素要求同时满足两个条件：必须是h3标签，然后必须是special标签。 - -举例： - -```html - - - - - 交集选择器测试 - - - -

标题1

-

我也是标题

-

我是段落

- - -``` - -效果图：.png - - -注意，交集选择器没有空格。所以，没有空格的`div.red`（交集选择器）和有空格的`div .red`（后代选择器）不是一个意思。 - - -交集选择器可以连续交：（一般不要这么写） - -```css -h3.special.zhongyao{ - color:red; -} -``` - -上面这种写法，是 IE7 开始兼容的，IE6 不兼容。 - -交集选择器，我们一般都是以标签名开头，比如`div.haha` 比如`p.special`。 - - - -### 3、并集选择器：定义的时候用逗号隔开 - -三种基本选择器都可以放进来。 - -举例： - -```css -p,h1,.one,#mytitle{ - color:red; -} -``` - -效果： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-10.png) - - -### 4、伪类选择器（待定） - -对于``标签，其对应几种不同的状态： -- `link`：超链接点击之前 -- `visited`：超链接点击之后 -- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点） -- `hover`：鼠标放到某个标签上的时候 -- `active`：点击某个标签没有松鼠标时 - -CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种： - - 静态伪类：**只能用于超链接** - - 动态伪类：针对所有标签都适用 - -下面来分别讲一下这两种伪类选择器。 - -**（1）静态伪类：** - -用于以下两个状态： - - `link`：超链接点击之前 - - `visited`：超链接点击之后 - - > **注意：上面这两个状态只能使用于超链接**。 - -举例： - -```html - -``` - -效果： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-01.gif) - -上图中，超链接点击之前是红色，点击之后是绿色。 - - -问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？ -答： - -**`a{}`和`a:link{}`的区别：** - - - `a{}`定义的样式针对所有的超链接(包括括锚点) - - `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点) - -**（2）动态伪类: ** - -用于以下几种状态： - - `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点） - - `hover`：鼠标放到某个标签上的时候 - - `active`：点击某个标签没有松鼠标时 - - > 注意：上面这三种状态针适用于所有的标签。 - -举例： - -```html - -``` - -效果： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-02.gif) - - -利用这个`hover`属性，我们同样对表格做一个样式的设置： -表格举例： - -```html - - - - - - - - - Document - - - - - - - - - - - - - - - - - - - - - - - -
- - - -``` - -效果： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-04.gif) - - - -## 一些 CSS3 选择器 - -> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。 - -### 1.儿子选择器 - -> IE7开始兼容，IE6不兼容。 - -```css -div>p{ - color:red; -} -``` - -div的儿子p。和div的后代p的截然不同。 - -能够选择： - -```html -
-

我是div的儿子

-
-``` - -不能选择： - -```html -
-
    -
  • -

    我是div的重孙子

    -
    • -
-
-``` - - - -### 2.序选择器 - -> IE8开始兼容；IE6、7都不兼容 - -选择第1个li： - -```html - -``` - -选择最后一个1i： - -```css - ul li:last-child{ - color:blue; - } -``` - -由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名： - -```html -
    -
  • 项目
    • -
  • 项目
    • -
  • 项目
    • -
  • 项目
    • -
  • 项目
    • -
  • 项目
    • -
  • 项目
    • -
  • 项目
    • -
  • 项目
    • -
  • 项目
    • -
-``` - -用类选择器来选择第一个或者最后一个： - -```html - ul li.first{ - color:red; - } - - ul li.last{ - color:blue; - } -``` - - -### 3.下一个兄弟选择器 - -> IE7开始兼容，IE6不兼容。 - -+表示选择下一个兄弟 - -```html - -``` - -选择上的是h3元素后面紧挨着的第一个兄弟。 - -```html -

我是一个标题

-

我是一个段落

-

我是一个段落

-

我是一个段落

-

我是一个标题

-

我是一个段落

-

我是一个段落

-

我是一个段落

-

我是一个标题

-

我是一个段落

-

我是一个段落

-

我是一个段落

-

我是一个标题

-``` - - - -s - - - - - - - - - - - - - - - - - -## 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) - - > 注：本文将持续更新。 - -##我的公众号 - -下图是我的微信公众号（生命团队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) - - -