HTML CSS · HTML開發手冊

# HTML CSS HTML 樣式- CSS CSS (Cascading Style Sheets) 用于渲染HTML元素標簽的樣式. Look! Styles and colors Manipulate Text Colors, ?Boxes and more... 嘗試一下 ? 嘗試一下 - 實例 HTML使用樣式 * * * # HTML樣式- CSS * * * CSS (Cascading Style Sheets) 用于渲染HTML元素標簽的樣式. # Look! Styles and colors Manipulate Text Colors,?Boxes and more... [**嘗試一下**](http://www.php.cn/code/30220.html) 嘗試一下 - 實例本例演示如何使用添加到部分的樣式信息對 HTML 進行格式化。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head> <meta?charset="utf-8">? <title>php中文網(php.cn)</title> <style?type="text/css"> h1?{color:red;} p?{color:blue;} </style> </head> <body> <h1>這是一個標題</h1> <p>這是一個段落。</p> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-css.html#) 點擊 "運行實例" 按鈕查看在線實例本例演示如何使用樣式屬性做一個沒有下劃線的鏈接。如何使用 style 屬性制作一個沒有下劃線的鏈接。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <a?href="http://www.php.cn/"?style="text-decoration:none;">訪問?php.cn!</a> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-css.html#) 點擊 "運行實例" 按鈕查看在線實例鏈接到一個外部樣式表本例演示如何標簽鏈接到一個外部樣式表。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head> <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? <link?rel="stylesheet"?type="text/css"?href="styles.css"> </head> <body> <h1>我使用了外部樣式文件來格式化文本?</h1> <p>我也是!</p> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-css.html#) 點擊 "運行實例" 按鈕查看在線實例 * * * ## 如何使用CSS CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的. CSS 可以通過以下方式添加到HTML中: * 內聯樣式- 在HTML元素中使用"style"**屬性** * 內部樣式表 -在HTML文檔頭部區域使用**元素**來包含CSS * 外部引用 - 使用外部 CSS**文件** 最好的方式是通過外部引用CSS文件. 在本站的HTML教程中我們使用了內聯CSS樣式來介紹實例，這是為了簡化的例子，也使得你能更容易在線編輯代碼并在線運行實例。你可以通過本站的[CSS教程](http://www.php.cn/course/list/12.html)CSS 教程學習更多的CSS知識. * * * ## 內聯樣式當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。 ~~~ <p?style="color:blue;margin-left:20px;">This?is?a?paragraph.</p> ~~~ 學習更多樣式，請訪問[?CSS 教程.](http://www.php.cn/course/list/12.html) * * * ## HTML樣式實例 - 背景顏色背景色屬性（background-color）定義一個元素的背景顏色： ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body?style="background-color:yellow;"> <h2?style="background-color:red;">這是一個標題</h2> <p?style="background-color:green;">這是一個段落。</p> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-css.html#) 點擊 "運行實例" 按鈕查看在線實例早期背景色屬性（background-color）是使用 bgcolor 屬性定義。 * * * ## HTML 樣式實例 - 字體, 字體顏色，字體大小我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式: ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <h1?style="font-family:verdana;">一個標題</h1> <p?style="font-family:arial;color:red;font-size:20px;">一個段落。</p> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-css.html#) 點擊 "運行實例" 按鈕查看在線實例現在通常使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義文本樣式，而不是使用標簽。 * * * ## HTML 樣式實例 - 文本對齊方式使用 text-align（文字對齊）屬性指定文本的水平與垂直對齊方式： ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <h1?style="text-align:center;">居中對齊的標題</h1> <p>這是一個段落。</p> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-css.html#) 點擊 "運行實例" 按鈕查看在線實例文本對齊屬性 text-align取代了舊標簽。 * * * ## 內部樣式表當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 ?部分通過標簽定義內部樣式表: ~~~ <head> <style?type="text/css"> body?{background-color:yellow;} p?{color:blue;} </style> </head> ~~~ * * * ## 外部樣式表當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。 ~~~ <head> <link?rel="stylesheet"?type="text/css"?href="mystyle.css"> </head> ~~~ * * * ## HTML 樣式標簽 | 標簽 | 描述 | | :-- | :-- | | [](http://www.php.cn/dic/html/style.html) | 定義文本樣式 | | [](http://www.php.cn/dic/html/link.html) | 定義資源引用地址 | * * * ## 已棄用的標簽和屬性在HTML 4, 原來支持定義HTML元素樣式的標簽和屬性已被棄用。這些標簽將不支持新版本的HTML標簽。不建議使用的標簽有: , , 不建議使用的屬性: color 和 bgcolor.