引入css檔案的方法:1、使用style屬性引入CSS樣式;2、在style標籤中書寫CSS程式碼;3、CSS程式碼保存在副檔名為【.css】的樣式表中。
本教學操作環境:windows7系統、css3版,DELL G3電腦。
引入css檔案的方法:
一、行內樣式
使用style屬性引入CSS樣式。
範例:
<h1 style="color:red;">style属性的应用</h1> <p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
實際上在寫頁面時不提倡使用,在測試的時候可以使用。
例如:
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>行内样式</title> </head> <body> <!--使用行内样式引入CSS--> <h1 style="color:red;">Leaping Above The Water</h1> <p style="color:red;font-size:30px;">我是p标签</p> </body> </html>
二、內部樣式表
在style標籤中書寫CSS程式碼。 style標籤寫在head標籤中。
範例:
<head> <style type="text/css"> h3{ color:red; } </style> </head>
例如:
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>内部样式表</title> <!--使用内部样式表引入CSS--> <style type="text/css"> div{ background: green; } </style> </head> <body> <div>我是DIV</div> </body> </html>
#三、外部樣式表
CSS程式碼儲存在副檔名為.css的樣式表中
HTML檔案引用副檔名為.css的樣式表,有兩種方式:連結式、匯入式。
語法:
1、連結式
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2、導入式
<style type="text/css"> @import url("css文件路径"); </style>
例如:
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部样式表</title> <!--链接式:推荐使用--> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--导入式--> <style type="text/css"> @import url("css/style.css"); </style> </head> <body> <ol> <li>1111</li> <li>2222</li> </ol> </html>
相關教程推薦:CSS影片教學
以上是如何引入css文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!