《Oli的前端一萬小時》之：（9）CSS 給盒子、背景、鏈接、列表、表單、表格等加樣式

來自專欄 Oli的前端一萬小時

本知識學慣用時：5小時，總第47/10000小時

前言：通過前 8 篇文章基礎知識的鋪墊，我們也算是見識了 CSS 的「神通廣大」。不止 10 個大佬曾說過：整個前端的學習， HTML 和 CSS 才是最難學的，後邊的 JS 等雖「號稱」是真正意義上的編程，但學習過程卻是呈「線性」平滑上升的。CSS 則不然，他總是給你一種：「哎喲，我掌握了哦，很簡單嘛！」、「我**，怎麼會這樣，水太深了！」、「哦哦，原來是這個原理，我就說嘛！」……如此周而復始，雖不能說「生生不息」，但 CSS 的學習真的是一件細水長流的事。

那這篇文章，我們就把實際工作中最高頻用到的「CSS 加樣式」挨個列一列，用一行行代碼來展示 CSS 是如何給「盒子」、「背景」、「鏈接」、「列表」、「表單」、「表格」等加樣式的。

這篇的所有知識點為必掌握項，我們學習的時候可以先自己按要求寫出樣式，然後參照我的代碼，把一行行全部弄懂。

一、CSS 實現如下邊框效果

參考代碼：

html

<p class="box1"> 「UI設計」和「前端代碼實現」在實際工作中既像「冤家」又像「情人」。此號目的：把「冤家」、「情人」變成「內人」。前期咱們聊基礎，後期咱們聊提高。 一切從零開始，一點一點到一萬，一步一步做大佬！ </p> <p class="box2"> 「UI設計」和「前端代碼實現」在實際工作中既像「冤家」又像「情人」。此號目的：把「冤家」、「情人」變成「內人」。前期咱們聊基礎，後期咱們聊提高。 一切從零開始，一點一點到一萬，一步一步做大佬！ </p> <p class="box3"> 「UI設計」和「前端代碼實現」在實際工作中既像「冤家」又像「情人」。此號目的：把「冤家」、「情人」變成「內人」。前期咱們聊基礎，後期咱們聊提高。 一切從零開始，一點一點到一萬，一步一步做大佬！ </p> <p class="box4"> 「UI設計」和「前端代碼實現」在實際工作中既像「冤家」又像「情人」。此號目的：把「冤家」、「情人」變成「內人」。前期咱們聊基礎，後期咱們聊提高。 一切從零開始，一點一點到一萬，一步一步做大佬！ </p>

css

body { width: 600px; margin: 0 auto;}p { margin-top: 30px; line-height: 1.5; padding: 18px 16px;}.box1 { border: 1px solid #ccc; border-radius: 3px; /*我們用 border-radius 給邊框加「圓角」*/ }.box2 { background-color: #ffe7e7; border-left: 6px solid #f44336; border-right: 7px solid #f44336;}.box3 { background-color: #ffffd7; border-top: 6px solid #ffeb3b; border-bottom: 7px solid #ffeb3b;}.box4 { background-color: #e7ffe7; border: 1px solid #4CAF50; border-bottom: 7px solid #4CAF50;}

二、CSS 實現如下邊框、按鈕效果

參考代碼：

html

<ul class="btn"> <li><a class="btn-s" href=""> steal</a></li> <li><a class="btn-y" href=""> yellow</a></li> <li><a class="btn-o" href=""> orange</a></li> <li><a class="btn-r" href=""> red</a></li> <li><a class="btn-g" href=""> green</a></li></ul>

css

body,h1,h2,h3,h4,h5,h6,ul,li,p { margin: 0; padding: 0;}/*以上這種常用的設置是為了把瀏覽器默認樣式——margin、padding 所產生的縫隙給去掉，以便後邊我們自己加樣式*/ul { list-style: none;}/*這個是為了把列表前邊的」小黑點「或」數字「去掉*/a { text-decoration: none;}/*這個可以把 a 鏈接下邊默認的」下劃線「去掉*/body { text-align: center;}.btn>li { display: inline-block;/*使列表變成」行內盒子「，讓它展示成」一行「*/ margin-top: 30px;}a { display: inline-block;/*使」塊盒子「顯示為」行內盒子「，讓它展示成」一行「*/ padding: 8px 10px; color: #000; border-radius: 3px; }a:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }.btn-s { background-color: #009688; color: #fff; }.btn-y { background-color: #ff9800;}.btn-o { background-color: #ffeb3b; }.btn-r { background-color: #f44336; color: #fff; }.btn-g { background-color: #4CAF50; color: #fff;}

三、CSS 實現如下兩個表格效果

參考代碼：

html

<table class="display"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> </thead> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> <tr> <td>Bo</td> <td>Nilsson</td> <td>50</td> </tr> <tr> <td>Mike</td> <td>Ross</td> <td>35</td> </tr> </tbody> </table> <table class="display display-1"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> </thead> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> <tr> <td>Bo</td> <td>Nilsson</td> <td>50</td> </tr> <tr> <td>Mike</td> <td>Ross</td> <td>35</td> </tr> </tbody> </table>

css

body { font-family: arial; width: 600px; margin: 0 auto;/*把 margin 設置為 0 auto ，是我們讓」塊級元素「居中最常用的方法*/} table { margin-top: 30px;}.display { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ccc;}.display th { color: #fff; background-color: #4CAF50; padding: 8px 8px; font-weight: bold;}.display tr { border-bottom: 1px solid #ddd; text-align: left;}.display tr:nth-child(even) {/*這裡的」結構選擇器「請看下邊注釋詳解*/ background-color: #f1f1f1;}.display td { padding: 8px 8px;}.display.display-1 { border:none;}.display.display-1 th { background-color: #fff; color: #000;}

??注釋：結構選擇器

第一類：

1?? 選擇其父元素的第一個子元素。E:first-child2?? 選擇其父元素的最後一個子元素。E:last-child3?? 選擇父元素下第 n 個元素或奇偶元素，n 的值為：數字/odd/even。E:nth-child(n)

第二類：

1?? 選擇父元素下使用同種標籤的第一個標籤元素。E:first-of-type2?? 選擇父元素下使用同種標籤的最後一個標籤元素。E:last-of-type3?? 選擇父元素下使用同種標籤的第 n 個標籤元素。n 的值為：數字/odd/even。E:enth-of-type(n)

?（用例子講解）：試著運行以下代碼，並對結果作出解釋。

html

<div class="container"> <div class="box">div.box</div> <p class="box">p.box</p> <div class="box">div.box</div> <div class="box"> <div class="item">div.item</div> <p class="item">p.item</p> </div> <p class="box"></p> </div>

css

.box:first-child { color: red;}.box:first-of-type { background: blue;}.box :first-child { font-size: 30px;}.box :first-of-type { font-weight: bold;}

??答：

以上 html 結構為

1.

.box:first-child { color: red;}

匹配類名為 box 的元素的父元素的第一個子元素，為 ①，使其字體顏色為 red 。①生效；

2.

.box:first-of-type { background: blue;}

匹配類名為 box 的元素的父元素下使用「同種標籤」的「第一個」標籤元素。①③④ 使用的是 <div> ，②⑤ 使用的是 <p> 標籤。故選同種標籤的第一個，① ② 生效；

3.

.box :first-child { font-size: 30px;}

選擇類名為 box 的後代元素的第一個子元素，加樣式。 故 ⑥ 生效；

4.

.box :first-of-type { font-weight: bold;}

選擇類名為 box 的後代元素同標籤的第一個標籤元素加樣式。故⑥ ⑦ 生效。

四、CSS 實現如下三角形

參考代碼：

html

<div class="t0"></div> <div class="t1"></div> <div class="t2"></div> <div class="t3"></div> <div class="t4"></div> <div class="t5"></div> <div class="t6"></div>

css

.t0 { height: 0; width: 0; border-top: solid 20px blue; border-right: solid 20px yellow; border-bottom: solid 20px green; border-left: solid 20px red;}.t1 { margin-top: 20px; height: 0; width: 0; border-top: solid 20px blue; border-right: solid 20px transparent; border-bottom: solid 20px transparent; border-left: solid 20px transparent;}.t2 { margin-top: 20px; height: 0; width: 0; border-top: solid 20px transparent; border-right: solid 20px transparent; border-bottom: solid 20px transparent; border-left: solid 20px red;}.t3 { margin-top: 20px; height: 0; width: 0; border-top: solid 20px transparent; border-right: solid 20px yellow; border-bottom: solid 20px transparent; border-left: solid 20px transparent;}.t4 { margin-top: 20px; height: 0; width: 0; border-top: solid 20px transparent; border-right: solid 20px transparent; border-bottom: solid 20px blue; border-left: solid 20px transparent;}.t5 { margin-top: 20px; width: 0; height: 0; border-right: 30px solid transparent; border-bottom: solid 30px red;}.t6 { margin-top: 20px; width: 0; height: 0; border-left: 30px solid transparent; border-bottom: solid 30px green;}

五、CSS 對邊框做圓角、圓形

參考代碼：

html

<div class="circle-1"></div> <div class="circle-2"></div> <div class="circle-3"></div>

css

.circle-1 { width: 100px; height: 100px; border: 1px solid black; border-radius: 15px;}.circle-2 { margin-top: 30px; width: 100px; height: 100px; border: 1px solid black; border-radius: 10px 8px 6px 2px;}.circle-3 { margin-top: 30px; width: 100px; height: 100px; border: 1px solid black; border-radius: 50px; /*大於等於寬高的一半 50px; 或者為方便，直接 50%；*/}

六、CSS 給盒子加個「背景」

-- <1> 需要注意的：

加個「背景」就是加個圖片，這個圖片是背景圖片，背景圖片相當於這個元素是一個窗口，而背景圖片就是這個窗口後的風景。

假如這個窗口沒有了，那這個背景圖片也可能看不到，比如沒有 height ,就沒有窗口：

html

<div class="box"></div>

css

.box { width: 200px; height: 200px; border: 1px solid; background-image: url(http://p20ssnusz.bkt.clouddn.com/%E5%A4%B4%E5%83%8F1.png;) }

還有一個明顯的例子：對於 span 他這個裡邊沒有內容就代表著他沒有寬度。當然就什麼也沒有。你稍微加一點文字，也會顯示出來。

html

<span class="box"></span>

css

.box { width: 200px; height: 200px; border: 1px solid; background-image: url(http://p20ssnusz.bkt.clouddn.com/%E5%A4%B4%E5%83%8F1.png); }

-- <2> 對於 background-size 需要知道的：

background-size 的設置是去拉伸背景圖片（給圖片加一個長度的範圍）以適應給定的「寬高」尺寸。

① 設置絕對長度值。

html

<div class="box"></div>

css

.box { width: 200px; height: 200px; border: 1px solid; background: url(http://p20ssnusz.bkt.clouddn.com/%E5%A4%B4%E5%83%8F1.png) 0 0 no-repeat; background-size: 200px 200px;}

② 設置為 50% ，就代表窗口寬度的一半。

③ 設置為 contain ,縮放背景圖片以完全裝入背景區，可能背景區部分空白。代表不管你背景圖片多麼的異型，我們這個窗口都可以把你給包圍起來。

④ 設置 cover ,縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見。

-- <3> css sprite 精靈圖

css sprite 指將不同的圖片、圖標合併在一張圖上。使用 css sprite 可以減少網路請求，提高網頁載入性能——其實就是使用「背景圖片」的方式來展示這些放在一張圖上的小圖標。

但由於圖片的「可維護性」很差，現在一般都會選擇用「字體圖標」——在文章 《

（5）CSS 給文本加樣式——① 字體屬性》中有詳細講解。

??製作精靈圖的網站：CSS Sprites Generator

??圖片壓縮網站：tinypng

--TinyPNG 使用智能有損壓縮技術來減少 PNG 文件的文件大小，提高網站載入性能。

七、CSS 如何實現：單行文本溢出加 ...

html

<div class="card"> <img src="http://p20ssnusz.bkt.clouddn.com/%E5%A4%B4%E5%83%8F2.0.png"> <h3><a href="#">Hello, Oli的前端一萬小時。</a></h3> <p>「UI設計」和「前端代碼實現」在實際工作中既像「冤家」又像「情人」。此號目的：把「冤家」、「情人」變成「內人」。前期咱們聊基礎，後期咱們聊提高。 一切從零開始，一點一點到一萬，一步一步做大佬！ </p> </div>

css

.card{ width: 150px; border: 1px solid #ccc; font-size: 12px; margin: 0 auto;}.card>img { width: 150px;}.card>h3 { padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}/*上邊的三個屬性必須連用才生效——單行文本溢出加 … */.card>h3>a { text-decoration: none; color: red;}.card>p { padding: 0 10px; color: #666;}

後記：CSS 能做的事情還有很多，上邊介紹的都是實際工作中的高頻用法，屬於必掌握。至於其他用法，我們要抱有敬畏之心去細水長流地認真學習，不必一蹴而就。

下篇，我們做一個小頁面，把這之前學到的基礎知識統統活用起來。加油！

歡迎繼續關注下文 ：

（10）CSS 做個小頁面

（本文版權歸 「Oli的前端一萬小時」 所有，轉載需說明來源）

推薦閱讀：