HTML文档中嵌入CSS的几种方法
HTML中嵌入CSS的方法有三种:嵌入式、内联式、引用式。
一、嵌入式
在HTML文档中使用style元素,定义CSS样式。
1 <head> 2 <style type="text/css"> 3 h1{color:red} 4 h2{color:blue} 5 </style> 6 </head>
二、内联式
在每个HTML的元素中都可以定义style属性,该属性只可以对本元素起作用。对于其它元素不起作用。
1 <p style="color:#FFF;font-size:20;">入门狗的博客园</p>
三、引用式
1.使用处理指令
1 <?xml-stylesheet type="text/css" href="css.css"?> 2 <html> 3 <p>入门狗的博客园</p> 4 </html>
浏览器在渲染的时候就把css.css文件加载进来, 不过大多数浏览仅当该文件保存为.xhtml或.xml格式才起作用,不推荐使用。
2.使用@import指令
1 <style> 2 /*下面两个的效果是一样的*/ 3 @import "css.css" 4 @import url("css.css"); 5 </style>
3.使用link元素
1 <head> 2 <link href="css.css" rel="stylesheet" type="text/css"> 3 </head>
这是最常用的方法,href属性指定样式表的url,后面还得指定rel="stylesheet" type="text/css"。
4.使用HTTP消息报头链接到样式表
1 link:(css.css) rel="stylesheet" 2 等同于 3 <link href="css.css" rel="stylesheet" type="text/css">
HTTP报头的link字段比HTML文档中的link字段具有更高的优先级。