class選擇器：
先在stlye中設定，例如：
- <style>
- .test {
- color:red;
- }
- </style>
之後再在body做使用，例如：
- <body>
- <h2 class="test">哈哈哈1</h2>
- <h3 class="test">哈哈哈2</h3>
- </body>
(這樣哈哈哈12就會套用到test的格式，也就是會顯示回紅色的字)
id選擇器：
- <style>
- #test2 {
- color:red;
- }
- </style>
-
- <body>
- <h2 id="test">哈哈哈1</h2>
- </body>
用法同class，但是只能套用一次，也就是給哈哈哈1用就不能給2用，等同於直接寫<h2 style="color:red;">，但為了追求規格化好維護(也可能都放外掛裡)所以還是寫在style中
盡量讓body中只有HTML格式，沒有CSS
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<title>第二個網頁測試</title>
<meta charset="UTF-8">
<style>
.first li {/*類別選擇器，前面要加上「.」，改變清單的花樣
之後如果發現例如只想要讓li套用此設定，則可以變成li.first......大概吧，清單的設定比較搞不清楚，一般是這樣沒錯
例如原本是.st，有h1跟h2都套用st，之後改成h2.st時，h1就會失去效果*/
list-style-type: none;
list-style-image: url("picture/arrow1.gif");
}
.second li {
list-style-type: none;
list-style-image: url("picture/arrow2.gif")
}
.third li {
list-style-type: none;
list-style-image: url("picture/arrow3.png")
}
.in {
background-color: yellow;
list-style-position: inside
/*套用時注意，如果沒有把list-style-position設定成inside，那新設定的清單(圖片)跟清單列本身不在一起，之後調整可能出錯
例如頭身分離之類的(清單點「‧」跟清單內容分離，可以看.in跟.out背景顏色圈的範圍就不一樣)*/
}
#out {/*#開頭的是id，*/
background-color: #EE7700;
list-style-position: outside
}
</style>
</head>
<body>
<h2 >子清單‧中國朝代服飾</h2>
<ol class = "first"><!--設定這一層的標籤套用是.first的設計，注意如果下面的子類別沒有設定，則也會套用此設定-->
<li>
唐<!--在唐朝裡增加第二層子清單，唐朝服飾-->
<ul class = "second">
<li>
齊胸儒裙
</li><!--在唐朝服飾裡增加第三層子清單，服飾資料-->
<ol class = "third">
<li>
貴族
</li>
<li>
盛唐
</li>
</ol>
<li class="in">
圓領袍
</li>
<li id="out"><!--只能使用一次的id-->
坦領裙
</li>
</ul>
</li><!--在唐朝裡增加子清單結束-->
<li>
宋
</li>
<li>
元
</li>
<li>
明
</li>
<li>
清
</li>
</ol><!--清單結束-->
</body>
</html>
留言列表
【前端網頁開發技術】 (4)
