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引用。

 

就介绍到这吧,好好学习,天天向上。

posted @ 2015-04-12 19:19  梦想的火把永不熄灭  阅读(173)  评论(0编辑  收藏  举报