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>