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字段具有更高的优先级。

posted @ 2015-08-07 17:59  入门狗  阅读(1385)  评论(0编辑  收藏  举报