我們可以通過三種方式在 HTML 頁面中包含 CSS。它們是 –
- Inline
這里我們在元素的 style 屬性中指定 CSS 樣式。不過,建議通過 CSS 的內部或外部鏈接來模塊化文件。
內部
我們可以在 標簽中包含我們的 CSS 規范HTML 文檔的 內部。
外部
我們可以使用 鏈接可以放置在本地或服務器上的 .css 文件標簽。通過使用文件的外部鏈接來重構文件,我們可以擁有一個可以在多個網頁上使用的通用 CSS 文件。
語法
語法在HTML中包含CSS文件如下
/*inline*/ <element style="/*declarations*/"></element> /*internal*/ <head> <style> /*declarations*/ </style> </head> /*external*/ <head> <link rel="stylesheet" href="#location"> </head>
登錄后復制
示例
以下示例說明了如何將 CSS 文件包含在 HTML 頁面中
內聯 CSS
?實時演示
<!DOCTYPE html> <html> <head> </head> <body> <div style="background-color:mistyrose; height: 50px;"></div> <p style="letter-spacing: 16px; font-size: 1.3em;"> <u>Demo text here</u> </p> </body> </html>
登錄后復制
輸出
這給出了以下輸出 –
示例
內部鏈接
?實時演示
<!DOCTYPE html> <html> <head> <style> table, table *{ border: 5px double green; margin: auto; padding: 20px; } tr { box-shadow: 0 0 0 3px red; } td { border-color: blue; } </style> </head> <body> <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
登錄后復制
輸出
這給出了以下輸出 –
示例
外部鏈接
HTML 文件
?實時演示
<!DOCTYPE html> <html> <head> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <div> <div></div> <div> <div></div> </div> <div></div> </div> </body> </html>
登錄后復制
CSS 文件
div { margin: auto; padding: 15px; width: 33%; border: 2px solid; border-radius: 50%; } div > div { border-color: green; } div > div > div { border-color: red; }
登錄后復制
輸出
這給出了以下輸出 –
以上就是如何在 HTML 頁面中包含 CSS的詳細內容,更多請關注www.92cms.cn其它相關文章!