程序員都必掌握的前端教程之CSS基礎教程（下）

SS基礎教程（上）成哥為大家介紹了CSS的基礎知識及選擇器，本篇文章主要介紹CSS的常用樣式屬性及偽類等內容，下面成哥就為大家一一介紹這些內容。

01 CSS樣式

CSS的基礎樣式如下表所示：

下面我們主要講解一下常用的樣式。

（1）display樣式

display屬性有四個常用的值，用來修改標簽的展示狀態：

1）display:block，將標簽設置為塊級標簽，塊級標簽獨自占據一行高度，可以自定義width 和height，每個塊級元素都從新一行開始，并且其后的元素都另起一行，常見的塊級標簽有div、h{number}、p、ul、table等；

2）display:inline，將標簽設置為行內標簽，行內標簽會在一條直線上排列，不可以自定義自定義width和height，常見的行內元素有a、span等；

3）display:inline-block，將便簽設置為行內塊級標簽（行內標簽與塊級標簽的結合），可以自定義width和height，常見原生就是行內塊級標簽的有input、img標簽；

4）display:none，隱藏標簽，使用了該設置的標簽在html頁面中不顯示。

下面我們對上述四種樣式設置進行演示具體如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5. </head>  
6. <body>  
7.    <h4>塊級標簽示例</h4>  
8.    <!-- 我們將行內標簽span設置為塊級標簽，最終效果設置成span效果的標簽會獨占一行，行內標簽設置高度不生效，塊級標簽設置高度生效 -->  
9.     <span style="background-color: #2eabff; height: 40px;">我是span1,我是行內標簽在同一行，設置高度沒生效</span>  
10.     <span style="background-color: #722ed1; height: 60px;">我是span2,我是行內標簽在同一行，設置高度沒生效</span>  
11.     <span style="display: block; background-color: #87e8de; height: 50px;">我是span3,我被設置  
12.       成塊級標簽我獨占一行，設置高度生效</span>  
13.   
14.    <h4>行內標簽示例</h4>  
15.    <!-- 將塊級標簽div設置成行內標簽，讓其在同行顯示, 并且對其設置高度不會生效  -->  
16.    <div style="display: inline; background-color: #722ed1; height: 50px;">我是div1,我被設置成行內標簽，  
17.      所以和div2在同行顯示，設置高度沒生效</div>  
18.    <div style="display: inline; background-color: #52c41a; height: 50px;">我是div2,我被設置成行內標簽，  
19.      所以和div1在同行顯示，設置高度沒生效</div>  
20.   
21.    <h4>行內塊級標簽示例</h4>  
22.   <!-- 將div模塊設置成行內塊級標簽，可以讓其在同行顯示，同時還可以設置高度  -->  
23.    <div style="display: inline-block;background-color: #a0d911;height: 60px;">我是div3,  
24.      被設置成行內塊級標簽，可同行顯示，設置高度生效</div>  
25.    <div style="display: inline-block;background-color: #aaaaaa;height: 50px;">我是div4,  
26.      被設置成行內塊級標簽，可同行顯示，設置高度生效</div>  
27.   
28.   <h4>display:none示例</h4>  
29.    <span>我下面還有內容但被設置成display:none所以看不到，可以通過游覽器頁面內容debug中看到</span>  
30.    <div style="display: none">我被隱藏了</div>   
31. </body>  
32. </html>

（2）高度與寬度樣式

height與width是用于設置html標簽的寬度與高度的，其設置的單位通常有像素與百分比。如果height需要設置成百分比，那需要在其外面套一個父標簽并設置其高度才可以，因為html高度是無限制的所以直接使用是無效的。height與width屬性的其具體使用如下所示：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <style>  
6.     .class1{  
7.       width: 300px;  
8.       height: 60px;  
9.       background-color: coral;  
10.     }  
11.     .class2{  
12.       width: 50%;  
13.       height: 10%;  
14.       background-color: #2aabd2;  
15.     }  
16.   </style>  
17. </head>  
18. <body>  
19.    <h4>height與width設置示例</h4>  
20.    <div class="class1">寬300像素，高60像素</div>  
21.   
22.   <!-- 由于class2中使用了為百分比的高度，所以必須在其外加上父標簽同時需要設置其高度 -->  
23.    <div style="height: 500px">  
24.      <div class="class2">寬50%，高10%</div>  
25.    </div>  
26.   
27. </body>  
28. </html>

（3）字體樣式

CSS可以對HTML的字體類型、字體大小、字體粗細及字體顏色等維度進行設置，其具體示例如下所示：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <style>  
6.     .class1{  
7.       font-family: "Microsoft YaHei";  
8.     }  
9.     .class2{  
10.       font-size: 15px;  
11.     }  
12.   
13.     .class3{  
14.       font-weight: bold;  
15.     }  
16.   
17.     .class4{  
18.       color: red;  
19.     }  
20.   </style>  
21. </head>  
22. <body>  
23.    <h4>1.字體類型示例</h4>  
24.    <div class="class1">我是微軟雅黑</div>  
25.   
26.    <h4>2.字體大小示例</h4>  
27.    <div class="class2">大小：15px</div>  
28.   
29.    <h4>3.字體粗細示例</h4>  
30.    <div class="class3">我被加粗了</div>  
31.   
32.    <h4>4.字體顏色示例</h4>  
33.    <div class="class4">我是紅色</div>  
34.   
35. </body>  
36. </html>

（4）文本樣式

CSS的文本樣式中最常用的屬性就是對文本的對齊方式進行設置，在水平方向可以設置左、中、右對齊方式，在垂直方向可以設置上、中、下對齊方式，具體示例如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <style>  
6.     .class1{  
7.       width: 300px;  
8.       height: 40px;  
9.     }  
10.   
11.   </style>  
12. </head>  
13. <body>  
14.   
15.   <h4>1.水平方向設置</h4>  
16.   <div class="class1" style="background-color: rosybrown;text-align: left;">左對齊</div>  
17.   <div class="class1" style="background-color: #2eabff;text-align: center;">居中</div>  
18.   <div class="class1" style="background-color: coral; text-align: right;">右對齊</div>  
19.   
20.   <h4>2.垂直方向設置</h4>  
21.   <div class="class1" style="background-color: #b7eb8f;">默認文字在垂直方向是靠最上排列</div>  
22.   <!-- 垂直居中就是將line-height的值設置與高度一致 -->  
23.   <div class="class1" style="background-color: darkseagreen;line-height: 40px;">垂直居中</div>  
24.   
25.   <h4>3.兩個方向居中</h4>  
26.   <div class="class1" style="background-color: darkcyan;line-height: 40px;text-align: center">兩個方向居中</div>  
27.   
28. </body>  
29. </html>

（5）內邊距與外邊距

在了解內外邊距之前我們先了解一個模型即盒子模型，盒子模型就是把 HTML 頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。盒模型的寬度和高度和我們平常所說的物體的寬度和高度是不一樣的。CSS 定義的寬和高，指的是填充以里的內容范圍。而盒子的寬度=左外邊距+左邊框+左內邊距+內容寬度+右內邊距+右邊框+右外邊距。每個矩形都由元素的內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）組成，如下所示：

在了解了盒子模型后我們分別對內邊距及外邊距內容進行講解。

1）內邊距（padding）

padding內邊距作用是為被應用的標簽創建一部分內部間距。邊距可以設置上、下、左、右方向。具體示例如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <style>  
6.     .class1{  
7.       width: 300px;  
8.       height: 40px;  
9.     }  
10.   
11.   </style>  
12. </head>  
13. <body>  
14.   
15.     <h4>1.無內邊距</h4>  
16.     <div style="height: 50px; width: 200px; border: 1px solid red; background-color: #b7eb8f">  
17.       <div>  
18.         CSS基礎教程。  
19.       </div>  
20.     </div>  
21.   
22.     <h4>2.有內邊距</h4>  
23.     <!--  設置一個寬200px,高50px的div，然后為其設置邊框  -->  
24.     <div style="height: 50px; width: 200px; border: 1px solid red; background-color: #87e8de">  
25.       <!-- 內邊距設置為10px,這邊的10px表示上下左右都設置成10px, 可以使用padding-(top, bottom, left, right)只設置一邊-->  
26.       <div style="padding: 10px;">  
27.         CSS基礎教程。  
28.       </div>  
29.     </div>  
30.   
31. </body>  
32. </html>

2）外邊距（margin）

外邊距用于相鄰的標簽之間增加距離用。邊距可以設置上、下、左、右方向。具體示例如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <style>  
6.     .class1{  
7.       width: 200px;  
8.       height: 30px;  
9.     }  
10.   
11.   </style>  
12. </head>  
13. <body>  
14.   
15.     <h4>1.無外邊距</h4>  
16.     <div class="class1" style="background-color: #87e8de">div1</div>  
17.     <div class="class1" style="background-color: #46a6ff">div2</div>  
18.   
19.     <h4>2.有外邊距</h4>  
20.     <div class="class1" style="margin: 10px; background-color: #87e8de">div3</div>  
21.     <div class="class1" style="margin: 10px; background-color: #46a6ff">div4</div>  
22.   
23. </body>  
24. </html>

（6）float浮動

float浮動用于實現多個標簽并排存放，一般用于塊級標簽，我們一般頁面的橫排目錄都會用該屬性來實現。float屬性支持將標簽設置為左浮動（float:left）與右浮動（float:right），具體示例如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5. </head>  
6. <body>  
7.     <h2>浮動示例</h2>  
8.     <div>  
9.       <div style="float:left;width: 100px;background-color: yellowgreen;">左浮動</div>  
10.       <div style="float: right;width: 100px;background-color: blue;">右浮動</div>  
11.       <!--  在使用浮動后需要進行清除，不然就會脫離文檔流，也就不會按照html固定的順序進行排版  -->  
12.       <div style="clear: both;"></div>  
13.     </div>  
14. </body>  
15. </html>

（7）定位（position）

position用于對屏幕上的標簽進行定位，定位有三種類型分別為絕對定位（position：absolute;）、相對定位（position：relative;）與固定定位（position：fixed;），下面我們分別進行介紹

1）絕對定位

絕對定位一般以瀏覽器左上角為基準設置位置，但如果定位標簽存在父標簽且父標簽存在定位設置則子標簽以父標簽的左上角為基準。絕對定位的具體示例如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <style>  
6.     .class1 {  
7.       width: 100px;  
8.       height: 100px;  
9.       background-color: #46a6ff;  
10.       position: absolute;  
11.       left: 60px; /*相對于瀏覽器向左偏移60像素*/  
12.       top: 20px; /*相對于瀏覽器向上偏移20像素*/  
13.     }  
14.   </style>  
15. </head>  
16. <body>  
17.     <div class="class1">絕對定位</div>  
18. </body>  
19. </html>

2）相對定位

相對定位以元素自身的位置為基準設置位置，相對定位需要占用位置空間。通常父標簽設置為相對定位，子標簽設置為絕對定位，具體示例如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <style>  
6.     .class1 {  
7.       width: 200px;  
8.       height: 100px;  
9.       /* 父標簽設置相對定位 */  
10.       position: relative;  
11.       background-color: #aaaaaa;  
12.     }  
13.     .class2 {  
14.       width: 80px;  
15.       height: 50px;  
16.       position: absolute;  
17.       /* 子標簽設置絕對定位 */  
18.       background-color: #46a6ff;  
19.       top: 20px;  
20.       left: 30px;  
21.     }  
22.   </style>  
23. </head>  
24. <body>  
25.     <div class="class1">  
26.       <div class="class2">我是子標簽</div>  
27.     </div>  
28. </body>  
29. </html>

3）固定定位

固定定位表現類似于絕對定位，兩者主要區別是絕對定位是以html的元素進行定位的，而固定定位是以游覽器窗口進行定位。具體使用示例如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <style>  
6.     .class1 {  
7.       width: 100px;  
8.       height: 100px;  
9.       background-color: #46a6ff;  
10.       position: fixed;  
11.       top: 100px;  
12.       left: 80px;  
13.     }  
14.   </style>  
15. </head>  
16. <body>  
17.    <div class="class1">固定定位</div>  
18. </body>  
19. </html>

02 hover偽類

hover偽類作用：當鼠標放在標簽上時，可以能夠設置一些樣式。

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <style>  
6.     .class1 {  
7.       background-color: #46a6ff;  
8.     }  
9.   
10.     .class1:hover {  
11.       background-color: #722ed1;  
12.     }  
13.   
14.   </style>  
15. </head>  
16. <body>  
17.    <h4>偽類示例</h4>  
18.    <div class="class1">將鼠標放在我上面，將會變色</div>  
19. </body>  
20. </html>

03 總結

至此我們《CSS基礎教程》就講完了，如有任何問題歡迎在文章后面進行留言。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！

-END-

@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。

文章推薦：

程序員都必掌握的前端教程之CSS基礎教程（上）

HTML+CSS的技巧有哪些？怎么學好Web前端開發？經過Web前端學習的一個過程，每個人都會對前端的認識逐漸由淺入深，由一開始僵硬地使用標簽和標簽屬性進行簡單網頁布局，到最后能夠對網頁進行豐富的CSS渲染，逐漸不斷成長起來。接下來給大家分享一下階段學習技巧。

1、合理清晰的HTML文檔結構有著重要的意義。

首先，這有利于自己寫CSS時選擇標簽;其次，這方便別人閱讀自己的代碼;最后，合理的使用語義化標簽，也能讓方便各大搜索引擎的收錄。

2、對標簽添加浮動對網頁橫排有著非常重要的意義。

一開始接觸浮動這個概念的時候，我理解的并不深刻，導致對一個標簽進行浮動時，并沒有達到我想要的效果，甚至千差萬別。但是經過大量的網頁和小的demo訓練，我開始逐漸理解浮動的運行機制。

3、瀏覽器兼容與常見bug處理

比如：給子元素加margin-top時，父元素會隨之掉落;表單元素作為內聯元素，自然橫排時并沒有頂端對齊;透明度的兼容處理等。這些不是檢查語法出錯就能解決的，只有解決兼容和HTML本身bug才能保證我們的CSS渲染得以正確表達，隨著以后的工作學習中你會逐步了解。

4、彈性盒模型

彈性盒模型可謂是移動端布局的利器，它簡單又好用，而且看起來也沒有float排版看起來那么懸乎。缺就是目前只局限于移動端布局，所以在選擇彈性盒模布局時也要考慮具體的搭載平臺和瀏覽器。

5、CSS3新增屬性的使用

CSS3新屬性的學習讓我看到了更加豐富的網頁渲染，包括陰影、2D、3D、空間、動畫等的炫酷表現。在使用時需要注意的是這種炫酷的表現只被少數高版本的瀏覽器所兼容，因此需要根據具體場景來使用CSS3新特性，有必要時還需要進行兼容處理。

想要快速入行Web前端、成為一個好的Web前端工程師，你必須要有一個系統的學習規劃，還要有足夠多的項目練習以積累實戰經驗。而這些僅靠自學或者視頻學習是遠遠不夠的，最直接有效的方式就是參加專業的學習。

款純CSS實現的Loading特效展示了5個小球在橫排中散開和聚合的動畫。在頁面加載時，這些小球會從中心位置向外散開，形成橫排。在頁面加載完成后，這些小球又會聚合到中心位置，整個過程帶有流暢的動畫效果。

該特效使用了 CSS 的 animation 和 @keyframes 屬性，通過控制小球的位置變化，實現了動畫效果。

這款特效簡單而美觀，可以為你的網站或應用程序增添活力，提高用戶體驗。

在線咨詢

上一篇：Allavsoft for Mac(Mac視頻下載器
下一篇：北京一日游強迫購物套路翻新：導游守出口查購物小票

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

程序員都必掌握的前端教程之CSS基礎教程（下）

01 CSS樣式

02 hover偽類

03 總結

您的項目需求