CSS四种形式_属于css使用形式的是-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_45128748/article/details/107623304

本文详细介绍了CSS的四种使用方式：链接外部样式文件、导入外部样式、使用内部样式定义及行内样式。通过实例展示了每种方式的具体应用，包括如何在HTML中引入样式，以及不同方法的特点和潜在问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS四种形式

CSS的四种使用方式：
1、链接外部样式文件
2、导入外部样式
3、使用内部样式定义
4、使用行内样式

1.链接外部样式表,就是把样式表保存为一个样式表文件,然后在页面中用<link rel="stylesheet" type="text/css" href="*.css">链接这个样式表文件.
2.内部样式表,就是把样式表放到页面的<head>区里.
3.导入外部样式表,用@import,在<head>与</head><style type="text/css">
<!--
@import "*.css"
-->
</style>
4.内嵌样式,就是在标签内写入style="",比如:<td style="border-left:#cccccc">.

1、链接外部css样式
<link href="outer.css" rel="stylesheet" type="text/css"/>

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charest=utf-8"/>
	<title>链接外部css样式</title>
	<link href="outer.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<table class="table">
		<tr>
			<td>AAA</td>
		</tr>
		<tr>
			<td>BBB</td>
		</tr>
		<tr>
			<td>CCC</td>
		</tr>
	</table>
</body>
</html>

/*设置整个表格的背景色*/
.table{
	background-color: #003366;
	width: 400px;
}
/*设置单元格的背景色、字体等*/
td{
	background-color: #fff;
	font-family: "楷体_GB2312";
	font-size: 20pt;
	text-shadow: -8px 6px 2px #333;
}
text-shadow:	用于连接一个或多个阴影文本。指定每2或3个长度值和一个可选的颜色值用逗号分隔开。
四个参数：
	  h-shadow：必需，水平阴影的位置，允许负值
	  v-shadow：必需，垂直阴影的位置，允许负值
	  blur：可选，模糊的距离
	  color：可选，阴影的颜色

在这里插入图片描述

2、内部样式
通常不建议使用：
1、无法做到css样式被其他html文档使用
2、2、会导致html文件过大，大量重复下载，导致网络负载加重
3、3、如果需要改变整个网站的风格时，需要大量修改，不利于工程化管理
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>内部样式单</title>
<!--通常不建议使用：1、无法做到css样式被其他html文档使用2、会导致html文件过大，大量重复下载，导致网络负载加重3、如果需要改变整个网站的风格时，需要大量修改，不利于工程化管理-->
	<style type="text/css">
		table{
			background-color: #003366;
		}
		/*.table{
			background-color: #003366;
		}*/
		td{
			background-color: #FFFFFF;
			font-family: "楷体_GB2312";
			font-size: 20pt;
			text-shadow: -8px 6px 2px #333;
		}
		.title{
			font-size:18px;
			color: #60C;
			height: 30px;
			width: 200px;
			border-top:3px solid #cccccc;
			border-left: 3px solid #cccccc;
			border-bottom: 3px solid #000000;
			border-right: 3px solid #000000;
		}
	</style>
</head>
<body>
	<div class="title">哈哈哈哈哈</div><hr/>
	<table>
	<!--<table class="table">此时上边是.table-->
		<tr>
			<td>AAA</td>
		</tr>
		<tr>
			<td>BBB</td>
		</tr>
		<tr>
			<td>CCC</td>
		</tr>
	</table>

</body>
</html>

在这里插入图片描述

3、内联css样式

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>内联css样式</title>
</head>
<body>
	<div style="font-size: 20px;
				color: #60C;
				height: 30px;
				width: 200px;
				border-top: 3px solid #CCCCCC;
				border-left: 3px solid #CCCCCC;
				border-bottom: 3px solid #000000;
				border-right: 3px solid #000000;">	
HAHAHAHAHAHAHA:
</div><hr/>
<table style="background-color: #0099bb;">
	<tr>
		<td style="background-color: #FFFFFF;
		font-family: '楷体_GB2312';
		font-size: 20pt;
		text-shadow: -8px 6px 2px #333;">AAAAAAAA</td>
	</tr>
	<tr>
		<td style="background-color: #FFFFFF;
		font-family: '楷体_GB2312';
		font-size: 20pt;
		text-shadow: -8px 6px 2px #333;">BBBBBBB</td>
		<td>CCCCCCCC</td>
	</tr>
	
</table>	

</body>
</html>

在这里插入图片描述