CSS代碼長什么樣？
CSS的代碼是類似 json 數據的鍵值對，也就是key : value，當然，每一句都必須以分號（；）結束，切記，沒有分號會出問題的。
其實類似 json 數據在我們生活中很常見，比如以下例子：
姓名：小明
性別：男
班別：19計機預師班
在以上例子中，“姓名”可以稱為字段或者屬性，姑且叫它“屬性”吧，而后面的“小明”則是屬性值，這樣子就形成了一種明確的數據組，同樣道理，先看一下CSS代碼：
background-color：red;
color:green;
font-size:2em;
......發現沒有？其實這兩種方式是差不多一樣的，“background-color”是屬性（property），而它的值（value）則是“red”，用這種方式，就設定了背景顏色為紅色。只不過CSS代碼后面必須要加分號（;）結束，在這里再次提醒。
當然，還有一點要提醒初學者，在計算機程序設計中，所有的標點符號的輸入必須切換到英文輸入的狀態，不然，也會出現一些莫名其妙錯誤出來。
CSS三種選擇器以及它們的優先級
好了，上面介紹了CSS代碼長啥樣，那么接下來就要明確一個問題：代碼寫出來后，我們怎么應用到HTML中去？也就是說，怎么用CSS控制HTML的顯示效果。
在具體的應用中，我們引入“選擇器（selector）”這個概念。
什么是選擇器（selector）？其實按照我們的理解，你寫好了CSS代碼以后，那你要把這些寫好的代碼應用到某個地方去對吧，而這些受體就是選擇器。
CSS有三種選擇器，分別是標簽（tag）、類（class）和ID.
- 標簽（tag）
標簽，指的是HTML標簽，也就是說，所有的HTML標簽都是標簽選擇器。要注意的是，如果要用標簽選擇器，必須是HTML標簽，不允許自定義。先看以下例子(大家可以把以下代碼保存為html文件，然后用瀏覽器打開看效果）：
<html>
<head>
<style>
p{
background-color:red;
color:green; font-size:2em;
}
</style>
</head>
<body>
<p>注意這里顯示的顏色</p>
<p>再留意顯示這里的顏色</p>
<b>好吧，再次留意這里的顏色</b>
</body>
</html>以上代碼中，第4~8行是標簽選擇器的應用方式，格式很簡單，就是直接寫HTML標簽（上面的例子中用了p標簽），然后后面跟著一對大括號（{}），大括號里面寫具體的CSS代碼，以上案例的功能就是，給HTML中所有的p標簽內容（第12~13行）應用上“紅色背景、綠色字和2em的字體大小”的效果，而第14行中是b標簽，沒有該效果。
- 類（class）和ID
我們有這么一個場景：在以下代碼中，我們給p標簽加上了綠色的字體顏色，也就是說第12~13行的文字是綠色的，那如果我需要給“注意這里顯示的顏色”和“再留意顯示這里的顏色”這兩行文本添加不同的顏色，怎么辦呢？
<html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
</style>
</head>
<body>
<p>注意這里顯示的顏色</p>
<p>再留意顯示這里的顏色</p>
<b>好吧，再次留意這里的顏色</b>
</body>
</html>有兩種方法，分別是類和ID可以解決。
先用類的方法：我們可以手動地在兩個p標簽中都加上類，或者為其中一個加上即可。具體做法如下。
<html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
.yellow{
color:yellow;
}
</style>
</head>
<body>
<p class="yellow">注意這里顯示的顏色</p>
<p>再留意顯示這里的顏色</p>
<b>好吧，再次留意這里的顏色</b>
</body>
</html>在以上代碼中，我在第15行的p標簽內加了一個class屬性，屬性值為“yellow”，然后第9~11行則是對yellow類的具體實現，像這樣就可以給“注意這里顯示的顏色”這行文本加了黃色（yellow）的效果了。
總結一下類的語法：.<類名>{<具體的CSS代碼>}。
注意：類名是自定義的，你喜歡用什么類名就什么類名，但是，你所起的類名也要符合一些規則：一是必須以字母或者下劃線（_）作為開頭，后面可以加數字，不能加其他符號；二是類名是對大小寫敏感的，也就是說一個字母的大寫和小寫狀態是兩個不一樣的類名。
好了，接下來是另外一種實現方法，用ID.
ID方法的實現在形式上跟類（class）差不多，在CSS選擇器中，類的語法是，在類名前面加一個點（.），而ID的不一樣的地方在于，它在ID名前面加的是一個#號，具體做法如下：
<html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
#yellow{
color:yellow;
}
</style>
</head>
<body>
<p id="yellow">注意這里顯示的顏色</p>
<p>再留意顯示這里的顏色</p>
<b>好吧，再次留意這里的顏色</b>
</body>
</html>以上案例中，通過ID的方法，也可以把“注意這里顯示的顏色”文本修改成黃色（yellow）顯示效果。
大家可以對比類和ID的實現方法，兩者只是在符號和引用方式上存在不一樣，那真的只是在形式上不一樣嗎？
并不是這樣的，之所以存在這兩種方式，因為這兩者它們有各自的特性。
類的特性：類的最大特征是可復用，可以在多個不同的標簽中應用同一個類。比如以下這個案例：
<html>
<head>
<style>
p{
background-color:red;
color:green;
font-size:2em;
}
.yellow{
color:yellow;
}
</style>
</head>
<body>
<p class="yellow">注意這里顯示的顏色</p>
<p>再留意顯示這里的顏色</p>
<b class="yellow">好吧，再次留意這里的顏色</b>
</body>
</html>在以上代碼中，我定義了一個yellow類（第9~11行），然后分別應用到“注意這里顯示的顏色”（第15行）和“好吧，再次留意這里的顏色”（第17行）文本上。
ID的特性：ID，顧名思義，就是身份標識，身份標識具有唯一性，而ID的作用，就是標識唯一性，也就是說，只要在某個標簽上應用一個ID，那就不能再在其他標簽上使用該ID了。
至于這三種選擇器的優先級，這里直接說結論，ID優先級最高，類其次，標簽優先級最低。大家可以運行以下代碼看結果：
<html>
<head> ????????
<style> ????????????
p{ ?????????????????
color:?brown; ????????????
} ???????????
.cl{ ????????????????
color:?black; ????????????
} ????????????
#ii{ ????????????????
color:?green; ????????????
} ????????
</style> ????
</head> ????
<body> ????????
<p?class="cl">注意這里顯示的顏色</p>???<!--?顯示顏色為black?--> ????????
<p?class="cl"?id="ii">再留意這里顯示的顏色</p>????<!--?顯示顏色為green?--> ????
</body>
</html>符號選擇器
符號選擇器，嚴格來講，不能稱之為“選擇器”，它指的是在使用選擇器的時候，用上一些符號，使得選擇器的功能更加豐富。在這里介紹三個。
- 星號（*）
- 空格（ ）
- 逗號（,）
1.星號（*）：星號代表“包含所有”的意思，比如：
2.空格：空格在這里有限定作用。
比如以下例子，我現在有這么一個需求，我需要把基礎科目中的三個科目（語文、數學、英語）設置為藍色顯示，并加粗；而專業科目中兩個科目（計算機和幼兒教育）文本設置成綠色，并加粗，那怎么處理呢？
<html> ????
<head> ???????
<style> ???????????? ????????
</style> ????
</head> ????
<body> ????????
<ul> ????????????
<p>基礎科目：</p> ????????????
<li>語文</li> ????????????
<li>數學</li> ????????????
<li>英語</li> ????????
</ul> ????????
<ul> ????????????
<p>專業科目</p> ????????????
<li>計算機</li> ????????????
<li>幼兒教育</li> ????????
</ul> ????
</body>
</html>假如我對“li”標簽設置CSS，那所有的“li”標簽都是同一個樣式，那就沒有基礎科目和專業科目的區別了。在這里，我可以這樣解決：
- 給各自的“ul”添加類，用這個“li”的父元素來限定各自的子元素（如第15行和第21行所示）。
- 用“空格”限定（如第4~11行所示）。
解決方法如下代碼：
<html> ????
<head> ????????
<style> ????????????
.ul1?li{ ????????????????
color:?blue; ???????????????
font-weight:?bold; ?????????????
} ????????????
.ul2?li{ ????????????????
color:?green; ????????????????
font-weight:?bold; ????????????
} ????????
</style> ????
</head> ????
<body> ????????
<ul?class="ul1"> ????????????
<p>基礎科目：</p> ????????????
<li>語文</li> ????????????
<li>數學</li> ????????????
<li>英語</li> ????????
</ul> ????????
<ul?class="ul2"> ????????????
<p>專業科目</p> ????????????
<li>計算機</li> ????????????
<li>幼兒教育</li> ????????
</ul> ????
</body>
</html>特別說明：在HTML標簽中，每個標簽都稱為“節點（node）”，每個節點隨著HTML標簽的包含關系，存在著相對的父子節點之分，包含元素的稱為父節點，被包含元素被稱為子節點。在以上代碼中，ul和li的關系，ul是父節點，li是子節點。
3.逗號：對多個選擇器應用同樣的CSS樣式。
在對多個選擇器，無論是標簽選擇器、類選擇器還是ID選擇器，如果把這些選擇器冠以同樣的CSS樣式，則可以用逗號分隔，把多個選擇器寫在一起，代碼如下：
<html> ????
<head> ????????
<style> ????????????
p,b,.cl,#ii{ ?????????????????
color:?brown; ?????????????????
font-weight:?bold; ?????????????
} ????????
</style> ????
</head> ????
<body> ????????
<p>注意這里顯示的顏色</p> ????????
<p>再留意顯示這里的顏色</p> ????????
<b>好吧，再次留意這里的顏色</b> ????????
<div?class="cl">用類的方式標識選擇器</div> ????????
<p?id="ii">用ID的方式標識選擇器</p> ????
</body>
</html>在以上代碼的第4~7行中，用逗號把p、b、.cl以及#ii這四個選擇器都應用上了同樣的CSS樣式。
VS Code一些常用快捷鍵
CTRL+？：添加注釋
CTRL+Enter：強制換行，無論光標在不在末端。
相關推薦
網站建設維護與網頁設計需要多少費用（做網站基本流程）
很多客戶再網站搭建完成后，在第二年續費的時候總是有一種疑問，網站維護費是什么呢？ 沒看見給我們維護了什么呀？怎么還收取費用呢？今天在這里時代匯創給大家解析一下網站維護到底需要維護些…
東莞網絡營銷課程培訓，網頁設計制作與開發步驟
如今的形勢，不管你是做哪行的都可以用上網絡推廣，要想在網絡上找到客戶，就跟我們在線下開發市場一樣，在網上開展網絡營銷的活動。雖然我們做好了企業網上商鋪，但是幾乎都沒有人知道它，它就…
深圳營銷型網站怎么做，網頁設計制作與開發步驟
品牌營銷型網站在企業的互聯網營銷中發揮著巨大的作用，當然，企業網站能否成交光有功能也是不夠的，一個好的營銷系統首先得要有一個好的展現形式，好的內容載體，這就是我們通常所說的網絡營銷…
如何做好網頁設計需求分析，個人網頁設計心得體會
怎么才能做好網站建設中網站相關性？ 1、網站建設少不了相關性的網頁數目。網站內容更新是每個網站的必做功課，網站相關性對這個網站有著直觀的影響。每天都要填充新的血液。但是不能一味的填…
高端企業網站建設案例（附：經典網頁設計思路）
如何打造一個成功的企業網站？我們經常在別人展示出來的高端網站建設案例中找到答案，但往往自己無法做到。我們會經常說該怎么怎么做，或者是不應該怎么做，追根到底的目的還是為了能夠將網站做…
扁平化設計網站思路（扁平化網頁設計怎么做）
不知道現在還有多少朋友理解不了windows8、10，每次windows更新都不拉下都小編，在win8、10面前跪下了，當然，有更多的朋友已經開心的在win10中暢游了。 網頁扁平…
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。