《jQuery学习教程》

发表于 2016-07-31 | 分类于前端

前言

网上学习JS的过程告一段落，然后就马不停蹄的开始找JS框架和库的教程（感觉知乎上很多学习课程都是不负责任推荐，有点怀疑他们本身有没有看过那些推荐的教程。当然了，也可能是那些课程仅仅是不适合我。），找了一圈下来（网易云课堂、慕课网、极客学院、codecademy、free code camp等）没有发现适合的，要么讲的太简单了，要么信息量太大了。这时候，终于想起了w3school。以下的学习内容大部分都是基于这上面的，需要更详细的内容可以上w3school查看。

课程章节

jQuery介绍

关键词：简介、安装、语法、选择器、事件、名称冲突

简介：jQuery是一个轻量级的JavaScript库，能极大的简化JavaScript编程，宗旨是“write less, do more”；包含的功能非常多（1. HTML元素选取；2. HTML元素操作；3. CSS操作；4. HTML事件函数；5. JavaScript特效和动画；6. HTML DOM遍历和修改；7. AJAX；8. Utilities；）；
安装：可以将jQuery库下载到本地引用，也可以直接引用Microsoft或者google的CDN；使用引用CDN的方式有一个很大的优势就是许多用户在访问其他站点的时候已经加载过jQuery，结果就是当这些人访问站点时，会直接从缓存中加载jQuery，从而减少加载时间。而且，大多数CDN都可以确保用户在请求文件时，从最近的服务器上返回响应，从而提高加载速度；
语法：语法形式为$(selector).action()，其中美元符号定义了jQuery，选择符（seclector）查询出符合条件的html元素，action函数对筛选出来的元素进行操作；举个最常见的例子：$(document).ready(function(){});这段代码表示在整个页面加载完成后再执行其中的操作；
选择器：常见的选择器有以下几种：
1. 元素选择器：例如$('p')表示选取<p>元素；$('p.intro')表示选择类别为intro的<p>元素；
2. 属性选择器：例如$("[href]")表示选取所有带有href属性的元素；$("[href='#']")表示选择所有带有href值等于#的元素；$("[href$='.jpg']")表示选择所有href值以.jpg结尾的元素；
3. 更多是选择器参考jQuery选择器手册。
事件：jQuery事件处理方法是jQuery的核心函数，事件处理程序指的是当HTML中发生某些事件所调用的方法，也叫作“触发”；（通常把jQuery代码放在<head>部分的事件处理方法中；详细的事件参考jQuery事件手册
名称冲突：由于其他库也可能使用$符号，那么就会引起冲突，jQuery中使用noConflict()方法来解决这个问题；
注意：为了使代码更容易维护，以下事项需要注意：
1. 把所有的jQuery代码置于事件处理函数中；
2. 把所有事件处理函数置于文档就绪事件处理器中；
3. 把jQuery代码置于单独的.js文件中;
4. 如果存在名称冲突，则重命名jQuery库；

实例及代码

注意：由于CodePen后台提供了jQuery的链接，所以在面板上看不到引入库的这一段代码。

小测试

本节主要是关于jQuery的简单介绍，其中选择器及事件为重点内容，可以查看手册后挑几个练习，使得具有最基本的功能：

下载jQuery库后本地引用或者直接引用链接；

具有基本的选择器及事件函数；

jQuery效果

关键词：隐藏显示，淡入淡出，滑动，动画，stop()，Callback, Chaining

隐藏显示：方法为hide(), show()，使用语法为$(selector).hide(speed, callback)，其中speed可以是slow，fast或者毫秒；而callback表示的是完成这个动作之后执行的函数；除了这两个方法之外，可以用toggle()的方法来切换显示隐藏，效果不错；
淡入淡出：方法为fadeIn(), fadeOut(), fadeToggle(), fadeTo()，使用语法为$(selector).fadeIn(speed, callback)，其中speed和callback的理解和上面的一样；其中fadeTo()方法略有不同，语法为$(selector).fadeTo(speed,opacity,callback)，表示的是将选择出的元素的透明度变成目标值；
滑动：方法为slideDown(), slideUp(), slideToggle()使用语法为$(selector).slideDown(speed, callback)，其中speed和callback的解释同上；
动画：方法为animate()，使用语法为$(selector).animate({params}, speed, callback)，其中params参数定义形成动画的css属性，speed和callback的含义解释同上；其中属性的动画值可以设置成"show","hide","toggle"，具体见实例；如果需要实现步骤有先后的动画，那么可以通过编写多个animate()方法，jQuery就会逐一运行这些代码，这种功能叫做队列功能；animate方法几乎能操作所有的CSS属性，但是需要注意的是需要使用Camel标记法来书写属性名，比如paddingLeft,marginRight等；
stop(): 此方法用于停止动画或者效果，适用于所有jQuery效果函数，语法为$(selector).stop(stopAll,goToEnd)，其中可选参数stopAll规定是否应该清除动画队列，默认是false，即仅停止活动的动画，但允许队列中的其他动画执行；可选参数goToEnd表示是否立即完成当前动画，默认为false；
Callback：此函数在当前动画100%完成之后执行；因为JS语句是逐一执行的，为了避免因为动画还没执行完成而造成动画与之后的语句之间可能产生的错误或者页面冲突，建议以参数的形式添加Callback函数；
Chaining：Chaining允许我们在一条语句中添加多个方法，例如$('p').css('color', 'red').slideUp(2000).slideDown(2000);，这是p元素就会先改变css样式，然后收缩，最后张开；为了易读性及格式的美观，可以通过换行及空格来美化；

实例及代码

小测试

利用这节课所学的知识点，重现具有以上功能的div。

小问题

既然很多方法中已经都有callback函数的可选参数来达到链式运动的目的，那么为什么jQuery还需要有链式运动的功能？

1. callback函数可以是任意函数，函数改变的对象可以是任意对象；
2. 链式运动改变的对象是同一元素，链式运动的写法更简单；
3. 还有类似功能的是动画的队列功能，不过动画改变的是具体的css属性；

jQuery HTML

关键词：获取、设置、添加、删除、css类、css()、尺寸

获取:用于获取内容的DOM操作方法主要有三个，获取属性值的方法主要有一个，分别是：
1. text(): 设置或返回所选元素的文本内容；
2. html(): 设置或者返回所选元素的内容（包括html标签）；
3. val(): 设置或返回表单字段的值；
4. attr(): 用于获取属性值；
设置：设置内容也是用上一节提到的三个函数，不过需要在括号中加入需要设置的内容，具体方法可见例子；同时需要知道，这三个jQuery方法都拥有回调函数，函数有两个参数，分别为被选元素列表中当前元素的下标以及原始值，text()、html() 以及 val() 的回调函数；利用attr()来设置属性时可以同时设置多个属性，属性之间利用逗号隔开，此方法同样具有回调函数；
添加：利用jQuery可以很容易的添加新元素或者新内容，方法如下：
1. append()：在被选元素的结尾插入内容或元素；
2. prepend()：在被选元素的开头插入内容或元素；
3. after()：在被选元素之后插入内容或元素；
4. before()：在被选元素之前插入内容或元素；
删除：删除元素或内容主要通过以下两个jQuery方法：
1. remove()：删除被选元素及其子元素，括号中可添加选择器，用于删除符合选择器条件的元素及其子元素；
2. empty(): 从被选元素中删除子元素；
css类：通过jQuery可以很容易对css元素进行操作，主要方法有：
1. addClass()：向被选元素添加一个或多个类（添加多个类的时候类名称之间用空格隔开）；
2. removeClass()：从被选元素删除一个或多个类；
3. toggle()：对被选元素添加/删除类的切换操作；
4. css()：设置或返回被选元素的一个或多个样式属性，语法为css('propertyName')如果有多个满足被选条件，则只返回第一个元素的属性；如需设置CSS属性，则需使用语法为css('propertyName', 'value')，此时将所有满足条件的元素的样式都设置成目标样式；
尺寸：通过jQuery很容易处理元素和浏览器窗口的尺寸，主要的方法如下：
1. width()：设置或返回元素的宽度（不包括内边距、边框和外边距），如果对象为document或者window，则表示返回HTML文档或者浏览器窗口的宽度和高度；如果在括号中加入数字，则表示将对应的尺寸设置为对应的值；
2. height()：设置或返回元素的高度（不包括内边距、边框和外边距）；
3. innerWidth()：返回元素的宽度（包括内边距）；
4. innerHeight()：返回元素的高度（包括内边距）；
5. outerWidth()：返回元素的宽度（包括内边距和边框），如果括号中增加参数‘true’则表示返回包括内外边距及边框的宽度；
6. outerHeight()：返回元素的高度（包括内边距和边框），如果括号中增加参数‘true’则表示返回包括内外边距及边框的高度；

实例及代码

本小程序具有的功能：

点击第一个按钮，能在方框中添加一个list，list的内容为输入框中的内容，且添加都是从头开始添加；

点击第二个按钮，移除方框中的一个list，且每次移除都是移除第一个；

点击第三个按钮能够改变方框中list的样式，具体为改变字体、字体颜色及list的样式；

点击第四个按钮能够改变方框的尺寸；

小问题

利用append()及after()来添加内容的话，有何不同？

前者是在所选元素的结尾处添加内容，也就是说，并没有新增加一个节点；而后者则在所选元素的后面增加内容，很显然这时候增加了一个节点。可以通过一个很小的例子来证明，局部代码如下：

<p>This is a paragraph!</p>

<p>This is a paragraph!</p>
hello!                           //利用after()来添加 "Hello!"

<p>
This is a paragraph!
Hello!                          //利用append()来添加 "Hello!"
</p>

小测试

通过本节的学习，应该已经知道了利用jQuery来控制html元素的添加与删除以及css样式的设置，那么可以从添加、删除及设置样式的方法中任选几个来制作一个和上面所示类似功能的程序。

jQuery遍历

关键词：遍历、祖先、后代、同胞、过滤

遍历：用于根据其相对于其他元素的关系来查找或者选取HTML元素；
祖先：祖先元素包括父元素、祖父元素等等，常用的方法为：
1. parent()：返回被选元素的直接父元素；
2. parents()：返回被选元素的所有祖先元素，其中甚至包括文档的根元素（即)；
3. parentsUntil()：返回介于两个给定元素之间的祖先元素；
后代：与祖先相对的，后代指的是子、孙、曾孙等，常用的方法为：
1. children()：返回被选元素的直接子元素；
2. find()：返回被选元素的被find的元素，包括所有后代；
同胞：同胞拥有相同的父元素，常用的方法为：
1. siblings()：返回所有被选元素的同胞元素；
2. next()：返回被选元素的下一个同胞元素；
3. nextAll()：返回被选元素的所有跟随的同胞元素；
4. nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素；
5. prev()：返回被选元素的上一个同胞元素；
6. prevAll():返回被选元素的所有前面的同胞元素；
7. prevUntil()：返回介于两个给定参数之间的所有的同胞元素；
过滤：缩小搜索元素的范围，常用的方位有以下几种：
1. first()：返回被选元素的首个子元素；
2. last()：返回被选元素的最后一个元素；
3. eq()：返回被选元素中带有指定索引号的元素；
4. filter()：返回符合匹配标准的元素集合；
5. not()：返回不匹配标准的所有元素集合；

代码及实例

注意：
在使用filter()进行筛选的时候，$(selector).filter(some)其中seclector和some是同一等级的，也就是说是在很多selector中找出符合‘some’这个筛选要求的selector。

小测试

本节的内容比较简单，只需要注意方法之间的细微差异就好。通过本节的学习，应该已经能够快速的找出所需要的元素或元素合集了。为了加深印象，可从上面那么多的遍历方法中挑出几个来进行练习。

jQuery AJAX

关键词：AJAX简介、加载、Get/Post

简介：全称为Asynchronous JavaScript and XML，异步的JavaScript和XML，此功能能够在不重载整个页面的情况下通过后台加载数据，并在页面上显示出来；
加载：在jQuery中的AJAX方式为：load()，此方法能够从服务器中加载数据，并把返回的数据放入到被选元素中；语法为：$(selector).load(URL, data, callback)其中URL参数表示希望加载的地址；可选参数data规定了与请求一同发送的查询字符串键/值对集合；可选参数callback是load方法完成后所执行的函数名称，可设置参数为responsTxt（包含调用成功时的结果内容）,statusTxt（包含调用的状态）,xhr（包含XMLHttpRequest对象）；
Get/Post：两种常见的从服务器请求数据的方法，点击这个链接可了解这两者的详细区别；

代码及实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>

    </style>
    <script type="text/javascript" src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
    <script>
        $(document).ready(function () {
            $('#btn').click(function () {
                $.get('a.txt?t='+ new Date().getTime(), function (data, status) {
                    alert('Date:'+data+"\nStatus:"+status);
                });
            });
        });
    </script>
</head>

<body>
    <button type="button" id="btn">Get</button>
</body>
</html>

注意：由于ajax部分的内容需要在服务器环境下进行测试，所以本节只给出了代码的例子。

小测试

利用jquery我们不再需要自己去手写ajax文件了，确实是非常的方便。通过本节课程的学习，可自己动手在服务器环境下测试一下获取信息。（需要注意的是最好将html文件和待查询文件放在同一个服务器的文件夹中）

jQuery杂项

关键词：命名冲突

命名冲突：noConflict()，由于有可能其他框架也使用$符号作为简写，那么如果同时使用这两种框架的话就可能导致脚本停止运行，为了解决这个问题，在jQuery中使用noConflict()方法。语法为$.noConflict()这样写完以后，就需要用全名jQuery来代替$符号了。如果希望直接用$符号且不引起冲突，那么可以将$符号作为变量传给ready函数，但是需要注意的是在函数外还是需要用全名。

实例及代码

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在运行！");
  });
});

总结

接触jquery其实有一段时间了，但是真正开始学习的时间并不长。初步学完JS之后，又接触到bootstrap，然后了解到其中也包含了jquery的内容，所以决定先全面了解jquery然后再来学习bootstrap。
jQuery作为JS的轻量级的库存在，自然而然的在应用层面上比原生JS有着很大的优势，在利用jQuery写效果的时候就能明显的感觉到这一点。在jQuery中各种选择器应有尽有，各种事件也非常多，还有很好用的链式写法，这一切都与jQuery的宗旨“Write less, do more”不谋而合。
由于时间关系，并没有去了解jQuery的内部写法的精妙，在之后的学习生涯中一定会找出时间来认真了解下。同样的由于时间关系，并没有将每种事件，每个选择器，每个效果都去实现一遍，但私以为在应用层面上效果只不过是外表，其内核都是一样的，所以这并不影响在需要这种效果的时候来调用。

【置顶】《精通JavaScript开发》

发表于 2016-07-02 | 分类于前端

前言

从5月25日开始开始学习，用了将近一个月的时间将视频课程过了一遍，对比W3school及另外一套课程，这个课程给我的体验是整体进度设置很合理，Blue老师循循善诱，讲课风格非常适合新手学习。为了更好的掌握JavaScript的内容，下文将对每一章节做对应的总结与复习，并有相应的小测试来巩固复习。本文内容适合所有正在学习此课程的同学。对于本课程或者本博客有任何问题，非常欢迎给我发邮件，我会尽我所能回答你的问题。

阅读全文 »

HTML和css基础知识汇总（长期更新）

发表于 2016-06-30 | 分类于前端

HTML部分

简介：

HTML 指的是超文本标记语言 (Hyper Text Markup Language)；
HTML 不是一种编程语言，而是一种标记语言 (markup language)；
标记语言是一套标记标签 (markup tag)；
HTML使用标记标签来描述网页；

知识点：

HTML：Hyper Text Markup Language；
标签：h1-h6; p; a; img; hr; strong; big; small; em; i; sub; sup; pre; code; kbd; tt; samp; var; address; abbr; acronym; bdo; blockquote; q; del; ins; map; area; table; tr; td; th; caption; thead; tbody; tfoot; dl; dt; dd; span; form; input; select ; option; textarea; fieldset; legend; optgroup; frameset(不与body同用); iframe; frameborder; object; embed; audio; video;
属性：align; bgcolor; dir；text-decoration; target; name; alt; background; align; rowspan; colspan; cellpadding; cellspacing; frame; raido; checkbox; action; method; selected; rows; cols; label; noresize;

HTML5部分网站上讲的太笼统了，之后在做项目的过程中再做具体的了解，其中canves这个属性被广泛应用；这两天把html和css复习一遍之后开始复习js，同时开始看书+做项目+写博客。按照这种速度的话,下个月底之前应该能够取得很大的进步。

CSS 部分

简介：

CSS 指层叠样式表 (Cascading Style Sheets);
样式定义如何显示 HTML 元素;
样式通常存储在样式表中;
把样式添加到HTML4.0中，是为了解决内容与表现分离的问题;
外部样式表可以极大提高工作效率;
外部样式表通常存储在 CSS 文件中;
多个样式定义可层叠为一。

知识点：

派生选择器：也被称为上下文选择器（contextual selector），根据元素在其位置的上下文关系来定义样式，是的标记更简洁；
id选择器：用“#”来定义（注意：id属性只能在每个HTML文档中出现一次）
类选择器：以一个“.”显示；
属性选择器：以“[属性]”的方式显示；（还有属性和值选择器）– 对于属性值有多重不同的选择方式，具体可参照w3school上的说明；
背景：背景色；背景图像（不能继承）；背景重复（background-repeat）；背景定位（background-position–主要是针对当背景是图像的时候使用，如果只出现一个位置信息，则另一个默认为center）；背景关联（background-attachment，可将背景图像固定在可视区域）；
文本：缩进文本（text-indent：一般来说，可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。它的值可为负数或者百分比。此属性可继承。）；水平对齐（text-align：justify可实现两端对齐——谨慎使用，因为各浏览器增加空间的方式不同造成效果各异；文字间隔（word-spacing）；字母间隔（letter-spacing）；字符转换（text-transform：uppercase、lowercase、capitalize）；文本装饰（text-decoration：underline、overline、line-through及blink；）；空白字符（white-space：pre、nowrap、pre-wrap及pre-line）；文本方向（direction：ltr、ltr；）
字体：五种通用字体（font-family）——Serif、Sans-serif、Monospace、Cursive和Fantasy；字体风格（font-style：normal、italic和oblique）；字体变形（font-variant：小型大写字母）；字体加粗（font-weight：bold、bolder、lighter等）；字体大小（font-size：px、em和百分比，其中第一个是静态测量单位，后两者则是相对测量单位）；
链接：链接的四种状态（link、visited、hover和active，设置时需要注意顺序问题。通过改变连接访问前后及鼠标是否悬停在链接上的属性设置的不同来达到改变样式的目的）；
列表：列表类型（list-style-type）、列表项图像（list-style-image）、列表标志位置（list-style-position）（注意，这些属性一般都是作用在ul或者ol上的，但根据网站上的例子可以知道有时——比如list-style-image也可以施加到list上。）
表格：表格边框（border），折叠边框（border-collapse：将表格边框折叠为单一边框），表格文本对齐（水平方向：text-align；垂直对齐方式：vertical-align），表格内边距（padding），表格颜色（background-color）；
轮廓：（outline，区别于border，轮廓指的是边缘外框的外围，可以起到突出元素的作用。）
框模型：元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。背景应用于由内容和内边距、边框组成的区域。内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
内边距（padding）：属性定义元素边框与元素内容之间的空白区域。CSSpadding属性定义元素的内边距。padding属性接受长度值或百分比值，但不允许使用负值。单位可以有 EM, PX, PT, CM。如果使用百分比设置的内边距，那么这个百分比的基数是其父元素的width来计算的，这一点也同样适用在外边距（而且不管是左右边距还是上下边距）。
边框（border）：围绕元素内容和内边距的一条或多条线，允许规定元素边框的样式、宽度和颜色；CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。边框的样式（border-style：一共有十种，效果各不相同，而且可以分别为不同的边框设置不同的样式）；边框宽度（border-width：可以指定长度或者使用thin，medium或者thick中的任意一个，但是后面这三个关键词的具体宽度可能会根据不同的用户代理有不同的值）。因此，如果希望边框出现，就必须声明一个边框样式。然后设置边框的宽度才有意义。边框的颜色（border-color）：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是body、div 或另一个 table。透明边框（transparent）：CSS2引入了边框颜色值transparent。这个值用于创建有宽度的不可见边框。
外边距（margin）：围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。这个属性接受任何长度单位、百分数值甚至负值。margin的默认值是 0，所以如果没有为margin声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。除此之外，父元素与子元素之间，空块元素，也会发生合并，具体可参考MDN上的内容。（这个点可以写一篇博客了。）
定位和浮动：1. 一切都为框-块框、行内框或者无名块框；2. css中有三种基本的定位机制——普通流、浮动和绝对定位，默认都为普通流中定位；3. 位置属性（position）：包括static、relative、absolute和fixed。具体情况可以参考w3school上面关于position的内容。这个相关内容也可以写一篇剪短的博客了，:-D。
浮动（float）：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动及浮动清除理解起来也有难度啊，搞清楚后也可以写博客了。
(关于浮动的博客已写，但是还是没有弄的太明白，之后再买书看吧）
元素选择器：最常见的为元素选择器，在w3c中元素选择器也叫作类型选择器（type selector），类型选择器匹配文档语言元素类型的名称，可以匹配文档树中该元素类型的每一个实例。类型选择其也可适用在XML文档中。
选择器分组：可以把具有同样样式的元素放在样式的左边，并且用逗号隔开，选择器的数量没有限制，可以有任意多组；如：h1，p，span { corlor：white；}；
通配符选择器：css2中引入了一种新的简单选择器，叫做通配符选择器（universal selector），符号为*，可以与任何元素匹配；
声明分组：对于同一个元素的不同样式，可以将样式声明在此元素后面，并用分号隔开，例如：h1 {corlor：black；background：yellow；font-size：strong；}；
类选择器：要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器，它允许以一种独立于文档元素的方式来指定样式；使用语法为：.className {porperty: value; };类选择器可结合元素选择器，选择出某一种元素中具有某个类名的个体，然后赋予其属性和值，例如：p.important {corlor：red；}；多类选择器指的是一个元素可以有多个类，类与类之间用空格分隔，例如：
其中类名无顺序之分，通过把两个类选择器链接在一起，可以选择出同时包含这些类名的元素；
ID选择器：ID选择器允许一种独立于文档元素的方式来指定样式，例如：#intro {font-size：14px；}指的是ID为intro的元素的字体大小为14px；与类选择器不同的是，ID选择器：1.只能在文档中出现一次；2. 不能结合使用；3. ID能包含更多含义；需要注意的是：选择器是区分大小写的，因此写的时候务必要注意！
属性选择器：属性选择器可以根据元素的属性及属性值来选择元素。属性选择器是在css2中引入的。如：[title] {color:red} （表示：把含有标题的所有元素变成红色）；再如：a[href] {color:red} (表示对有href属性的锚应用属性)；还可以结合起来使用，如：a[href][title] {color:red} (表示将同时具有href和title属性的锚的文本设置成红色）；除此之外，还可以规定具体的属性值，例如：a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}（表示只有带有超链接且了解为上述的时候才会变红），而且每个属性选择器都可以对相应的属性赋值；而且需要注意，此时选择器中的属性值和必须完全匹配（注意：如果需要选择不完全匹配，则可以用约等号来选择，如：p[class~=”important”] {color: red;}）；字串匹配属性选择器，在css2完成之后发布，可以匹配属性值以某些字符串开头、结尾或者只是包含的情况，具体见字串属性选择器; 特殊属性选择器，如*[lang|="en"] {color: red;}，表示只选择lang属性等于en或者以en-开头的所有元素；（这种用法常见于匹配语言值）。
后代选择器（descendant selector），又称为包含选择器；比如h1 em {color:red;}，需要注意的是，后代选择器中两个元素之间的层级间隔可以是无限的（区别于后面要讲到的子元素选择器）；
子元素选择器（Child selector）：只能选择作为某元素子元素的元素。比如下面的例子：h1 > strong {color:red;}，子结合符为“>”，结合符两边的空格是可选的；
相邻兄弟选择器（Adjacent sibling selector）：可选择紧接在一个元素后面的元素，且两者有相同的父元素；写法如下：h1 + p {margin-top:50px;}，表示的是“选择紧接在h1元素后面的段落增加边距，并且这两者有相同的父元素”；相邻兄弟选择器作用的对象是“+”号后面的元素，对前一个元素没有影响；
伪类（Pseudo-classes）：用于向某些选择器添加特殊的效果；比如超链接中的a:link, a:visited, a:hover, a:active,(注意超链接使用伪类的时候有顺序问题）；:focus 伪类用于引起注意，一般用于输入框；除此之外，还有:first-child, :lang等伪类；其中:first-child伪类表示用来选择某元素的第一个子元素；
伪元素（Pseudo-elements）：用于向某些选择器设置特殊效果；语法为：selector:pseudo-element{property:value;}，主要有:first-line, :first-letter, 在css2中引入了：:before, :after，表示的是在某元素前面（后面）插入新内容（这一点在清除浮动那一章节有重点应用）；
css水平对齐：1. 使用margin属性（将左边距和右边距都设置为auto，则左右均等分配可用外边距，达到居中的效果。注意：如果宽度为100%，对齐则没有效果）；2. 利用Position属性（当使用绝对定位属性来定位时，元素将从正常流中删除，从而可能产生交叠元素）；3. 使用float属性进行左右对齐；注意：使用所有属性进行对齐时都应该声明!DOCTYPE html，否则在IE8及以下版本会在右侧增加17px的外边距（为滚动条预留空间）。
css尺寸（Dimension）：尺寸属性允许控制元素的高度和宽度。同样，也允许增加行间距。除了width，height之外，还有max-height，min-height，max-width，min-height，line-height等；且这些尺寸都可以用像素、百分比来设置；
css分类（Classification）：css分类属性允许规定如何以及在何处显示元素；有inline，block等，其实就是display属性的值，然后这个值就和css的布局有很大的关联，同样影响布局的还有float以及position，它们之间的关系见我之前写的一篇博客Float, Position and Display in CSS;本节还讲到了一个很有意思的属性：cursor，用来实现不同的光标，使用语法为element {cursor:value; }；
导航栏：实现导航栏的关键在于对浮动的理解，其他属性都比较简单，实现过程可见：导航条的实现；
图片库：其实也不是什么图片库，就是把相同的布局，运用在了几张尺寸一样的图片上罢了。在设定任何css属性之前，都需要认真弄清楚需求，一步一步的将布局分解到每一个div中，然后思考每个div中的布局，最终形成整体布局。
图像透明：属性为opacity; filter:alpha(opacity=value)，如果需要用:hover属性来设置鼠标移入之后的效果，那么一定要声明<!DOCTYPE html>，否则不能应用在除了a以外的其他元素；
css2媒介类型：媒介类型允许定义以何种媒介来提交文档，文档被显示在显示器、纸媒介或者听觉浏览器上等等；语法为@media class，类别中有screen、print、tv、handheld等等（然后就出现了Bootstrap的自适应？）

注：
本文内容主要来源为w3school，相关知识点都在在此网站找到更详细的说明，本博客仅供复习总结用。

Float, Position and Display in CSS

发表于 2016-06-27 | 分类于 CSS

前言

目前是第二遍学习CSS，第一遍学习的时候只是看了一遍教材，当时感觉还行，但是在之后学习JS的过程中就愈发感觉到没有学好这一章节的严重性，所有在第二遍学习的时候，一定要将这个知识点彻底的弄清楚才会进入到下一阶段，这也就是为什么我会花3天的时间来弄清楚这个知识点的原因了。
为了搞懂这个问题，首先能想到的当然是先多看几遍教材，然后直接Google，搜索到几篇中文博客，之后在StackOverFlow上搜索与Float相关的问题，这一遍下来，搜索的资料让我看了好久，而我所理解的都将在下面的文章中通过图文来表述。

阅读全文 »