CSS (Cascading Style Sheets)层叠样式表
1.行间样式
<div style="width:300px;height:200px;background:red;">div</div>
2.内部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css_样式位置</title>
<style>
#box1{
width:400px;height:200px;background:blue;
}
#box2{
width:300px;height:200px;background:red;
}
</style>
</head>
<body>
<div id="box1">div1</div>
<div id="box2">div2</div>
</body>
</html>
在head区定义style样式区 #代表唯一识别样式的ID,在body区引用样式时用ID
3.外部样式
页面1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css_外部样式1</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="box">div1</div>
</body>
</html>
页面2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css_外部样式2</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div id="box">div2</div>
</body>
</html>
style.css
#box{
width:400px;height:200px;background:blue;
}
样式文件单独写,这是最规范的用法。
在head区定义
<span style="font-size: 18px;"><link href="style.css" rel="stylesheet"/>或者</span>
<span style="font-size: 18px;"><link rel="stylesheet" type="text/css" href="style.css"></span>
link 表示链接外部资源
href 表示超文本引用
rel 表示relationship
stylesheet 表示样式表
type=“text/css” 表示代码解释的方式是css文本
第一句的意义:链接超文本引用文件style.css,引用关系为样式表。