CSS四种设置方式

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

上面这张思维导图已经大概的讲明白了四种设置方式的不同点，下面就细入说明一下各自的用法和注意点。

1.嵌入样式表

<html>
	<head>
		<title>CSS四种设置方式</title>
	</head>

	<body>
		<p style="color:red;font-size:2cm;background-color:gray; border:2px solid blue">内联样式表</p>
	</body>
</html>

运行结果：

2.嵌入样式表

<html>
	<head>
		<title>CSS四种设置方式</title>
		<style>
				p{
					font-size:2cm;
					color:red;
				}
				h2{
					color:red;
				}
				table{
					border:1px solid black;
					font-size:1cm;
					
				}
				table caption{
					color:red;
				}
				table th{
					color:red;
					border:1px solid black;
				}
				table td{
					color:red;
					border:1px solid black;
				}
		</style>
	</head>
	<body>
		<p>嵌入样式表</p>
		<h2>嵌入样式表</h2>
		<table cellspacing="0";cellpadding="0";>
			<caption>表格</caption>
				<tr>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>职业</th>
				</tr>
				<tr>
						<td>张三</td>
						<td>22</td>
						<td>男</td>
						<td>个体</td>
				</tr>
				<tr>
						<td>张三</td>
						<td>22</td>
						<td>男</td>
						<td>个体</td>
				</tr>
				<tr>
						<td>张三</td>
						<td>22</td>
						<td>男</td>
						<td>个体</td>
				</tr>
		</table>
	</body>
</html>

运行结果：

3.外部样式表

css3.html:

<html>
	<head>
		<title>CSS四种设置方式</title>
		<!--href="文件名"-->
		<link rel="stylesheet" type="text/css" href="layout.css">
	</head>
	<body>
		<p>外部样式表</p>
		<b>外部样式表</b>
	</body>
</html>

layout.css:

<pre name="code" class="css">p{
	color:green;
	background-color:red;
	border:5px solid blue;
	font-size:3cm;
}
b{
	color:yellow;
	background-color:gray;
	border:4px solid yellow;
	font-size:3cm;	
}

运行结果：

4.输入样式表

one.css:

p{
	color:yellow;
}

two.css:

b{
	color:yellow;
}

three.css:

@import url(one.css);
@import url(two.css);
p{
	font-size:1cm;
	border:2px solid green;
}
b{
	font-size:1cm;
	border:2px solid green;
}

css4.html:

<html>
	<head>
		<title>输入样式表</title>
		<style>
				@import url(three.css);
		</style>
	</head>
	<body>
		<p>输入样式表</p>
		<b>输入样式表</b>
	</body>
</html>

运行结果：