HTML中應用CSS的三種方法
你對把CSS應用到HTML中去的方法是否了解,這里和大家分享一下,主要有內聯,內部和外部三種途徑可以把CSS應用到Html中去,內部樣式服務于整個當前頁面,外部樣式為整個網站的多個頁面服務,而內聯樣式通過style屬性直接套進HTML中去,相信本文介紹一定會讓你有所收獲。
HTML中應用CSS的三種方法
有三條途徑可以把CSS應用到HTML中去。
內聯
內聯樣式通過style屬性直接套進HTML中去。
看起來像這樣:
示例代碼
- <pstylepstyle="color:red">text</p>
這將會是指定的段落變成紅色。
我們的建議是,HTML應該是獨立的、樣式自由的文檔,所以內聯樣式無論在什么情況下都應該盡量避免。
內部
內部樣式服務于整個當前頁面。在頭標簽head里面,樣式標簽style里包含當前頁面的所有樣式。
看起來像這樣:
示例代碼
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>CSSExample</title>
- <styletypestyletype="text/css">p{color:red;}a{color:blue;}</style>
- </head>
- <body>
- </body>
- </head>
- </html>
這將使這個頁面的所有段落都是紅色的,所有的連接都是藍色的。內聯樣式類似,你應該是HTML文檔和CSS文檔分離開來。#p#
外部
外部樣式為整個網站的多個頁面服務。這是一個獨立的CSS文檔,簡單的一個范例如下:
示例代碼
- p{color:red;}a{color:blue;}
如果這個文檔存為“web.css”的話,它可以這樣跟HTML文檔連接起來:
示例代碼
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>CSSExample</title>
- <linkrellinkrel="stylesheet"type="text/css"href="web.css"/>
- </head>
- <body>
- </body>
- </head>
- </html>
保存HTML文檔,現在已經把HTML和CSS連接起來了,在你的html中就可以運用你在css文件中定義的css標簽了。
本文來自CSS在線:http://www.csscss.org/cssarticle/200951582.shtml
【編輯推薦】