css_01 | CSS——CSS 基礎與選擇器初識

時間  2019-11-06
標籤 css 基礎 選擇器 欄目 CSS 简体版
原文   原文鏈接 
本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

獲取編號.png 

css_01
複製代碼

涉及面試題.png 

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。好比當解析到如下框選的代碼時：服務器

    01-01.png

瀏覽器會再次去向服務器發請求，去獲取這個 style.css 文件。post

  • 再接着，同步的這個 CSS 文件就下載下來了，下載下來以後，瀏覽器同時去解析這個 CSS 文件，讓他變成一個 「CSS 樹」。而後瀏覽器再去作一個計算，把 「DOM 樹」和「CSS 樹」對應起來，最終獲得一個新的「樹」。

這個「樹」裏有兩個節點，一個是它的元素是什麼東西；另外一個是這個元素的具體參數：寬、高、位置、大小、邊框等。字體

  • 瀏覽器獲得這個「樹」事後，再去「渲染」。

即繪製，至關於咱們獲得一個很豐富的數據，這個數據告訴了咱們頁面上每一個元素的位置、每一個元素之間的關係——父子、鄰居等。這個時候，我就能夠拿塊畫板進行繪製。動畫

  • 最後，一個色彩豐富的頁面就展示在了咱們面前：
    01-02.png

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;}
複製代碼

01-03.png

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;
}
複製代碼

01-04.png

🏆小總結： 想要對多個元素使用某個樣式時，就把這些元素都加入到這個「類」裏，就會用到 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 ）

01-05.png

4.5.2 [attr=val]

即直接用 [] 符號將「屬性」和與之對應的「屬性值」框起來，用於根據具體屬性及其值來選擇元素：

li[class="second"] {
  color: red;
  background: yellow;
}
複製代碼

（選擇有 class 屬性值爲 second的全部 li 元素，使其文本爲 red，背景色爲 yellow ）

01-06.png

⚠️注意：這種選擇格式要求必須與「屬性值」徹底匹配，很少很多，不能有任何形式的簡寫。例：
（選擇有 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）

01-07.png

4.5.4 ^ $ *

1. ^
li[class^="se"] {
  color: red;
  background: yellow;
}
複製代碼

（即選擇 class 整個屬性值以 se 開頭的全部 li 元素，使其文本爲 red，背景色爲 yellow ）

01-08.png

2. $
li[class$="ne"] {
  color: red;
  background: yellow;
}
複製代碼

（即選擇 class 整個屬性值以 ne 結尾的全部 li 元素，使其文本爲 red，背景色爲 yellow）

01-09.png

3. *
li[class*="ir"] {
  color: red;
  background: yellow;
}
複製代碼

（即選擇 class 屬性值中包含字串 ir 的全部 li 元素，使其文本爲 red，背景色爲 yellow ）

01-10.png

💡助記：^ 整個是笑臉(^^)的左邊開始，因此記憶 爲屬性值以某字符開頭；
$ 美圓符號很像一個搖擺的尾巴，因此可記憶爲屬性值以某字符結尾；
* 星號猶如星星，都是一串一串的，因此可記憶爲屬性值中包含某字串。

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;
}
複製代碼

01-11.png

⚠️注意：上面這種屬性選擇器經常用於匹配語言值。


後記： 對於基本的選擇器，本篇咱們先了解到這，下篇文章咱們將對如下選擇器及其周邊知識做詳解：僞類選擇器、僞元素選擇器、組合選擇器。
CSS 知識點多且雜，惟有靜下心來、動起手來，用一行行代碼逐個擊破纔不至於浮於表面。共勉：我荒廢了時間，時間便把我荒廢了。

祝好，qdywxs ♥ you！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程