网页引入css样式的几种方法
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
⽹页引⼊css样式的⼏种⽅法
内联式样式表：直接写在现有的标记中，⽐如：
复制代码
代码如下:
<p style="font-size:24px;"></p>
复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="/TR/xhtml1/DTD/xhtml1-transitional.dtd">/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="/1999/xhtml">/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS在⽹页中应⽤的⽅式_内联式</title>
</head>
<body>
<p style="font-size:24px;">0.5秒三分绝杀!波特兰上演波什时刻第N次拯救热⽕</p>
<h1 style="font-weight:normal; color:#900;">玩命暴扣扳平+助攻绝杀三分热⽕太幸运有这颗队魂</h1>
<p>热⽕今夜还⼀功⾂必须赞 11分不多但却分分是⾦!</p>
<p>詹波为⼩弟恶犯叫屈当事⼈他都起飞了!肯定假摔</p>
<p>斯帅称客战开拓者奥登不打波什：他很快就可复出</p>
</body>
</html>
嵌⼊式样式表：使⽤<style></style>标签嵌⼊到HTML⽂件的头部中<head>标记中，如：
复制代码
代码如下:
<style type="text/css">
p{font-size:18px; color:#093;}
</style>
复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="/TR/xhtml1/DTD/xhtml1-transitional.dtd">/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="/1999/xhtml">/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS在⽹页中应⽤的⽅式_嵌⼊式</title>
<style type="text/css">
p{font-size:24px; color:#F03;}
</style>
</head></p> <p><body>
<p>0.5秒三分绝杀!波特兰上演波什时刻第N次拯救热⽕</p>
<h1>玩命暴扣扳平+助攻绝杀三分热⽕太幸运有这颗队魂</h1>
<p>热⽕今夜还⼀功⾂必须赞 11分不多但却分分是⾦!</p>
<p>詹波为⼩弟恶犯叫屈当事⼈他都起飞了!肯定假摔</p>
<p>斯帅称客战开拓者奥登不打波什：他很快就可复出</p>
</body>
</html>
外链式：使⽤<link>标签调⽤CSS⽂件（开发中⽤这种⽅式）
CSS在⽹页中应⽤的⽅式.css
复制代码
代码如下:
@charset "utf-8";
/* CSS Document */
/*
CSS⽂件中也可以导⼊其他的css⽂件
*/
body{
font-size:18px;
background:#FF0;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-family:'汉仪⾏楷简'
}
div{
font-size:24px;
background:#0F0;
font-weight:bold;
width:60;
height:90;
}
span{
font-size:12px;
font-weight:normal;
}
复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="/TR/xhtml1/DTD/xhtml1-transitional.dtd">/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="/1999/xhtml">/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS在⽹页中应⽤的⽅式_</title>
<link href="CSS在⽹页中应⽤的⽅式.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>李克强主持召开<span>国务院</span>常务会议</h1>
<h2> 听取最低⽣活保障政策落实督查情况汇报</h2>
部署进⼀步加强和改进低保⼯作
<div>决定将《社会救助暂⾏办法（草案）》向社会公开征求意faksdjfkasfkasdfj</div>
</body>
</html>
导⼊式：也可以使⽤导⼊⽅式import,但这种⽅式和内嵌式⼀样会占⽤⽹页⽂件的⼤⼩，并且有的浏览器解析会有问题，就是先显⽰⽹页内容在给⽹页内容加样式
复制代码
代码如下:
<style type="text/css">
@import url(css⽂件)
</style>
复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="/TR/xhtml1/DTD/xhtml1-transitional.dtd">/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="/1999/xhtml">/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS在⽹页中应⽤的⽅式_导⼊式</title>
<style type="text/css">
@import url("CSS在⽹页中应⽤的⽅式.css");
</style>
</head></p> <p><body>
<h1>李克强主持召开<span>国务院</span>常务会议</h1>
<h2> 听取最低⽣活保障政策落实督查情况汇报</h2>
部署进⼀步加强和改进低保⼯作
<div>决定将《社会救助暂⾏办法（草案）》向社会公开征求意faksdjfkasfkasdfj</div>
</body>
</html>。