CSS的应用方式

浏览数：62 / 时间：2015年06月09日

内联式样式表：直接写在现有的标记中，比如： <p style="font-size:24px;">0.5秒三分绝杀!波特兰上演波什时刻第N次拯救热火</p>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>CSS在网页中应用的方式_内联式</title>
 6 </head>
 7 <body>
 8         <p style="font-size:24px;">0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>
 9         <h1 style="font-weight:normal; color:#900;">玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂</h1>
10         <p>热火今夜还一功臣必须赞 11分不多但却分分是金!</p>
11         <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>
12         <p>斯帅称客战开拓者奥登不打 波什：他很快就可复出</p>
13 </body>
14 </html>

嵌入式样式表：使用<style></style>标签嵌入到HTML文件的头部中<head>标记中，如：
    <style type="text/css">
    p{font-size:18px; color:#093;}
    </style>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>CSS在网页中应用的方式_嵌入式</title>
 6 <style type="text/css">
 7     p{font-size:24px; color:#F03;}
 8 </style>
 9 </head>
10 
11 <body>
12         <p>0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>
13         <h1>玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂</h1>
14         <p>热火今夜还一功臣必须赞 11分不多但却分分是金!</p>
15         <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>
16         <p>斯帅称客战开拓者奥登不打 波什：他很快就可复出</p>
17 </body>
18 </html>

外链式：使用<link>标签调用CSS文件（开发中用这种方式）

CSS在网页中应用的方式.css

 1 @charset "utf-8";
 2 /* CSS Document */
 3 /*
 4 CSS文件中也可以导入其他的css文件
 5 */
 6 body{
 7         font-size:18px; 
 8         background:#FF0;
 9         font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
10         font-family:‘汉仪行楷简‘
11     }
12 div{
13         font-size:24px;
14         background:#0F0;
15         font-weight:bold;
16         width:60;
17         height:90;
18     }
19 span{
20     font-size:12px; 
21     font-weight:normal;
22 }

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>CSS在网页中应用的方式_</title>
 6 <link href="CSS在网页中应用的方式.css"  rel="stylesheet" type="text/css" />
 7 
 8 </head>
 9 
10 <body>
11     <h1>李克强主持召开<span>国务院</span>常务会议</h1>
12     <h2> 听取最低生活保障政策落实督查情况汇报</h2>
13     部署进一步加强和改进低保工作<br />
14     <div>决定将《社会救助暂行办法（草案）》向社会公开征求意faksdjfkasfkasdfj</div>
15 </body>
16 </html>

导入式：也可以使用导入方式import,但这种方式和内嵌式一样会占用网页文件的大小，并且有的浏览器解析会有问题，就是先显示网页内容在给网页内容加样式
<style type="text/css">
@import url(css文件)
</style>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>CSS在网页中应用的方式_导入式</title>
 6 <style type="text/css">
 7     @import url("CSS在网页中应用的方式.css");
 8 </style>
 9 </head>
10 
11 <body>
12     <h1>李克强主持召开<span>国务院</span>常务会议</h1>
13     <h2> 听取最低生活保障政策落实督查情况汇报</h2>
14     部署进一步加强和改进低保工作<br />
15     <div>决定将《社会救助暂行办法（草案）》向社会公开征求意faksdjfkasfkasdfj</div>
16 </body>
17 </html>