HTML引用css有三种,内联样式、内部样式表、外部引用,本章节是讲外部引用。外部引用的好处是可被多页面重复使用,样式与html分离。<link>外部样式一般都使用到三个属性,rel属性、 type属性、href属性。这个属性被用于定义链接的内容的类型。这个属性的值应该是像text/html,text/css等MIME类型。这个属性常用的用法是定义链接的样式表,最常用的值是表明了CSS的text/css。只有当设置了 href 属性时,才能使用该属性。
案例目录结构
案例效果图
h1 {color:#FF0000;} p {color:#0000FF;} body {background-color:#FFEFD6;}
<!doctype html> <html> <head> <meta charset="utf-8"> <title>炫代码(www.xuandaima.com)</title> <link rel="stylesheet" type="text/css" href="/Template/Test/css/href.css"> </head> <body> <h1>href 属性 我使用href.css文件样式</h1> <p>我也使用了href.css文件样式</p> </body> </html>
如果没有href="/Template/Test/css/href.css",引入的css文件没有效果。 |
打开源代码
使用Ctrl+U或者在页面右键鼠标菜单下的“查看源代码”
点击在link标签的href连接
看连接是否打开css代码,是则成功,否则失败。
<link type="值">
值 | 描述 |
---|---|
MIME_type | 被链接文档的 MIME 类型。css样式表的MIME值是"text/css" |