Recommended
More Related Content
Viewers also liked
Similar to CSS入門教學
CSS入門教學
- 1. CSS 12-10
- 2. CSS目錄列表 基礎概念 宣告 CSS 套用方法 CSS繼承 Class&ID 邊界:Margin 邊框:Border 背景:Background 字體 Table Div & Span
- 3. 基礎概念 CSS 的全名為 Cascading Style Sheets，是一種樣式表 (Stylesheet) 語言。 它的目的是為了對像 XHTML 及 HTML 之類的標記語言 (markup language) 提供一個顯示層。 有了 CSS，我們就可以將資料層及顯示層分開： HTML 文件就只包括資料，而 CSS 則是告訴瀏覽器這些資料應該要如何顯現出來。 這個 CSS 語法教學分為以下三個部分： 基礎概念: 討論 CSS 的基礎概念，包括 語法、套用方式、串連的概念、繼承、Class 與 ID 選擇器、以及div 與 span 選擇器。 屬性: 討論常用到的 CSS 屬性。 CSS 樣式: 列出所有在這個教學中有提到的 CSS 屬性。 在您完成這個教學後，您將會了解 CSS 的基本概念，同時可以利用常見的 CSS 屬性來改變您網站的外觀。
- 4. 宣告 CSS 宣告 CSS 樣式的語法如下： 選擇器 { 屬性：設定值； ... } 在一個選擇器 (Selector) 中，可以設定的屬性數目沒有限制。 如果有數個選擇器享有同樣的樣式，它們可以同時被宣告。 這叫做 "grouping"。舉例來說，如果 <h1>, <h2>, and <h3> 都會有相同的樣式，那它們就可以用以下的方式被宣告： h1 h2 h3 { 屬性：設定值； ... }
- 5. 套用方法 我們可以用以下四種方式，將 CSS 套用入 HTML 文件中： *行內套用 (Inline) *外部連接套用 (External Link) *匯入套用 (Import) *嵌入套用 (Embed) 行內套用 我們可以在 HTML 文件內直接宣告樣式。 <p style=font-size:16;'>This is font size 16.</p> 外部連接套用 <link rel=stylesheet type="text/css" href="external-stylesheet.css"> 以上這一行會將在 external-stylesheet.css 這個檔案內所宣告的樣式加入 HTML 文件內。 匯入套用 <style type="text/css"> <!--@import url(http://www.mysite.com/style.css); --> </style>
- 6. 套用方法 嵌入套用 樣式可以嵌入於 HTML 文件中 (通常是在 <head> 內)。舉例來說， <head> <style type="text/css"> div{ background-color:#FF0000; } </style> </head> <body> <divid=‘red’> 背景顏色是紅色 </div> </body>
- 7. CSS繼承 繼承 (inheritance) 的意思就是說子標籤的樣式會跟父標籤一樣，除非子標籤本身另有自訂的樣式。 舉例來說，如果我們有以下的樣式： p { color: #00FF00; } strong { font-size:20px; } 下面這行 HTML 碼 <p>這是一個 <strong>繼承的例子。</strong></p>
- 8. Class&ID Class .【Class 名稱】{ 屬性：設定值； ... } 舉例來說， .navbar { color:#0000FF; } 要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼： <p class="navbar">這是用 Class 選擇器的例子。</p>
- 9. 多重 Class 我們也可以同時套用數個 class。舉例來說，若我們有以下的 CSS 宣告 .applylarge { font-size:20px; } .applyred { color:#FF0000; } 那以下的 HTML 碼 <p class="applylargeapplyred">這是多重 Class 的例子。</p>
- 10. ID ID 的宣告法，是先放一個井字號 (#)，之後再列出選擇器名稱。設定一個 ID 選擇器的語法如下： #【ID 名稱】{ 屬性：設定值； ... } 舉例來說 #footer { color:#FF00FF; } 要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼： <p id="footer">這是用 ID 選擇器的例子。</p>
- 11. Class 跟 ID 的比較 這兩者最大的不同，是在於 ID 選擇器在一個 HTML 文件中只能被使用一次，而 Class 選擇器在一個 HTML 文件中可以被使用多次。 第二個不同的地方，是 ID 選擇器可以被 Javascript中的 GetElementByID函數所運用，而 Class 選擇器無法被 Javascript運用到。 並沒有什麼固定的規則，來決定什麼時候要用 ID 及什麼時候要用 Class 我們的建議是盡量用 Class，因為這樣子最靈活 (同一個 HTML 文件可以利用這類的選擇器多次)。唯一的例外，是當你要用 Javascript的 GetElementByID函數時。 在這個情況下，你就應該要用 ID。 Class 名稱及 ID 名稱都是對大小寫敏感的。舉例來說，.classone及 .ClassOne是代表兩個不同的 Class 選擇器。
- 12. 邊界:Margin margin-top (上邊界) margin-right (右邊界) margin-bottom (下邊界) margin-left (左邊界) #container{ margin-top:5px; margin-left:10%; margin-bottom:20px; border: 1px solid 000000; } 以下的 HTML 碼， <div id="container"> 這是邊界的例子。 </div> 第五個屬性，margin，是用來作為同時設定四個邊的捷徑屬性。 margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]
- 13. 邊框:Border 在 CSS 中常見的邊框 (border) 屬性有以下幾種： border-style border-width border-color border-top, border-left, border-bottom, border-right Border 舉例來說，若我們有以下的 CSS 碼， p { border:#0000FF 5px solid; } <p>用一行來宣佈所有邊框的屬性</p>
- 14. 背景:Background background-color p {background-color: 00FF00;} Color:背景顏色 background-image p {background-image:url(yp.jpg);} url:圖片路徑
- 15. 字體 font-family p {font-family: impact;} font-size p {font-size:9px;} p {font-size:0.8cm;} p {font-size:150%;} font-weight p {font-weight: bold;} font-style p {font-style: italic;}
- 16. Html Table <table> <tr> <th>學生</th> <th>分數</th> </tr> <tr> <td>Stella</td> <td>85</td> </tr> <tr> <td>Sophie</td> <td>95</td> </tr> <tr> <td>Alice</td> <td class="fail">55</td> </tr> </table>
- 17. Table table、th、tr、及 td 這幾個選擇器可以使用許多在這個教學中有提到的 CSS 屬性來看個例子。 假設我們想要把以下的樣式加入表格內： 表格：沒有邊框，字體是 arial，字的大小是 14px。 標題：背景是黃色。格子： 每個格子的下面有一條黑色實線。 低於 60 的分數欄內，字體是紅色的。 table { border: 0; font-family: arial; font-size:14px; } th { background-color:yellow; } td { border-bottom:1 solid #000000; } .fail { color:#FF0000; }
- 18. 其他樣式 text-decoration 屬性是用來設定文字上有什麼裝飾。 可能的值包括： underline: 文字下加上一條線。 overline: 文字上加上一條線。 line-through: 文字中間加上一條線劃過去。 blink: 讓文字閃爍。 text-indent 屬性是用來設定每一段的第一行前面要留多少空間。可設定的值包括百分比以及長度。舉例來說，若有以下的 CSS 宣告， p { text-indent:15px; } 那以下的 HTML 碼， <p>這一段第一行的最前面會留 15px 的空間。之後的行數就沒有留任和空間了。</p>
- 19. Div & Span
- 20. Z-index z-index z-index 屬性是用來決定元素重疊的順序。 換言之，當兩個元素有重疊的情況時，z-index 值將會決定哪一個元素在上面。 z-index 值比較大個元素會被放在上面。 舉例來說，假設我們有以下的 CSS 碼：
- 21. Z-index #redblock { z-index: 1; position: absolute; width:80px; height:100px; top:20px; left:20px; border: 1px solid #FFF; background-color: #FF0000; } #pinkblock { z-index: 2; position: absolute; width:100px; height:80px; top:50px; left:50px; border: 1px solid #FFF; background-color: #FF00FF; } <div id="redblock"></div> <div id="pinkblock"></div>