30-CSS-02-CSS(和html结合的方式三四)
【CSS和HTML结合方式三】“导包”方式
【代码】
（1）div.css文件内的代码：
div{
background-color:#000000;
color:#FFFFFF
}
（2）span.css文件内的代码：
span{
background-color:#FC3;
color:#0C0;
}
（3）p.css文件内的代码：
p{
background-color:#0C9;
color:#FC6;
}
（4）total.css文件内的代码：
@import url(div.css); @import url(span.css); @import url(p.css);
【注】这里分号必须有，否则效果显示不出来
（5）主程序代码：
<head> <style> @import url(total.css) </style> </head> <div>div区域1</div> <div>div区域2</div> <span>span区域1</span> <span>span区域2</span> <p>段落1</p> <p>段落2</p>
【效果】
网页中：
第一行黑底白字“div区域1”
第二行黑底白字“div区域1”
第三行黄底绿字“span区域1”“span区域2”
（空行） <p>标签有上下空行的功能
第五行绿底黄字“段落1”
（空行）
第六行绿底黄字“段落2”
（空行）
【解释】
将导入css文件的程序全部放入total.css文件中，这样主程序中只需要导入一个total.css文件即可，而且如果后续扩展功能，只要在
css文件中修改，方便。
============================================================================================================
【CSS和HTML结合方式四】“链接”方式
【代码】
将方式三中主程序中<head>和</head>之间的代码改成如下代码：
<link rel="stylesheet" href="total.css" type="text/css" />
其余不变
【效果】
同方式三
===========================================================================================================
【方式三和方式四的区别】
方式三是通过CSS代码导入，方式四是通过HTML代码链接；
（平时浏览某网页，发现全白底黑字左对齐，说明css文件没下载成功）
===========================================================================================================
【样式优先级】
由上到下，由外到内，优先级由低到高。
（只要记住：一般以后加载的为主）
===========================================================================================================
【总结】CSS代码格式
选择器名称｛属性名：属性值； 属性名：属性值； ……｝
属性与属性之间用分号隔开
属性与属性值之间用冒号连接
如果一个属性多个值，那么多个值用空格隔开。