一，背景
1，<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
body
{
background-image:url('https://static.runoob.com/images/mix/paper.gif');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>CSS background-color 实例!</h1>
<div>
该文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div>
</body>
</html>
2，字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体</title>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">正常</p>
<p class="italic">斜体</p>
<p class="oblique">斜体</p>
</body>
</html>
3.对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对齐方式</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
</style>
</head>
<body>
<div class="container">
<div class="right">
<p><b>注意: </b>当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。</p>
</div>
</div>
</body>
</html>
4.浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用属性</title>
<style type="text/css">
/*浮动*/
#d1 {
width: 100px;
height: 100px;
background-color: #DA70D6;
/*浮动 左浮动*/
float: left;
}
#d2 {
width: 100px;
height: 100px;
background-color: indianred;
/*浮动 左浮动*/
float: left;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2">
</div>
</body>
</html>
二，盒子模型
1，border边框
（1）设置边框的颜色，样式，宽度
border:颜色，样式，宽度
（2）设置边框的宽度，颜色，样式
border-width宽度
border-style颜色
border-color样式
(3)border-collapse
设置是否将表格边框折叠为单一边框。
属性值：separate(默认，单元格边框独立），collapse(单元格边框合并）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
#d1 {
width: 100px;
height: 100px;
background-color: #DA70D6;
/*设置边框*/
border: #008000 5px outset;
/*设置内边距*/
/*padding:15px;*/
/*padding-left:20px;*/
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
