CSS的作用:
页面美化和布局控制。
1.概念:
Cascading Style Sheets 层叠样式表。
层叠:多个样式可以作用在同一个html的元素上,同时生效。
2.好处:
(1).功能强大
(2).将内容展示和样式控制分离
* 降低耦合度,解耦。
* 让分工协作更容易。
* 提高开发效率。
3.CSS的使用:CSS与html结合方式。
(1).内联样式
* 在标签内使用style属性指定css代码。
* 如:<div style="color:red;">hello css</div>
(2).内部样式
* 在head标签内,定义style标签,style标签的标签体内容就是css代码。
* 如:
<style>
div{
color:blue;
}
</style>
(3).外部样式
1).定义css资源文件。
2).在head标签内,定义link标签,引入外部的资源文件
* 如:
a.css文件:
div{
color:green;
}
在head标签内,用link引入外部资源文件
<link rel="stylesheet" href="css/a.css">
总结:
* (1),(2),(3)种方式 css作用范围越来越大。
第(1)种方式作用于单个标签。
第(2)种方式作用于单个页面。
第(3)种方式作用于多个页面,哪个页面引入样式,就会有相应的效果。
* 第(1)种方式不常用,后期常用方式(2)和(3).
* 第(3)种格式还可以写为:
<style>
@import "css/a.css";
</style>
示例:
第(1)种内联样式:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联样式</title>
</head>
<body>
<!--
内联样式* 在标签内使用style属性指定css代码
--><div style="color:red;">hello css</div></body>
</html>
第(2)种内部样式:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内部样式</title><style>div{color:blue;}</style>
</head>
<body>
<!--
内部样式* 在head标签内,定义style标签,style标签的标签体内容就是css代码
--><div>hello css</div><div>hello css</div>
</body>
</html>
第(3)种外部样式:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外部样式</title><!--第1种引入外部文件的方式--><!-- <link rel="stylesheet" href="css/a.css">--><!--第2种引入外部文件的方式--><style>@import "css/a.css";</style>
</head>
<body><!--外部样式1. 定义css资源文件。2. 在head标签内,定义link标签,引入外部的资源文件
--><div>hello css</div><div>hello css</div>
</body>
</html>