css使用方法
有4种。行内样式、内部样式、外部样式、导入样式。
行内样式,将属性写在标签内的形式。例如,
<h2 style="color:blue">内部样式</h2>
内部样式,将属性写在style标签内。例如,
<head lang="en">
<meta charset="UTF-8">
<title>CSS之行内样式</title>
<!--补充代码-->
<style type="text/css">
h2,p{
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<h2>内部样式</h2>
<p>我是p标签里面的文字,字体大小是30px,字体颜色是蓝色</p>
</body>
外部样式,将css属性与html内容相分离。通过link来引用。例如,
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS样式表</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div>
用外部样式给div里面的位子设置样式,字体颜色是红色
</div>
</body>
</html>
index.css的内容如下
div{color:red;}
导入样式,将css属性与html内容相分离,通过#import导入。例如,
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<titleCSS参考手册_web前端开发参考手册系列</title>
<style>
@import url("style.css") screen, print;
</style>
</head>
<body>
<div>我是内容</div>
</body>
</html>
style.css文件内容如下:
div{color:red;}
css每种方法的对比
推荐使用外部样式。