HTML樣式
HTML樣式
先舉個(gè)例子:
<html> <body style="background-color:PowderBlue;"> <h1>改變顏色</h1> <p style="font-family:verdana;color:red"> 字體顏色變紅色</p> <p style="font-family:times;color:green"> 字體顏色變綠色</p> <p style="font-size:30px">字體高度變?yōu)?0px</p> </body> </html>
HTML 的 style 屬性
style 屬性的作用:
提供了一種改變所有 HTML 元素的樣式的通用方法。
樣式是 HTML 4 引入的,它是一種新的首選的改變 HTML 元素樣式的方式。通過 HTML 樣式,能夠通過使用 style 屬性直接將樣式添加到 HTML 元素,或者間接地在獨(dú)立的樣式表中(CSS 文件)進(jìn)行定義。
您可以在我們的 CSS 教程中學(xué)習(xí)關(guān)于樣式和 CSS 的所有知識(shí)。
在我們的 HTML 教程中,我們將使用 style 屬性向您講解 HTML 樣式。
如何使用CSS
CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的.
CSS 可以通過以下方式添加到HTML中:
內(nèi)聯(lián)樣式- 在HTML元素中使用"style" 屬性
內(nèi)部樣式表 -在HTML文檔頭部 <head> 區(qū)域使用<style> 元素 來包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是通過外部引用CSS文件.
在本站的HTML教程中我們使用了內(nèi)聯(lián)CSS樣式來介紹實(shí)例,這是為了簡(jiǎn)化的例子,也使得你能更容易在線編輯代碼并在線運(yùn)行實(shí)例。
你可以通過本站的CSS教程 CSS 教程學(xué)習(xí)更多的CSS知識(shí).
內(nèi)聯(lián)樣式
當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí),就可以使用內(nèi)聯(lián)樣式。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實(shí)例顯示出如何改變段落的顏色和左外邊距。
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
HTML樣式實(shí)例 - 背景顏色
背景色屬性(background-color)定義一個(gè)元素的背景顏色:
<!DOCTYPE html> <html> <body style="background-color:pink;"> <h2 style="background-color:red;">好好學(xué)習(xí)</h2> <p style="background-color:green;">天天向上</p> </body> </html>
HTML 樣式實(shí)例 - 字體, 字體顏色 ,字體大小
我們可以使用font-family(字體),color(顏色),和font-size(字體大?。傩詠矶x字體的樣式:
實(shí)例
<!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>
現(xiàn)在通常使用font-family(字體),color(顏色),和font-size(字體大小)屬性來定義文本樣式,而不是使用<font>標(biāo)簽。
HTML 樣式實(shí)例 - 文本對(duì)齊方式
使用 text-align(文字對(duì)齊)屬性指定文本的水平與垂直對(duì)齊方式:
實(shí)例
<!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html>
文本對(duì)齊屬性 text-align取代了舊標(biāo)簽 <center> 。
內(nèi)部樣式表
當(dāng)單個(gè)文件需要特別樣式時(shí),就可以使用內(nèi)部樣式表。你可以在<head> 部分通過 <style>標(biāo)簽定義內(nèi)部樣式表:
<html> <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> <body> </body> </html>
外部樣式表
當(dāng)樣式需要被應(yīng)用到很多頁面的時(shí)候,外部樣式表將是理想的選擇。使用外部樣式表,你就可以通過更改一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>