一 、前端语言：
html 超文本标记语言； （结构）
css 层叠样式表； （样式）
js JavaScript； （行为）
二 、页面结构：
<html>
<head>
<title>
头部标签
</title>
</head>
<body>
页面内容
</body>
</html>
三、编码 介绍
<! doctype html> 声明文档类型（html）
<meta charset="utf-8" /> 代码编码格式
四、 样式位置
a、行间样式
<div style="width: 400px; height: 400px; background-color: blue;">块</div>
<div style="width: 400px; height: 400px; background-color: red;">块</div>
b、内联样式
<!DOCTYPE html>
<html>
<head>
<title>样式位置</title>
<!--内联样式-->
<style >
#box{width: 400px; height: 500px; background: blue;}
</style>
}
</head>
<body>
<div id="box">1块</div>
<div>2块</div>
</body>
</html>
c、外联样式
<!DOCTYPE html>
<html>
<head>
<title>样式位置</title>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<div id="box">1块</div>
<div>2块</div>
</body>
</html>
五、属性
1、width 宽度；
2、height 高度；
3、background 背景；
4、repeat 重复； no-repea 不重复； repeat-x 横向重复； repeat-y 垂直方向重复；
<!DOCTYPE html>
<html>
<head>
<title>样式位置</title>
<style type="text/css">
#box{width: 400px; height: 300px; background: blue url(miaoweieee.jpg) center no-repeat;}
</style>
</head>
<body>
<div id="box">1块</div>
<div>2块</div>
</body>
</html>
5、 复合属性
<style type="text/css">
#box{width: 400px; height: 300px; background: blue url(miaoweieee.jpg) center no-repeat;}
/*复合属性： 一个属性多个属性值*/
#bg{background: url(miaowei.jpg) center top no-repeat gray; width: 100%; height: 600px;}
</style>
</head>
<body>
<div id="box">1块</div>
<div id="bg">2块</div>
6 、background-attachment： fixed； 背景是否滚动
7、background-color：gray; 背景颜色
8、background-image:url(bg.jpg); 背景图片
9、background-position: center 0px; 背景图位置
10、border 边框
#box{width: 400px; height: 200px; border:10px solid green;}
/*solid 实线 dashed虚线 dotted点线 */
11、padding 内边距
#box{width: 400px; height: 300px; border:1px dotted black; padding-top: 30px;}
*注意：内边距相当于给一个盒子家里填充厚度，会影响盒子大小。*所以要在相对应的方向将宽高减去。
12、margin 外边距
#box{width: 500px; height: 300px; background: blue; margin-bottom: 30px;}
/*复合属性： 一个属性多个属性值*/
#bg{width: 300px; height: 100px; background: yellow; margin-top: 30px;}
注意：1、上下外边距会叠加。
2、父子级包含的时候，子级的margin-top的外边距会传递给父级。
13、auto 自动
margin-left： auto 左自动，
margin-right：auto 右自动，
<!DOCTYPE html>
<html>
<head>
<title>样式位置</title>
<meta charset="utf-8">
<style type="text/css">
#box{width: 500px; height: 270px; background: red; margin: 0 auto;}
/*居中*/
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
14、 盒子模型
盒子大小 = border + padding + width / height
盒子宽度 = 左border +左padding + width + 右padding + 右dorder
盒子高度 = 上border + 上padding + height + 下padding + 下border
15、 文本设置
font-size: 14px;
font-family: 宋体;
color: red; 字体颜色
line-height: 30px; 行高
text-align: center; 左右居中
text-indent: 32px; 首行缩进（2em）
font-weight:normal; 文字加重
font-style: normal; 文字斜体
text-decoration: underline; 文字下划线
text-decoration: overline; 文字上划线
text-decoration: line-through; 文字中间线
text-decoration: none;
word-spacing: 30px; 单词间距
<!DOCTYPE html>
<html>
<head>
<title>样式位置</title>
<meta charset="utf-8">
<style type="text/css">
#box{width: 500px; height: 300px; border:1px solid black; margin: 90px auto; font-size: 14px; font-family: 宋体; color: blue; line-height: 30px;
text-indent: 2em; font-weight:normal; font-style: normal; text-decoration: none; }
</style>
</head>
<body>
<div id="box">
文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置
</div>
</body>
</html>
六、总结
1、常见的复合属性
background 背景
border 边框
padding 内边距
margin 外边距
font：
2、常见样式（17个）