網頁製作（html）的基本知識（三）html+css
- 零下一度原創
- 2017-05-06 13:40:191248瀏覽
1.1HTML CS
CSS選擇器
不同的樣式定義有不同的應用方式，與之對應的樣式名稱也有區別，所以樣式名稱為選擇器應該容易理解不同套用方式的樣式。
1.類別選擇器：
名稱是以點「.」開始的一串字元組合，這類樣式必須透過標籤中的class屬性使用。這種樣式必須透過標籤中的class屬性來套用。
範例：
.wenzi{font-size:20px;}
<p class=”wenzi”>类选择器样式</p>2.標籤選擇器：
名稱與html標籤名稱一致，在頁面中所有定義樣式的標籤，在標籤中若無類別選擇器樣式應用，此標籤內容將按標籤選擇器樣式顯示。這種樣式只要定義同名標籤就會自動套用。
範例：
p{font-color:#6ec;}則頁面中e388a4556c0f65e1904146cc1a846bee標籤將以#6ec這個顏色顯示。
名稱是以「#」與一串字元組合，這兒「#」是ID選擇器的標誌，當某一個標籤中ID屬性的值與「#」後邊的字元一致時，則此標籤套用此樣式。這種樣式會套用於ID屬性值與#後字元中相同的標籤。
範例：
#idname{font-size:26px;}
<p id=”idname”>ID样式</p>不建議同一個頁面文件中的任兩個標籤具有相同的ID屬性值，所以在符合web標準的網頁文件中，ID樣式只對應一個標籤。如果有多個標籤將使用的樣式與這個樣式相同的話，那麼定義樣式時選用類別選擇器而不用ID選擇器定義樣式。
3.等級選擇器：
（這個在教材上稱為衍生選擇器，等級選擇器是我自己的叫法）
這種樣式對應的標籤會自動套用。
命名方式查看後邊的範例。
為了更容易理解把以下標籤的嵌套用以下的形式寫出：
<p> <img /> <span> a <strong> b </strong> c </span> </p>
這些標籤是嵌套在一起的，p標籤中嵌入了img和span標籤，在span標籤中又嵌入了strong標籤，其中img標籤、span標籤、strong標籤可以稱為p標籤的下級標籤，img標籤、span標籤可以稱為p標籤的子標籤，strong標籤是span標籤的子標籤，反之是上級標籤或父標籤。注意strong標籤不是p的子標籤，但p標籤的下級標籤。
然後再來看兩個例子來說明這個選擇器：
例1:
<p><img><span>a<strong>b</strong>c</span></p>
p span{font-color:#038;}這樣的選擇器是指嵌在p標籤的下級標籤span標籤的樣式。
p strong{font-color:#865;}
這樣的選擇者是指嵌在p標籤的下級標籤strong標籤的樣式
p span strong{ font-color:#921;}
這樣是指標籤p的下級標籤span標籤的下級標籤strong的樣式。
附註：只要是下級標籤都可以用這種方式定義。如此例所示，如果文件中還有其它的span標籤，但並不是p標籤的下級標籤則不會套用此樣式。下同。
範例2：
<p class=”abc”><img><span>a<strong>b</strong>c</span></p>
還可以這樣定義：
.abc span{font-color:#038;}
.abc strong{font-color:#865;}
.abc span strong{font-color:#921;}這是指套用了樣式abc的標籤的下級標籤的樣式。
範例3：
#abc{}
<p id=”abc”><img><span>a<strong>b</strong>c</span></p>如果定義了id樣式，並且有標籤id使用了這個屬性值，還可以這樣定義：
#abc span{font-color:#038;}
#abc strong{font-color:#865;}
#abc span strong{font-color:#921;}
這種樣式會自動套用到偽屬性之前的標籤a。
a:link{}超級連結未造訪時的樣式。
a:active{}滑鼠左鍵在超級連結上按下未放開時的樣式。
a:hover{}滑鼠經過超級連結上方時的樣式。
a:visited{}超級連結造訪後的樣式。
*選擇器：
這種選擇器樣式定義的名稱只是一個通配符“*”，指所有的標籤，換句話說即所有的標籤都會自動套用這個樣式。
*{}
如何使用樣式
當瀏覽器讀到一個樣式表，它就會依照這個樣式表來格式化文件。有以下三種方式來插入樣式表：
外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以透過更改一個檔案來改變整個網站的外觀。
cac61206f47d493f7e315795011a6824 標籤定義內部樣式表。
<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>內聯樣式
當特殊的樣式需要套用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
【相關推薦】
1. 免費html線上影片教學
2. html開發手冊
以上是網頁製作（html）的基本知識（三）html+css的詳細內容。更多資訊請關注PHP中文網其他相關文章！