CSS之②CSS三种引用方式
QQ:3020889729 小蔡
使用总结
第一点：css引用有三种，但是我决定个人习惯最重要。在学习时，自己可能会对某一种方式很感冒，但是其他操作就不是那么感冒了。那么我觉得就应该用自己喜欢的方式去解决问题。
第二点：如果当下的任务，我们无法用自己习惯的引用方式很好的解决问题——那么，我们就应该使用更好的一种形式。
第三点：融会贯通——无论怎么样的方式都是一种解决问题的途径，而我们如何去选择，就需要我们积累经验来选择合适的方式。
也许，你会觉得废话很多，但是——你细品，肯定会发现……我就是在说废话，这些道理是很多人都有经历的，但是呢，却很多时候都被我们遗忘——正所谓，越是简单的，我们越会忘记，越是简单，越是重要。
下面开始三种引用方式的使用场景介绍~
行内式
style既是一个属性，也是一个标签。（可能说法不是很规范，我是根据用法来说明的）
行内式定义
顾名思义，就是放在开始标签内的css样式定义，体现为在一行设置属性，并显示。
行内式使用例子
<p style="color: red;font-style: italic"> css的行内式设置 <p>
效果：
使用场景
一般用于父级标签对内容的样式的设置，使用比较少，但是在必要的某一个特殊位置可能会比其他两种方法更简单，更清晰。（ps：三种方法，效果都是一样的，实现功能一致，但是在大部分使用的地方，行内式相对使用更为繁琐——在大的项目中设置众多样式时）
内嵌式
内嵌式的定义
优化了行内式的单一范围作用，内嵌式作用的范围更广——因为可被调用（类选择器/id选择器等基础选择器，以及总舵复合选择器）。他被使用style标签来包含，实现内嵌于html代码中。
内嵌式使用例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
<!-- 设置类选择器 -->
.cs1 {
color: yellow;
font-style: normal;
}
</style>
</head>
<body>
<p style="color: red; font-style: italic">css的行内式设置</p>
<p class="cs1">css的内嵌式设置</p>
<!-- 调用内嵌式css，设置属性 -->
<!-- 内嵌式定义的选择器，可以在当前html中body的任意位置被使用，适用范围广了很多 -->
</body>
</html>
效果：
使用场景
**一般用于html网页的元素较少的设计中，之所以不常见，不是因为不好，而是因为被外链式更多的代替了，**因为效果一样的——只是呢，有时候，我们需要内嵌、外链都在用，这是为了一些特别的区分需要，因为有时候一些必要的设计放在html避免修改。
外链式
外链式定义
**在html以外创建一个新的css文件，以保存我们对样式的一些属性设置。**包含我们设置的各种基础选择器和复合选择器，而且调用方便——只是呢，在html文件的head标签末尾，添加一个link标签，实现css文件与html文件的链接，这样才能使用css文件中的配置。
外链式使用例子
css中的代码：
.tex3 {
font-family: '华文行楷';
font-weight: bold;
color: green;
}
html中的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
.cs1 {
color: yellow;
font-style: normal;
}
</style>
<link rel="stylesheet" href="./演示css.css">
</head>
<body>
<p style="color: red; font-style: italic">css的行内式设置</p>
<br>
<p class="cs1">css的内嵌式设置</p>
<br>
<p class="tex3">css的外链式设置</p>
</body>
</html>
效果：
使用场景
一般练习的话，我觉得多使用外链式挺好的，既能让html中结构更清晰，两个文件的属性各异，但是在结构功能上相似，这样分开写，我们可以先用类似ps的软件/甚至画板将布局决定，然后在css文件中实现布局，然后再到html中设置相应部分的内容。环环相关，这样就可以实现更多的内容的样式展示。
