关于CSS你应该知道的基础知识

上一篇简单总结了一下选择器，如果一个元素被多个选择器选中，元素的样式就会以级联方式被应用到。要搞清最终那个样式被应用到元素上了，首先要明白引用CSS代码的几种方式。

CSS代码引用方式

如何应用CSS代码到Html元素上，常见的有下面几种方式

通过Html元素的style属性来指定样式
在Html页面中直接添加style标签
通过link标签来引用外部css文件

sytle属性

想要修改一个元素，最简单的方式就是修改它的style属性，如下栗子：

<div style="color: red;">我是红色</div>

这种方式给元素添加CSS代码有一定的局限性，抛开浏览器解析渲染CSS样式的性能不说，但从DRY原则来看就不太好。每次想修改同类型样式的元素，要逐个修改元素的style属性。

sytle标签

style标签是Html的标准标签，可以在里面直接写CSS代码。

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <style>

    .red {

      color: red;

    }

  </style>

</head>

<body>

  <div class="red">我是红色</div>

</body>

这种引用CSS代码的方式在一定程度上解决了所有CSS代码都分散写在各个元素上的问题，但是不利于CSS代码的整体重用。如果某些class需要在多个Html文件中引用，需要将style标签里的内容复制粘贴到各个Html中。

引用外部CSS文件

通过link标签来引用外部CSS文件。CSS文件可以位于和Html文件同一个服务器上，也可以是互联网上任意的一个地址，例如CDN。

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="red">我是红色</div>

</body>

style.css

.red {

  color: red;

}

这种方式我们可以做到CSS代码的重用，但由于引用了外部文件，浏览器会额外发送一个http请求去加载CSS文件，性能上可能稍微会有一点影响，但以目前浏览器的性能，少量额外的http请求都是可以接受的。

CSS级联样式的应用

回到开头的问题，如果我有两个选择器都选中了某个元素，分别赋予这个元素不同的样式，到底哪个选择器中的样式会被应用呢？看一下如下的栗子：

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <style>

    div {

      color: red;

    }

    div {

      color: blue;

    }

  </style>

</head>

<body>

  <div>我是蓝色</div>

</body>

首先要知道，Html是从头到未顺序加载并解析的。无论是style标签还是CSS外部文件引用都是如此。从例子中可以看到，div中的文字会变成蓝色，即在CSS代码中，在选择器相同的情况下，靠后的CSS代码样式会覆盖掉之前的样式。

再看一个栗子：

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <style>

    div p {

      color: blue;

    }

    p {

      color: red;

      text-decoration: underline;

    }

  </style>

</head>

<body>

  <div>

    <p>

      我是蓝色而且有下划线

    </p>

  </div>

</body>

这个栗子中，尽管红色字体选择器更靠后但是由于前面的一个选择器更详尽的选中了div元素内的p元素，所以p里面的文字颜色为蓝色，即更详尽的选择器样式覆盖掉了之前的样式。而p选择器里面还添加了文字下划线样式，这个样式被继承了下来，所以最后p元素的文字是蓝色，并且有下划线。

下面来看看使用类选择器是什么效果。

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <style>

    .blue {

      color: blue;

    }

    div p {

      color: red;

      text-decoration: underline;

    }

  </style>

</head>

<body>

  <div>

    <p class="blue">

      我是蓝色而且有下划线

    </p>

  </div>

</body>

从代码结果中可以清楚的看到，类选择器较元素选择器具有更高的优先级。再来看看id选择器。

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <style>

    #blue {

      color: blue;

    }

    .red {

      color: red;

      text-decoration: underline;

    }

  </style>

</head>

<body>

  <div>

    <p id="blue" class="red">

      我是蓝色而且有下划线

    </p>

  </div>

</body>

因为id通常是唯一标识一个元素的，所以它的优先级又高于了此前两种选择器。

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <style>

    #blue {

      color: blue;

    }

    .red {

      color: red;

      text-decoration: underline;

    }

  </style>

</head>

<body>

  <div>

    <p id="blue" class="red" style="color: green;">

      我是绿色而且有下划线

    </p>

  </div>

</body>

最后发现，style属性的优先级最高。所以我们可以通过JavaScript来动态的修改元素的style属性值，如 display: none，达到修改元素样式的效果，而且不会受到之前任何选择器样式的影响。

CSS样式继承

什么是CSS样式继承，直接上栗子。

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <style>

    .parent {

      color: blue;

    }

    .child {

      font-size: 18px;

    }

  </style>

</head>

<body>

  <div class="parent">

    <div class="child">

      我是蓝色且18个像素

    </div>

  </div>

</body>

通过栗子发现，子元素child的文字颜色继承自parent的样式，通过Chrome的developer tools也可以清楚的看到。

关于继承，还有一种情况是有些Html元素是不会继承父元素样式的，例如input。需要详尽选定该元素来设置具体的样式。这里就不一一举例了，大家遇到样式不是预期效果的情况，可以通过developer tools来查看到底哪个选择器的样式被应用到了。

总结

CSS的代码加载顺序决定了后加载的样式会覆盖先加载的样式。
最终元素的样式会合并所有选中的样式，高优先级的覆盖低优先级的。
样式覆盖的优先级是 id > 详尽选择 > class > 元素。
style属性具有最高的样式优先级。
子元素会继承父元素的样式，input等除外。