# 轉載請留言聯系
我們都知道html寫出來的東西是一個文本內容，很單調。和我們平時刷網頁看到的內容不一樣。那普通的網頁是怎樣對html超文本進行裝飾的呢？沒錯，就是CSS。
-
css的基本語法
選擇器{
樣式屬性:樣式值;
樣式屬性:樣式值;
樣式屬性:樣式值;
}
實際效果，例如：
div{
width:100px;
height:100px;
background:gold;
}
-
CSS的引入方式
1.內聯式：通過標簽的style屬性，在標簽上直接寫樣式。
<!DOCTYPE html> <html lang="en"> <head> <!--在<head></head>>里面寫CSS樣式--> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p style="font-size: 50px; color:greenyellow; background: black; height:150px; width: 250px;">我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> </body> </html>
這種方式會使HTML源代碼過於雜亂，而且不能進行拓展，所以基本不用。
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2.嵌入式：通過style標簽，在網頁上創建嵌入的樣式表。
<!DOCTYPE html> <html lang="en"> <head> <!--在<head></head>>里面寫CSS樣式--> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 50px; color:greenyellow; background: black; height:150px; width: 250px; } </style> </head> <body> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> </body> </html>
這種方式也會是HTML代碼過於冗長，也很少用。
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3.外鏈式：通過link標簽，鏈接外部樣式文件到頁面中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="demo.css"/> </head> <body> <p href="http://www.baidu.com">百度</p> <p class="odd">第一段</p> <p class="bg">第二段</p> <h1 class="odd bg">大標題</h1> <div class="onediv"> <p>啦啦啦</p> <p>bibibi</p> <h3>pipipi</h3> </div> <div class="twodiv"> <p>嘟嘟嘟</p> <p>jijiji</p> </div> </body> </html>
div{ <----------------標簽選擇器，使用標簽名作為選擇器，意指給同名的標簽統一加上外觀樣式。 width: 250px; height: 250px; background: aqua; } .odd{ <----------------類選擇器，可以使用class的屬性，把html網頁中的標簽進行指定分類，選擇器就是分類名稱。 color: crimson; } .bg{ background: darkcyan; color: aquamarine; } div p{ <---------層級選擇器，我們可以多個不同的范圍的選擇器寫在一起，來控制樣式的效果范圍。層級選擇器可以有2層，3層或者多層，例如，div p 則表示是div包含的p標簽會被指定樣式。 font-size: 60px; } .onediv{ color: coral; }
注意：
1. 使用類名作為選擇器的時候，類名左邊必須有一個英文的圓點( . )
2. 類名的設置，是不區分標簽，也就是說，p和h1之類的標簽，都可以設置為同一個類
3. 同一個標簽，可以在class屬性中，設置屬於多個類的，類名之間使用空格隔開
4. 如果同一個標簽中，存在同樣的樣式屬性，但是值不一樣，則采用最后聲明的那一個