CSS引入方式(3种)
*就近原则:行内引入可以覆盖内部引入的效果
- 内部引入:
* type="text/css" 为默认可以不写
例子:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<!--第一种写法-->
<style type="text/css">
div {
font-size: 50px;
color: pink;
}
</style>
</head> <body>
<div>
哈哈哈哈哈11
</div>
<div>
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div>
哈哈哈哈哈44
</div>
<div>
哈哈哈哈哈55
</div>
</body> </html>
结果:
- 行内引入:
例子:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<!--第一种写法-->
<style type="text/css">
div {
font-size: 50px;
color: pink;
}
</style>
</head> <body>
<div>
哈哈哈哈哈11
</div>
<div>
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div>
哈哈哈哈哈44
</div>
<!--第二种写法-->
<div style="font-size: 20px;color: blue;">
哈哈哈哈哈55
</div>
</body> </html>
结果:
- 外部引入:
<link />:将本文件与外部css文件关联
rel属性:
stylesheet:层叠样式表
href属性:外部引入css文件的相对位置
type属性:
(默认)text/css
例子:
创建外部文件
style.css:
div {
font-size: 50px;
color: pink;
}
03_外部引入.html:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>外部引入</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head> <body>
<div>
哈哈哈哈哈11
</div>
<div>
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div>
哈哈哈哈哈44
</div>
<div>
哈哈哈哈哈55
</div>
</body> </html>
结果: