我所瞭解的 CSS

Ljzn發表於2023-02-28
CSS

起源

CSS 究竟是什麼？簡單的回答是，層級裝飾表，能夠描述網頁上元素的樣式形態，例如顏色、大小、佈局等等。複雜的回答是，它既是瀏覽器所支援的樣式配置，也是一種配置語言。回到很久很久以前，網際網路的初期，人們剛剛創造了XML的小表弟 —— HTML，將其用於構造一個“好看”的網頁。人們用不同的元素名，來表示頁面上的不同內容，並根據瀏覽器內建的風格來渲染它們。例如 h1是大字號的黑體，code是等寬的小字，p是分段的正文等等。後來，人們漸漸覺得內建的這些樣式無法滿足對於好看的追求，瀏覽器廠商就想，乾脆讓你們這些些寫網頁的人自己去配置好了。於是，HTML 元素有了 style 屬性，人們可以透過它來修改元素的樣式：

<div style="color: green">hello</div>

語法

一個元素沒問題，元素一多，這樣的配置方法就麻煩了，比如頁面上所有的按鈕都要統一格式，每個都單獨配置肯定不現實。於是 style sheet 應運而生，簡而言之就是用單獨的檔案來儲存頁面上所有元素的樣式配置。CSS 的主要語法很簡單，大括號外面的是選擇器，表示選中的元素，大括號裡面是具體的樣式配置：

h1 {
    color: red;
    font-size: 20px;
}

每個樣式屬性之間，使用分號分割，最後一項可以省略分號。對於分號的位置並沒有要求，如果你喜歡，把分號放在行首也是可以的。css 繼承了 XML 和 HTML 對於大小寫不敏感的特點，當然，為了程式碼的整潔性，最好還是統一一個大小寫的格式：

elEmEnt {
  CoLoR: red
  ;fonT-size: 20px
  ;background-color: green
}

CSS 中唯一的資料型別就是字串，它不像 JSON，有布林值、數字這些，CSS裡全都是字串，但記住它們不需要加引號。CSS 裡每個屬性可以接收一個或多個引數，引數之間用空格分割，例如：

padding: 10px 10px 10px;

選擇器

元素名，類，id

剛才我們說了大括號外邊那個就是選擇器，這讓我想起了jQuery 裡面的$選擇器，其實和那個很類似。基本的規則是：.開頭的表示元素的 class, # 開頭的表示元素的id，字母開頭的表示元素的型別名。注意，class 和 id 都是大小寫敏感的，這和元素型別名不一樣。

h1 {}
.my-class {}
#my-id {}

如果想同時給多個選擇器配置相同的風格引數，那麼用,隔開就可以了，表示 “或” 的意思：

.my-class
, #my-id {
  background-color: yellow
}
偽類

選擇器還可以新增一些修飾符，例如，表示滑鼠懸浮時的風格，在後面加上 :hover 即可，這種單個冒號的修飾叫做偽類（pseudo class）：

.my-class:hover {
  color: red
}
偽元素

還有一種，就在後面加兩個冒號，叫做偽元素（pseudo element），比如，::first-letter 表示元素內容的首字母：

.my-class::first-letter {
  color: red
}

根據我的實際測試，同時使用時，兩個冒號的必須放在一個冒號的後面，也就是 .my-class:hover::first-letter 這樣能起效果，反之無效。

轉義

如果你的class名稱裡面帶有引號，需要使用\進行轉義，例如：

<div class='super:man::class'>c3</div>
.super\:man\:\:class {
  font-size: 50px;
}
屬性選擇器

接下來是一種最為逆天的選擇器，它叫做屬性選擇器，根據匹配屬性的值來進行選擇，例如：

    <div group='g1'>c1</div>
    <div group='g2'>c2</div>
    <div group='g3'>c3</div>
[group^=g] {
  color: blue
}

表示選中所有滿足其 group 屬性以 "g" 開頭的元素。

關於選擇器就說這麼多吧，實際工作中會用到的其實也就很少的幾種，主要還是最前面的三種。還有更復雜的結合選擇器這裡就不講了，我也不想這篇文章完全變成一個文件的樣子，還是希望能多講一些有意思的想法。那些特別複雜的選擇器的存在有其歷史原因，我猜測是因為過去網路速度比較慢，需要儘量減少傳輸的文字數量，所以就增加了選擇器的複雜度。

Flexbox 和 Grid

不得不提一下的是頁面的佈局（layout），css目前比較常用的是 Flexbox（彈性盒）和 Grid（網格）模型。顧名思義，Flexbox模型裡的元素是可以拉伸和壓縮的，Grid是把頁面分割成幾行幾列的網格，將元素置於某個網格的位置。

基於class的css框架

首先我們需要知道一個html的特性：每個元素可以同時設定多個類（class），類之間用空格隔開。

這種特性催生了一系列基於預製類的css框架，例如tailwindcss。它們預先定義了許多類，提供特定的功能，程式設計師在使用時不再需要自己去定義類，而是直接給html元素設定多個預製類。這就解決了傳說中程式設計領域最難的問題之一 —— 命名。

<div class="pt-6 space-y-4">

比如，這裡的pt-6 表示 "padding-top: 1.5rem", space-y-4表示 "margin-top: 1rem"。程式設計師透過組合這些預製類，就可以達到想要的效果。如果說原來手寫css是用泥巴捏出一個造型，使用基於class的框架就好比是用現成的樂高積木進行拼裝。

總結

以上是我從一個非前端程式設計師的角度來聊聊css，如有錯誤歡迎指出。個人覺得css是一個偏向設計的東西，需要有專業的設計能力，或者參照UI設計師的設計圖來進行編寫。如果非專業人員想要快速地做出一個好看好用的頁面，可以直接使用css框架。

https://www.bilibili.com/vide...

本文參與了SegmentFault 思否寫作挑戰賽，歡迎正在閱讀的你也加入。

相關文章