看板 P_zenhow
作者 標題 [轉錄][轉寄][分享] CSS 語法
時間 2010年04月06日 Tue. AM 03:19:24
※ 本文轉錄自 FW 看板
看板 FW
作者 標題 [轉寄][分享] CSS 語法
時間 2010年03月07日 Sun. AM 12:31:02
看板 AAAAAAAA
作者 標題 [分享] CSS 語法
時間 Sat Mar 6 10:48:09 2010
CSS 的全名為 Cascading Style Sheets，是一種樣式表 (Stylesheet)
語言。
它的目的是為了對像 XHTML 及 HTML 之類的標記語言 (markup language)
提供一個顯示層。
有了CSS，我們就可以將資料層及顯示層分開：HTML 文件就只包括資料，而
CSS 則是告訴瀏覽器這些資料應該要如何顯現出來。
在不久前，只有站長需要懂得CSS。
可是，現在由於個人部落格的興起，CSS已成為了一個眾人須知的電腦語言。
無論您是自己設站寫部落格，或是您是利用 BSP (如無名、天空、Pixnet、
Xuite、Blogger、及 Wordpress等)，甚至您已經從網路上CSS無名樣式分享
的網站找到了您想要的 CSS 樣式，您都很有可能需要修改一下 CSS
，這樣子才能夠讓您的部落格有自己的特色。
這個 CSS 語法教學，正是學習基礎 CSS 最佳的地方。
這個 CSS 語法教學分為以下三個部分：
基礎概念: 討論 CSS 的基礎概念，包括語法、套用方式、串連的概念、繼承
、Class 與 ID 選擇器、以及div 與 span 選擇器。
屬性: 討論常用到的 CSS 屬性。
CSS 樣式: 列出所有在這個教學中有提到的 CSS 屬性。
在您完成這個教學後，您將會了解 CSS 的基本概念，同時可以利用常見的
CSS屬性來改變您網站的外觀。
不論您是個經驗豐富的站長，或是才剛開始寫您第一個部落格，本站將會
對您有很大的幫助。
請您現在將這個網站 加入『我的最愛』，或是
加入黑米分享書籤，以便以後隨時可以回來查詢。也請您 由這裡
來開始學習 CSS！
http://css.1keydata.com/tw/
------------------------------------------------------------------------
CSS 語法
宣告 CSS 樣式的語法如下：
選擇器 {
屬性：設定值；
...
}
在一個選擇器 (Selector) 中，可以設定的屬性數目沒有限制。
選擇器主要有三種：型類 (Type) 選擇器、Class 選擇器、和 ID 選擇器。
型類選擇器是 (X)HTML 標籤，如 <body> 和 <h1>。
Class 和 ID 選擇器是使用者自訂的選擇器。
我們會在之後討論這兩類的選擇器。
樣式是以『屬性：設定值』的方式來制定。舉例來說，若我們要設定一個元
素內的文字是黃色的，那就用以下的『屬性：設定值』：
color:yellow;
在以上的宣告內，color 是屬性，而 yellow 是設定值。
在某些時候，一個屬性可能會有好幾個設定值。
這些通常都是因為屬性是一個捷徑。
舉例來說，margin 屬性可能會有 4 個設定值，而每一個值代表每一邊的
邊界長度。
Grouping
如果有數個選擇器享有同樣的樣式，它們可以同時被宣告。這叫做
"grouping"。
舉例來說，如果 <h1>, <h2>, and <h3> 都會有相同的樣式，那它們就可以
用以下的方式被宣告：
h1 h2 h3 {
屬性：設定值；
...
}
後代選擇器 (Descendant Selectors)
我們可以設定說，只有當甲元素在乙元素之內時，甲元素才會用某個樣式。
若甲元素不在乙元素內的話，那甲元素就可以有其他的樣式。要達到這個目
標，我們就要利用後代選擇器的方式。
後代選擇器宣告的語法是：
【父選擇器】【子選擇器】{
屬性：設定值；
...
}
在以上的宣告中，只有當子選擇器是在父選擇器之內時，樣式才會被用到。
這一類的語法可以包括好幾代的選擇器，而不是只有兩代而已。
舉例來說，以下的宣告，
li b {
color:yellow;
}
代表在 <li> <b> 之內的文字是黃色的。不是在 <li> 之內的 <b>
中的文字，就不會套用黃色字體這個樣式。
----------------------------------------------------------------------
Div
Div 這個標籤目的是將內容分為不同的區域，而每一個區域可以根據 CSS
中的宣告而有自己的樣式。
Div 是一個區塊級容器 (block-level container)，這代表在 </div> 標籤後
會換行。
舉例來說，如果我們有以下的 CSS 樣式：
.large {
color: #00FF00;
font-family:arial;
font-size: 4pt;
}
以下的 HTML 碼，
<div class="large">
這是 DIV 範例。
</div>
就會顯現為，
這是 DIV 範例。
Span
Span 跟 Div 類似的地方是，這兩個標籤的目的都是將內容分為不同的區域。
不同的是，Span 可以涵蓋更細層的元素。
所以，我們甚至可以用 <span>來調整單一文字的樣式。
另外，在 </span> 之後並不會換行。
舉例來說，如果我們有以下的 CSS 樣式：
.largefont {
color: #0066FF;
font-family:arial;
font-size: 6px;
}
以下的 HTML 碼，
Span 不是<span class="largefont">區塊級的</span>.
就會顯現為，
Span 不是區塊級的.
下一頁： CSS 長度單位
http://css.1keydata.com/tw/div-span.php
--
※ 發信站: 批踢踢兔(ptt2.cc)
◆ From: 118.166.5.173
※ MonkeyStyle:轉錄至看板 nemesisX 03/06 11:03
※ goneinwind:轉錄至某隱形看板 03/06 11:10
※ alex771209:轉錄至某隱形看板 03/06 12:08
※ jeff1104:轉錄至看板 Jeff 03/06 13:07
※ lipapa:轉錄至某隱形看板 03/06 13:09
※ chhayu:轉錄至某隱形看板 03/06 13:29
※ neokao227:轉錄至看板 chikara 03/06 13:35
※ efleet0714:轉錄至某隱形看板 03/06 14:44
※ phisseraph:轉錄至看板 ethereal 03/06 15:35
※ czars:轉錄至看板 czars 03/06 15:38
※ bucha:轉錄至看板 WarmCorner 03/06 17:25
※ karata1987:轉錄至看板 search_for 03/06 17:43
※ coolchian:轉錄至看板 belleaya 03/06 18:12
→ :可以了 ^^||>>114.45.56.117 03-07 00:31
※ Ann:轉錄至看板 im_an 來自：123.110.6.229 時間：2010-03-07 17:52:17※ uefangsmith:轉錄至看板 uefacool 來自：60.250.207.232 時間：2010-03-08 09:13:27
--
※ 來源: DISP BBS (http://disp.twbbs.org)
※ 作者: zenhow 來自: 220.135.236.241 時間: 2010-04-06 03:19:24
※ 看板: P_zenhow 文章推薦值: 4 目前人氣: 0 累積人氣: 138
回列表(←)
分享