CSS基础

1. CSS 加载方式有几种？

加载CSS有4种方式。其中有2种方式是在HTML文件中直接添加CSS代码，另外2种是引入外部CSS文件。

1. 内联式

内联式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

示例：

1	<div style="background: red"></div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个<div>拥有相同的样式，你不得不重复地为每个<div>添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

2. 嵌入式

嵌入式指的是在 HTML 头部中的<style>标签下书写 CSS 代码。

示例：

<head>
    <style>
    h1 {
        color: red;
    }
    </style>
</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

3. 链接式

链接式指的是使用 HTML 头部的<head>标签引入外部的 CSS 文件。

示例：

1
2
3

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

4. 导入式

导入式指的是使用 CSS 规则引入外部 CSS 文件。

示例：

1
2
3

<style>
    @import url(style.css);
</style>

@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；

当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载。

2. @import有什么作用？如何使用？

@import CSS @规则，用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset 规则除外; 因为它不是一个嵌套语句，@import不能在条件组的规则中使用。

因此，用户代理可以避免为不支持的媒体类型检索资源，作者可以指定依赖媒体的@import规则。这些条件导入在URI之后指定逗号分隔的媒体查询。在没有任何媒体查询的情况下，导入是无条件的。指定所有的媒体具有相同的效果。

语法

1 2	@import url; @import url list-of-media-queries;

url

是一个表示要引入资源位置的<string>或者<url>。这个 URL 可以是绝对路径或者相对路径。要注意的是这个 URL 不需要指明一个文件。

list-of-media-queries

是一个逗号分隔的媒体查询条件列表，决定通过URL引入的 CSS 规则在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件，就不会引入URL指明的CSS文件。

3. id 选择器和 class 选择器的使用场景分别是什么？

id选择器：每个id在文档中必须是唯一的且一个标签只能绑定一个id。所以id选择器通常用于大的模块上，多用于父级。

class选择器：文档中多个元素可以拥有一个类名且一个标签可以绑定多个class。所以class选择器通常用于重复使用率高的元素上，多用于子级。

4. CSS选择器有哪些？哪些属性可以继承？

CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

5. 选择器的优先级

优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

CSS样式的简单权重级别由高到低排列：

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素标签上的内联样式
id 选择器
类选择器、伪类选择器、属性选择器
标签选择器、伪元素选择器
通配符选择器
浏览器自定义

优先级的算法

每个规则对应一个初始”四位数”：0、0、0、0
若是行内选择符，则加 1、0、0、0
若是 ID选择符，则加 0、1、0、0
若是类选择符/属性选择符/伪类选择符，则分别加 0、0、1、0
若是元素选择符/伪元素选择符，则分别加 0、0、0、1
将每条规则中，选择符对应的数相加后得到的“四位数”，从左到右进行比较，大的优先级更高。优先级相同时，采用就近原则，即最后出现的样式。

6. 为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。