引入css文件的方法:1、使用style屬性引入CSS樣式;2、在style標(biāo)簽中書寫CSS代碼;3、CSS代碼保存在擴(kuò)展名為【.css】的樣式表中。
本教程操作環(huán)境:windows7系統(tǒng)、css3版,DELL G3電腦。
引入css文件的方法:
一、行內(nèi)樣式
使用style屬性引入CSS樣式。
示例:
<h1 style="color:red;">style屬性的應(yīng)用</h1> <p style="font-size:14px;color:green;">直接在HTML標(biāo)簽中設(shè)置的樣式</p>
實(shí)際在寫頁(yè)面時(shí)不提倡使用,在測(cè)試的時(shí)候可以使用。
例如:
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>行內(nèi)樣式</title> </head> <body> <!--使用行內(nèi)樣式引入CSS--> <h1 style="color:red;">Leaping Above The Water</h1> <p style="color:red;font-size:30px;">我是p標(biāo)簽</p> </body> </html>
二、內(nèi)部樣式表
在style標(biāo)簽中書寫CSS代碼。style標(biāo)簽寫在head標(biāo)簽中。
示例:
<head> <style type="text/css"> h3{ color:red; } </style> </head>
例如:
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>內(nèi)部樣式表</title> <!--使用內(nèi)部樣式表引入CSS--> <style type="text/css"> div{ background: green; } </style> </head> <body> <div>我是DIV</div> </body> </html>
三、外部樣式表
CSS代碼保存在擴(kuò)展名為.css的樣式表中
HTML文件引用擴(kuò)展名為.css的樣式表,有兩種方式:鏈接式、導(dǎo)入式。
語(yǔ)法:
1、鏈接式
<link type="text/css" rel="styleSheet" href="CSS文件路徑" />
2、導(dǎo)入式
<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" /> <!--導(dǎo)入式--> <style type="text/css"> @import url("css/style.css"); </style> </head> <body> <ol> <li>1111</li> <li>2222</li> </ol> </html>
相關(guān)教程推薦:CSS視頻教程