標籤：基礎
www.divcss8.com
在上一節中我們講到了自訂ID選取器，為了以後JS擷取內容方便，所以說我們只能使用一次。如果CSS代碼想多次重複使用怎麼辦呢。那麼就時候就可以用自訂的class選擇符。
我們看一個下面這個樣本：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8.com class選取器樣本</title>
<style type="text/css">
.diyi li a{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href="#">項目編號1</a></li>
<li><a href="#">項目編號2</a></li>
</ul>
<ul>
<li><a href="#">項目編號2</a></li>
<li><a href="#">項目編號3</a></li>
</ul>
<a href="#">我不會被改變</a>
</body>
</html>
那麼這兩個項目列表都會發生變化。並且還要注意的就是CLASS選擇符可以一次使用多個。在每個名稱後邊加一個空格即可，如 class=”diyi clear”這樣就可以了。
還有一種選擇符就是通用選擇符是可以針對所有HTML標籤應用如下：
*{padding:0px;margin:0px;}
這個我準備放到布局時在詳細講解。
咱們一直使用的都是內嵌樣式，我們現在學習一個新的引入CSS樣式的方式，也是我們日後經常用的連結樣式。
使用連結樣式有什麼好處呢：
1、 為了SEO方便，如果直接使用內嵌樣式。那麼會造成蜘蛛在爬行的時候，要爬行很多CSS代碼
2、 如果我們的樣式需要針對網頁中的多個檔案應用。而內嵌明顯不太適合，這時候就得用到我們講的連結樣式了。
文法格式：
<link type="text/css"rel="stylesheet" href="css.css" />
最關鍵的是href需要大家改成自己寫的CSS樣式檔案
總結：通過使用連結的方式這樣就實現了我們之前所說的HTML與CSS的分離。如果想更換網頁的風格，只需要更換CSS樣式檔案即可。大家可以百度搜一下CSS禪意花園。Html是固定的通過更換的CSS樣式檔案，可以看到不同的風格的網頁。也是新手學習CSS推薦看的編碼，樣式檔案。
樣式檔案的優先順序：
行內樣式 > 內嵌樣式 > 連結樣式 > 匯入樣式
咱們通過一個執行個體認識一下
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8樣本</title>
<style type="text/css">
p{color:#666;font-size:24px;}
</style>
<link rel="stylesheet" type="text/css"href="divcss.css"/>
</head>
<body>
<pstyle="color:#f00;">www.divcss8.com</p>
</body>
</html>
Divcss.css檔案
p{color:#0f0;font-weight:bold;}
總結：行內樣式，內嵌樣式以及連結樣式分別對P中的實現了樣式的更改。由於行內樣式的優先順序比較高所以最終結果顯示紅色。
大家還需要注意的是後面的樣式會覆蓋上邊的樣式。
CSS選取器命名
CSS選取器命名要有三種：駱駝命名法，帕斯卡命名法，匈牙利命名法，我們下邊分別看一下：
駱駝命名法：指混合使用大小寫字母來構成，也是為了以後工作中有一個團隊交流中比較方便。它的特點如下：
第一個單詞以小寫字母開始；第二個單詞的首字母大寫或每一個單詞的首字母都採用大寫字母，例如：myFirstName
帕斯卡（pascal）命名法：
此CSS命名規則與駱駝命名法類似。只不過駱駝命名法是首字母小寫，而帕斯卡命名法是首字母大寫
匈牙利命名法：名稱前面加上一個或多個小寫字母作為首碼
red_navMenu
以上命名並不是說特定使用哪一個。主要是讓你寫的CSS代碼得讓別人一看顯得很專業。很明白。在下邊我給大家分享一些網上總結好的命名規範。
大家學了這麼多選擇符了。給大家考試一下：請大家說出如下選擇符會選擇什麼對象。答案會在下篇課程中公布。
問題：
1、h1 .p1{}
2、#content h1{}
3、 h1 .p1， #content h1
4、h1#content h2{}
本文出自 “石景山電腦培訓” 部落格，請務必保留此出處http://jiefei.blog.51cto.com/6994042/1557752
css基礎系列教程：CSS基礎文法2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
