css_01 | CSS——CSS 基础与选择器初识

时间 2019-11-06

标签 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。届时，我相信咱们可以垂手可得的、规范的写出咱们看见的任意一个静态页面。css

1 CSS 相关定义

CSS（Cascading Style Sheets 层叠样式表）：用来控制 HTML 的表现。
CSS 决定页面好很差看、动画效果酷不酷炫。html

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

2 CSS 工做原理

再次复习文章：《老生常谈的从 URL 输入到页面展示背后发生的事》面试

首先，当咱们在浏览器上输入一个 URL 并回车后，浏览器向服务器发了一个请求，服务器就把相应的数据——HTML 返回给浏览器。浏览器
而后，浏览器拿到这个数据后就加载这个页面，去解析这个 HTML。怎样去解析呢：浏览器获得的字符串，它会对其作一些编码等的分析，把字符串解析成“树状”的结构，建立一个 DOM，叫 DOM 树（由于他是一个文档结构，相似“树”这样一个效果）。bash
接着，在解析 HTML 的过程当中，浏览器会去加载相应的 CSS。好比当解析到如下框选的代码时：服务器

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

再接着，同步的这个 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 “导入”样式

<style>
@import url("index.css");      <!--①-->
@import url(index.css);        <!--②-->
@import "index2.css";          <!--③-->
@import url("landscape.css") screen and (orientation:landscape); <!--④-->
</style>
复制代码

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

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

本例④中后半段是加“媒体查询限制条件”：
screen 指“在有浏览器屏幕下”， and (orientation:landscape) 针对移动端设备的“显示方向 orientation ”是“横屏（landscape）”。
“竖屏”英文单词是：portrait。

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

如上篇文章的例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML表单</title>
  <style> #txa { width: 300px; height: 200px; margin-left: -12px; } </style>
</head>
<body>
……
复制代码

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

<p style="background: yellow; font-family: sans-serif;">Oliver 是个好人!</p>
复制代码

注：

这种写法注意分号、先后的引号；
通常不推荐使用，在特定状况下使用。通常状况下推荐使用 <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 定位页面上惟一的元素（如上篇文章的例子）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML表单</title>
  <style type="text/css">   #txa {                                        <!--①--> width: 300px; height: 200px; margin-left: -12px; } </style>
</head>
<body>
……
  <div>
    <label for="txa">评论：</label>
    <textarea id="txa" name="article">是个好人！ <!--②-->   
    </textarea>                         
  </div>
……
复制代码

💡注释：

对于②中 id="txa" ：“id 属性”是一种标识元素“惟一”的方法，带 id 的元素有一个特性：你能够直接连接这些元素、给他们单独加样式。
但注意：id 是惟一的，一个元素不能有多个 id，另外页面上不容许多个元素都有相同的 id。
id 取名时，不容许出现空格。
对于①中 #txa ：按 id 来选择一个元素，须要在 id 名前面使用一个 # 字符。

4.3 类选择器

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

建立一个“类”分两步：

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

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

<ul>
  <li class="first">fine</li>
  <li class="second">thank you</li>
  <li class="third done">and you</li>
</ul>
复制代码

在 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 语言值匹配

<!DOCTYPE html>
<html lang="zh">                        
  <head>                                   
    <meta charset="utf-8">                    
    <title>表示“谢谢”的语言</title>            
  </head>                                 
  <body>                                  
    <h1>表示“谢谢”的语言</h1>              
    <dl>
      <dt>英语</dt> 
        <dd lang="en">Thank you.</dd>
      <dt>日语</dt> 
        <dd lang="ja">ありがとう.</dd>
      <dt>法语</dt>
        <dd lang="en">Merci.</dd>
      <dt>澳洲英语</dt>
        <dd lang="en-au">Thank you very much.</dd>
    </dl>        
  </body>                                           
</html>
复制代码

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

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

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

后记： 对于基本的选择器，本篇咱们先了解到这，下篇文章咱们将对如下选择器及其周边知识做详解：伪类选择器、伪元素选择器、组合选择器。
CSS 知识点多且杂，惟有静下心来、动起手来，用一行行代码逐个击破才不至于浮于表面。共勉：我荒废了时间，时间便把我荒废了。

祝好，qdywxs ♥ you！