css_01 | CSS——CSS 基础与选择器初识-白红宇

本文推荐 PC 端阅读~本文版权归 “公众号 | 前端一万小时” 所有，未经授权，请勿转载！复制代码

css_01复制代码

1. CSS 加载方式有几种？2. @import 有什么作用？如何使用？3. CSS 选择器常见的有几种？4. id 选择器和 class 选择器的使用场景分别是什么？5. @charset 有什么作用？6. 简述 src 和 href 的区别？7. 页面导入时，使用 link 和 @import 有什么区别？8. 在 index.css 和 common.css 中有如下内容，html 里引入 index.css 后发现页面字体的颜色和大小没发生任何变化，原因可能是？（不定项）    /*index.css*/    @import "common.css"    body {        font-size：12px    }    /*common.css*/    body {        color: red;    }  ✅ common.css 的文件路径可能错了，检查元素看看报错可以定位问题。  ✅ @import "url"; 后面必须有分号。  ✅ index.css 里 body 的字体设置中的 : 写成了 ：。  ❌ font-size:12px 后面缺少了分号。复制代码

前言： 通过前 3 篇系列文章我们对 HTML 有了一个比较详细的了解，那接下来的一些列文章，我们将一步步细致的认识 CSS。届时，我相信我们能够轻而易举的、规范的写出我们看见的任意一个静态页面。

1 CSS 相关定义

CSS（Cascading Style Sheets 层叠样式表）：用来控制 HTML 的表现。

CSS 决定页面好不好看、动画效果酷不酷炫。

HTML+CSS 是一个静态页面的基本组成。就好比一个女生在有基本的身体五官（HTML）后，又对自己打扮了下：化了妆、梳了发型、穿了好看的衣服（CSS）。

2 CSS 工作原理

再次复习文章：

首先，当我们在浏览器上输入一个 URL 并回车后，浏览器向服务器发了一个请求，服务器就把相应的数据——HTML 返回给浏览器。

然后，浏览器拿到这个数据后就加载这个页面，去解析这个 HTML。怎样去解析呢：浏览器得到的字符串，它会对其做一些编码等的分析，把字符串解析成“树状”的结构，创建一个 DOM，叫 DOM 树（因为他是一个文档结构，类似“树”这样一个效果）。

接着，在解析 HTML 的过程中，浏览器会去加载相应的 CSS。比如当解析到以下框选的代码时：

浏览器会再次去向服务器发请求，去获取这个 style.css 文件。

再接着，同步的这个 CSS 文件就下载下来了，下载下来之后，浏览器同时去解析这个 CSS 文件，让他变成一个 “CSS 树”。然后浏览器再去做一个计算，把 “DOM 树”和“CSS 树”对应起来，最终得到一个新的“树”。

这个“树”里有两个节点，一个是它的元素是什么东西；另一个是这个元素的具体参数：宽、高、位置、大小、边框等。

浏览器得到这个“树”过后，再去“渲染”。

即绘制，相当于我们得到一个很丰富的数据，这个数据告诉了我们页面上每个元素的位置、每个元素之间的关系——父子、邻居等。这个时候，我就可以拿块画板进行绘制。

最后，一个色彩丰富的页面就展现在了我们面前：

3 CSS 在 HTML 中的引入方式

3.1 外部样式表：通过 `<link>` “链入” CSS（如上例）

在 <head> </head> 里边的 <title> 标签下边加 <link> 标签。

<link> 标签中， rel="stylesheet" ，“rel 属性”指定了 HTML 文件与所链接的文件的关系，这里指我们要链接一个“样式表”——stylesheet。

样式表放入这个 href (html reference 引用、参照) ——这里可以用相对链接（上例用的一个 .css 文件，此文件将所有与之相关的 CSS 全部包含在里边，这里注意文件路径要写对），也可以用一个完整的 URL。

3.2 外部样式表：通过 @import “导入”样式

复制代码

单从形式上，@import 这种方式与 “链入” CSS 的方式差不多，都是从外部引入 CSS 文件。

格式上①②③都可以，效果等同。需要注意的是对于多个 .css 文件或 URL 的“导入”时，分号 ; 一定不能省。

本例④中后半段是加“媒体查询限制条件”：

screen 指“在有浏览器屏幕下”， and (orientation:landscape) 针对移动端设备的“显示方向 orientation ”是“横屏（landscape）”。

“竖屏”英文单词是：portrait。

3.3 内部样式表：放在 head 元素内的 `<style>` 标签中

如上篇文章的例子：

  
      HTML表单  ……复制代码

3.4 内联样式：直接写在元素开始标签的 style 属性中。

Oliver 是个好人!

复制代码

注：

这种写法注意分号、前后的引号；

一般不推荐使用，在特定情况下使用。一般情况下推荐使用 <link> “链入” CSS。

4 CSS 选择器初识

CSS 选择器用于“定位”我们想要给予“样式”、“规则”的 HTML 元素。

对于 CSS 的“样式”、“规则”，我们可以拆分理解：

h1 {
   color: red; background: yellow;}复制代码

4.1 元素选择器

p {  color: yellow;}div {  background: yellow;}p,div {  font-family: sans-serif;}复制代码

4.2 ID 选择器

id 定位页面上唯一的元素（如上篇文章的例子）：

  
      HTML表单  ……  
        
     评论：    
     是个好人！ <!--②-->                                  
    
……复制代码

?注释：

对于②中 id="txa" ：“id 属性”是一种标识元素“唯一”的方法，带 id 的元素有一个特性：你可以直接链接这些元素、给他们单独加样式。
但注意：id 是唯一的，一个元素不能有多个 id，另外页面上不允许多个元素都有相同的 id。
id 取名时，不允许出现空格。

对于①中 #txa ：按 id 来选择一个元素，需要在 id 名前面使用一个 # 字符。

4.3 类选择器

“类”： 可直接理解为一个足球俱乐部，在这个俱乐部（类）里，所有成员（元素）都必须遵循统一的规范——如出席商业活动时都必须着同样的装束。

创建一个“类”分两步：

为 HTML 元素增加一个 class 属性，这样就可以将这个元素加到这个“类”中。

⚠️注意：一个元素可以加入多个类，即一个人可以加入多个俱乐部，写法上各个“类名”用“空格”隔开。


    
       
     fine
  
     thank you
  
     and you
    
复制代码

在 CSS 中选择这个“类”（⚠️注意格式为：需要在 class 类名前面用一个 . 字符）。

.first {  font-weight: bold;}.done {  text-decoration: line-through;}复制代码

?小总结： 想要对多个元素使用某个样式时，就把这些元素都加入到这个“类”里，就会用到 class；但如果只有一个元素需要加这个样式，那就用 id。

4.4 通配选择器

这个选择器可以与任何元素匹配，就像一个“通配符”。如：

* {  color: yellow;}复制代码

这个“规则”可以让文档中所有元素的 color 值都指定为 yellow。

4.5 属性选择器

“属性选择器”根据元素的属性和属性值来匹配元素，“属性”英文单词为：attribute。

4.5.1 [attr]

即直接用 [] 符号将元素的属性名框起来，用于根据元素属性来选择元素：

li[class] {  color: red;  background: yellow;}复制代码

（选择有 class 属性（值不限）的所有 li 元素，使其文本为 red，背景色为 yellow ）

4.5.2 [attr=val]

即直接用 [] 符号将“属性”和与之对应的“属性值”框起来，用于根据具体属性及其值来选择元素：

li[class="second"] {  color: red;  background: yellow;}复制代码

（选择有 class 属性值为 second的所有 li 元素，使其文本为 red，背景色为 yellow ）

⚠️注意：这种选择格式要求必须与“属性值”完全匹配，不多不少，不能有任何形式的简写。例：

（选择有 class 属性值为 third done 的所有 li 元素，使其文本为 red，背景色为 yellow）

li[class="third done"] {  color: red;  background: yellow;}复制代码

✘不能简写为：

li[class="third"] {  color: red;  background: yellow;}复制代码

4.5.3 [attr~=val]

即直接用 [] 符号将“属性”、符号 ~ 和与之要加样式的“属性值”框起来，用于“根据部分属性值”来选择元素：

li[class~="done"] {  color: red;  background: yellow;}复制代码

（选择有 class 属性值包含 done 的所有 li 元素，使其文本为 red，背景色为 yellow）

4.5.4 `^` `$` `*`

1. `^`

li[class^="se"] {  color: red;  background: yellow;}复制代码

（即选择 class 整个属性值以 se 开头的所有 li 元素，使其文本为 red，背景色为 yellow ）

2. `$`

li[class$="ne"] {  color: red;  background: yellow;}复制代码

（即选择 class 整个属性值以 ne 结尾的所有 li 元素，使其文本为 red，背景色为 yellow）

3. `*`

li[class*="ir"] {  color: red;  background: yellow;}复制代码

（即选择 class 属性值中包含字串 ir 的所有 li 元素，使其文本为 red，背景色为 yellow ）

?助记：^ 整个是笑脸(^^)的左边开始，所以记忆 为属性值以某字符开头；

$ 美元符号很像一个摇摆的尾巴，所以可记忆为属性值以某字符结尾；

* 星号犹如星星，都是一串一串的，所以可记忆为属性值中包含某字串。

4.5.5 语言值匹配

                                                                 
                            表示“谢谢”的语言                                                                                       表示“谢谢”的语言
                  
    
           
     
      英语
     
         
     
      Thank you.
     
      
     
      日语
     
         
     
      ありがとう.
     
      
     
      法语
     
        
     
      Merci.
     
      
     
      澳洲英语
     
        
     
      Thank you very much.
     
    
    
                                                     复制代码

（当需要对以上代码中：选择 lang 属性等于 en 或者以 en- 开头的所有元素，使其文本为 red，背景色为 yellow ）

*[lang|="en"] {  color: red;  background: yellow;}复制代码

⚠️注意：上面这种属性选择器常常用于匹配语言值。

后记： 对于基本的选择器，本篇我们先了解到这，下篇文章我们将对以下选择器及其周边知识作详解：伪类选择器、伪元素选择器、组合选择器。

CSS 知识点多且杂，唯有静下心来、动起手来，用一行行代码逐个击破才不至于浮于表面。共勉：我荒废了时间，时间便把我荒废了。

加油！