css（cascading style sheet,可以译为“层叠样式表”），是一组格式设置规则，用于控制web页面的外观
第一步：必须保证引入方式正确
第二步：必须让css和html元素产生关联，也就是说要先找到这个元素
第三步：用相应的css属性去修改html元素样式
1、将css内嵌到HTML文件中，这种方式又叫内联样式表，例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一个网页</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
2、将一个外部样式链接到HTML文件中，这种方式又叫链接样式表，例如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第一个网页</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div id="box"></div> </body> </html>
3、将样式表加入到HTML文件中，这种方式又叫做行内样式表
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第一个网页</title> </head> <body> <div style="width: 200px;height: 200px;background: green;"></div> </body> </html>
id选择器：id选择器在css中只出现一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一个网页</title>
</head>
<style type="text/css">
#box{
width: 50px;
height: 50px;
background: red;
}
</style>
<body>
<div id="box"></div>
</body>
</html>
类选择器：将相同类型的元素进行分类定义，分类定义的好处就是能够复用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一个网页</title>
</head>
<style type="text/css">
.box{
width: 50px;
height: 50px;
background: red;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
标签选择器：直接使用HTML标签名称作为css选择器的名称，这种方式会影响HTML中所有此标签的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一个网页</title>
</head>
<style type="text/css">
div{
width: 50px;
height: 50px;
background: red;
}
</style>
<body>
<div ></div>
</body>
</html>
原文：https://www.cnblogs.com/sellsa/p/9014923.html