From b464dbb4e2c96ccf8cbe9692bc43722db792659a Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Thu, 13 Jul 2017 17:28:20 +0800 Subject: [PATCH] Add file css --- 00-前端工具/02-推荐链接.md | 10 + 01-html/01-html标签图文详解（一）.md | 32 + .../01-CSS图文详解（一）----CSS选择器介绍.md | 1038 +++++++++++++++++ 3 files changed, 1080 insertions(+) create mode 100644 00-前端工具/02-推荐链接.md create mode 100644 02-CSS/01-CSS图文详解（一）----CSS选择器介绍.md diff --git a/00-前端工具/02-推荐链接.md b/00-前端工具/02-推荐链接.md new file mode 100644 index 0000000..3dce331 --- /dev/null +++ b/00-前端工具/02-推荐链接.md @@ -0,0 +1,10 @@ + + + +积累平时看到的一些好的前端文章。 + +## 2017-07-13 + +- [前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions) + +在逛公众号「前端大全」的时候发现的，然后顺着找到了对应的GitHub链接。面试题有答案哦。 \ No newline at end of file diff --git a/01-html/01-html标签图文详解（一）.md b/01-html/01-html标签图文详解（一）.md index d6577a9..408c8e8 100644 --- a/01-html/01-html标签图文详解（一）.md +++ b/01-html/01-html标签图文详解（一）.md @@ -969,6 +969,7 @@ img: 代表的就是一张图片。是单边标记。 - `src`属性：指图片的路径。 在写**图片的路径**时，有两种写法： + 写法一：**相对路径**。相对当前页面所在的路径。两个标记.和.. ,分表代表当前目录和父路径。 举例1： @@ -1035,6 +1036,37 @@ aaa/../bbb/1.jpg ``` 各位自己打开上面的网络连接看看是啥。 + + +**相对路径和绝对路径的总结：** + +相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。 +相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。 + +问题：我的网页在C盘，图片却在D盘，能不能插入呢？ + +答案： 用相对路径不能，用绝对路径也不能。 + +注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。 + +下面的方法是行的，但是没有任何工程上的意义，这是因为服务器没有盘符，linux系统没有盘符： + +```html + +``` + +总结一下： + +- 我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。 + +- 相对路径，就是../ image/ 这种路径。从自己出发，找到别人； + +- 绝对路径，就是http://开头的路径。 + +- 绝对不允许使用file://开头的东西，这个是完全错误的！ + + + 再来看看img标签的其他属性： diff --git a/02-CSS/01-CSS图文详解（一）----CSS选择器介绍.md b/02-CSS/01-CSS图文详解（一）----CSS选择器介绍.md new file mode 100644 index 0000000..b57c01e --- /dev/null +++ b/02-CSS/01-CSS图文详解（一）----CSS选择器介绍.md @@ -0,0 +1,1038 @@ + + +文件名：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是此标签在此页面上的唯一标识。 +- 类选择器可以被多种标签使用。 + + + + + + + +## 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标签。 + +交集选择器，我们一般都是以标签名开头，比如`div.haha` 比如`p.special`。 + +注意，交集选择器没有空格。所以，没有空格的`div.red`（交集选择器）和有空格的`div .red`（后代选择器）不是一个意思。 + + +交集选择器可以连续交：（一般不要这么写） + +```css +h3.special.zhongyao{ + color:red; +} +``` + +上面这种写法，是 IE7 开始兼容的，IE6 不兼容。 + + + + + + +### 3、并集选择器（分组选择器）：定义的时候用逗号隔开 + +三种基本选择器都可以放进来。 + +举例： + +```css +p,h1,.one,#mytitle{ + color:red; +} +``` + +效果： + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-10.png) + + + + + +### 4、通配符`*`：匹配任何标签 + +通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。 + +效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。 + + +举例： + +```css +*{ + margin-left:0px; + margin-top:0px; +} + +``` + +效果： + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-09.png) + + +### 3、伪类选择器 + +对于``标签，其对应几种不同的状态： +- `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) + +## 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) + + +