一、CSS用来做什么？
CSS（层叠样式表）可以控制HTML文档的展现。
二、怎么定义和使用？
CSS有属性和值，不同的属性，不同的属性值都会为网页定义不同的展现。CSS的使用通常分为3种情况：1、元素内嵌样式（行内样式）2、文档内嵌样式 3、引入外部样式。
1、使用元素内嵌样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS演示</title>
</head>
<body>
<div style="width: 200px;height: 400px;background:yellow;">
这是一个DIV,将通过CSS来控制其宽、高、背景色。
</div>
</body>
</html>
2、使用文档内嵌样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS演示</title>
<style type="text/css">
.my_div{
width: 200px; /*设置宽度200px*/
height: 400px; /*设置高度400px*/
background:yellow; /*设置背景色yellow*/
}
</style>
</head>
<body>
<div class="my_div">
这是一个DIV,将通过CSS来控制其宽、高、背景色。
</div>
</body>
</html>
3、引入外部样式（1）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS演示</title>
<style type="text/css">
<!--从外部引入css文件-->
@import "CSS.css";
</style>
</head>
<body>
<div class="my_div">
这是一个DIV,将通过CSS来控制其宽、高、背景色。
</div>
</body>
</html>
3、引入外部样式（2）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS演示</title>
<!--一般推荐使用这种引入方式-->
<link rel="stylesheet" type="text/css" href="CSS.css"/>
</head>
<body>
<div class="my_div">
这是一个DIV,将通过CSS来控制其宽、高、背景色。
</div>
</body>
</html>
小提示：使用CSS中的@import会增加HTTP请求（进而影响加载速度），因此请慎用。
三、CSS的优先级
就近原则。元素内嵌样式优先于文档内嵌样式；文档内嵌样式优先于外部引入样式；外部样式优先于用户样式；用户样式优先于浏览器样式。
网友评论