web前端学习

CSS调用方法概述

CSS调用方法有四种： 1.内联样式（也称为行内样式） 2.内部样式（style标签） 3.引入外部样式文件（link标签） 4.导入外部样式文件（import）

1.内联样式

内联样式用于设置当前HTML元素的样式，只可应用一次。使用内联样式时，需要在相关HTML标签内使用style属性。style属性值可以包含任何CSS声明。

文字内容

	
<p style="color:red;font-weight:bold;">文字内容</p>

2.内部样式

内部样式也称为内嵌式，是指将CSS样式集中写到HTML文档的<style></style>标签之间。内部样式可以放置在HTML文档的任意位置，但为了结构清晰，一般放在<head></head>标签内部。

文字内容

	
<head>
	...
	<style>
		#inner_style{
			color: orange;
			font-weight: bold;
		}
	</style>
</head>
<body>
	...
	<p id="inner_style">文字内容</p>
</body>

3.引入外部样式文件

引入外部样式文件是指将CSS样式表写入一个或者多个CSS文件中。CSS文件的扩展名为“.css”，通过<link>标签可将CSS文件链接到HTML文件中，从而使得HTML文件中的元素被CSS文件中的选择器及其样式有效控制。

文字内容

	
<head>
	...
	<link rel="stylesheet" href="../css/outer_cssfile.css" type="text/css"/>
</head>
<body>
	...
	<p id="outer_style">文字内容</p>
</body>

	
/*外部文件内容*/
#outer_style{
	color: green;
	font-weight: bold;
}

4.导入外部样式文件

引导入外部样式文件与引入外部样式文件基本相同，都是创建一个单独的CSS样式文件，然后导入到HTML文档中，但在语法和运作方式上有所区别。导入外部样式是在<style>标签内，使用@import导入一个外部CSS文件。在该语法结构中，<style>标签内可以书写其他CSS内部样式，但是@import必须位于其他样式之前。

文字内容

	
<head>
	...
	<style>
		<!-- 注意必须在其他样式前，否则不生效 -->
		@import url(../css/import_cssfile.css);
		...	
	</style>
</head>
<body>
	...
	<p id="import_style">文字内容</p>
</body>

	
/*外部文件内容*/
#import_style{
	color: purple;
	font-weight: bold;
}