CSS的三种嵌入方式
2017-07-16 本文已影响16人
阿凡提说AI
1.行内样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<!--style="background-color: red;"-->
<body>
<!--行内样式-->
<div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
<div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
<div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
<div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
<div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
<div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
<div style="font-size: 30px; color: red; background-color: green;">1111111111111</div>
<p style="font-size: 40px; color: yellow;">ghhgjhjgghjghjghjhgjhjghjg</p>
</body>
</html>
2.页内样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--
css遵循一个规律:
1.就近原则
2.叠加原则
-->
<style>
div{
color: purple;
font-size: 40px;
background-color: yellowgreen;
}
p{
color: deeppink;
font-size: 50px;
}
</style>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div style="color: hotpink; background-color: red;">1111111111111111111</div>
<div>22222</div>
<div>2233333</div>
<div>4444</div>
<div>5555</div>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
<p>222222222222222222222222</p>
</body>
</html>
3.外部样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div>111111111111111111111</div>
<p>22222222222222222222222</p>
</body>
</html>
index.css
div{
color: brown;
font-size: 50px;
}
p{
background-color: yellow;
color: darkgreen;
font-size: 39px;
}
