單純用 HTML 語法時, 常常無法達到我們所想要的排版, 因此後來發展出了 CSS (Cascading Style Sheet) 來輔助 HTML
基本語法
CSS 樣式語法主要是在做樣式的設定, 每一個 CSS 屬性即代表一種樣式, 故主要的語法即是在指定 CSS 屬性的值, 不分大小寫, 但習慣上都是用小寫
最簡單的使用方法即是在 HTML 標籤的 style 屬性中撰寫 CSS 語法
例如
在上例中, 我在 DIV 標籤的 style 屬性中指定了
這就是上面所說的 CSS 語法, 其中 color 代表的是 DIV 標籤中所有內容的前景色(簡單說就是字的顏色), 而 yellow 即是它的值, 代表黃色, 所以執行結果會看到字變黃色了
(關於各種的 CSS 屬性, 之後的文章再詳細說明)
若只是寫一個樣式的話, 分號也可以不寫, 但若要一次指定多個 CSS 樣式, 就一定要用分號來分隔各個 CSS 屬性, 例如
使用樣式名
上面寫在 style 屬性中的寫法, 只會影響該標籤內的內容而已, 假設有多個標籤需要設定同樣的樣式, 那麼每個標籤都去設定一次樣式, 顯然不是一個好的方法, 所以 CSS 提供了幾個更方便的方法, 其中一個就是使用樣式名, 也就是我們可以先定義一個樣式名, 並且定義這個樣式名具有哪些樣式, 如此, 只要套用這個樣式名的標籤, 即會具有這些樣式設定, 若你熟悉 word 的樣式功能的話, 其道理是相同的
定義樣式名的語法如下
樣式名前面的那個【.】符號是必要的, 它用來代表後面的文字即是一個樣式名, 而 { } 內即可定義這個樣式名所具有的樣式, 可以設定多個 CSS 屬性
上面的語法要寫在哪裡呢?
1.寫在 STYLE 標籤內
2.寫在獨立的 CSS 檔, 再利用 LINK 標籤載入使用
之後再來詳細說明這些位置有什麼影響, 本篇就先用 STYLE 標籤來做說明
所以連同用 STYLE 標籤的語法即是如下
STYLE 標籤就是用來寫 CSS 的地方, 所以直接將 CSS 語法寫在標籤內即可
另外, 為了避免不支援 CSS 的瀏覽器將 CSS 語法當成是要呈現在網頁上的內容, 故一般都會在 STYLE 標籤內先寫上 HTML 的註解符號(<!-- -->), 再把 CSS 語法寫在註解內, 如此不支援 CSS 的瀏覽器就會將它視為註解, 而支援 CSS 的瀏覽器則仍然能正常解讀
在定義好樣式名及其樣式後, 我們就可以利用標籤的 class 屬性來套用定義好的樣式
例如
一般而言, 我們會將 STYLE 標籤寫在 HEAD 標籤內, 而 HEAD 標籤一般會寫在 BODY 標籤之前, 如此即可保證在套用樣式時此樣式定義已被瀏覽器所載入
註解語法
CSS 的註解是利用 /* 與 */ 將要註解的文字包起來, 例如
註解可以是一些說明文字, 也可以將暫時不用的屬性註解起來, 讓它不發生作用
--gs--
{CSS基礎教學}{什麼是 CSS}
基本語法
CSS屬性名:屬性值;
CSS 樣式語法主要是在做樣式的設定, 每一個 CSS 屬性即代表一種樣式, 故主要的語法即是在指定 CSS 屬性的值, 不分大小寫, 但習慣上都是用小寫
最簡單的使用方法即是在 HTML 標籤的 style 屬性中撰寫 CSS 語法
<DIV style="CSS屬性名:屬性值;">任意內容</DIV>
例如
<DIV style="color:yellow;">任意內容</DIV>
在上例中, 我在 DIV 標籤的 style 屬性中指定了
color:yellow;
這就是上面所說的 CSS 語法, 其中 color 代表的是 DIV 標籤中所有內容的前景色(簡單說就是字的顏色), 而 yellow 即是它的值, 代表黃色, 所以執行結果會看到字變黃色了
(關於各種的 CSS 屬性, 之後的文章再詳細說明)
若只是寫一個樣式的話, 分號也可以不寫, 但若要一次指定多個 CSS 樣式, 就一定要用分號來分隔各個 CSS 屬性, 例如
<DIV style="CSS屬性名A:屬性值;CSS屬性名B:屬性值;">任意內容</DIV>
使用樣式名
上面寫在 style 屬性中的寫法, 只會影響該標籤內的內容而已, 假設有多個標籤需要設定同樣的樣式, 那麼每個標籤都去設定一次樣式, 顯然不是一個好的方法, 所以 CSS 提供了幾個更方便的方法, 其中一個就是使用樣式名, 也就是我們可以先定義一個樣式名, 並且定義這個樣式名具有哪些樣式, 如此, 只要套用這個樣式名的標籤, 即會具有這些樣式設定, 若你熟悉 word 的樣式功能的話, 其道理是相同的
定義樣式名的語法如下
.樣式名{
}
}
樣式名前面的那個【.】符號是必要的, 它用來代表後面的文字即是一個樣式名, 而 { } 內即可定義這個樣式名所具有的樣式, 可以設定多個 CSS 屬性
上面的語法要寫在哪裡呢?
1.寫在 STYLE 標籤內
2.寫在獨立的 CSS 檔, 再利用 LINK 標籤載入使用
之後再來詳細說明這些位置有什麼影響, 本篇就先用 STYLE 標籤來做說明
所以連同用 STYLE 標籤的語法即是如下
<STYLE>
<!--
.樣式名a{
}
.樣式名b{
}
-->
</STYLE>
<!--
.樣式名a{
}
.樣式名b{
}
-->
</STYLE>
STYLE 標籤就是用來寫 CSS 的地方, 所以直接將 CSS 語法寫在標籤內即可
另外, 為了避免不支援 CSS 的瀏覽器將 CSS 語法當成是要呈現在網頁上的內容, 故一般都會在 STYLE 標籤內先寫上 HTML 的註解符號(<!-- -->), 再把 CSS 語法寫在註解內, 如此不支援 CSS 的瀏覽器就會將它視為註解, 而支援 CSS 的瀏覽器則仍然能正常解讀
在定義好樣式名及其樣式後, 我們就可以利用標籤的 class 屬性來套用定義好的樣式
<DIV class="樣式名">任意內容</DIV>
例如
<HTML>
<HEAD>
<STYLE>
<!--
.redWords{
}
.blueWords{
}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class="redWords">這裡的字會是紅色</DIV>
<DIV class="redWords">這裡的字也是紅色</DIV>
<DIV class="blueWords">這裡的字會是藍色</DIV>
</BODY>
</HTML>
<HEAD>
<STYLE>
<!--
.redWords{
}
.blueWords{
}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class="redWords">這裡的字會是紅色</DIV>
<DIV class="redWords">這裡的字也是紅色</DIV>
<DIV class="blueWords">這裡的字會是藍色</DIV>
</BODY>
</HTML>
一般而言, 我們會將 STYLE 標籤寫在 HEAD 標籤內, 而 HEAD 標籤一般會寫在 BODY 標籤之前, 如此即可保證在套用樣式時此樣式定義已被瀏覽器所載入
註解語法
CSS 的註解是利用 /* 與 */ 將要註解的文字包起來, 例如
<STYLE>
<!--
/*這裡是註解*/
.樣式名a{
}
.樣式名b{
}
-->
</STYLE>
<!--
/*這裡是註解*/
.樣式名a{
}
.樣式名b{
}
-->
</STYLE>
註解可以是一些說明文字, 也可以將暫時不用的屬性註解起來, 讓它不發生作用
--gs--
{CSS基礎教學}{什麼是 CSS}
沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。
6 意見:
請問
上一篇(較新的文章)
這個功能是要找hack
還是內建啊 我到處都找不到
那是blogger內建的啊，只要你沒有自己改為版本的html，應該就會有，只是可能預設的用辭只有"較新的文章"吧
當然，若是已經是在最新文章的那一頁，就不會出現這個 link 了 ^^
唔 我看我的文章都沒有這個功能
有沒有可能是我之前用了它的新功能
設計>>範本設計工具
改過版面所以沒有呢？
嗯，或許有可能，我是沒用過那個功能啦，所以我也不確定^^"
你可以新開一下 blog 用標準的模版試試
不過我看你的 blog 用的那個分頁還比較酷，應該比較好用吧
哈 在主頁用不錯
只是內文無法跳頁很苦惱
新開原始版型果然有這個功能
看來真是新功能的問題了
無論如何 還是謝謝你阿
不客氣^_^
張貼留言
廣告訊息會被我刪除