样式表的使用
在页面中插入样式表有4种常用的方法:嵌入样式表、内联样式表、外联样式表和导入外部样式表。
1、嵌入样式表
嵌入样式表的CSS是编写在HTML标签里面的,只对当前的标签起作用。
例如:
<p style="color:blue;margin-left:20px">XXX</p>
<type style="color:#red";>你好!</type>
2、内联样式表
内联样式表写在HTML的<head></head>
之间的<style></style>
标记对内。
例如:
<head>
<title>使用内联样式表</title>
<style type="text/css">
p{font-size:12px;color:blue;}
.info{font-size:12px;color:red;}
</style>
</head>
3、外联样式表
为了能够使很多页面共享同样的样式表,可以把样式表的定义写在一个扩展名为CSS的文件中,然后在每个需要使用该样式表的页面中添加对该样式表文件的引用。
例如:
<head>
<title>使用外联样式表</title>
<link rel="stylesheet"href="style.css"type="text/css"/>
</head>
style.css样式表文件的内容如下:
p{font-size:12px;color:blue;}
.info{font-size:12px;color:red;}
4、导入外部样式表
导入外部样式表是指在内联样式表的<style>
里导入一个外部样式表,导入时利用“@import”实现。
例如:
<head>
<style type="text/css">
@import"mystyle.css"/*其他样式表声明*/
</style>
</head>
以上代码中@import"mystyle.css"表示导入mystyle.css样式表文件。其方法和嵌入样式表的方法很相似,但导入外部样式表的输入方式更有优势。实质上,它相当于存在内联样式表中。导入外部样式表必须在样式表的开始部分,或者在其他内联式表上面。