首先你需要创建一个文件夹，文件夹里面创建你的html文件。
html创建完毕后，创建一个末尾以.css结尾的文件（名字随便起 比如：main.css）。
然后打开你的html在你的title标签写写入<link rel="stylesheet" type="text/css" href="这里的css文件的地址">
这样就分开了，你就可以在css文件里写你的样式，然后写完之后在浏览器运行你的html看看是否在css文件里写入的样式已经被渲染。（如果样式没有改变说明link里引入的css地址错了）
你好，HTML5主要是放网页代码和结构的，CSS主要是用来给网页内容（文字、图片）排版、添加样式以及制作简单动画的，简单来说就是美化页面，或者说就是让用户觉得更好看，于是运用HTML5+CSS 组合起来的技术，就能达到这种效果。下面我给你举例说明吧：
未添加样式： <p>我爱中国</p>然后假如我把“我爱中国”变成红色、字体大小为22px
有3种方法（第二、第三种方法都要使用标签选择器）：
行内样式(直接在标签元素内部添加，属性之间用英文输入法下的分号隔开)：
<div>
<p style="color:redfont-size:22px">我爱中国</p>
</div>
内部样式（在<head>标签内部添加<style>标签）：
<head>
<style>
div p{
color:red
font-size:22px
}
</style>
</head>
外部样式（先新建一个 .css文件，然后在<head>标签内部用<link/>引入）：
先在.css文件写代码如下：
div p{
color:red
font-size:22px
}
再将.css文件引入，假如你的文件你命名为index.css,那么代码如下：
<head>
<link href="index.css" ref="stylesheep" type="text/css"/>
</head>
这样，三种方法达到的是同一种效果，只是第三种比较专业，实现了HTML代码和.css文件的完全分离，这样有几个好处：1.可以更容易被搜索引擎收录（这里涉及到SEO优化的知识）；2.网页代码量减少了，网页打开速度加快了，能提高用户体验；3.便于网页后期的修改和维护。
今天先给你讲这么多，希望采纳，谢谢
好处1、div css有利于搜索引擎爬虫：一般而言相同网页页面html文件table布局字节大于div+css布局的字节，所以可以节约搜索引擎爬虫爬行下载页面内容时间。2、重构页面修改方便(div css改版方便)：一般DIV+CSS页面都是html和css文件分开的也就是说一个网页的内容与表现形式的分离，一般修改小小部分的css文件里css样式属性就可以修改真站的样式版面，如背景颜色、字体颜色、网站宽度等具有table不具备的方便性。3、div+css页面增加网页打开速度：这里是特性决定了他们的性能，因为div css页面是div的html和css文件分开的，而浏览器打开该网页的时候是同时下载html和css，所以可以提高网页打开速度，而table还有个特性就是浏览器打开的时候必须是浏览器下载以结束后才显示该块的内容，而div的html是边加载边将内容呈现到浏览器上，div css网站大大增强用户体验作用。大家都知道网页多等1秒钟都会降低浏览者等待时间。解析谷歌将网页加载速度快慢作为影响排名重要因素。缺点：1、开发技术高：要求开发div css的技术较高，兼容各浏览器及版本浏览器要求较高。2、开发时间长：div css布局相对table布局开发制作时间长。3、开发成本相对table高点：因为技术性及时间性就决定了div css页面比table页面成本高。
