開始
CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀。
通過使用 CSS樣式設(shè)置頁面的格式，可將頁面的內(nèi)容與表現(xiàn)形式分離。
頁面內(nèi)容存放在HTML文檔中，而用于定義表現(xiàn)形式的CSS規(guī)則則存放在另一個(gè)文件中或 HTML文檔的某一部分，通常為文件頭部分。
將內(nèi)容與表現(xiàn)形式分離，不僅可使維護(hù)站點(diǎn)的外觀更加容易，而且還可以使HTML文檔代碼更加簡練，縮短瀏覽器的加載時(shí)間。
語法
CSS 語法由三部分構(gòu)成：選擇器、屬性和值：
selector {property: value}
選擇器 (selector) 通常是你希望定義的 HTML 元素或標(biāo)簽，屬性 (property) 是你希望改變的屬性，并且每個(gè)屬性都有一個(gè)值。屬性和值被冒號(hào)分開，并由花括號(hào)包圍，這樣就組成了一個(gè)完整的樣式
body {color: blue}
多重聲明：
如果要定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開。
p {text-align:center; color:red;}
注釋
/* p{ color: red} */
CSS引用
- 內(nèi)聯(lián)樣式(在HTML元素內(nèi)部)
<p style="color: red">text</p>
- 內(nèi)部樣式表（位于<head>標(biāo)簽內(nèi)部）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>
...
- 外部樣式表（獨(dú)立的.css文件）
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
單位
- px 象素
font-size:12px
- %百分比
width:50%
選擇器
- 標(biāo)簽選擇器
<p>this is picture!</p>
p{ color:#555}
- id選擇器
<p id="desc">this is picture!</p>
<style>
#desc{ color:#555}
</style>
- class選擇器
<p class="desc">this is picture!</p>
<style>
.desc{font-weight:#555}
</style>
- 群組選擇器
<span class="first">first</span>
<p>two</p>
<div id="second">second</div>
<style>
.one,p,#second{color:#f60}
</style>
- 后代選擇器
<div id="firstcard">
<div class="avatar">
<img src="abc/a.jpg" width="48" height="48" alt="a的頭像" />
</div>
</div>
<div id="secondcard">
<div class="avatar">
<img src="abc/a.jpg" width="48" height="48" alt="a的頭像" />
</div>
</div>
<style>
.avatar{ padding:3px; border:1px solid #dcdcdc}
#firstcard .avatar{border:1px solid #f60;}
#secondcard .avatar{border:1px solid #06f;}
</style>
文本
- font-family
- font-size
- font-weight
- text-decoration
- text spacing
box 模型
CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式。
- margin
Margin屬性分為margin-top、margin-right、margin-bottom、margin-left和margin五個(gè)屬性， 分別表示BOX里內(nèi)容離邊框的距離，它的屬性值是數(shù)值單位， 可以是長度、百分比或auto，margin可以設(shè)為 負(fù)值 ，造成BOX與BOX之間的重疊顯示
- padding
Padding屬性用來描述BOX的邊框和內(nèi)容之間插入多少空間，和margin屬性類似， 它也分為上右下左和一個(gè)快捷方式padding
- border
border屬性就是用來描述BOX邊框的。
border屬性分為border-width、border-color和border-style
border-width屬性
border-width屬性又分為：border-top-width、border-right-width、border-bottom-width、border-left-width和border-width屬性，border-width用長度表示為"thin/medium/thick"或長度單位表示
border-color屬性
border-color屬性用來顯示BOX邊框顏色，分為border-top-color、border-right-color、border-bottom-color、border-right-color和border-color屬性，屬性值為顏色，可以用十六進(jìn)制表示
border-style屬性
border-style屬性用來設(shè)置BOX對(duì)象邊框的樣式，它的屬性值為CSS規(guī)定的關(guān)鍵字，平?？床坏絙order是因?yàn)?，初始值是none
-
屬性值的名稱和代表意義如下：
- none：無邊框。
- dotted：邊框?yàn)辄c(diǎn)線。
- dashed：邊框?yàn)殚L短線。
- solid：邊框?yàn)閷?shí)線。
- double：邊框?yàn)殡p線。
- groove、ridge、inset和outset：顯示不同效果的3D邊框（根據(jù)color屬性）。
border屬性為Border的快捷方式，屬性值間用空格隔開，順序是"邊框?qū)挾?邊框樣式 邊框顏色"，例如：
<h1 style="border:.5em outset red">hello!</h1>
假設(shè)框的每個(gè)邊上有 10 個(gè)像素的外邊距和 5 個(gè)像素的內(nèi)邊距。
如果希望這個(gè)元素框達(dá)到 100 個(gè)像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素，請(qǐng)看下圖：
- 上, 右, 下, 左的順時(shí)針規(guī)則,簡寫為
margin:10px 20px 30px 40px;
padding:10px 20px 30px 40px;
布局屬性
- position屬性
position屬性有五個(gè)取值，分別為：static, relative, absolute, fixed, inherit, 其中“static”為默認(rèn)值。
static
該值為position的默認(rèn)值，可以省略不寫，當(dāng)position取值為static或者沒有設(shè)置position屬性的時(shí)候，div的顯示方式為按文本流的順序從上至下，或者從左到右順序顯示。
<div class="style">層一</div>
<div class="style">層二</div>
.style {
border:1px solid #999900;
background-color:#CCFF99;
width:80px;
height:80px;
margin-bottom:5px;
}
relative
相對(duì)定位，相對(duì)于什么位置呢? 偏移文本流中最初的位置。最初位置也就是當(dāng)position取值為static時(shí)的位置，也就是說這里的相對(duì)定位是相對(duì)于它在正常情況下的默認(rèn)位置的。
下圖列出了偏移產(chǎn)生前后的位置關(guān)系：
偏移前：
<style type="text/css">
.style1 {
position:relative;
height:80px;
width:80px;
margin-bottom:10px;
border:1px solid #000;
background-color:#acd373;
}
.style2 {
position:relative;
height:80px;
width:80px;
border:1px solid #000;
background-color:#f26c4f;
}
</style>
<div class="style1">層一</div>
<div class="style2">層二</div>
偏移后：
<style type="text/css">
.style1 {
position:relative;
left:30px;
top:30px;
height:80px;
width:80px;
margin-bottom:10px;
border:1px solid #000;
background-color:#acd373;
}
.style2 {
position:relative;
height:80px;
width:80px;
border:1px solid #000;
background-color:#f26c4f;
}
</style>
<div class="style1">層一</div>
<div class="style2">層二</div>
設(shè)置了position:relative而不設(shè)置left,top等屬性的時(shí)候，層顯示的位置和不設(shè)置position屬性或者position值取static時(shí)一樣。
當(dāng)一個(gè)層設(shè)置了position:relative，而且使得層位置產(chǎn)生相對(duì)偏移時(shí)，并不影響文本流中接下來的其他層的位置。
absolute
絕對(duì)定位，回憶一下，當(dāng)我們設(shè)置position的值為static或者relative時(shí)，層依然存在于文本流中，也就是不管位置是否偏移，文本流中依然為它保留了該有的位置。但當(dāng)層設(shè)置了position:absolute并產(chǎn)生偏移（設(shè)置了top,left等值）時(shí)，該層將完全從文本流中脫離，進(jìn)而以該層所在的父容器的坐標(biāo)原點(diǎn)為參考點(diǎn)進(jìn)行偏移，可以這理解，該層已經(jīng)和同級(jí)容器中的其它元素脫離了關(guān)系，也不會(huì)對(duì)其它元素產(chǎn)生任何影響（當(dāng)它不存在?。?。
注意：如果父容器沒有設(shè)置position屬性或position值為static時(shí)，將以body的坐標(biāo)原點(diǎn)為參考。
下面我們以三個(gè)圖示來分別說明。
頁面一：
<style type="text/css">
.style1 {
height:150px;
width:150px;
border:1px solid #000;
background-color:#a2d39c;
}
.style2 {
height:50px;
width:50px;
border:1px solid #000;
background-color:#f68e56;
}
.style3 {
height:50px;
width:50px;
border:1px solid #000;
background-color:#00adef;
}
</style>
<div class="style1">
<div class="style2"></div>
<div class="style3"></div>
</div>
頁面二：
<style type="text/css">
.style1 {
height:150px;
width:150px;
border:1px solid #000;
background-color:#a2d39c;
}
.style2 {
position:absolute;
top:0;
left:0;
height:50px;
width:50px;
border:1px solid #000;
background-color:#f68e56;
}
.style3 {
height:50px;
width:50px;
border:1px solid #000;
background-color:#00adef;
}
</style>
<div class="style1">
<div class="style2"></div>
<div class="style3"></div>
</div>
頁面三：
<style type="text/css">
.style1 {
position:relative;
height:150px;
width:150px;
border:1px solid #000;
background-color:#a2d39c;
}
.style2 {
position:absolute;
top:10px;
left:10px;
height:50px;
width:50px;
border:1px solid #000;
background-color:#f68e56;
}
.style3 {
height:50px;
width:50px;
border:1px solid #000;
background-color:#00adef;
}
</style>
<div class="style1">
<div class="style2"></div>
<div class="style3"></div>
</div>
fixed
固定定位，它的效果類似常見的浮動(dòng)廣告，無論如何拖動(dòng)瀏覽器的滾動(dòng)條，層始終懸浮在瀏覽器的某個(gè)位置。只能被Firefox好的支持，IE下需要用JS模擬。
inherit
繼承，和其它屬性的繼承一樣。在這里為繼承父元素中的position值。
- z-index屬性
該屬性在設(shè)置了position并取值為“absolute”或“relative”時(shí)有效，用于控制層在Z- 軸上的排列順序，值為整數(shù)（由于不同瀏覽器的兼容性的區(qū)別，最好是正整數(shù)），取值越大層越在最上面。
- float屬性
取值包括inherit，left，right以及默認(rèn)值none，該屬性用于控制文本流的顯示方向。需要注意的是如果設(shè)置了該屬性并取值為left或right后，會(huì)影響到該流后面的其它盒子模型?？梢酝ㄟ^設(shè)置“clear:both;”清除該屬性設(shè)置。 例如：
<div class="style1">層一</div>
<div class="style1">層二</div>
<div class="style2">層三</div>
.style1 {
border:1px solid #999900;
background-color:#CCFF99;
width:80px;
height:80px;
float:left;
margin-bottom:5px;
}
.style2 {
border:1px solid #999900;
background-color:#CCFF99;
width:80px;
height:80px;
clear:both;
margin-bottom:5px;
}
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
