一 、前端語言：
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個）