创建css有三种创建样式，行内引入、内联引入、外联引入。
行内引入
在行内标签引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body>
<!-- 行内标签，只在当前标签起作用,font-size调整字体大小 -->
<!-- span标签过多的时候弄起来就很麻烦，所以就衍生出了 -->
<span style="color: aqua;font-size: 200px;">测试文字</span>
<span>测试文字</span>
<span>测试文字</span>
</body>
</html>结果
内联样式
在style标签中创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<!-- 下面的就是个选择器，将span全部选中，这个style位置可以任意放，建议放在head中 -->
<style>
span{
color: aqua;
font-size: 120px;
}
</style>
</head>
<body>
<span>测试文字</span><br>
<span>测试文字</span><br>
<span>测试文字</span><br>
<span>测试文字</span>
</body>
</html>结果
外联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外联样式</title>
<!--
引入css文件两种：
1：link标签
2：@import导入
建议使用link
link ：
rel属性表示引入入的是什么类型文件
href表示的是引入连接
@import：
这种方式还需要写一个style
link和@import区别：
1、link属于标签，而@import完全是css提供的一种方式。@import只能加载CSS。
2、加载顺序的差别:当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引l用的CSS会等到页面全部被下载完再加载。
所以浏览@import加载CSS的页面时可能没有样式，网速慢的时候明显可以看到。
3、兼容性的差别:由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题完全兼容。
4、使用dom控制样式时的差别:当时用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
-->
<-- 路劲要自己设置 -->
<link rel="stylesheet" href="../css/1.3外联样式.css">
<!-- <style>
@import url(../css/1.3外联样式.css);
</style> -->
</head>
<body>
<span>测试文字</span>
<span>测试文字</span>
<span>测试文字</span>
<span>测试文字</span>
</body>
</html>外联样式.css文件
span{
color: yellow;
font-size: 120px;
}结果
三种样式优先级问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外联样式</title>
<!--
引入css文件两种：
1：link标签
2：@import导入
建议使用link
link ：
rel属性表示引入入的是什么类型文件
href表示的是引入连接
@import：
这种方式还需要写一个style
link和@import区别：
1、link属于标签，而@import完全是css提供的一种方式。@import只能加载CSS。
2、加载顺序的差别:当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引l用的CSS会等到页面全部被下载完再加载。
所以浏览@import加载CSS的页面时可能没有样式，网速慢的时候明显可以看到。
3、兼容性的差别:由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题完全兼容。
4、使用dom控制样式时的差别:当时用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
-->
<link rel="stylesheet" href="../css/1.3外联样式.css">
<!-- <style>
@import url(../css/1.3外联样式.css);
</style> -->
</head>
<body>
<span>测试文字</span>
<span>测试文字</span>
<span>测试文字</span>
<span>测试文字</span>
</body>
</html>这个结果就不演示了，感兴趣的大家可以自己跟着注释练习一下。
不嫌弃的点点关注，点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚
