第一章：CSS基本样式及盒模型
1. 引入CSS样式的三种方式
*小知识点
html5中单标签不需要“/”
<div>块</div> 网页中的一个一个小模块
行间样式
style属性要写到<div>标签内，代码如下：
<div style="width:200px;height:200px;background:red;">块</div>
style="width:200px;height:200px;background:red;
style:属性名 = "属性值；属性值；·······"
行间样式修改不方便。
内部样式
内部样式写在页面内部，专门的style标签里
需要在<div>中声明id,然后在style的标签对中用#进行调用模块名，id="模块名" #模块名{ }
!!同一页面中模块名是不可以重名的!!
代码如下：
<style>
#div1{
width:100px;height:100px;background:green;font-size:50px;color:#ccc;text-align:center;
}
</style>
</head>
<div id="div1">块</div>
<body>
</body>
外部样式
新建CSS文件--写入样式--在html中写入<link href="CSS文件名" rel="stylesheet"/>
rel="stylesheet"：引入层叠样式表。
<link href="样式表路径" rel="stylesheet"/>----固定
外部样式方便更改，只需更改CSS文件即可。
2. CSS基本样式（1）
width ：宽度
height ：高度
计量单位：px 像素
测量方式：ps选框测量
border：边框 （集合样式） !!每条样式之间有空格，顺序随意!!
border-width：边框粗细
border-style ：边框样式
border-color ：边框颜色 颜色不设置时，默认为黑色。
颜色模式：1.关键字，英文单词：red green·····
2.#+16进制数（6位或3位）
简化方式：前两位一样可以简化成一位；中间两位一样可以简化成一位；后面两位一样可以简化成一位
3.rgb(r，g，b) 0-255之间的数字
3. CSS基本样式（2）
border：!!后面的语句可以覆盖前面的语句!!
border-top：上边框
border-right：右边框
border-bottom：下边框
border-left：左边框
border-width
border-top-width：上边框宽度
border-right-width：右边框宽度
border-bottom-width：下边框宽度
border-left-width：左边框宽度
border-style
border-top-style：上边框样式
border-right-style：右边框样式
border-bottom-style：下边框样式
border-left-style：左边框样式
border-color
border-top-color：上边框颜色
border-right-color：右边框颜色
border-bottom-color：下边框颜色
border-left-color：左边框颜色
*小知识点
border-left:none;左边框无
边框的形状：
有高有宽的时候：等腰梯形。
无高无宽的时候：三角形。
嵌套关系（父子级关系）：
<div id="box"> <div id="head"></div> <div id="content-1"></div> <div id="content-2"></div> </div>
并列关系（兄弟标签）：
<div id="head"></div> <div id="content-1"></div> <div id="content-2"></div>
设置宽高，是内容宽高，不加边框。
同一个元素两边边框相交的地方是斜线。
4. CSS基本样式（3）
background：背景
background-color：背景颜色
background-image:url(图片路径)：背景图片
background-repeat：背景平铺
repeat：平铺（默认）
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺
background-position：背景图定位（两个属性：x y）
表示方式
（1）关键字
x：left（默认）图的左侧和元素的左侧对齐
center：图的中间和元素的中间对齐
right：图的右侧和元素的右侧对齐
y：top（默认）图的上部和元素的上部对齐
center：图的中部和元素的中部对齐
bottom：图的下部和元素的下部对齐
（2）具体数值
默认：0 0 ; 左上角
x：正值从左向右移动，负值从右向左移动；
y：正值从上向下移动，负值从下向上移动；
background-attachment:fixed; 背景图位置固定
background（复合样式）：
代码如下：
background:url(img/img.gif) no-repeat #cc fixed 100px 100px;
背景图颜色渐变：取小像素--平铺
5. CSS基本样式（4）
*小知识点：
文字长度超出边框的宽自动换行；
<div>文本内容</div>
font-size：文字大小
font-weight：文字是否加粗 bold：加粗 normal：正常
font-style：文字样式 italic 斜体 normal：正常
line-height：行高（每行文字的高度，文字上下居中）
font-family:"宋体"; 改变字体
font （复合样式）!!!!!注意顺序!!!!!
!!font:font-weight font-style font-size/ine-height font-family!!
font中两个必写项：font:font-size font-family
color：文本颜色，文字颜色
text-indent：首行缩进（1em=一个文字大小）
text-align：文本对齐方式
1.left：（默认）左对齐
2.center：水平中间对齐
3.right：右对齐
text-decoration：文本修饰
1.underline：下划线
2.line-through：删除线
3.overline：上划线
4.none：无修饰
letter-spacing：字（母）间距 !!!文字右侧通常会空出来1px!!!
word-spacing：（单）词间距 空格也占用像素。
6. CSS盒模型（1）
padding：内填充（padding在元素的边框以里，内容以外，padding同样显示元素的背景）
可视宽（高）：可视宽（高）=border+padding+width（height）;
padding：上 右 下 左;
padding-top
padding-right
padding-bottom
padding-left
margin：外边距（margin元素的边框以外，不显示元素背景）
margin：上 右 下 左;
margin-top
margin-right
margin-bottom
margin-left
margin叠加：相邻两个元素的上下margin是叠加在一起的。
margin传递：子元素的上下margin会传递给父级。
margin-left:auto：元素至右
margin-right:auto：元素至左
margin:0 auto：元素置顶居中
CSS盒模型：
CSS盒子模式具备属性：
内容(content)、填充(padding)、边框(border)、边界(margin)。
7. CSS盒模型（2）
box：不算padding和border
padding:0 10px; 左右10像素
第二章：超链接、常用标签及文件路径及便签语义化
1. 超链接
a链接：<a href="网页地址">网页名</a>
代码如下：
<a href="http://www.baidu.com">百度</a>
href="页面地址"--跳转页面
href="压缩包地址"--下载
href="id"--直接跳转到id所在位置 （锚点）
代码如下：
<style>
#div1{height:50px;margin:300px 0;background:red;}
#div2{height:200px;margin:400px 0;background:blue;}
#div3{height:300px;margin:500px 0;background:yellow;}
</style>
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
新窗口打开页面：
target="_blank"--新窗口打开
target="_self"--当前窗口打开（默认）
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.qq.com" target="_self">qq</a>
base标签：定义默认的打开方式，默认的地址
<head>
<base target="_blank" href="http://www.baidu.com"/>
</head>
!!如果默认的连接地址和要打开的地址不一样会出错误。需要把打开地址写全（<a href="http://www.qq.com" >qq</a>），单独的打开方式和默认的不一样，需要单独在a标签内写出来!!
a标签字填色，必须设到a标签里面去。
<style>#title_a{color:red;}</style>
<div id="title"><a href="#div1" id="title_a">div1</a></div>
a标签默认有下划线。
a标签里面不能嵌套a标签。
span标签：无具体意思，一般用来区分样式。
span标签字填色，必须设到a标签里面去。
span标签与a标签下划线不同颜色时，在span标签内加下划线：#title_span{color:red; text-decoration:underline;}
2. 常用标签
section：版块，用于划分页面上的不同区域，或者划分文章里的不同节。
header：页面头部或者版块（section）头部。
footer：页面底部或者版块（section）底部。
<body>
<header></header>
<section>
<header></header>
<footer></footer>
</section>
<footer></footer>
</body>
nav：导航 （包含链接的一个列表）
article：用来在页面内表示一套结构完整且独立的内容部分，可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。
aside：元素标签可以包含与当前页面或者主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别于主要内容的部分。
1.被包含在<article>中作为主要内容的附属信息部分，其中内容是以与当前文章有关的引用、词汇列表等。
2.在<article>之外使用，作为页面或站点全局的附属信息部分：最典型的形式是侧边栏（sidebar），其中的内容可以是友情链接、附属导航或广告元素等。
h1-h6 :标题（1-6逐渐变小）
ul：无序列表
ol：有序列表
li：ul或ol的列表项
dl：定义列表
dt：定义列表的项目
dd：对dt展开的描述扩展
p：段落
time：时间
em：强调一个词或者一段话 倾斜
strong：强调一个词或者一段话 与span一样不会换行 加粗
img：图片 
3. 文件路径及标签语义化
路径计算： 
- 绝对路径：（xx区xx路xx号）
线上的绝对路径：http://wenwen.soso.com/p/20110218/20110218121909-1933361203.jpg
线下的绝对路径：E:\book\网页布局\代码\第2章\bg.jpg - 相对路径：相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。使用相对路径可以为我们带来非常多的便利。
先找到与页面同一目录的文件夹再一级一级往下写目录。
返回上一级目录
标签语义化：什么样的地方就用什么样的标签，合理的使用标签。
让网站在搜索引擎中排名靠前：
1.推广链接，付费手段，SEM
2.百度快照，技术手段，SEO
第三章：常用选择符及优先级、块和内嵌、标签默认样式初始
1.常用选择符及优先级
（1）常用选择器
1.id选择器:同一页面不能重名，样式表内的标识是#
2.类（class）选择器：同一页面可以重名，样式表内的标识是.
class：同一个元素可以有多个class的名字，用空格隔开。
代码如下：
<p class="box box2">div2</div>
class同时有两个类型：box box2
3.类型（标签）选择器：在style内直接设置如：div{··· } p{··· }
4.包含（后代）选择器：在style内设置如：#box p{···}
5.群组选择器：在style内设置如：div,span{···}
6.通配符 * ：代表所有的标签。
（2）选择器的优先级
1.选择器的优先级一致的情况下，后边的样式会覆盖前面的。
2.行间样式>id选择器>类（class）选择器>类型选择器>通配符
3.包含选择器：前后的优先级叠加。
选择器的优先级一致的情况下，后边的样式会覆盖前面的。
选择器的优先级不一致的情况下，去选择级高的样式（约分）。
4.群组选择器：逗号前后的优先级不叠加，后边的样式会覆盖前面的。
2.块和内嵌
1.块代表<div>：
（1）：自己独立占据一行
（2）：支持所有的样式
（3）：不设宽度的时候，宽度撑满整行
块标签：
<div>块</div>
<section>划分页面板块</section>
<header>头部</header>
<footer>底部</footer>
<nav>导航</nav>
<article>article</article>
<aside>article的附属</aside>
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl>
<dt>定义列表项目</dt>
<dd>dt的展开描述</dd>
</dl>
<h1>标题</h1>
<p>段落</p>
2.内嵌代表<span>：
（1）：可以在一行显示
（2）：不支持宽高，对上下的padding和margin等样式支持的也有问题
（3）：宽度由内容撑开
（4）：代码换行会被解析出来（宋体的情况下，空格占字体大小的一半）
内嵌标签：
<span>
<strong>strong</strong>
<em>em</em>
<a href="#">链接</a>
3.标签默认样式初始
<div>块</div> 无默认样式
<section>划分页面板块</section> 无默认样式
<header>头部</header> 无默认样式
<footer>底部</footer> 无默认样式
<nav>导航</nav> 无默认样式
<article>article</article> 无默认样式
<aside>article的附属</aside> 无默认样式
<ul> 上下margin，左padding
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol> 上下margin，左padding
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl> 上下margin
<dt>定义列表项目</dt> 无默认样式
<dd>dt的展开描述</dd> 左margin
</dl>
<h1>标题</h1> 上下margin，加粗
<h2>标题</h2> 上下margin，加粗
<h3>标题</h3> 上下margin，加粗
<h4>标题</h4> 上下margin，加粗
<h5>标题</h5> 上下margin，加粗
<h6>标题</h6> 上下margin，加粗
<p>段落</p> 上下margin
<span> 无默认样式
<strong>strong</strong> 加粗
<em>em</em> 倾斜
<a href="#">链接</a> 有下划线 ，
 放到链接里有默认样式
清除默认样式：
body{margin:0;}
ul,ol{margin:0;padding:0;}
li{list-style:none;}
dl{margin:0;}
dd{margin:0;}
h1,h2,h3,h4,h5,h6{margin:0; font-weight:normal;}
p{margin:0;}
strong{font-weight:normal;}
a{text-decoration:none;}
em{font-style:normal;}
img{border:none;}
