JAVAWeb 基础篇 CSS&Html 三种结合方式：内联方式、内部方式、外部方式
方式一：内联方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS&Html结合方式1</title>
</head>
<body>
<!--
内联样式：（不推荐使用）
* 在标签内使用 style 属性指定css代码。
-->
<div style="color: red;">Hello CSS ~!</div>
</body>
</html>
方式二：内部方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS&Html结合方式2</title>
<style>
div{
color: blue;
}
</style>
</head>
<body>
<!--
内部样式：
* 在 head 标签内，定义 style 标签，style 标签的标签体内容就是CSS代码。
-->
<div >Hello CSS ~!</div>
</body>
</html>
方式三：外部方式
先创建一个源文件夹css，然后在文件夹中创建a.css资源代码
div{
color: blue;
}
然后再用link调用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS&Html结合方式2</title>
<link rel="stylesheet" href="css/a.css">
</head>
<body>
<!--
外部样式：
1. 定义 css资源文件。
2. 在 head 标签内，定义 linked 标签，引入外部资源文件。
-->
<div >Hello CSS ~!</div>
</body>
</html>
第三种方式还可以写成这个样子：
这里把“” 换掉：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS&Html结合方式2</title>
<!--<link rel="stylesheet" href="css/a.css">-->
<style>
@import "css/a.css";
</style>
</head>
<body>
<!--
外部样式：
1. 定义 css资源文件。
2. 在 head 标签内，定义 linked 标签，引入外部资源文件。
-->
<div >Hello CSS ~!</div>
</body>
</html>
小结：
<!DOCTYPE html>
<html lang="en">
<!--CSS: 页面美化和布局控制
1、概念：Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素（标签）上，同时生效
2、好处：
1.功能强大
2.将内容展示和央视控制分离
* 降低耦合度，解耦。
* 让分工协作更容易
* 提高开发效率
3、CSS的使用：CSS与html的结合方式
1.内联样式；
2.内部样式；
* 在 head 标签内，定义 style 标签，style 标签的标签体内容就是CSS代码。
如：
* <style>
div{
color: blue;
}
</style>
* <div >Hello CSS ~!</div>
3.外部样式；
1. 定义 css资源文件。
2. 在 head 标签内，定义 linked 标签，引入外部资源文件。
如：
* a.css文件：
div{
color: black;
}
* <link rel="stylesheet" href="css/a.css">
* <div >Hello CSS ~!</div>
总结：
* 1，2，3 这 3 种方式 css 作用范围越来越大
* 1 方式不常用，后期常用 2，3
* 第 3 种方式可以写为：
<style>
@import "css/a.css";
</style>
-->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>