行间样式表 <div style="……"></div> 内部样式表 <style>…………</style> 外部样式表 <link href="style.css" rel="stylesheet"/>
属性：属性值； width 宽度 height 高度 background 背景 background-attachment: fixed; 背景是否滚动 background-color: gray; 背景颜色 background-image: url(bg.jpg); 背景图 background-repeat: no-repeat; 背景图是否重复 background-position: center 0px; 背景图位置
border 边框 border-width 边框宽度 border-style 边框样式 border-color 边框颜色 边框样式： solid 实线 dashed 虚线 dotted 点线（IE6不兼容）
padding 内边距 padding-top 上边内边距 padding-right 右边内边距 padding-bottom 下边内边距 padding-left 左边内边距 padding: top right bottom left; 注意：内边距相当于给一个盒子加了填充厚度会影响盒子大小。
margin 外边距 外边距的问题： 1、上下外边距会叠压； 2、父子级包含的时候子级的margin-top会传递给父级；（内边距替代外边距） 外边距复合：margin: top right bottom left;
盒子大小 = border + padding + width/height 盒子宽度 = 左border+左padding+width+右padding +右border 盒子高度 = 上border+上padding+height+下padding+下border
结构样式： width 宽度 height 高度 background 背景 border 边框 padding 内边距 margin 外边距 复合属性：一个属性多个属性值的命令，叫做复合属性。 font-size 文字大小（一般均为偶数） font-family 字体（中文默认宋体） color 文字颜色（英文、rgb、十六位进制色彩值） line-height 行高 text-align 文本对齐方式 text-indent 首行缩进（em缩进字符） font-weight 文字着重 font-style 文字倾斜 text-decoration 文本修饰 letter-spacing 字母间距 word-spacing 单词间距（以空格为解析单位） 复合属性： background border padding margin font：font-style | font-weight | font-size/line-height | font-family；
常见样式17： width 宽度 height 高度 background 背景 border 边框 padding 内边距 margin 外边距 font-size 文字大小 font-family 字体 color 文字颜色 line-height 行高 text-align 文本对齐方式 text-indent 首行缩进 font-weight 文字着重 font-style 文字样式 text-decoration 文本修饰 letter-spacing 字母间距 word-spacing 单词间距
前端开发环境：
Photoshop（切图、修图、测量）
Dreamweaver
浏览器（两大类）：
IE浏览器： IETester（IE6、IE7、IE8）、IE9、IE10……
标准浏览器：firefox（fireBug）、chrome、safari、oprea…
第一个页面
<!DOCTYPE HTML>
<html>
<head>
<title>第一个页面</title>
<meta charset="utf-8"/>
</head>
<body>
这是我的第一个页面
</body>
</html>
第二个页面-行间样式
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <div style="400px; height:200px; background:red;">块</div> 一个块，宽度300像素，高度是200像素，背景蓝色 <div style="300px; height:200px; background:blue;"></div> <!-- 行间样式 --> <!-- html 注释 --> </body> </html>
第三个-内部样式
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box{400px; height:200px; background:red;} /* 内部样式表 */ /* css 注释 */ </style> </head> <body> <div id="box">块</div> </body> </html>
第四个-外部样式
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <link href="style.css" rel="stylesheet"/> </head> <body> <div id="box">块</div> 科技 </body> </html>
style.css文件
#box{400px; height:200px; background:red;}
第五个-常见样式：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box{ 400px; height:200px; background:red; } /* XX:??; 属性:属性值; 结构样式： width 宽度 height 高度 background 背景 border 边框 padding 内边距 margin 外边距 */ </style> </head> <body> <div id="box">块</div> </body> </html>
第六个-border 边框
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box{ 0; height:0; border-top:100px solid white; border-right:100px solid blue; border-bottom:100px solid green; border-left:100px solid yellow; } /* border 边框 边框样式： solid 实线 dashed 虚线 dotted 点线（IE6不兼容） */ </style> </head> <body> <div id="box"></div> </body> </html>
页面效果图：
第七个-padding 内边距
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box{440px; height:240px;border:1px solid black;
/*
padding-top:30px;
padding-right:30px;
padding-bottom:30px;
padding-left:30px;
*/
padding:30px 30px 10px 30px;
}
/*
padding 内边距
padding: top right bottom left;
注意：内边距相当于给一个盒子加了填充厚度会影响盒子大小。
*/
</style>
</head>
<body>
<div id="box">块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块</div>
</body>
</html>
效果：
第八：margin 外边距
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box1{500px; height:300px; background:blue;margin-bottom:30px;} #box2{300px; height:100px; background:yellow; margin-top:30px;} /* margin 外边距 外边距的问题： 1、上下外边距会叠压； */ </style> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html>
第九：margin 外边距
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box1{500px; height:200px; background:blue; padding-top:100px;} #box2{300px; height:100px; background:yellow;} /* margin 外边距 外边距的问题： 1、上下外边距会叠压； 2、父子级包含的时候子级的margin-top会传递给父级；（内边距替代外边距） */ </style> </head> <body> <div id="box1"> <div id="box2"></div> </div> </body> </html>
如图：
外边距样式：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box2{300px; height:100px; background:yellow;
/*
margin-right:auto;
margin-left:auto;
自动适应
*/
margin:0 auto;
}
/*
margin 外边距
外边距复合：margin: top right bottom left;
*/
</style>
</head>
<body>
<div id="box2"></div>
</body>
</html>
-常见样式文本设置
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box{500px; height:300px; margin:90px auto; border:1px solid red; font-size:18px;/* 12px 偶数 */ font-family:宋体,arial; color:#961939; line-height:30px; text-align:left; text-indent:2em;/* 1em=[font-size] 相当于1个字 */ font-weight:normal; font-style:normal; text-decoration:none; word-spacing:30px; } /* font-size 文字大小（一般均为偶数） font-family 字体（中文默认宋体） color 文字颜色（英文、rgb、十六位进制色彩值） line-height 行高 text-align 文本对齐方式 text-indent 首行缩进（em缩进字符） font-weight 文字着重 font-style 文字倾斜 text-decoration 文本修饰 letter-spacing 字母间距 word-spacing 单词间距（以空格为解析单位） font：font-style | font-weight | font-size/line-height | font-family； */ </style> </head> <body> <div id="box"> 内容内容内容内google容内sun容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </body> </html>
如图：
