結構削罩、樣式瞄勾、行為分離
CSS的三種類型
- 內(nèi)聯(lián)樣式表（inline style sheets）
<!--內(nèi)聯(lián)樣式表，用于設置文本框的背景顏色-->
<input type="text" readonly="readonly" style="background-color: #FF00FF" />
- 內(nèi)部樣式表/內(nèi)嵌樣式表（embedded style sheets）
<!--內(nèi)部樣式表-->
<style type="text/css">
input{
border-color:Yellow;
color:Red;
}
</style>
- 外部樣式表（linked style sheets）
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
樣式表的優(yōu)先級
級別從高到低：
- 內(nèi)聯(lián)樣式表
- 內(nèi)部樣式表
- 外部樣式表
- 瀏覽器默認
語法
CSS 規(guī)則由兩個主要的部分構成：選擇器（selector）弥激，以及一條或多條聲明（declaration）进陡。
選擇器
- 元素選擇器
/*元素選擇器*/
html {color:black;}
h {color:blue;}
h2 {color:silver;}
- 選擇器分組
被分組的選擇器就可以分享相同的聲明，用逗號將需要分組的選擇器分開
h1,h2,h3,h4,h5,h6 {
color: green;
}
- 后代選擇器
li strong {
font-style: italic;
font-weight: normal;
}
- id選擇器
#red {color:red;}
#green {color:green;}
id 選擇器和派生選擇器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
- 類選擇器
.center {text-align: center}
class 也可被用作派生選擇器
.fancy td {
color: #f60;
background: #666;
}
- 屬性選擇器
/*帶有 title 屬性的所有元素設置樣式*/
[title]
{
color:red;
}
/*title="W3School" 的所有元素設置樣式*/
[title=W3School]
{
border:5px solid blue;
}
設置表單的樣式
屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
- 子元素選擇器
h1 > strong {color:red;}
他與后代選擇器的區(qū)別是只選擇子元素
- 相鄰元素選擇器
如果需要選擇緊接在另一個元素后的元素微服，而且二者有相同的父元素趾疚，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。
h1 + p {margin-top:50px;}
CSS盒模型
CSS盒模型示意圖
標準盒子模型
盒子3D模型
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
值設置的方法
.test1 {
/*四個方位設置相同的值*/
padding: 1.5cm
/*上下為0.5以蕴；左右為2.5*/
padding: 0.5cm 2.5cm
/*上=0.5 左右=1.0 下1.5*/
padding: 0.5cm 1.0cm 1.5cm
/*上糙麦，右，下丛肮，左*/
padding: 0.5cm 1.0cm 1.5cm 2.0cm
}
內(nèi)邊距
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
內(nèi)邊距可以設置百分比
p {padding: 10%;}
邊框
元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊據(jù)的一條或多條線赡磅。每個邊框有 3 個方面：寬度、樣式宝与，顏色焚廊。
- 樣式
a:link img {border-style: outset;}
/*定義了四種邊框樣式：實線上邊框冶匹、點線右邊框、虛線下邊框和一個雙線左邊框*/
p.aside {border-style: solid dotted dashed double;}
- 寬度
可以通過 border-width 屬性為邊框指定寬度咆瘟。
為邊框指定寬度有兩種方法：可以指定長度值嚼隘，比如 2px 或 0.1em；或者使用 3 個關鍵字之一袒餐，它們分別是 thin 飞蛹、medium（默認值） 和 thick。
p {border-style: solid; border-width: 5px;}
p {border-style: solid; border-width: 15px 5px 15px 5px;}
- 顏色
p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}
外邊距
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
外邊距合并
外邊距合并（疊加）是一個相當簡單的概念灸眼。但是卧檐，在實踐中對網(wǎng)頁進行布局時，它會造成許多混淆焰宣。
簡單地說泄隔，外邊距合并指的是，當兩個垂直外邊距相遇時宛徊，它們將形成一個外邊距佛嬉。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
外邊距合并規(guī)則
當一個元素包含在另一個元素中時（假設沒有內(nèi)邊距或邊框把外邊距分隔開）闸天，它們的上和/或下外邊距也會發(fā)生合并暖呕。請看下圖：
外邊距合并規(guī)則2
CSS定位
標準文檔流(Normal flow)
浮動(Floats)
絕對定位(Absolute positioning)
1. 標準文檔流
特點：
從上到下，從左到右苞氮，輸出文檔內(nèi)容
由塊級元素和行級元素組成
塊級元素：從左到右撐滿頁面湾揽，獨占一行；觸碰到頁面邊緣笼吟，會自動換行
行級元素：能在同一行內(nèi)顯示库物，不會改變HTML文檔結構
2. 浮動
這種布局的方法，所有的塊級元素是順序從上到下排列的贷帮，那么如何將塊級元素從左到右排列那戚揭，使用的就是浮動∧焓啵可以實現(xiàn)橫向多列布局
特點：
使用float屬性民晒，共有三個屬性值：left、right锄禽、none
元素會左移潜必，或者右移，直到觸碰到瀏覽器的邊緣為止
設置了浮動的元素沃但，依然處于標準文檔里中磁滚，占用其中的空間
如果浮動不設置寬度，則寬度依賴于內(nèi)容的寬度
浮動會影響緊跟著的元素
關于清除浮動的影響問題：
- clear屬性宵晚，對受到影響的元素設置清除浮動影響 clear:both;clear:left;clear:right;
- 設置{width:100%; overflow:hidden;}
注意清除浮動
3. 絕對定位
通過設置position屬性來實現(xiàn)垂攘。共有四個屬性值可以設置：
static ： 靜態(tài)定位辈毯，依然處于標準文檔流中
relative： 相對定位，相對于自身原有位置進行偏移搜贤，仍處于標準文檔流，隨即擁有偏移屬性和z-index屬性
absolute : 絕對定位钝凶，建立了以包含快為基準的定位仪芒，完全脫離了標準文檔流，隨即擁有偏移屬性和z-index屬性耕陷。定位的基準取決于最近的祖先已經(jīng)定位的祖先元素掂名，如果都沒有定位，則相對于html進行偏移哟沫。
fixed : 固定定位
關于布局的三種最常見的方法
- 居中布局
wrap{ margin:0 auto;width:960px;}
- 左右布局
.left{width:800px; float:left;}
.right{widht:140px; float:right;}
CSS定位
CSS的定位屬性允許對元素進行定位饺蔑。
- CSS 定位和浮動
CSS 為定位和浮動提供了一些屬性，利用這些屬性嗜诀，可以建立列式布局猾警，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務隆敢。
定位的基本思想很簡單发皿，它允許你定義元素框相對于其正常位置應該出現(xiàn)的位置，或者相對于父元素拂蝎、另一個元素甚至瀏覽器窗口本身的位置穴墅。
浮動不完全是定位，不過温自，它當然也不是正常流布局玄货。我們會在后面的章節(jié)中明確浮動的含義。
元素有塊元素悼泌、行內(nèi)元素之分松捉。可以使用display屬性修改框的類型 - CSS定位機制
CSS 有三種基本的定位機制：普通流馆里、浮動和絕對定位
- 普通框都是在普通流中定位
- 塊級框從上到下一個接一個地排列惩坑，框之間的垂直距離是由框的垂直外邊距計算出來
- 行內(nèi)框在一行中水平布置
- CSS的定位屬性
position 屬性值的含義：
static
元素框正常生成。塊級元素生成一個矩形框也拜，作為文檔流的一部分以舒，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中慢哈。
relative
元素框偏移某個距離蔓钟。元素仍保持其未定位前的形狀，它原本所占的空間仍保留卵贱。
absolute
元素框從文檔流完全刪除滥沫，并相對于其包含塊定位侣集。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉兰绣，就好像元素原來不存在一樣世分。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框缀辩。
fixed
元素框的表現(xiàn)類似于將 position 設置為 absolute臭埋，不過其包含塊是視窗本身。
提示：相對定位實際上被看作普通流定位模型的一部分臀玄，因為元素的位置相對于它在普通流中的位置瓢阴。
可以通過z-index屬性設置顯示順序 - 相對定位
相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位健无，它將出現(xiàn)在它所在的位置上荣恐。然后，可以通過設置垂直或水平位置累贤，讓這個元素“相對于”它的起點進行移動叠穆。
如果將 top 設置為 20px，那么框將在原位置頂部下面 20 像素的地方臼膏。如果 left 設置為 30 像素痹束，那么會在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動讶请。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
相對定位示意圖
注意祷嘶，在使用相對定位時，無論是否進行移動夺溢，元素仍然占據(jù)原來的空間论巍。因此，移動元素會導致它覆蓋其它框风响。
- 絕對定位
設置為絕對定位的元素框從文檔流完全刪除嘉汰，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊状勤。元素原先在正常文檔流中所占的空間會關閉鞋怀，就好像該元素原來不存在一樣。元素定位后生成一個塊級框持搜，而不論原來它在正常流中生成何種類型的框密似。
絕對定位使元素的位置與文檔流無關，因此不占據(jù)空間葫盼。這一點與相對定位不同残腌，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
普通流中其它元素的布局就像絕對定位的元素不存在一樣：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
關于定位的方式說明
一列布局
典型案例就是百度首頁抛猫，一列居中對齊
<style>
#main{
width: 800px;
height: 300px;
margin: 0 auto;
background: #123456;
}
</style>
兩列布局
<style>
.left{
width: 20%;
height: 500px;
float: left;
background: #ccc;
}
.right{
width: 80%;
height: 500px;
float: right;
background: #ddd;
}
#wrap{
width: 800px;
margin: 0 auto;
}
</style>
<body>
<div id="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
三列布局
<style>
.left{
width: 20%;
height: 500px;
float: left;
background: #ccc;
}
.mid{
width: 30%;
height: 500px;
float: left;
background: #eee;
}
.right{
width: 50%;
height: 500px;
float: right;
background: #ddd;
}
#wrap{
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
</div>
</body>
<style type="text/css">
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; background:#9CF;margin-left:210px;margin-right:210px;}
.right{ height:600px; width:200px; position:absolute;right:0; top:0; background:#FCC;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</body>
混合布局
<style>
#head{
margin: 0 auto;
width: 800px;
height: 100px;
background: #888;
}
#foot{
margin: 0 auto;
width: 800px;
height: 50px;
background: #777;
}
#main{
width: 800px;
height: 300px;
margin: 0 auto;
background: #123456;
overflow:hidden;
}
.left{
width: 20%;
height: 500px;
float: left;
background: #ccc;
}
.mid{
width: 30%;
height: 500px;
float: left;
background: #eee;
}
.right{
width: 50%;
height: 500px;
float: right;
background: #ddd;
}
#wrap{
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<div id="head"></div>
<div id="main">
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
</div>
<div id="foot"></div>
</div>
</body>
