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) + + +