概念和基本用法"/>
CSS的概念和基本用法
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>更多推荐
CSS的概念和基本用法
发布评论