HTML CSS · W3School HTML & CSS 教程

# HTML CSS **通過使用 HTML4.0，所有的格式化代碼均可移出 HTML 文檔，然后移入一個獨立的樣式表。** ## 實例 [HTML中的樣式](/tiy/t.asp?f=html_style) ``` <html> <head> <style type="text/css"> h1 {color: red} p {color: blue} </style> </head> <body> <h1>header 1</h1> <p>A paragraph.</p> </body> </html> ``` [沒有下劃線的鏈接](/tiy/t.asp?f=html_linknoline) ``` <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> </head> <body> <a href="/example/html/lastpage.html" style="text-decoration:none"> 這是一個鏈接！ </a> </body> </html> ``` [鏈接到一個外部樣式表](/tiy/t.asp?f=html_link) ``` <html> <head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" > </head> <body> <h1>我通過外部樣式表進行格式化。</h1> <p>我也一樣！</p> </body> </html> ``` ## 如何使用樣式當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表： ### 外部樣式表當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。 ``` <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> ``` ### 內部樣式表當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style> 標簽定義內部樣式表。 ``` <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> ``` ### 內聯樣式當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。 ``` <p style="color: red; margin-left: 20px"> This is a paragraph </p> ``` 訪問我們的 [CSS 教程](/css/index.asp "CSS 教程")，學習更多有關樣式的知識。 | 標簽 | 描述 | | --- | --- | | [`<style>`](/tags/tag_style.asp) | 定義樣式定義。 | | [`<link>`](/tags/tag_link.asp) | 定義資源引用。 | | [`<div>`](/tags/tag_div.asp) | 定義文檔中的節或區域（塊級）。 | | [`<span>`](/tags/tag_span.asp) | 定義文檔中的行內的小塊或區域。 | | [`<font>`](/tags/tag_font.asp) | 規定文本的字體、字體尺寸、字體顏色。不贊成使用。請使用樣式。 | | [`<basefont>`](/tags/tag_basefont.asp) | 定義基準字體。不贊成使用。請使用樣式。 | | [`<center>`](/tags/tag_center.asp) | 對文本進行水平居中。不贊成使用。請使用樣式。 |