第一章：CSS基本樣式及盒模型
1. 引入CSS樣式的三種方式
*小知識點
html5中單標簽不需要“/”
<div>塊</div> 網(wǎng)頁中的一個一個小模塊
行間樣式
style屬性要寫到<div>標簽內(nèi)危融，代碼如下：
<div style="width:200px;height:200px;background:red;">塊</div>
style="width:200px;height:200px;background:red;
style:屬性名 = "屬性值；屬性值帘饶；·······"
行間樣式修改不方便因篇。
內(nèi)部樣式
內(nèi)部樣式寫在頁面內(nèi)部，專門的style標簽里
需要在<div>中聲明id,然后在style的標簽對中用#進行調(diào)用模塊名，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進制數(shù)（6位或3位）
簡化方式：前兩位一樣可以簡化成一位；中間兩位一樣可以簡化成一位；后面兩位一樣可以簡化成一位
3.rgb(r慌盯，g乡洼，b) 0-255之間的數(shù)字
3. CSS基本樣式（2）
border：!!后面的語句可以覆蓋前面的語句!!
border-top：上邊框
border-right：右邊框
border-bottom：下邊框
border-left：左邊框
border-width
border-top-width：上邊框?qū)挾?br>
border-right-width：右邊框?qū)挾?br>
border-bottom-width：下邊框?qū)挾?br>
border-left-width：左邊框?qū)挾?/p>
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>
設置寬高，是內(nèi)容寬高忿偷，不加邊框金顿。
同一個元素兩邊邊框相交的地方是斜線。
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（默認）圖的左側(cè)和元素的左側(cè)對齊
center：圖的中間和元素的中間對齊
right：圖的右側(cè)和元素的右側(cè)對齊
y：top（默認）圖的上部和元素的上部對齊
center：圖的中部和元素的中部對齊
bottom：圖的下部和元素的下部對齊
（2）具體數(shù)值
默認：0 0 ; 左上角
x：正值從左向右移動鲤桥，負值從右向左移動揍拆；
y：正值從上向下移動，負值從下向上移動茶凳；
background-attachment:fixed; 背景圖位置固定
background（復合樣式）：
代碼如下：
background:url(img/img.gif) no-repeat #cc fixed 100px 100px;
背景圖顏色漸變：取小像素--平鋪
5. CSS基本樣式（4）
*小知識點：
文字長度超出邊框的寬自動換行嫂拴；
<div>文本內(nèi)容</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：字（母）間距 !!!文字右側(cè)通常會空出來1px!!!
word-spacing：（單）詞間距 空格也占用像素。
6. CSS盒模型（1）
padding：內(nèi)填充（padding在元素的邊框以里箱沦，內(nèi)容以外辩恼，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盒子模式具備屬性：
內(nèi)容(content)、填充(padding)寒跳、邊框(border)聘萨、邊界(margin)。
7. CSS盒模型（2）
box：不算padding和border
padding:0 10px; 左右10像素
第二章：超鏈接童太、常用標簽及文件路徑及便簽語義化
1. 超鏈接
a鏈接：<a href="網(wǎng)頁地址">網(wǎng)頁名</a>
代碼如下：
<a >百度</a>
href="頁面地址"--跳轉(zhuǎn)頁面
href="壓縮包地址"--下載
href="id"--直接跳轉(zhuǎn)到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 target="_blank">百度</a>
<a target="_self">qq</a>
base標簽：定義默認的打開方式米辐，默認的地址
<head>
<base target="_blank" />
</head>
!!如果默認的連接地址和要打開的地址不一樣會出錯誤胸完。需要把打開地址寫全（<a >qq</a>），單獨的打開方式和默認的不一樣翘贮，需要單獨在a標簽內(nèi)寫出來!!
a標簽字填色赊窥，必須設到a標簽里面去。
<style>#title_a{color:red;}</style>
<div id="title"><a href="#div1" id="title_a">div1</a></div>
a標簽默認有下劃線择膝。
a標簽里面不能嵌套a標簽誓琼。
span標簽：無具體意思，一般用來區(qū)分樣式肴捉。
span標簽字填色，必須設到a標簽里面去叔收。
span標簽與a標簽下劃線不同顏色時齿穗，在span標簽內(nèi)加下劃線：#title_span{color:red; text-decoration:underline;}
2. 常用標簽
section：版塊，用于劃分頁面上的不同區(qū)域饺律，或者劃分文章里的不同節(jié)窃页。
header：頁面頭部或者版塊（section）頭部。
footer：頁面底部或者版塊（section）底部复濒。
<body>
<header></header>
<section>
<header></header>
<footer></footer>
</section>
<footer></footer>
</body>
nav：導航 （包含鏈接的一個列表）
article：用來在頁面內(nèi)表示一套結(jié)構(gòu)完整且獨立的內(nèi)容部分脖卖，可以用來呈現(xiàn)論壇的一個帖子，雜志或報紙中的一篇文章巧颈，一篇博客畦木，用戶提交的評論內(nèi)容，可互動的頁面模塊掛件等砸泛。
aside：元素標簽可以包含與當前頁面或者主要內(nèi)容相關的引用十籍、側(cè)邊欄、廣告唇礁、nav元素組勾栗，以及其他類似的有別于主要內(nèi)容的部分。
1.被包含在<article>中作為主要內(nèi)容的附屬信息部分盏筐，其中內(nèi)容是以與當前文章有關的引用围俘、詞匯列表等。
2.在<article>之外使用琢融，作為頁面或站點全局的附屬信息部分：最典型的形式是側(cè)邊欄（sidebar）界牡，其中的內(nèi)容可以是友情鏈接、附屬導航或廣告元素等吏奸。
h1-h6 :標題（1-6逐漸變谢兑尽）
ul：無序列表
ol：有序列表
li：ul或ol的列表項
dl：定義列表
dt：定義列表的項目
dd：對dt展開的描述擴展
p：段落
time：時間
em：強調(diào)一個詞或者一段話 傾斜
strong：強調(diào)一個詞或者一段話 與span一樣不會換行 加粗
img：圖片 
3. 文件路徑及標簽語義化
路徑計算： 
- 絕對路徑：（xx區(qū)xx路xx號）
線上的絕對路徑：http://wenwen.soso.com/p/20110218/20110218121909-1933361203.jpg
線下的絕對路徑：E:\book\網(wǎng)頁布局\代碼\第2章\bg.jpg - 相對路徑：相對路徑就是指由這個文件所在的路徑引起的跟其它文件(或文件夾)的路徑關系。使用相對路徑可以為我們帶來非常多的便利奋蔚。
先找到與頁面同一目錄的文件夾再一級一級往下寫目錄她混。
返回上一級目錄
標簽語義化：什么樣的地方就用什么樣的標簽烈钞，合理的使用標簽。
讓網(wǎng)站在搜索引擎中排名靠前：
1.推廣鏈接坤按，付費手段毯欣，SEM
2.百度快照，技術手段臭脓，SEO
第三章：常用選擇符及優(yōu)先級酗钞、塊和內(nèi)嵌、標簽默認樣式初始
1.常用選擇符及優(yōu)先級
（1）常用選擇器
1.id選擇器:同一頁面不能重名来累，樣式表內(nèi)的標識是#
2.類（class）選擇器：同一頁面可以重名砚作，樣式表內(nèi)的標識是.
class：同一個元素可以有多個class的名字，用空格隔開嘹锁。
代碼如下：
<p class="box box2">div2</div>
class同時有兩個類型：box box2
3.類型（標簽）選擇器：在style內(nèi)直接設置如：div{··· } p{··· }
4.包含（后代）選擇器：在style內(nèi)設置如：#box p{···}
5.群組選擇器：在style內(nèi)設置如：div,span{···}
6.通配符 * ：代表所有的標簽葫录。
（2）選擇器的優(yōu)先級
1.選擇器的優(yōu)先級一致的情況下，后邊的樣式會覆蓋前面的领猾。
2.行間樣式>id選擇器>類（class）選擇器>類型選擇器>通配符
3.包含選擇器：前后的優(yōu)先級疊加米同。
選擇器的優(yōu)先級一致的情況下，后邊的樣式會覆蓋前面的摔竿。
選擇器的優(yōu)先級不一致的情況下面粮，去選擇級高的樣式（約分）。
4.群組選擇器：逗號前后的優(yōu)先級不疊加继低，后邊的樣式會覆蓋前面的熬苍。
2.塊和內(nèi)嵌
1.塊代表<div>：
（1）：自己獨立占據(jù)一行
（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.內(nèi)嵌代表<span>：
（1）：可以在一行顯示
（2）：不支持寬高郁季，對上下的padding和margin等樣式支持的也有問題
（3）：寬度由內(nèi)容撐開
（4）：代碼換行會被解析出來（宋體的情況下冷溃，空格占字體大小的一半）
內(nèi)嵌標簽：
<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;}
