逗号表示同个属性的多个可能取值，它是顺序取的，前一个不存在就选择后一个，描述同一属性。
空格表示同一对象不同属性，多个属性缩写成一行。
空格分开的是一个属性的多个值。比如border:1px#fffsolid这些都是border的值宽度颜色样式。
因为页面显示的是内容和相应的表单，而CSS可以很好的将这些内容进行分块组装后，再按照整体的布局进行调整，可以在后期的改版等方面能够不动前面的内容只是更改布局以及背景、图片、表现形式等，这样更便于优化，所以才进行了分离；其实不分离的话就是说每个页面你都需要给在里面嵌入CSS内部样式，这样你要是每个页面的样式都一样，那每个页面的样式都要重新COPY一边，对于后面的修改来说更改量太大了，而用CSS和页面分离的方式可以只要修改一个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.便于网页后期的修改和维护。
今天先给你讲这么多，希望采纳，谢谢
