一、用DIV布局
1、DIV简介
DIV是标记对，表示一个层，里面包含HTML代码，也可以被HTML标记包围。
基本语法：
<div>
<p>添加文字</p>
</div>以上的效果与<body>添加文字</body>的效果一致。
设置CSS修饰DIV
<title>无标题文档</title>
<style>
#header{
width: 700px;
margin: auto;
border: 1px solid #bbbbbb;
}
</style>
</head>
<body>
<div id="header">
测试div
</div>
</body>在使用DIV时，要注意ID与类选择符的应用，ID是在一张网页中单独的HTML关联CSS的名称，而类可以在HTML中重复出现。
2、SPAN
SPAN标记指行内元素，主要用于文本的容器。
<title>无标题文档</title>
<style>
#span1{
color: blue;
}
#span2{
color: red;
}
</style>
</head>
<body>
<span id="span1">测试</span><span id="span2" >SPAN</span>
</body>测试效果：
二、DIV与CSS结合
DIV通过与CSS的结合，使CSS能够控制DIV的外观、大小等。
DIV与CSS结合有以下三种方式：
- 在网页中通过外接方式链接CSS文件
- 通过内接方式写CSS文件
- 在<div>中加入style方式结合样式文件
1、样式表控制DIV
即在<div>标记里用style表示。
语法：<div style=#></div>
#代表样式的内容。
2、CSS文件链接
CSS文本的链接方式有三种：内联定义、链入内容CSS、链接外部CSS。
（1）内联定义
内联定义即在对象的标记内，使用对象的style属性定义适用的样式表属性。内联定义的好处是可以灵活地设置对象的样式，缺点是样式扩展性差。
<body>
<p style="border: 2px solid #F10E12">内联定义</p>
</body> 
（2）链接内部CSS
链接内部样式所在的范围在整个网页中。CSS内连接是由<style></style>标记对放在<head></head>中。
在<style>中有个属性type,type="text/css"，表示CSS文本。
格式：
<style type="text/css">
</style>
<div>可以用ID和CLASS进行修饰，ID表示层的名称，CLASS表示类。ID在网页中只能用一次，而CLASS可以重复使用，不限次数。
应用举例：
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#p1{
color: blue;
}
.p2{
color: red;
}
</style>
</head>
<body>
<p id="p1" >这是ID，一张页面只能出现一次</p>
<p class="p2">这是class，一张页面可以多次出现</p>
<p class="p2">这是class，一张页面可以多次出现</p>
</body>
（3）链接外部CSS
CSS外链接是把CSS文件放在网页外面，通过链接使得CSS文件对本网页的样式有效。
链接格式：
<link type="text/css" rel="stylesheet" src="style.css">通过link把外面的样式文本链接到网页。rel是样式。链接时需要css文件和页面是同一个目录。
应用举例：
html文件：
<title>无标题文档</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="p1" >这是ID，一张页面只能出现一次</p>
<p class="p2">这是class，一张页面可以多次出现</p>
<p class="p2">这是class，一张页面可以多次出现</p>
</body>css文件
@charset "utf-8";
#p1{
color: blue;
}
.p2{
color: red;
}测试结果：
三、CSS基础知识
1、CSS文件的链接方式
分为内连接、链接内部CSS、链接外部CSS三种方式。
2、选择符
CSS选择符就是CSS样式的名字。
（1）ID选择符
ID选择符以#开头，接上ID名，再由CSS代码组成，CSS样式语法是由选择符加属性和属性值构成。
样式：
#mydiv
{
width:200px;
height:100px;
border:2px solid red;
}ID选择符在HTML代码中，对ID符只能引用一次。如果多次引用，只能第一个有效，其他的没有效果。
（2）CLASS选择符
CLASS选择符是多重选择符，以“.”开头。
.mydiv
{
width:200px;
height:100px;
border:2px solid red;
}CSS选择符在网易代码中可以重复，次数不限。
（3）类型选择符
如div、p等标记类型的样式设置，成为类型选择符。
3、伪类
除了类型选择符、ID选择符和CLASS选择符外，CSS也允许使用伪类选择符和伪元素选择符。
