溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“CSS基礎語法的使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
行內樣式：就是直接在HTML上寫樣式，就是HTML上加屬性style=””這種形式。如<p style=”color:#f00”>divcss8</p>，但是這種方法并不是被我們推薦的，因為不利于實現表現與結構分離。也為后期維護帶來很多不必要的困難。我們只需要知道即可。
內嵌樣式：針對當前一個網頁可以使用的樣式，一般寫在html的<head></head>標記中。而且要使用一個示明，我們的樣式都要寫到這個聲明中如下：
代碼如下:
<style type=”text/css”>寫我們的樣式</style>
我們看一個示例文件為我們段落文字改成紅色的：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8第一示例</title>
<style type="text/css">
p
{
color:#f00;
}
</style>
</head>
<body>
<p>divcss8</p>
<h3>www.divcss8.com</h3>
</body>
</html>
我們在這里又有一個新的知識點。如果我們想給段落添加一個樣式的話。我們可以通過兩步實現，第一步先找到這個段落，第二步添加CSS樣式屬性（PS：這些屬性咱們現在可以理解為已經提供好的，咱們使用即可）。
那咱們現在就看一下這個CSS選擇器：
CSS選擇器的分類：
1、 HTML標簽選擇器
2、 群組選擇器
3、 包含選擇器
4、 自定義選擇器有可以分為兩種
a) Class選擇器
b) ID選擇器
HTML標簽選擇器：就是直接使用BODY中的HTML標記做為選擇符,就像我們第一示例那樣。
但是這種選擇器有一種局限性。假設我們有兩個段落。要設置不一樣的效果。那怎么辦呢？當然我們選擇器必須結合起來用才可以。
假如我們要為網頁中的H2和P的文字都要改成紅色的，怎么辦呢？這時候群組選擇器就派上用場了。我們看個示例文件
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8第一示例</title>
<style type="text/css">
h3,p
{
color:#f00;
}
</style>
</head>
<body>
<p>divcss8</p>
<h3>divcss8提供CSS基礎教程</h3>
</body>
</html>
HTML標簽選擇器：就是直接使用BODY中的HTML標記做為選擇符,就像我們第一示例那樣。
但是這種選擇器有一種局限性。假設我們有兩個段落。要設置不一樣的效果。那怎么辦呢？當然我們選擇器必須結合起來用才可以。
假如我們要為網頁中的H2和P的文字都要改成紅色的，怎么辦呢？這時候群組選擇器就派上用場了。我們看個示例文件
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8第一示例</title>
<style type="text/css">
h3,p
{
color:#f00;
}
</style>
</head>
<body>
<p>divcss8</p>
<h3>divcss8提供CSS基礎教程</h3>
</body>
</html>
語法規范就是
選擇器,選擇器{屬性:屬性值;}
總結：我們記得只要我們CSS屬性一致的時候，都可以使用群組選擇符。
包含選擇器：找到含有的內容，就像我們HTML中UL LI a（PS：列表上加鏈接） 這種形式，如果我們要為列表中鏈接添加樣式。這時候我們就能使用包含選擇器
代碼如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>divcss8第三示例</title>
<style type=”text/css”>
ul li a{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href=”#”>項目編號1</a></li>
<li><a href=”#”>項目編號2</a></li>
</ul>
<a href=”#”>我不會被改變</a></p>
<p>/body>
</html>
語法規范是：
選擇器 選擇器{屬性:屬性值;}
注意：這里面是空格隔開的 HTML中的父級空格HTML中的子級
自定義選擇器
引入：如果網頁中有多個P標簽，我們想為其中某一個P添加樣式。該怎么辦呢，之前的選擇器都不能滿足。
ID選擇器：為網頁中某一個標簽添加屬于自己的選擇器，而且規范要求我們這個ID名稱的選擇器只能使用一次。（PS：也是為了以后JS好調用）
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8.com示例</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 id="diyi">
<li><a href="#">項目編號1</a></li>
<li><a href="#">項目編號2</a></li>
</ul>
<a href="#">我不會被改變</a>
</body>
</html>
語法規范就是：
#選擇器名稱{CSS屬性：屬性值;}
而在HTML中就是 id=”選擇器名稱”
在上面我們講到了自定義ID選擇器，為了以后JS獲取內容方便，所以說我們只能使用一次。如果CSS代碼想多次重復使用怎么辦呢。那么就時候就可以用自定義的class選擇符。
我們看一個下面這個示例：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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 class="diyi">
<li><a href="#">項目編號1</a></li>
<li><a href="#">項目編號2</a></li>
</ul>
<ul class="diyi">
<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樣式的方式，也是我們日后經常用的鏈接樣式。
使用鏈接樣式有什么好處呢：
為了SEO方便，如果直接使用內嵌樣式。那么會造成蜘蛛在爬行的時候，要爬行很多CSS代碼
如果我們的樣式需要針對網頁中的多個文件應用。而內嵌明顯不太適合，這時候就得用到我們講的鏈接樣式了。
語法格式：
代碼如下:
<link type="text/css" rel="stylesheet" href="css.css" />
最關鍵的是href需要大家改成自己寫的CSS樣式文件
總結：通過使用鏈接的方式這樣就實現了我們之前所說的HTML與CSS的分離。如果想更換網頁的風格，只需要更換CSS樣式文件即可。大家可以百度搜一下CSS禪意花園。Html是固定的通過更換的CSS樣式文件，可以看到不同的風格的網頁。也是新手學習CSS推薦看的編碼，樣式文件。
樣式文件的優先級：
代碼如下:
行內樣式 > 內嵌樣式 > 鏈接樣式 > 導入樣式
咱們通過一個實例認識一下
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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>
<p >www.divcss8.com</p>
</body>
</html>
Divcss.css文件
代碼如下:
p{color:#0f0;font-weight:bold;}
總結：行內樣式，內嵌樣式以及鏈接樣式分別對P中的實現了樣式的更改。由于行內樣式的優先級比較高所以最終結果顯示紅色。
大家還需要注意的是后面的樣式會覆蓋上邊的樣式。
CSS選擇器命名
CSS選擇器命名要有三種：駱駝命名法，帕斯卡命名法，匈牙利命名法，我們下邊分別看一下：
駱駝命名法：指混合使用大小寫字母來構成，也是為了以后工作中有一個團隊交流中比較方便。它的特點如下：
第一個單詞以小寫字母開始；第二個單詞的首字母大寫或每一個單詞的首字母都采用大寫字母，例如：myFirstName
帕斯卡（pascal）命名法：
此CSS命名規則與駱駝命名法類似。只不過駱駝命名法是首字母小寫，而帕斯卡命名法是首字母大寫
匈牙利命名法：名稱前面加上一個或多個小寫字母作為前綴
red_navMenu
“CSS基礎語法的使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
