1.针对文件中的字体还有属性进行设置主要设置文字的大小及其颜色问题，未涉及div飘操作
处理页面CSS 先检测该内容部分是否已经设定了样式，如果没有单独设定再按照总体设计进行限定。
eg： h1 h2 h3 h4 h1,h2,h4{} body{} 类似实例
css for select beyong the relation to select
派生类选择器for: <ul><li><strong > css li strong{};
id选择器：#id #demo
类选择器 .class .check{}
属性选择器 <p name=""> [name]{}
2.
3.添加背景图片 background-image:url('../image/jkzhang.jpg');
html当读到样式表时，浏览器会根据它来格式化HTML文档，常用的两种方法：
1.外部样式表
2.内部样式表
1.外部样式表。当多个页面需要使用同一个样式，可以采用。常用格式：
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
HTML网页根据stylesheet.css读到的约束来格式化网页
约束：外部样式表中不能包括任何HTML标签
h1,h2{
color:red;
margin:2cm 2cm 3cm 3cm};
hr{color:green};
body{background-image:url("");}
2内部样式表：直接在单一网页应用样式表
<head>
<style type="text/css">
h1,h2{
color:red;
margin:2cm 2cm 3cm 3cm
}
hr{color:green}
body{background-image:url("");}
</style>
</head>
注：内部样式表优先级高于外部样式表。当有重合时，先选择内部样式表规定的属性，再添加内部样式表没有的外部样式表的属性。综合才为最终结果。
<html>
<head>
<!--外部样式表 -->
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1> make </h1>
<p>next</p>
<p>change</p>
</body>
</html>
<!-- 外部样式表代码 -->
h1{
color:red;
margin:2cm 2cm 3cm 2cm;
font-size:20px;
}
hr{
color:#ff000;}
p{
color:green
}
body{
background-color:yellow;
background-image:url("");
}
<!-- 内部样式表写法 -->
<html>
<head>
<style type="text/css">
h1{
color:red;
margin:2cm 2cm 3cm 2cm;
font-size:20px;
}
hr{
color:#ff000;}
p{
color:green;
}
body{
background-color:yellow;
background-image:url("");
}
</style>
</head>
<body>
<h1> make </h1>
<hr >
<p>next</p>
<p>change</p>
<hr>
</body>
</html>
<html>
<head>
<style type="text/css">
div#container{
500px;}
div#header{
500px;
height:50px;
background-color:#99bbbb}
div#menu{
150px;
height:200px;
background-color:yellow;
float:left}
div#content{
350px;
height:200px;
background-color:red;
float:left}
div#bottom{
background-color:green;
500px;
text-align:center
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>HTML</li>
<li>HTML</li>
</ul>
</div>
<div id="content">
<h3>Content goes here</h3>
</div>
<div id="bottom">
<h4> copyright</h4>
</div>
</div>
</body>
</html>