石頭閒語

這是針對 樂多日誌 的 網頁樣式 的 CSS 設定所做的筆記。我把樂多日誌所用到的 css 區塊層級及樣式做了兩張整理圖。

樂多日誌預設的 樣式表 寫的太簡略了，不是樣式問題，而是語法問題。我原本的文章就已經使用 html 及 css 語法在做樣式控制。直接使用樂多日誌的樣式表，會跟我原本文章中的樣式定義衝突。在這時候，我不可能再回頭去修改我那堆舊文，也不符合 CSS 提出的本意。 CSS 的本意就是把樣式定義從資料/文章中抽離出來，使人不用修改文章本體，就能改變顯示的樣式。我最後是把 樣式表 大改了一番才完整解決。

樂多日誌樣式層級圖

利用 #content 只出現在首頁頁面，再配合進階的 CSS 語法，就可以讓首頁和全文/分類頁面出現不同的文章樣式。

CSS 語法簡要

真的很簡要，針對初步了解 CSS 語法的人，說明進階的 CSS 語法。一般書上似乎都不講的，大概太像寫程式了吧。

CSS Syntax:



1. 一般： single selector

1.1. single selector ( element )

p {}

li {}



1.1.1. single element under specific selector ( specific_element element )

ul li {}



note: it's defferent than "ul,li {}".



1.2. single ID selector ( #id )

#content {}



1.2.1. specific element with single ID selector ( element#id )

div#content {}



note: no space between element and id



1.3. single class selector ( .class )

.left {}



1.3.1. specific element with single class selector ( element.class )

p.left {}



note: no space between element and class



2. 群立 (Grouping)：

2.1. ( element1, element2, ...)

h1, h2, h3 {}



2.2. ( #id1, #id2 )

#header, #content, #footer {}



2.3. ( .class1, .class2)

.left, .right, .center {}



3. 區域性 (特定區間式)：

3.1. single

( #id element )

( .class element )

( #id .class element )

( .class #id element )



3.2. Grouping

( #id element1, #id element2 )

( #id .class element1, #id .class element2 )

( #id .class element.class1, #id .class element.class2 )



examples:



h1, h2, h3 {}



div#content .main a,

div#content .main a.right {

}



#sidebar #menu .red ul li.active {

}





4. ID 與 class 的差異：

ID 具可識別性，在同級同類元件中應是唯一的。

大多數瀏覽器會忽視 ID 重複的錯誤，但操作 javascript 時會不正常。

ID 與 class 兩者可並用。可以純粹使用 ID 進行元件的命名工作，而使用 class 來定義元件的樣式。



example:



<style type="text/css">

div#test1 {

	border: 2px double;

}



div#test div#test1 {

	margin: 5px;

	border: 1px solid;

}



p#test1 {text-decoration: underline;text-align: left;}



/* 

上述定義無 ID 重複，因為 div 與 p 是不同類元件，而 div#test1 和 div#test1 div#test1 層級不同。

*/



div.test2 {background-color: blue;}

p.right { text-align: right;}

</style>



<div id="test1" class="test2">

	ABC

	<div id="test1">

	</div>

</div>



<div id="test1">

XYZ 

在同一文件中，同類元件的 id 不應重複，對瀏覽器來說不會錯誤 (容錯機制，

會被當成一般的 style class 處理)，但對 script (ex: javascript) 會造成錯誤，

不建議使用此類用法。

</div>



<p id="test1" class="right">underline, however align right</p>