html+css布局系列(一),css的几种使用方式
在制作网页的时候,现在最流行的是html+css,那么你是否留意css的这几种使用方式了呢?
1.内嵌式(就是将样式写到标签上面)
<p style="color:red">段落</p>
2.内联式(页面的样式均写在style标签里面)
<html>
<head>
<title>测试内联样式</title>
<style type="text/css">
p{
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
</body>
</html>
3.外联式
现在有两个文件一个是1.css,1.html
那么当1.html要用到1.css已定义好的样式时,那么就需要引用该样式文件
<html>
<head>
<title>外联样式</tilte>
<link href="1.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
4.导入式
<html>
<head>
<title>导入式</tilte>
<style type="text/css">
@import "1.css";//通过这种方式来导入css文件,使用较少(注意:此种方式要准确指定文件的相对路径)
</style>
</head>
<body>
</body>
</html>
在开发的过程中,如果一个页面需要引用的css文件较少的话,那么推荐使用外联式来引用css文件,如果是使用的css文件较多的情况下,就推荐使用外联方式引用一个css文件,而这个css文件中就要使用导入式来引用其他的css文件,这样带来的一个好处就是,当需要改动样式时,只需要改动相应的css文件就可以了,却不用改动html的对css引用。
就介绍到这吧,好好学习,天天向上。