css的学习

css的学习
前两篇文章讲了html的一些基础知识，那么今天就复习一下css吧。css是相对来说比较重要的。
了解css
• css的全称为cascading style sheet 层叠样式表，它的主要作用是为我们的html标签添加各种各样的样式和修饰效果。

• 这里我总结的css属于css2.0的知识点，css3.0的知识我打算在后面的文章里面总结。css3的功能要比css强大的多（border-radius，animation等等）。处理一些动画，一般都是用css3来解决比较方便。

• 其实html+css部分的知识点总共占前端的知识总量的1%-2%，但是却占了20%-30%的重要度，所以我们一定不能轻视html和css。虽然说是基础，但是这个很重要的，基础打不牢，大楼就很难建成了。

那么就进入今天的主题吧。首先讲一下css和html之间如何建立联系呢？
css引入页面的方式：

1. 行间样式 直接在html 的标签里面写style属性 前面两篇里面的更改标签的样式都是用的这一种方式。<div style=""></div>

2. .页面级css 在head标签里面添加一个style标签。<style></style>。当你自己写一个比较小的demo时，你可用这种方法。不用切换页面，比较方便。当页面层级化，比较明显的时候，不适合用这种方法，适合用第三种方法。

3. 外部css文件 ==》我们选择这种方式我们在外面创建一个.css后缀的文件，然后在html里面引入这个外部的css文件即可。在head标签里面加上一个link标签。
   
<link rel=”stylesheet” href=””>


大致就这三种方式，平常经常用到的就是第三种。 这里有一点不得不说明的是，link标签引入和style标签修改样式二者之间并没有什么优先级，谁写在前面谁就先执行，写在后面的css文件会覆盖掉前面的css文件。有时候会因为网速问题，link写在上面，但是link还没有加载进来，所以先运行了后面的style，这种问题是网速导致的，并不是二者本身拥有优先级的问题。

—–如果不考虑网速的问题时，那么当引入link标签时，这时候页面阻塞，只有页面中的css加载完成之后，才会进行加载html标签，所以页面中的css样式会加载到网页上去的。具体需要讲到js加载时间线的时候，在详细的介绍。
css选择器
有了css选择器，才能精确的找到html页面中的标签进行给它们加上样式。这样才能具体找出每一个页面样式的变化。
css选择器有很多种：

• id选择器
  我们给元素添加一个id属性，这个id是唯一标识，一个元素只能有一个id，一个id也只能给一个元素。然后我们在css文件中，通过#id {}的方式，就可以选择到我们添加id的那个元素了。<div id="demo"></div>
  css样式：` #demo {

  background-color: red;width: 100px;height: 100px

}`

• class类选择器

• 在元素的属性中写一个叫做class的属性，这个属性是为这个元素添加一个类名，每一个元素可以有多个类名，同一个类名也可以赋给很多个元素。然后我们在css文件中，通过.class {} 的方式来选择出添加了类名的元素。<div class="demo"></div>
  css样式：` .demo {

  background-color: red;width: 100px;height: 100px

}`

• 标签选择器
  div{} 只要是div的标签就会被选择出来。<div></div>，标签选择器是最简单的选择器。

• 通配符选择器
  *{} 所有的标签都会被选择出来加上样式，body标签页包含在内。所以如果*{background-color: red}的话，那么整个页面都会变红，因为我们同时给body元素也添加了背景颜色。一般通配符是用来初始化页面的，因为页面本身是有一个初始状态，这不算是我们想要的。

*{
margin：0；
padding：0；
}

上面这段代码经常使用，因为好多的标签都会有初始的状态。浏览器本身会有一个margin：8px;这是页面自己带的，我们并不想要，这个问题可能是浏览器遗留下来的问题。

• 属性选择器
  [id] {} 这样有id属性的标签就都会被选择出来。

有了选择器，我们自然而然的就会想到优先级的问题，这个问题会导致你在设置标签上一个样式，会让你得到你不想要的。这就是作用的先后顺序的问题。
网上经过一些测试之后：
优先级 !important > 行间样式 > id > class|属性 > 标签 > *
你要是不相信的话，可以自己去试一下吧。
但是我们不必背这些东西，我们只需要记住他们每一种选择器的权重值就可以了。

CSS选择器 权重值 !important infinity 行间样式 1000 id 100 class、属性、伪类 10 标签、伪元素 1 通配符（*） 0

那行，是不是十个标签选择器就赶上了一个class选择器了，当时我也是这么认为的。然后我又看了一下其实不然，这里面的进制是256进制的，这里的一个1不是十进制的1，1==>256，自己回去算算去吧，得要多少才能顶一个啊。
这里面的计算也和我们数学计算同，在数学中无穷大加上一个数，结果还是无穷大。但是这里面就不一样了，这里的无穷大是可以比较的，infinity+1>infinity

#demo .demo1 div{}
div .demo1{}

上面的两个权重分别是： 100+10+1、1+10，想要选择哪个样式，计算一下权重就行了。

• 父子选择器（派生选择器）
  div p {}
  给div下面的p加样式 这时候的p的权重值是加和的结果。
  在实际开发中，我们因为要注意浏览器寻找时候的耗能，一般父子选择器不超过4层。
  .wrapper .box .content .name 一般不超过像这样的四层。
• 并列选择器
  < p class=”select”>< /p>
  < div class=”select”>< /div>

怎么选择出类名是select的div呢？

我们可以使用div.select {} 来选择出来

这种方式是只有div和.select同时作用在一个标签上的时候才会被选择出来，书写的时候标签名放在前面，其他的放在后面。

• 分组选择器

<p></p>
<strong></strong>
<em></em>
<div></div>

我们要想同时给四种标签都加上color: red的样式，不可能把四个标签都写一遍样式，因此要用分组选择器。
div, p, em, strong {} 这样的写法，我们可以把前面写的所有的标签都选择出来加上样式，中间是用逗号连接的。这个样子四种标签就全都被选择出来并且都加上了统一的样式。

拓展检索问题
父子选择器的时候浏览器是怎么检索的？
div p strong em span{ } 这样的选择器，浏览器是怎么找的？是从左往右，还是从右往左？
答案是：从右往左
why?
• 因为如果是从左往右寻找的话，每找到一个父级标签，都要把它下面的所有标签都遍历一遍，看看有没有我们下一个标签，上面那个选择器中，浏览器会先找到div这个标签，然后把div下面所有的子元素都遍历一遍后，找到strong这个标签，然后再把strong这个标签下面的所有元素遍历一遍，找到em这个标签，以此类推，这样是十分消耗性能并且速度非常慢的。

• 而如果是从右往左的话，那么浏览器只需要先找到span标签，然后从span这个节点向上寻找，只要找到em就可以停止寻找，以此类推，不必遍历所有的节点，而且需要遍历的点非常的少，这样的好处显而易见，速度非常快，而且不耗性能。性能这个问题是非常的重要的，特别在一些优化代码。以后在详细介绍吧。

讲了这么多的css的选择器最好的方式就是自己通过一些项目赶紧练习一下。有好多注意的地方需要大家来发掘呀~~