CSS——CSS 給盒子、背景、連結、列表、表單、表格等加樣式

本文推薦 PC 端閱讀~

本文版權歸 “公眾號 | 前端一萬小時” 所有，未經授權，請勿轉載！
複製程式碼

css_09
複製程式碼

1. 讓一個元素“看不見”有幾種方式？有什麼區別？
2. 單行文字溢位加 ... 如何實現？
3. 如何在頁面上實現一個圓形的可點選區域？
複製程式碼

前言： 通過前 8 篇文章基礎知識的鋪墊，我們也算是見識了 CSS 的“神通廣大”。

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

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

1 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;
}
複製程式碼

2 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);
 }

/*?隱藏或者透明元素的方法：
1. opacity: 0;   透明度為 0 ，整體都看不見了；
2. visibility: hidden; 這個和上邊類似；
3. display: none; 消失，不佔用位置；
4. background-color: rgba(0,0,0,0.2); 只是背景色透明。*/


.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;
}
複製程式碼

3 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-collapse 屬性設定表格的邊框是否被合併為一個單一的邊框。它有以下幾個值：
-- separate 預設值：邊框會被分開，不會忽略 border-spacing 和 empty-cells 屬性；
-- collapse ：如果可能，邊框會合併為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性；
-- inherit ：規定應該從父元素繼承 border-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-child
2️⃣ 選擇其父元素的最後一個子元素。
E:last-child
3️⃣ 選擇父元素下第 n 個元素或奇偶元素，n 的值為：數字/odd/even。
E:nth-child(n)
複製程式碼

第二類：

1️⃣ 選擇父元素下使用同種標籤的第一個標籤元素。
E:first-of-type
2️⃣ 選擇父元素下使用同種標籤的最後一個標籤元素。
E:last-of-type
3️⃣ 選擇父元素下使用同種標籤的第 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 結構為

.box:first-child {
   color: red;
}
複製程式碼

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

.box:first-of-type {
   background: blue;
}
複製程式碼

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

.box :first-child {
   font-size: 30px;
}
複製程式碼

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

.box :first-of-type {
   font-weight: bold;
}
複製程式碼

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

4 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：

/*?css 畫三角形原理：
邊框顏色 border-color 四個值預設的載入方向是（上、右、下、左） top right bottom left 。
*/

.t0 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 100px 100px 100px;
  border-color: blue yellow green red;
}
複製程式碼

t1：

.t1 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 100px 0 100px;  /*?通過將 bottom 的 width 值設定為 0 來達到把多於的位置去掉！*/
  border-color: blue transparent transparent transparent;
}
複製程式碼

t5：

?分析

以綠色的三角形為例，它的“高度”就是 css 中設定的 100px 。而它的底邊長則為：

我們可以看到，在綠色三角形中，從它的頂點垂直下來一條線將綠色三角形分為兩個小的三角形：
1️⃣左邊小三角形受 left 影響；
2️⃣右邊小三角形受 right 影響。

由此，我們可以畫出 t5 這個三角形的形狀：

.t5 {
  width: 0;
  height: 0;
  boder-width: 0 100px 100px 0;  /*?由上邊的圖可以很清晰的得出各個邊應該是多少 px ！*/
  border-color: transparent transparent green transparent;
}
複製程式碼

5 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;  /*?border-radius 用於畫圓角！*/
}
.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%; */
}
複製程式碼

6 CSS 給盒子加個“背景”

6.1 需要注意的

加個“背景”就是加個圖片，這個圖片是背景圖片，背景圖片相當於：這個元素是一個視窗，而背景圖片就是這個視窗後的風景。

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

html

<div class="box"></div>
複製程式碼

css

.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  background-image: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 
}
複製程式碼

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

html

<span class="box"></span>
複製程式碼

css

.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  background-image: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg); 
}
複製程式碼

6.2 對於 background-size 需要知道的

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

① 設定絕對長度值。

html

<div class="box"></div>
複製程式碼

css

.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  background: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 0 0 no-repeat;
  background-size: 200px 200px;
}
複製程式碼

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

.box {
  width: 500px;
  height: 200px;
  border: 1px solid;
  background: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 0 0 no-repeat;
  background-size: 50%;
}
複製程式碼

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

.box {
  width: 500px;
  height: 200px;
  border: 1px solid;
  background: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 0 0 no-repeat;
  background-size: contain;
}
複製程式碼

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

.box {
  width: 600px;
  height: 200px;
  border: 1px solid;
  background: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 0 0 no-repeat;
  background-size: cover;
}
複製程式碼

6.3 css sprite 精靈圖

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

但由於圖片的“可維護性”很差，現在一般都會選擇用“字型圖示”——在文章《CSS——CSS 給文字加樣式：① 字型屬性》中有詳細講解。

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

?圖片壓縮網站：tinypng
TinyPNG 使用智慧有失真壓縮技術來減少 PNG 檔案的檔案大小，提高網站載入效能。

7 CSS 如何實現：單行文字溢位加 ...

7.1 前置知識：CSS 中的 overflow 屬性

p {
  overflow: 值;
}
複製程式碼

值	屬性
visible	預設值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，並且其餘內容是不可見的。
scroll	內容會被修剪，但瀏覽器會顯示滾動條以便檢視其餘的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

7.2 程式碼實現

?原始碼及效果展示
html

<div class="card">
  <img src="https://ws4.sinaimg.cn/large/006tNc79gy1g1xwmg3rfsj30u00uykjl.jpg">
  <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;  /*?1️⃣首先，強制文字不換行*/
   overflow: hidden;  /*?2️⃣其次，隱藏溢位*/
   text-overflow: ellipsis;  /*?3️⃣最後，對溢位的文字用 ellipsis 省略號代替*/
}
/*?上邊的三個屬性必須連用才生效——單行文字溢位加 … */

.card>h3>a {
   text-decoration: none;
   color: red;
}
.card>p {
   padding: 0 10px;
   color: #666;
}
複製程式碼

8 動手寫出下邊的頁面

?參考程式碼：
?原始碼及效果展示
html

<body>
  <h1 class="title">Oli's 前端一萬小時</h1>
  <p class="description">理論不懂就實踐，實踐不會就學理論</p>
  <ul class="tab-ct">
    <li><a class="btn" href="#">專案1</a></li>
    <li><a class="btn" href="#">專案2</a></li>
    <li><a class="btn" href="#">專案3</a></li>
    <li><a class="btn" href="#">專案4</a></li>
    <li><a class="btn" href="#">專案5</a></li>
  </ul>
  <img class="work-img" src="https://ws2.sinaimg.cn/large/006tNc79gy1g2dz1zw5faj30j60j60zj.jpg" alt="">
  <ul class="operate-ct">
    <li><a class="btn" href="#">檢視原始碼</a></li>
    <li><a class="btn" href="#">使用說明</a></li>
  </ul>
  <p class="footer">
    作者: <a href="#">Oli</a>
  </p>
</body>
複製程式碼

css

body,h1,h2,h3,h4,h5,h6,ul,li,p {
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
ul {
  list-style: none;
}
body{
  font-family: 14px/1.4 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', 'STHeiti', 'WenQuanYi Micro Hei', SimSun, sans-serif;

/*?這裡的 '\5FAE\8F6F\96C5\9ED1' 就是“微軟雅黑”這四個字的 unicode 碼*/
/*?我們怎麼知道一個“字型”的 unicode 碼？
  我們可以右鍵檢查元素，然後點選 console ，然後輸入 escape(`黑體`) ，
  就可以彈出相應的碼。然後把 %u 換成 \ 。
*/
 
 
  background: #fff;
  text-align: center;
}
.work-img {
  width: 250px;
}
.btn {
  display: inline-block;
  padding: 4px 6px;
  color: #fff;
  background-color: #72b890;
  border-radius: 3px;
}
.btn:hover {
  opacity: 0.7;
  
/*?隱藏或者透明元素的方法：
1️⃣ opacity: 0;   透明度為 0 ，整體都看不見了；
2️⃣ visibility: hidden; 這個和上邊類似；
3️⃣ display: none; 消失，不佔用位置；
4️⃣ background-color: rgba(0,0,0,0.2); 只是背景色透明。
*/

}


.btn:active {
  opacity: 1;
}
.title {
  color: #87968e;
  font-size: 35px;
  margin-top: 30px;
}
.description {
  color: #aaa;
  margin-top: 10px;
  opacity: 0.6;
}
.tab-ct {
  margin-top: 30px;
}
.tab-ct>li {
  display: inline-block;
  margin: 0px 4px;
}
.work-img {
  margin-top: 40px;
}
.operate-ct {
  margin-top: 40px;
}
.operate-ct>li {
  display: inline-block;
  margin: 0 4px;
}
.footer {
  color: #aaa;
  margin: 30px;
}
a{
  color: #72b890;
}
複製程式碼

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

加油！

CSS——CSS 給盒子、背景、連結、列表、表單、表格等加樣式

1 CSS 實現如下邊框效果

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

3 CSS 實現如下兩個表格效果

4 CSS 實現如下三角形

5 CSS 對邊框做圓角、圓形

6 CSS 給盒子加個“背景”

6.1 需要注意的

6.2 對於 background-size 需要知道的

6.3 css sprite 精靈圖

7 CSS 如何實現：單行文字溢位加 ...

7.1 前置知識：CSS 中的 overflow 屬性

7.2 程式碼實現

8 動手寫出下邊的頁面

相關文章