https://blog.csdn.net/xiji333/article/details/111283931
文章目录
1.内联样式
2.内部样式
3.外部样式
1.内联样式
内联样式，又称行内样式。在标签内部通过s t y l e stylestyle属性来设置元素的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个网页</title>
</head>
<body>
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<p style="color: red;font-size: 30px;">我是一个段落</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
缺点是当同一个网页内需要多次用到同一个样式时，需要写很多次，而且如果之后需要更改的话，全部都要更改，非常不方便。所以尽量不要使用内联样式。
2.内部样式
把样式写到h e a d headhead中的s t y l e stylestyle标签中。这里还涉及到选择器的相关知识。下面这个例子只使用了元素选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个网页</title>
<style>
p{
color: blueviolet;
font-size: 15px;
}
h2{
color:coral;
}
</style>
</head>
<body>
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<p style="color: red;font-size: 30px;">我是一个段落</p>
<p>我是第二个段落</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
可以看到这种方式的复用性更高了，想要修改某一类元素的表现时只要修改一个地方就够了。而且我们会发现，内联样式的优先级是高于内部样式的。
但是这种方式也是有缺点的，因为在实际开发时不可能把所有的内容都写到一个网页里面，我们可能会有数百上千个网页，所以内部样式的复用性还不够高。
3.外部样式
编写一个外部的c s s csscss文件，在h t m l htmlhtml内通过l i n k linklink标签引入它。
p{
color: darkorange;
font-size: 75px;
}
/*style.css文件 与下面的html位于同一目录下*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个网页</title>
<style>
p{
color: blueviolet;
font-size: 15px;
}
h2{
color:coral;
}
</style>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<p style="color: red;font-size: 30px;">我是一个段落</p>
<p>我是第二个段落</p>
</body>
</html>
注意上面的代码中我没有去掉s t y l e stylestyle标签，大家可以试着交换一下它和link标签的位置，看看页面会不会不一样~
从上面这个例子可以看出，外部样式是非常好的，因为它可以在多个网页内复用。而且，由于浏览器的缓存机制，外部样式可以加快网页的加载速度，提高用户体验。
————————————————
版权声明：本文为CSDN博主「csu_xiji」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xiji333/article/details/111283931