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中文網其他相關文章!