（1）CSS和HTML结合方式
CSS：是层叠样式表，用来定义网页的现实效果，可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单来说，CSS将网页内容和显示样式进行分离，提高了显示功能。
一、CSS和HTML结合方式
第一种方式、第二种方式
<!-- 2，使用style标签的方式,改善了方式一的代码复用性低的问题-->
<!--将此样式作用在div块中，用css解析
一般定义在head中，因为网页代码顺序执行，若都执行了div代码块，还没有对div的style样式进行解析，不能这样做
-->
<style type="text/css">
div{
background-color:#0F0;
color:#333
}
</style>
</head>
<body>
<!--
1，第一种结合方式：
每个HTML标签中都有一个style样式属性.该属性的值就是css代码,若如下的两个div都想使用相同格式，需要写重复代码，代码复用性低
在第二种方式中虽然先将div样式进行加载(可以理解为div块的默认样式)，若希望不用默认的样式，就可以自定义，这就是样式的层叠
-->
<div style="background-color:#F00; color:#FF9">这是一个div区域1</div>
<div>这是一个div区域2</div>
<p>这是一个段落1</p>
<p>这是一个段落2</p>
<span>span区域1</span>
<span>span区域2</span>
</body>
</html>
第三种方式
<!--第三种方式-->
<style type="text/css">
@import url(div.css);
@import url(span.css);
</style>
</head>
<body>
<!--第三种方式：第二种方式可以减少一个网页的重复代码，但是网页有许多样式都是相同的，若每个网页都这样重复写，代码的复用性很低
所以可以将该样式放在一个文件中，在网页代码中import这个文件
-->
<div >这是一个div区域1</div>
<div>这是一个div区域2</div>
<span>span区域1</span>
<span>span区域2</span>
<p>这是一个段落1</p>
<p>这是一个段落2</p>div.css文件
@charset "utf-8";
/* CSS Document */
div{
style="background-color: #F00;
color: #3F0"
}第三种方式更简便些
在第三种方式中，若多个网页界面引用相同的太多，也不利于代码的复用性，所以可以将多个引用放在一个CSS文件中，在网页设计中调用这个文件，大大提高了代码的重用性
<style type="text/css">
@import url(1.css);
</style>@charset "utf-8";
/* CSS Document */
<style type="text/css">
@import url(div.css);
@import url(span.css);
@import url(p.css);
</style>
以上的各种格式不建议放在同一个文件中，一般比较单一的网站可以这样做，如博客、贴吧。一般是分开写，这样修改比较方便，而且可以让不同的页面都可以用这些格式 。
*第四种方式
<link rel="stylesheet" href="1.css" type="text/css"/>二、样式优先级
由上到下，由外到内，优先级由低到高
三、总结css代码格式
选择器名称{ 属性名：属性值； 属性名：属性值…….}
