CSS基礎教程（上）成哥為大家介紹了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. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. </head>
6. <body>
7. <h4>塊級标簽示例</h4>
8. <!--我們将行内标簽span設置為塊級标簽，最終效果設置成span效果的标簽會獨占一行，行内标簽設置高度不生效，塊級标簽設置高度生效-->
9. <spanstyle="background-color:#2eabff;height:40px;">我是span1,我是行内标簽在同一行，設置高度沒生效</span>
10. <spanstyle="background-color:#722ed1;height:60px;">我是span2,我是行内标簽在同一行，設置高度沒生效</span>
11. <spanstyle="display:block;background-color:#87e8de;height:50px;">我是span3,我被設置
12. 成塊級标簽我獨占一行，設置高度生效</span>
13.
14. <h4>行内标簽示例</h4>
15. <!--将塊級标簽div設置成行内标簽，讓其在同行顯示,并且對其設置高度不會生效-->
16. <divstyle="display:inline;background-color:#722ed1;height:50px;">我是div1,我被設置成行内标簽，
17. 所以和div2在同行顯示，設置高度沒生效</div>
18. <divstyle="display:inline;background-color:#52c41a;height:50px;">我是div2,我被設置成行内标簽，
19. 所以和div1在同行顯示，設置高度沒生效</div>
20.
21. <h4>行内塊級标簽示例</h4>
22. <!--将div模塊設置成行内塊級标簽，可以讓其在同行顯示，同時還可以設置高度-->
23. <divstyle="display:inline-block;background-color:#a0d911;height:60px;">我是div3,
24. 被設置成行内塊級标簽，可同行顯示，設置高度生效</div>
25. <divstyle="display:inline-block;background-color:#aaaaaa;height:50px;">我是div4,
26. 被設置成行内塊級标簽，可同行顯示，設置高度生效</div>
27.
28. <h4>display:none示例</h4>
29. <span>我下面還有内容但被設置成display:none所以看不到，可以通過遊覽器頁面内容debug中看到</span>
30. <divstyle="display:none">我被隐藏了</div>
31. </body>
32. </html>
（2）高度與寬度樣式
height與width是用于設置html标簽的寬度與高度的，其設置的單位通常有像素與百分比。如果height需要設置成百分比，那需要在其外面套一個父标簽并設置其高度才可以，因為html高度是無限制的所以直接使用是無效的。height與width屬性的其具體使用如下所示：
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="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. <divclass="class1">寬300像素，高60像素</div>
21.
22. <!--由于class2中使用了為百分比的高度，所以必須在其外加上父标簽同時需要設置其高度-->
23. <divstyle="height:500px">
24. <divclass="class2">寬50%，高10%</div>
25. </div>
26.
27. </body>
28. </html>
（3）字體樣式
CSS可以對HTML的字體類型、字體大小、字體粗細及字體顔色等維度進行設置，其具體示例如下所示：
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <style>
6. .class1{
7. font-family:"MicrosoftYaHei";
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. <divclass="class1">我是微軟雅黑</div>
25.
26. <h4>2.字體大小示例</h4>
27. <divclass="class2">大小：15px</div>
28.
29. <h4>3.字體粗細示例</h4>
30. <divclass="class3">我被加粗了</div>
31.
32. <h4>4.字體顔色示例</h4>
33. <divclass="class4">我是紅色</div>
34.
35. </body>
36. </html>
（4）文本樣式
CSS的文本樣式中最常用的屬性就是對文本的對齊方式進行設置，在水平方向可以設置左、中、右對齊方式，在垂直方向可以設置上、中、下對齊方式，具體示例如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="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. <divclass="class1"style="background-color:rosybrown;text-align:left;">左對齊</div>
17. <divclass="class1"style="background-color:#2eabff;text-align:center;">居中</div>
18. <divclass="class1"style="background-color:coral;text-align:right;">右對齊</div>
19.
20. <h4>2.垂直方向設置</h4>
21. <divclass="class1"style="background-color:#b7eb8f;">默認文字在垂直方向是靠最上排列</div>
22. <!--垂直居中就是将line-height的值設置與高度一緻-->
23. <divclass="class1"style="background-color:darkseagreen;line-height:40px;">垂直居中</div>
24.
25. <h4>3.兩個方向居中</h4>
26. <divclass="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. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="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. <divstyle="height:50px;width:200px;border:1pxsolidred;background-color:#b7eb8f">
17. <div>
18. CSS基礎教程。
19. </div>
20. </div>
21.
22. <h4>2.有内邊距</h4>
23. <!--設置一個寬200px,高50px的div，然後為其設置邊框-->
24. <divstyle="height:50px;width:200px;border:1pxsolidred;background-color:#87e8de">
25. <!--内邊距設置為10px,這邊的10px表示上下左右都設置成10px,可以使用padding-(top,bottom,left,right)隻設置一邊-->
26. <divstyle="padding:10px;">
27. CSS基礎教程。
28. </div>
29. </div>
30.
31. </body>
32. </html>
2）外邊距（margin）
外邊距用于相鄰的标簽之間增加距離用。邊距可以設置上、下、左、右方向。具體示例如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="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. <divclass="class1"style="background-color:#87e8de">div1</div>
17. <divclass="class1"style="background-color:#46a6ff">div2</div>
18.
19. <h4>2.有外邊距</h4>
20. <divclass="class1"style="margin:10px;background-color:#87e8de">div3</div>
21. <divclass="class1"style="margin:10px;background-color:#46a6ff">div4</div>
22.
23. </body>
24. </html>
（6）float浮動
float浮動用于實現多個标簽并排存放，一般用于塊級标簽，我們一般頁面的橫排目錄都會用該屬性來實現。float屬性支持将标簽設置為左浮動（float:left）與右浮動（float:right），具體示例如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. </head>
6. <body>
7. <h2>浮動示例</h2>
8. <div>
9. <divstyle="float:left;width:100px;background-color:yellowgreen;">左浮動</div>
10. <divstyle="float:right;width:100px;background-color:blue;">右浮動</div>
11. <!--在使用浮動後需要進行清除，不然就會脫離文檔流，也就不會按照html固定的順序進行排版-->
12. <divstyle="clear:both;"></div>
13. </div>
14. </body>
15. </html>
（7）定位（position）
position用于對屏幕上的标簽進行定位，定位有三種類型分别為絕對定位（position：absolute;）、相對定位（position：relative;）與固定定位（position：fixed;），下面我們分别進行介紹
1）絕對定位
絕對定位一般以浏覽器左上角為基準設置位置，但如果定位标簽存在父标簽且父标簽存在定位設置則子标簽以父标簽的左上角為基準。絕對定位的具體示例如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="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. <divclass="class1">絕對定位</div>
18. </body>
19. </html>
2）相對定位
相對定位以元素自身的位置為基準設置位置，相對定位需要占用位置空間。通常父标簽設置為相對定位，子标簽設置為絕對定位，具體示例如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="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. <divclass="class1">
26. <divclass="class2">我是子标簽</div>
27. </div>
28. </body>
29. </html>
3）固定定位
固定定位表現類似于絕對定位，兩者主要區别是絕對定位是以html的元素進行定位的，而固定定位是以遊覽器窗口進行定位。具體使用示例如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="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. <divclass="class1">固定定位</div>
18. </body>
19. </html>
hover僞類作用：當鼠标放在标簽上時，可以能夠設置一些樣式。
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="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. <divclass="class1">将鼠标放在我上面，将會變色</div>
19. </body>
20. </html>
至此我們《CSS基礎教程》就講完了，如有任何問題歡迎在文章後面進行留言。最後如果喜歡本篇文章不要忘了點贊、關注與轉發哦！
-END-
程序員都必掌握的前端教程之CSS基礎教程（上）
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
