您的位置：首页 > Web前端 > CSS

CSS的四种引入方式

2017-08-07 12:44 471 查看

CSS的引入方式

一.style页内式

*较少使用
这种形式缺点很明显,这种CSS的引入方式会导致代码冗杂,不利于维护.

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>CSS引入方式--style行内</title>
<style>
body{
background: green;
}
</style>
</head>
<body>
</body>
</html>

效果图:

二.style嵌入式

*使用频率一般
优缺点分析:
优点:速度快,CSS直接控制本页面标签,无多余的CSS.
缺点:代码维护困难,单个页面冗长.

代码如下:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="background: green">
<div style=" border: 2px solid red;background: gray; height: 500px; width: 500px;"></div>
</body>
</html>

效果图:

三.CSS文件链接式

*最多使用
优缺点分析
优点:体现出div与CSS分离的思想,代码清晰美观,有利于后期的代码维护工作.
缺点:如果网页较大会导致div加载不出来.

代码如下:
1.CSS文件(文件名test.css)

#test{
background:gray;
width:500px;
height: 500px;
border:2px solid red;
}

2.html文件(用来链接test.css)

<!DOCTYPE html>
<html>
<head>
<title>CSS引入方式--CSS文件链接</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body style="background: green">
<div id="test"></div>
</body>
</html>

效果图:

四.import导入式

*使用较少
代码如下:
1.CSS文件(test.css)

#test{
background:gray;
width:500px;
height: 500px;
border:2px solid red;
}

2.html文件(导入test.css)

<!DOCTYPE html>
<html>
<head>
<title>CSS引入方式--import导入式</title>
<style>
@import "test.css";
</style>
</head>
<body style="background: green">
<div id="test"></div>
</body>
</html>

效果图:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航