CSS 全稱為“層疊樣式表(Cascading Style Sheets)”，它主要是用于定義 HTML 內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等。
格式
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成.
<style type="text/css">
p {
font-size: 12px;
color: red;
font-weight: bold;
text-align: left;
}
</style>
<!-- 最后一條聲明可以沒有分號(hào)，但是為了以后修改方便，一般也加上分號(hào) -->
css：/*注釋語(yǔ)句*/;
Html:<!--注釋語(yǔ)句-->
分類
內(nèi)聯(lián)樣式
css 樣式表就是把 css 代碼直接寫在現(xiàn)有的 HTML 標(biāo)簽中。
<p>這里是<span style="color:blue">welooky</span>博客站點(diǎn)</p>
嵌入式
css 樣式代碼寫在當(dāng)前的文件中,在<style type="text/css"></style>標(biāo)簽之間。一般情況下嵌入式 css 樣式寫在<head></head>之間。
外部式
就是把 css 代碼寫在一個(gè)單獨(dú)的外部文件中，以“.css”為擴(kuò)展名。
<!-- 在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi) -->
<link href="base.css" rel="stylesheet" type="text/css" />
優(yōu)先級(jí)：內(nèi)聯(lián)式 > 嵌入式 > 外部式。并遵守就近原則。
選擇器
每一條 css 樣式聲明（定義）由兩部分組成，形式如下：
選擇器{
樣式;
}
<style type="text/css">
/* 標(biāo)簽選擇器 */
h3{
font-size:12px;
line-height:1.6em;
}
/* 類選擇器 */
.focusText{
color:red;
}
/* ID選擇器 */
#username{
color:green;
}
/* 子選擇器：作用于直接后代 */
.food>li{
border:1px solid red;
}
/* 后代選擇器：作用于所有子后代元素 */
.first span{color:red;}
/* 通用選擇器：作用于所有標(biāo)簽元素 */
* {color:red;}
/* 偽類選擇器 */
a:hover{color:red;} /* 鼠標(biāo)滑過的狀態(tài) */
/* 分組選擇符 */
h1,span{color:red;}/* 多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式 */
</style>
<body>
<h3>印第安老斑鳩</h3><br/>
<span id="username">周杰倫</span>
<p class="focusText">沙漠之中怎么會(huì)有泥鰍,話說完飛過一只海鷗,大峽谷的風(fēng)呼嘯而過,是誰說沒有.</p>
</body>
在一個(gè) HTML 文檔中，ID 選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式
<style type="text/css">
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
</style>
<p>到了<span class="stress bigsize">三年級(jí)</span>下學(xué)期時(shí)...</p>
層疊和權(quán)重
繼承
某些樣式是具有繼承性的，允許樣式不僅應(yīng)用于某個(gè)特定 html 標(biāo)簽元素，而且應(yīng)用于其后代。
<style type="text/css">
p{border:1px solid red;}/*不具有繼承性*/
p{color:red;}/*標(biāo)簽中的所有子元素文本*/
</style>
權(quán)重
同一個(gè)元素設(shè)置了不同的 CSS 樣式代碼,權(quán)值高的起作用。
權(quán)值的規(guī)則：標(biāo)簽的權(quán)值為 1，類選擇符的權(quán)值為 10，ID 選擇符的權(quán)值最高為 100
若多個(gè) css 樣式具有相同權(quán)重值,處于最后面的 css 樣式會(huì)被應(yīng)用。遵守：內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）
<style type="text/css">
p{color:red;} /*權(quán)值為1*/
p span{color:green;} /*權(quán)值為1+1=2*/
.warning{color:white;} /*權(quán)值為10*/
p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
#footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/
p{color:red!important;}
</style>
為某些樣式設(shè)置具有最高權(quán)值，使用!important 語(yǔ)句來改變樣式權(quán)重。
瀏覽器默認(rèn)的樣式 < 網(wǎng)頁(yè)制作者樣式 < 用戶自己設(shè)置的樣式，但記住!important 優(yōu)先級(jí)樣式是個(gè)例外，權(quán)值高于用戶自己設(shè)置的樣式
排版樣式
<style type="text/css">
p{
font-family:"Microsoft Yahei";/*字體*/
font-size:12px;/*字號(hào)*/
color:#666;/*顏色*/
font-weight:bold;/*粗體*/
font-style:italic;/*斜體*/
text-decoration:underline;/*下劃線*/
}
body{
/* 在縮寫時(shí) font-size 與 line-height 中間要加入“/”斜扛 */
font:12px/1.5em "宋體",sans-serif;/*字號(hào)、行間距、中文字體、英文字體*/
}
p{
text-indent:2em;/*文本段設(shè)置2個(gè)空格縮進(jìn)，2em指文字的2倍大小*/
line-height:2em;/*行間距*/
}
h1{
letter-spacing:20px;/*文字間距*/
word-spacing:50px;/*英文單詞間距*/
}
div{
text-align:center;/*居中對(duì)齊*/
}
</style>
顏色：
p{color:red;}
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
p{color:#00ffff;}
長(zhǎng)度：
p{font-size:12px;text-indent:2em;} /*em就是本元素給定字體的font-size值*/
/*但當(dāng)給font-size設(shè)置單位為em時(shí)，此時(shí)em計(jì)算的標(biāo)準(zhǔn)以它的父元素的font-size為基礎(chǔ)*/
p{font-size:12px;line-height:130%}/*設(shè)置行高（行間距）為字體的130%*/
元素分類
塊狀元素
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
設(shè)置 display:block 就是將元素顯示為塊級(jí)元素。
塊級(jí)元素特點(diǎn)：
1、每個(gè)塊級(jí)元素都從新的一行開始，并且其后的元素也另起一行。（一個(gè)塊級(jí)元素獨(dú)占一行)
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
3、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度。
內(nèi)聯(lián)元素
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
通過代碼 display:inline 將元素設(shè)置為內(nèi)聯(lián)元素。
內(nèi)聯(lián)元素特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設(shè)置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變
內(nèi)聯(lián)塊狀元素
<img>、<input>
display:inline-block 就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。
元素特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
盒模型
- 在 CSS 中，一個(gè)獨(dú)立的盒子模型由 content（內(nèi)容）、border（邊框）、padding（內(nèi)邊距）和 margin（外邊距）4 個(gè)部分組成。
邊框
三個(gè)屬性：粗細(xì)、樣式和顏色。
<style type="text/css">
div{
border-width:2px;/*thin|medium|thick（但不是很常用），最常還是用象素（px）*/
border-style:solid;/*dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線)*/
border-color:#888;
}
/* 只為一個(gè)方向的邊框設(shè)置樣式： */
div{
/* border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red; */
border-bottom:1px solid red;
}
</style>
寬度和高度
css 內(nèi)定義的寬（width）和高（height），指的是填充的內(nèi)容范圍，內(nèi)容寬高。
- 一個(gè)盒子實(shí)際所占的寬度（或高度）是由“內(nèi)容+內(nèi)邊距+邊框+外邊距”組成的。通過設(shè)定 width 和 height 來控制內(nèi)容所占的矩形大小，內(nèi)邊距、邊框和外邊距分別用 padding、border 和 margin 來表示。
塊狀元素有一個(gè)特點(diǎn)之一：在不設(shè)置寬度的情況下，顯示為父容器的 100%.
填充 padding
元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為“填充”，即 padding。填充也可分為上、右、下、左(順時(shí)針)。
<style type="text/css">
div{
padding:20px 10px 15px 30px;
/* padding:10px; 上、右、下、左padding一樣 */
/* padding:10px 20px; 上下填充一樣為10px，左右一樣為20px */
}
</style>
邊距 margin
設(shè)置方式和 padding 類似。padding 在邊框里，margin 在邊框外。
行內(nèi)元素之間的水平margin：當(dāng)兩個(gè)行內(nèi)元素緊鄰時(shí)，它們的距離為第一個(gè)元素的margin-right加上第二個(gè)元素的margin-left。
塊級(jí)元素之間的垂直margin：兩個(gè)塊級(jí)元素之間的距離不是第一個(gè)元素margin-bottom和第二個(gè)元素margin-top的總和，而是兩者的最大值。這個(gè)現(xiàn)象稱為margin的“塌陷”現(xiàn)象，即較小的margin塌陷到較大的margin中。
嵌套盒子之間的margin：子塊的margin以父塊的content為參考。
設(shè)置為負(fù)值的margin：會(huì)使被設(shè)為附屬的快像相反的方向移動(dòng)，甚至覆蓋在另外的塊上。
布局模型
流動(dòng)模型（Flow）
默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁(yè)元素都是根據(jù)流動(dòng)模型來分布網(wǎng)頁(yè)內(nèi)容的。
- 塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為 100%，以行的形式占據(jù)位置。
- 內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。
浮動(dòng)模型 (Float)
任何元素在默認(rèn)情況下是不能浮動(dòng)的，但可以用 CSS 定義為浮動(dòng)?？梢酝ㄟ^浮動(dòng)使兩個(gè)塊狀元素并排顯示
<style type="text/css">
div{
border:2px red solid;
width:200px;
height:400px;
float:left;
}
/*
#div1{float:left;}
#div2{float:right;}
*/
</style>
</head>
<body>
<div id="div1">欄目1</div>
<div id="div2">欄目2</div>
</body>
層模型（Layer）
- static 定位
HTML 元素的默認(rèn)值，即沒有定位，元素出現(xiàn)在正常的流中。靜態(tài)定位的元素不會(huì)受到 top,bottom,left,right 影響。
- 絕對(duì)定位(position: absolute)
設(shè)置 position:absolute(表示絕對(duì)定位)，作用:將元素從文檔流中拖出來，然后使用 left、right、top、bottom 屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊，則相對(duì)于 body 元素，即相對(duì)于瀏覽器窗口。
<style type="text/css">
/* 實(shí)現(xiàn)div元素相對(duì)于瀏覽器窗口向右移動(dòng)100px，向下移動(dòng)50px。 */
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
top:20px;
right:100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
- 相對(duì)定位(position: relative)
正常文檔流中的偏移位置，移動(dòng)的方向和幅度由 left、right、top、bottom 屬性確定，偏移前的位置保留不動(dòng)。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative樣式</title>
<style type="text/css">
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
</style>
</head>
<body>
<div id="div1"></div><span>偏移前的位置還保留不動(dòng)，覆蓋不了前面的div沒有偏移前的位置</span>
</body>
</html>
偏移前的位置保留不動(dòng)
- 固定定位(position: fixed)
固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響，這與 background-attachment:fixed?屬性功能相同。
<style type="text/css">
/* 定位于瀏覽器視圖右下角的div */
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
bottom:0;
right:0;
}
</style>
Relative 與 Absolute 組合使用，相對(duì)于其它元素進(jìn)行定位。
1、參照定位的元素必須是相對(duì)定位元素的前輩元素;
2、參照定位的元素必須加入position:relative;
3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進(jìn)行偏移定位了。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相對(duì)參照元素進(jìn)行定位</title>
<style type="text/css">
div{border:2px red solid;}
/* 把box4定位到圖片(box3)的底部 */
#box3{
width:200px;
height:200px;
position:relative;
}
#box4{
width:100%;
position:absolute;
bottom:0px;
}
</style>
</head>
<body>
<div id="box3">
<img src="http://hefeicity.cn/blog/css-hezi.gif">
<div id="box4">盒子模型</div>
</div>
</body>
</html>
