css的註釋 /*.......*/ 直接在html代碼中寫css <p style="color: rebeccapurple;font-size: 18px">Hao</p> css代碼寫在當前文件中 <head> <meta charset="UTF-8"> <title>Title</tit ...

css的註釋

/*.......*/

直接在html代碼中寫css

<p style="color: rebeccapurple;font-size: 18px">Hao</p>

css代碼寫在當前文件中

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

color: red;

font-size: 19px;

}

</style>

</head>

<body>

</body>

css寫在外部單獨文件中

<link rel="stylesheet" href="base.css" type="text/css">這樣導入

id選擇器（#）

<style type="text/css">

#set{

color: red;

font-size: 60px;

}

</style>

</head>

<body>

<span id="set">選擇</span>

</body>

</html>

class和id選擇器的區別

相同點：可以應用於任何元素

不同點：

ID選擇器只能在文檔中使用一次。
可以使用類選擇器列表方法為一個元素同時設置多個樣式

子選擇器(>)

用於選擇指定標簽元素下的第一代子元素。

包含後代選擇器

.first span{color:red;}，後代中所有的span標簽都受影響

>：隻影響第一代子元素

空格：所有後代都影響

通用選擇器

* {color:red;}選定html中所有標簽

偽類選擇器

a:hover{color:red;}

一般用於a標簽，使滑鼠滑過變顏色

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

a:hover{

color: red;

}

</style>

</head>

<body>

<a href="http://www.baidu.com">BaiDu</a>

</body>

</html>

放在BaiDu上，顏色變成紅色。

分組選擇符

h1,span{color:red;}相當於：

h1{color:red;} span{color:red;}

繼承

CSS的某些樣式是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某個特定html標簽元素，而且應用於其後代。比如下麵代碼：如某種顏色應用於p標簽，這個顏色設置不僅應用p標簽，還應用於p標簽中的所有子元素文本，這裡子元素為span標簽。

p{color:red;} <p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

特殊性

有的時候我們為同一個元素設置了不同的CSS樣式代碼，那麼元素會啟用哪一個CSS樣式呢?我們來看一下麵的代碼：

p{color:red;} .first{color:green;} <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

p和.first都匹配到了p這個標簽上，那麼會顯示哪種顏色呢？green是正確的顏色，那麼為什麼呢？是因為瀏覽器是根據權值來判斷使用哪種css樣式的，權值高的就使用哪種css樣式。

下麵是權值的規則：

標簽的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。例如下麵的代碼：

p{color:red;} /*權值為1*/ p span{color:green;} /*權值為1+1=2*/ .warning{color:white;} /*權值為10*/ p span.warning{color:purple;} /*權值為1+1+10=12*/ #footer .note p{color:yellow;} /*權值為100+10+1=111*/

層疊

我們來思考一個問題：如果在html文件中對於同一個元素可以有多個css樣式存在並且這多個css樣式具有相同權重值怎麼辦？好，這一小節中的層疊幫你解決這個問題。

層疊就是在html文件中對於同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前後順序來決定，處於最後面的css樣式會被應用。

如下麵代碼:

p{color:red;} p{color:green;} <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

最後 p 中的文本會設置為green，這個層疊很好理解，理解為後面的樣式會覆蓋前面的樣式。

所以前面的css樣式優先順序就不難理解了：

內聯樣式表（標簽內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。

重要性

我們在做網頁代碼的時，有些特殊的情況需要為某些樣式設置具有最高權值，怎麼辦？這時候我們可以使用!important來解決。

如下代碼：

p{color:red!important;} p{color:green;} <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

這時 p 段落中的文本會顯示的red紅色。

註意：!important要寫在分號的前面

這裡註意當網頁製作者不設置css樣式時，瀏覽器會按照自己的一套樣式來顯示網頁。並且用戶也可以在瀏覽器中設置自己習慣的樣式，比如有的用戶習慣把字型大小設置為大一些，使其查看網頁的文本更加清楚。這時註意樣式優先順序為：瀏覽器預設的樣式 < 網頁製作者樣式 < 用戶自己設置的樣式，但記住!important優先順序樣式是個例外，權值高於用戶自己設置的樣式。

css一些應用

body{font-family:"宋體";} 字體

body{font-size:12px;color:#666} 字型大小（大小），顏色

p span{font-weight:bold;} 粗體

p a{font-style:italic;} 斜體

p a{text-decoration:underline;} 下劃線

.oldPrice{text-decoration:line-through;} 刪除線

p{text-indent:2em;} 縮進

p{line-height:1.5em;} 行間距（行高）

h1{letter-spacing:50px;} 字間距

h1{ text-align:center; }

h1{ text-align:left; }

h1{ text-align:right; }

元素分類

塊狀元素：

內聯元素：

內聯元素：

塊級元素

特點：

1. 每個塊級元素都從新的一行開始，並且其後的元素也另起一行。

2. 元素的高度、寬度、行高以及頂和底邊距離都可設置。

3. 元素寬度在不設置的情況下，是它本身父容器的100%，除非設置一個寬度。

設置display:block就是將元素顯示為塊級元素

內聯元素

display:inline將元素設置為內聯元素

特點：

1. 和其他元素都在一行上

2. 元素的高度、寬度及頂部和底邊邊距不可設置

3. 元素的寬度就是它包含的文字或圖片的寬度，不可改變

內聯元素

內聯：同時具備內聯元素、塊狀元素的特點，代碼display:inline-block。只有<img>/<input>兩個標簽

特點：

1. 和其他元素都在一行上

2. 元素的高度、寬度、行高及上下邊距都可設置

盒子模型

邊框：

div{ border:2px solid red; }

相當於：

div{ border-width:2px; border-style:solid; border-color:red; }

1. border-style（邊框樣式）常見的有：dashed（虛線）| dotted（點線）| solid（實線）

2. border-width（邊框寬度）

3. border-top:1px solid red; 只設置上邊框 4. border-right:1px solid red; 只設置右邊框 5. border-left:1px solid red; 只設置左邊框

6. div{border-bottom:1px solid red;} 只設置下邊框

高度和寬度：

css定義的寬（width）和高（height），指的是填充以里的內容範圍。

因此一個元素的實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右邊界+右邊框+右邊界

填充：

元素內容和邊框之間可以設置距離的，稱之為“填充”。padding

邊界：

margin設置外邊距

padding世內邊距，margin是內邊距

css佈局模型

佈局模型建立在盒子模型的基礎之上。

css包含3種基本的佈局模型：flow、layer、float

流動模型（flow）：

流動（flow）是預設的網頁佈局模式。也就是說網頁在，預設狀態下的HTML網頁元素都是根據流動模型來分佈網頁內容的。

有如下的特征：

1. 塊級元素都會在所處的包含元素自上而下按順序垂直延伸分佈，因為在預設情況下，塊狀元素的寬度都是100%，實際上，塊級元素都會以行的形式占據位置。

2. 在流動模式下，內聯元素都會在所處的包含元素內從左到右水平分佈。

總結：html預設使用flow，流動，所有的內容都是應用在此之上。

浮動模型（float）：

任何元素在預設情況下是不能浮動的，但可以使用CSS定義浮動，如div、p、table、img等元素都可以被定義為浮動。

層模型：

層模型有三種形式：

1. 絕對定位（position:absolute）

2. 相對定位（position:relative）

3. 固定定位（position:fixed）

絕對定位:

positon:absolute,這條語句的作用是將元素從文檔中拖出來，然後使用left、top、right、bottom屬性相對於最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不包含塊，則相對於body元素，即相對於瀏覽器視窗。

div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px;} <div id="div1"></div>

相對定位：

positon:relative，通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static（float）方式生成一個元素（並且元素像層一樣浮動了起來），然後相對於以前的位置移動。

#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div>

<body> <div id="div1"></div><span>偏移前的位置還保留不動，覆蓋不了前面的div沒有偏移前的位置</span></bod<body>

總結：相對定位，就是雖然目標移動了，但是以前的位置還是留著。

固定定位:

position:fixed，與絕對定位（absolute）類似，但是它相對移動的坐標是視圖（屏幕內的網頁）本身。由於視圖本身是固定的，它不會隨瀏覽器視窗的滾動條而變化，因此它始終固定於視窗內視圖的某個位置。導航條就是用這種固定方法。

Relative與Absolute組合使用

小伙伴們學習了12-6小節的絕對定位的方法：使用position:absolute可以實現被設置元素相對於瀏覽器（body）設置定位以後，大家有沒有想過可不可以相對於其它元素進行定位呢？答案是肯定的，當然可以。使用position:relative來幫忙，但是必須遵守下麵規範：

1、參照定位的元素必須是相對定位元素的前輩元素：

<div id="box1"> <div id="box2">相對參照元素進行定位</div> </div>

從上面代碼可以看出box1是box2的父元素（父元素當然也是前輩元素了）。

2、參照定位的元素必須加入position:relative;

#box1{ width:200px; height:200px; position:relative; }

3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。

#box2{ position:absolute; top:20px; left:30px; }

這樣box2就可以相對於父元素box1定位了（這裡註意參照物就可以不是瀏覽器了，而可以自由設置了）。

<!DOCTYPE HTML>

<html>

<head>

<title>相對參照元素進行定位</title>

div{border:2px red solid;}

#box1{

width:200px;

height:200px;

position:relative;

}

#box2{

position:absolute;

top:20px;

left:30px;

}

/*下麵是任務部分*/

#box3{

width:200px;

height:200px;

position:relative;

}

#box4{

width:99%;

position:absolute;

bottom:0;

}

</style>

</head>

<body>

<div id="box2">相對參照元素進行定位</div>

</div>

<h1>下麵是任務部分</h1>

<div id="box4">當我還是三年級的學生時是一個害羞的小女生。</div>

</div>

</body>

</html>

盒模型代碼簡寫，css儘量較少代碼量

1. margin:10px 10px 10px 10px;

簡寫：margin:10px;

2. margin:10px 20px 10px 20px;

簡寫：margin:10px 20px;

3. margin:10px 20px 30px 20px;

簡寫：margin:10px 20px 30px;

4. p{color:#000000;}

簡寫：p{color: #000;}

5. p{color: #336699;}

簡寫：p{color: #369;}

body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋體",sans-serif; }

簡寫：

body{ font:italic small-caps bold 12px/1.5em "宋體",sans-serif; }

顏色值

1. 英文命令顏色

p{color:red;}

2. RGB顏色

p{color:rgb(133,45,200);}

3. 十六進位顏色

p{color:#00ffff;}

長度值（px）

css樣式設置小技巧

水平居中

html代碼：

<body> <div class="txtCenter">我想要在父容器中水平居中顯示。</div> </body>

css代碼：

水平居中定寬塊狀元素

html代碼：

<body> <div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div> </body>

css代碼：

水平居中總結

不定寬度的塊狀元素有三種方法居中：

1. 加入table標簽

2. 設置display:inline方法：與第一種類似，顯示類型設為行內元素，進行不定寬元素的屬性設置

3. 設置position.relative和left:50%；利用相對定位的方式，將元素向左移50%，達到居中的效果。

html代碼：

<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>

css代碼：

第二種：

html代碼：

css代碼：

垂直居中，保持height和line-height高度一致，height是該元素高度，line-height行間距指在文本中行與行之間的基線間的距離。

如下代碼：

<div class="container"> hi,imooc! </div>

css代碼：

父元素高度確定的多行文本、圖片等的豎直居中的方法有兩種：

（重要方法）方法一：使用插入 table (包括tbody、tr、td)標簽，同時設置 vertical-align：middle。

css 中有一個用於豎直居中的屬性 vertical-align，在父元素設置此樣式時，會對inline-block類型的子元素都有用。下麵看一下例子：

html代碼：

<body><table><tbody><tr><td class="wrap"><div> <p>看我是否可以居中。</p> </div></td></tr></tbody></table></body>

css代碼：

table td{height:500px;background:#ccc}

因為 td 標簽預設情況下就預設設置了 vertical-align 為 middle，所以我們不需要顯式地設置了。

除了上面講到的插入table標簽，可以使父元素高度確定的多行文本垂直居中之外，本節介紹另外一種實現這種效果的方法。但這種方法相容性比較差，只是提供大家學習參考。

在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell（設置為表格單元顯示），激活 vertical-align 屬性，但註意 IE6、7 並不支持這個樣式, 相容性比較差。

html代碼：

<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </div>

css代碼：

隱性改變display類型

有一個有趣的現象就是當為元素（不論之前是什麼類型元素，display:none 除外）設置以下 2 個句之一：

1. position : absolute

2. float : left 或 float:right

簡單來說，只要html代碼中出現以上兩句之一，元素的display顯示類型就會自動變為以 display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的 width 和 height 了，且預設寬度不占滿父元素。

如下麵的代碼，小伙伴們都知道 a 標簽是行內元素，所以設置它的 width 是沒有效果的，但是設置為 position:absolute 以後，就可以了。

<div class="container"> <a href="#" title="">進入課程請單擊這裡</a> </div>

css代碼

CSS再學

class和id選擇器的區別

子選擇器(>)

包含後代選擇器

通用選擇器

偽類選擇器

分組選擇符

繼承

特殊性

層疊

重要性

css一些應用

元素分類

塊級元素

內聯元素

內聯元素

盒子模型

css佈局模型

盒模型代碼簡寫，css儘量較少代碼量

長度值（px）

css樣式設置小技巧