CSS葵花寶典——基礎入門

CSS的基本知識很簡單，你只要知道有哪些基本樣式屬性、CSS的選擇器，怎么在頁面應用CSS，就可以隨便倒騰試試手了。

這篇文章屬于CSS掃盲教程，講解CSS語法、詳細介紹顏色的表示(十六進制、rgb、hsl)以及長度單位（px、em、rem）；列出了比較完整的CSS選擇器參考，后續可能你還需要經常回來。在文章最后，推薦了三本CSS書籍，一本作為新手學習的，一本作為參考手冊，還有本屬于深入的技巧。

如果你對HTML還不熟，建議先去W3school補充下HTML的知識，覺得OK了，看看我們的HTML專題檢測下自己的水平。

CSS如何改變頁面樣式

我們在頁面看到的各種排版、顏色、字體等等都是由CSS來控制的，比如現在我想改變所有段落的顏色為藍色：

原始index.html如下：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <title>CSS基礎知識-四光年</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>如何學好CSS</h1>
    <p>代碼不貪多，理解清楚</p>
  </body>
</html>

第一種方法：內部樣式表

在head標中加入style標簽

<head>
    <title>CSS基礎知識-四光年</title>
    <meta charset="utf-8">
    
    <!--內部樣式表-->
    <style>
      p{
        color: blue;
      }
    </style>
  </head>

第二種方法：內聯樣式

在標簽內部添加style屬性

<p style="color: blue;">代碼不貪多，理解清楚</p>

不過，這僅僅修改了這一段落的顏色哈哈哈，要是還有很多p標簽，繼續加style屬性會不會瘋了……

第三種方法：外部樣式表

新建一個CSS文件（后綴.css），然后在HTML中引入這個文件：

比如我在index.html的同級目錄創建一個style.css

style.css文件內容：

p{
  color: blue;
}

然后在我們的index.html的head中添加link標簽，引入style.css

<head>
  <title>CSS基礎知識-四光年</title>
  <meta charset="utf-8">
  
  <!--外部樣式表-->
  <link href="style.css" rel="stylesheet">
</head>

極小概率你會看到@import，它也是引入外部樣式表，語法不同，不過并不推薦。

關于link和import的詳細討論，參見Difference between @import and link in CSS

總結

我們大多數時候都是通過外部樣式表引入樣式，方便代碼組織，也不會破壞HTML的整潔。另外兩種方法，根據實際情況靈活使用就好了。

基本語法

具體看CSS怎么寫，有哪些屬性：

我們的樣式是由一些列CSS規則共同組成，CSS規則由選擇器 + 聲明構成，用大括號{}來包裹聲明語句。

借用w3chool的一張圖：

h1{
  color: red;
  font-size: 14px;
}
.primary-nav{
  background-color: #333;
}

  • 所有h1元素字體顏色設置為紅色，字體大小14px；

  • class為primary-nav的所有元素背景顏色設置為#333。

CSS的屬性有很多，后邊實際運用中我們會介紹重要而且容易出錯的屬性，其他的需要你自己去查看手冊CSS屬性參考手冊。

CSS的屬性除了包括視覺上的樣式，還有聽覺樣式，不過你工作中幾乎不會用到，知道還有聽覺呈現這個東西就可以了

CSS的屬性，其基礎是單位，下面專門把顏色和尺寸講解清楚，顏色和長度單位的選擇對你后邊寫CSS非常重要，需要額外注意。

顏色

在CSS中我們有4種表示顏色的方式：顏色名、16進制、RGB、HSL

比如紅色：

color: red; /* 顏色名 */
color: #ff0000; /* 16進制 */
color: rgb(255,0,0); /* rgb */
color: hsl(0, 100%, 50%); /* hsl */

顏色關鍵字

CSS定義了16個基本的顏色關鍵字：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

比如設置重要警告內容為黃色：

.warning{
  color: yellow;
}

使用顏色名簡單，但是可選顏色太少，書寫也不方便，一般只是用來做一些簡單的測試。

RGB和RGBA

rgb分別代表紅、綠、藍，通過組合紅綠藍表示不同的顏色，比如表示紅色：

color: rgb(255, 0, 0);

rgb()接收三個參數，分別表述紅、綠、藍，取值區間[0,255]：

0表示沒有這個顏色，所以rgb(0, 0, 0)是黑色

255分別表示純色的紅、綠、藍，如果三個值都是255，那就是白色了；三個值一樣，介于0~255之間，就是不同程度的灰色

rgb(255, 0, 0); /* red */
rgb(0, 255, 0); /* green */
rgb(0, 0, 255); /* blue */
rgb(255, 255, 255); /* white */

rgb()除了接受三個整數外，還可以接收三個百分數

rgb(100%, 0%, 0%); /* red */

在工作中，基本都是采用整數的表示方式，百分數表示極少見。

RGBA

RGBA在RGB的基礎上增加Alpha通道，設置透明度，Alpha取值區間為[0,1]

0是完全透明，1是完全不透明

rgba(255, 0, 0, 1); /* red */
rgba(255, 0, 0, .5); /* 50% opacity red */

這個最常用的用處就是建立一個半透明的背景遮罩

下面的例子我們在一張圖片上加上一個灰色半透明的遮罩：

<iframe height='265' scrolling='no' title='MbMLax' src='//codepen.io/voyax/embed/MbMLax/?height=265&theme-id=dark&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a >MbMLax</a> by voya (<a >@voyax</a>) on <a >CodePen</a>.
</iframe>

十六進制

十六進制是RGB色彩空間的另一種表示，和上邊的rgb()可以完全轉換，語法如下：

#RRGGBB

用三個介于00-FF的十六進制數分別表示紅、綠、藍

#FF0000; /* red */
#00FF00; /* green */
#0000FF; /* blue */
#000000; /* black */

如果組成的十六進制的3組數各自都是成對的，可以簡寫為3位，比如#F00等同于FF0000

HSL和HSLa

HSL是不同于RGB的色彩模式，HSL分別表示色調、飽和度、亮度，通過這三個通道來表示不同顏色。

  • H(Hue色調)：表示一個色相環，從0到360度取值，0(或360)是紅色，120是綠色，240是藍色

  • S(Saturation飽和度)：表示顏色的純度，取值從 0.0% 到 100.0%，數值越大，顏色中的灰色越少，顏色越接近純色

  • L(Lightness亮度)：表示顏色的明暗，取值也是 0.0%——100.0%，0%是徹底變暗（黑），100%徹底變亮（白），50%正常亮度

下面的圖比較直觀（圖片來自維基百科）：

HSLA也是在HSL的基礎上添加了透明度

hsl(0,  100%,50%)    /* red */
hsl(120,100%,50%)    /* green */
hsl(240,100%,50%)    /* blue */ 
hsla(0,100%,50%,0.05)   /* 5% opaque red */

顏色表示的選擇

一般我們都使用十六進制的表示法，書寫簡單而且和其他軟件通用，在需要透明顏色的時候用rgba，hsl在設計上對顏色的變化更好控制，但是這個東西對于大多數程序員來說不像rgb那么只管，用得并不多，不過hsl有可能今后會成為主流。

長度 px, em, rem

這三個都是表示長度的單位，px作為絕對單位（在web頁面上），em、rem則是相對單位。

px本身是一個相對單位，一個像素就是顯示器上看到的一個點，每個點的大小，取決于顯示器的分辨率；

但是CSS規范做了一個規范：將96ppi作為參考像素，瀏覽器會根據這個標準進行縮放，保證在所有顯示器上顯示的長度是確定的

px

在網頁中，1 px = 1 / 96 in。對于高度、寬度固定的頁面，用px非常方便直觀，但是考慮到移動端適配，絕對尺寸就很難辦。

html{
  font-size: 16px;
}
body{
  max-width: 960px;
}

瀏覽器默認會設置一個字體大小：16px；也會限制字體大小的范圍：9px ~ 72px。

通過設置根元素(html)字體大小，可以改變瀏覽器默認字體大小的設置：

/* 為了方便計算，我們把html字體大小設置為10px */
html{
  font-size: 10px;
}

font-size具有繼承性，如果未設置字體大小，元素的font-size將繼承父元素font-size大小

注意下面兩個p標簽的字體大小：

html{
  font-size: 16px;
}
.title{
  font-size: 32px
}

<p>這是一個常規段落</p>
<div class="title">
  <p>這是在h2中的段落</p>
</div>

em

em是一個相對長度單位，1em = 使用em單位的元素的字體大小（注意不是參考的它的父元素，而是它自己，很多博客和文檔這在有問題）

button{
  font-size: 16px;
  padding: .3em .8em;
}

padding的實際大小為：

上下padding 16*0.3 = 4.8 = 5px

左右padding 16 * 0.8 = 12.8 = 13px

對于帶小數點的px，現在的瀏覽器（IE8+、Chrome、Firefox、Safari）都會采用四舍五入的方法取整

rem

rem與em相似，僅參考對象不同，rem始終參考根元素的字體大小

看下面的例子 px, rem, rem：

<iframe height='357' scrolling='no' title='aBeaQM' src='//codepen.io/voyax/embed/aBeaQM/?height=357&theme-id=dark&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a >aBeaQM</a> by voya (<a >@voyax</a>) on <a >CodePen</a>.
</iframe>

px, em ,rem的選擇

  • 完全明確、不需要縮放的布局，才使用px
  • em慎重考慮，一般只用在組件內部，不然會導致很麻煩的嵌套計算……
  • 優先考慮rem

分別看一個可縮放的按鈕和響應式頁面：

可縮放按鈕：在組件內使用em

button{
  padding: .3em .8em;
  border: 1px solid #333;
  border-radius: .2em;
  line-height: 1.5;
}

在button內使用em來進行縮放，只要改變字體，就能創建不同尺寸的按鈕！是不很方便！

響應式設計：rem

rem結合媒體查詢，改變根元素字體大小，適應不同的設備。

<iframe height='265' scrolling='no' title='rem responsive' src='//codepen.io/voyax/embed/ZBgqPE/?height=265&theme-id=dark&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a >rem responsive</a> by voya (<a >@voyax</a>) on <a >CodePen</a>.
</iframe>

推薦閱讀：綜合指南: 何時使用Em與Rem

CSS選擇器

選擇器用于標識是哪些元素需要被應用樣式規則。

最簡單直接通過標簽名，就只可以選擇文檔中所有的該標簽；也通過為HTML標簽定義class或者id屬性，使用類選擇器、id選擇器；還有什么屬性選擇器、偽類選擇器……

其實道理都一樣，反正就是讓被選擇的元素應用相應的規則，僅僅是寫法不同而已。

看幾個例子：

標簽選擇器：

/* 設置所有p標簽字體為16px */
p{
  font-size: 16px;
}

類選擇器：

<!-- html -->
<div class="info">
  …
</div> 

<!-- css -->
/* 設置所有class為info的元素顏色為綠色 */
.info{
  color: green;
}

類選擇器.class-name和后代選擇器ancestor-selector descendant-selector會是你工作中用到最多的兩個選擇器。

CSS選擇器參考

基礎選擇器

組合選擇器

CSS 2.1 屬性選擇器

注：CSS 2.1 屬性選擇器還有一個特點就是使用多個選擇器，同事滿足這多個選擇器：blockquote[class=quote][cite] { color:#f00; }

CSS 2.1 中的偽類

CSS 2.1 中的偽元素

CSS 3 的同級元素通用選擇器

CSS 3 屬性選擇器

CSS 3 中與用戶界面有關的偽類

CSS3 中的結構性偽類


CSS 3 反選偽類

CSS 3 :target偽類

挑戰一下

上邊的內容學完后，你覺得可以模仿寫一個谷歌商務合作的頁面么，不需要考慮什么規范、規則，盡量按照自己想的，看看能做到什么程度。實在寫不出來了，再繼續學習下一課，這樣才會明白下節課的內容到底有什么用。

附上你可能需要的CSS屬性參考手冊，

CSS推薦書單

  • 入門自學——《精通CSS 高級Web標準解決方案》

    不要看這本書有點老了，但是目前為止，我仍然覺得它是入門的最佳選擇，里邊的知識點都有結合實際應用，不會枯燥的。


  • 參考手冊——《CSS權威指南》

    這本書適合慢慢啃，講了很多原理、細節，第一遍看可能有很多看不明白或者覺得沒用，但是建議你堅持看，到最后你會覺得，原來如此，有道理（很多時候一些疑難雜癥的根源都可以從這本書找到）


  • 使用技巧——《CSS 揭秘》

    今年（2016）才出的一本書，廣受追捧，里邊有很多CSS難點和實用技巧，看完它你CSS提升應該算立竿見影了


原文地址：CSS內功心法——基礎入門-4光年

拉了一個微信群，僅允許討論開發相關的
圖片發自簡書App
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1贊 92
  • CSS基礎 本文包括CSS基礎知識選擇器（重要！！！）繼承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,178評論 0贊 40
  • CSS實際上如何工作？ 當瀏覽器顯示文檔時，它必須將文檔的內容與其樣式信息結合。它分兩個階段處理文檔：瀏覽器將HT...
    曉風殘月1994閱讀 597評論 0贊 4
  • 面對感情。。。
    阿什閱讀 48評論 0贊 1
  • 可能，是我的眼睛太灼熱 已經把淚水燒干 時間敲響了警之鐘 多少人從正在奔跑的地平線上迂回 曾經，也想象過大草原的遼...
    向春光原創文學閱讀 159評論 4贊 9