HTML是为了设计基本布局，CSS是为了渲染HTML，而JS是为了实现动态效果。
1.引入CSS的两种方式
<1> 直接在html页面的<head>标签里写入（写在<style>标签里）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test{
color:red;
}
</style>
</head>
<body>
<div class="test">测试代码</div>
</body>
</html>
<2> 导入css文件
先写个xr.css文件（xr是渲染的意思，我自己定义的），内容如下：
.test{
color:red;
}
然后在html正文里引入css文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="xr.css" rel="stylesheet">
</head>
<body>
<div class="test">测试代码</div>
</body>
</html>
2.怎样写CSS代码来渲染html
<1> .用来渲染class内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test{
color:red;
}
p.test{
color:blue;
}
</style>
</head>
<body>
<div class="test">测试代码</div>
<p class="test">你好</p>
</body>
</html>
就是说，不同的标签都可以定义相同的class，可以通过标签区分，比如div.class、p.class
<2> #id内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#test{
color:red;
</style>
</head>
<body>
<div id="test">测试代码</div>
<div id="abc">你好</div>
</body>
</html>
只要，id是唯一标识，不要设置成一样的，其实一样的貌似也不会出错。
下面再介绍一些CSS的知识点：
1、去掉a标签中的下划线
a{
text-decoration:none;
}
2、悬浮
float:left/right
3、引入图片
background/background-img:url("images/图片.png") --images/图片.png指的是图片路径，根据实际情况写
4、根据外边距设置其中一个div块居中
用margin:0 auto来设置，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
#test{
width:100%;
height:44px;
background-color:blue;
}
.abc{
width:1016px;
height:44px;
background-color:pink;
margin:0 auto;
}
</style>
</head>
<body>
<div id="test">
<div class="abc"></div>
</div>
</body>
</html>
5、position定位
在父级标签里设置：
position:relative;
在子级标签里设置（比如相对于父级靠右150px）：
position:absolute;
right:150px;
照着上面这样写就可以实现定位。
好了，就先说这么多吧，其实CSS很简单，遇到了百度就行。重要的不是一定要记住多少标签，而是知道如何百度，能够轻松找到，这才是能耐。
你们发现了吧？道法术器，我基本上都是在给你们传输道的层面，因为这才是万法之根本，可以让你一通百通的东西。