CSS基礎學習筆記一（詳細）

初識CSS

  css是cascading style sheet(層疊樣式表)的簡寫；css是從審美的角度負責頁面的樣式。

<style type="text/css">
	p{
		color: red;
		font-size: 35px;
		text-decoration: underline;
		font-weight: bold;
		text-align: center;
		font-style: italic;
	}
	h1{
		color: blue;
		font-size: 50px;
		font-weight: bold;
		background-color: pink;
	}
</style>

語法中，style標籤一般位於head標籤中title標籤之後，也可以把他放在HTML文檔的任何地方。

type=“text/CSS” 在html5中可以省略， 寫上也比較符合規範， 所以這個地方可以寫也可以省略。

此種方式是輸入“內部樣式表”，css也可以寫在單獨的文件裏面(外部樣式表)，也可以直接寫在html標籤裏(行內樣式表)。

css也輸入"text" 即 純文本 。

css對換行和空格都不敏感，但是一定要有標準的語法。冒號，分號都不能省略。
語法：

選擇器{
	k:v;
	k:v;
	k:v;
}
選擇器{
	k:v;
	k:v;
	k:v;
}

一些常見的屬性

 1. color:red;
 	color屬性的值可以是英語單詞，也可以是rgb、十六進制。
 
 2. font-size:40px; 字號大小
 	單位px(像素)必須加
 
 3. background-color:blue;	背景顏色
 
 4. font-weight:bold;	加粗
 
 5. font-weight:normal;	不加粗
 
 6. font-style:italic;	斜體

 7. font-style:normal;	不斜體
 
 8. text-decoration:underline;	下劃線
 
 9. text-decoration:none;	沒有下劃線   

基礎選擇器

css怎麼學？只需要兩個知識部分：

1. 選擇器，怎麼選；
2. 屬性，樣式是什麼。

標籤選擇器

就是使用標籤的名字。

<style type="text/css">
	p{
		color:red;
	}		
</style>

注意的是：

1. 所有的標籤，都可以是選擇器。比如：ul、li、lable、dt、input…

<style type="text/css">
	ul{
		background-color: pink;
	}
</style>

2. 無論這個標籤藏得多深，一定能夠被選擇上。

<style type="text/css">
	p{
		color:red;
	}
</style>

<ul>
	<li>
		<ul>
			<li>
				<ul>
					<li>
						<p>我是一個段落標籤</p>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

3. 選擇的所有，而不是下一個。

標籤選擇器，選擇的是頁面上的所有這種類型的標籤，所有經常描述“共性”，無法描述某一元素的“個性”的。

id選擇器

<p>我是段落1</p>
<p id="para2">我是段落2</p>
<p>我是段落3</p>

css:

<style type="text/css">
	#para2{
		color: blue;
	}
</style>

id選擇器的選擇符是“#”。

任何HTML標籤都有id屬性。表示這個標籤的唯一標識。

這個標籤的名字可以任意取，但是

 1. 只能有字母、數字、下劃線。
 2. 必須以字母開頭。
 3. 不能和標籤同名，比如id不能叫做：body、ul、img、a......

一個HTML頁面，不能出現相同的id，哪怕他們不是一個類型的標籤。比如一個di叫para的p標籤，一個id叫para的div標籤。

一個標籤可以被多個css選擇器選擇，共同作用，這就是“層疊式”的第一層含義。

類選擇器

.就是類的符號。
所謂的類就是class屬性，class屬性和id十分相似，任何的標籤都可以攜帶class屬性。

class屬性可以重複，比如，頁面上可能有很多標籤都有special這個class；

<h3>我是一個h3啊1</h3>
<h3 class="special">我是一個h3啊2</h3>
<h3>我是一個h3啊3</h3>
<p>我是一個段落啊1</p>
<p class="special">我是一個段落啊2</p>
<p class="special">我是一個段落啊3</p>

css

<style type="text/css">
	.special{
		color: red;
	}
</style>

同一個標籤，可能同時屬於多個類，用空格隔開：

<h3 class="special importance">我是一個h3啊2</h3>

這樣h3就同時屬於special和importance類了。

總結：

1. class可以重複，同一個頁面上可能有多個標籤同時屬於某一個類。
2. 同一個標籤可以同時攜帶多個類。

類的使用能夠決定一個人的css水平。
比如，我們現在做一個頁面：

正確的思路就是使用“公共類”：

<style type="text/css">
	.lv{
		color: green;
	}
	.xian{
		text-decoration: underline;

	}
	.da{
		font-size: 50px;
	}
</style>

每一個標籤去選擇自己需要的樣式。

<p class="lv da">段落1</p>
<p class="lv xian">段落2</p>
<p class="da xian">段落3</p>

也就是說：

1. 不要去試圖用一個類名，把某個標籤的樣式寫完。這個標籤要多攜帶幾個類，共同完成這個標籤的樣式。
2. 每一個類要儘可能小，有“公共”的概念，能夠讓更多的標籤進行復用。

到底用id還是class？

儘可能的用class，除非極其特殊的情況可以用id。
因爲id一般是js用的，也就是說，js要通過id屬性得到標籤，所以我們css儘量不用id，要不然js就很彆扭。另一個層面，我們會認爲一個有id的元素，有動態效果。

類上樣式，id上行爲。

css高級選擇器

後代選擇器

<style type="text/css">
	.div1 p{
		color: red;
	}
</style>

空格就表示後代，.div1 p就是.div1的後代所有p。
需要強調的是後代，不一定是兒子。

比如：

<div class="div1">
	<ul>
		<li>
			<p>段落</p>
			<p>段落</p>
			<p>段落</p>
		</li>
	</ul>
</div>

css
所有的p能夠被下面選擇器選擇上。

<style type="text/css">
	.div1 p{
		color: red;
	}
</style>

空格可以多次出現

<style type="text/css">
	.div1 ul li p{
		color: red;
	}
</style>

就是.div裏面的ul裏面的li裏面的所有p

後代選擇器描述的是祖先結構。

交集選擇器

<style type="text/css">
	h3.special{
		color: red;
	}
</style>

選擇的元素同時滿足兩個條件：必須是h3標籤，然後必須是special。
交集選擇器沒有空格。

交集選擇器可以連續交(一般不這麼寫)

<style type="text/css">
	h3.special.importance{
		color: red;
	}
</style>

交集選擇器一般都是以標籤名開頭。

並集選擇器

<style type="text/css">
	h3,li{
		color: red;
	}
</style>

用逗號隔開表示交集。

通配符

*表示所有元素。

*{
	color:red;
}

效率不高，如果頁面上標籤越多，效率越低，所以頁面上不能出現這個這個選擇器。

一些CSS3選擇器

兒子選擇器

IE開始兼容，IE6不兼容

<style type="text/css">
	div>p{
		color: red;
	}
</style>

div的兒子和div的後代截然不同。

能夠選擇上

<div>
	<p>我是div的兒子</p>
</div>
<div>
	<div>
		<p>我是div的兒子</p>
	</div>
</div>

不能夠選擇上

<div>
	<ul>
		<li>
			<p>我是div的重孫子</p>
		</li>
	</ul>
</div>

序選擇器

IE8開始兼容，IE7、6不兼容

選擇第一個li

ul li:first-child{
	color: red;
}

選擇最後一個li

ul li:last-child{
	color: blue;
}

下一個兄弟選擇器

IE7開始兼容，IE6不兼容

+表示下一個兄弟

<style type="text/css">
	h3+p{
		color: red;
	}
</style>

選擇上的是h3後面緊挨着的第一個兄弟。

<h3>我是一個標題</h3>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h3>我是一個標題</h3>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h3>我是一個標題</h3>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h3>我是一個標題</h3>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>

結果：

CSS的繼承性和層疊性

繼承性

有一些屬性，當給自己設置的時候，自己的後代都繼承上了，這個就是繼承性。

哪些屬性能繼承？

color、text-開頭的、line-開頭的、font-開頭的。

這些關於文字樣式的，都能夠繼承；所有關於盒子的，定位的，佈局的屬性都不能繼承。

所以，如果我們頁面的文字都是灰色，都是14px。那麼就可以利用繼承性：

body{
	color:gray;
	font-size:14px;
}

繼承性是從自己開始，知道最小元素。

層疊性

層疊性就是css處理衝突的能力。所有的權重的計算，沒有任何兼容性問題！

當選擇器，選擇上了某個元素的時候，那麼要這樣統計權重。

id的數量，類的數量，標籤的數量

不進位，實際上能進位，（255個標籤選擇器，等於一個類選擇器）這樣沒有任何意義。

如果權重一樣，以“後出現的爲準”。

---

如果不能直接選中某個元素，通過繼承影響的話，權重爲0。

如果大家都沒有選中，權重都爲0，那麼就遵循就近原則（誰描述的近，聽誰的）

---

權重問題深入

同一個標籤，攜帶了多個類名，有衝突：

<p class="spec1 spec2">我是什麼顏色？</p>
<p class="spec2 spec1">我是什麼顏色？</p>

和標籤中寫類名的順序無關，只和css的順序有關。

<style type="text/css">
	.spec2{
		color: blue;
	}
	.spec1{
			color: red;
	}
</style>

紅色。因爲css總red寫在後面。

---

!important標記

<style type="text/css">
	p{
		color: red !important;
		font-size: 200px;
	}
	#para{
		color: blue;
		font-size: 100px;
	}
	.spec{
		color: green;
		font-style: 25px;
	}
	
</style>

我們可以通過語法：

k:v !important;

來給一個屬性提高權重。這個屬性的權重就是無窮大。

需要注意的是：
!important無法提升繼承的權重，該是0還是0，那麼也就不會影響繼承來的"就近原則"

一般做站的時候，不會使用到，因爲hui會讓css寫的很亂。

權重計算總結

---

盒模型

盒子中的區域

一個盒子中主要的屬性就5個：width、height、margin、padding、border。
盒模型示意圖：

代碼演示：

<style type="text/css">
	div{
		width: 200px;
		height: 200px;
		border: 1px solid blue;
		padding: 50px;
	}
</style>

這個盒子的寬200px，高200px，但是真實佔有的寬高是302*302,這是因爲還要加上padding、border。寬度和真實佔有寬度不是一個概念。

認識width、height

在前段開發工程師眼裏，寬高與我們的常識上的是不同的。

下面的幾個盒子真實佔有寬高，完全相同，都是302*302.

<style type="text/css">
	.box1{
		width: 200px;
		height: 200px;
		padding: 50px;
		border: 1px solid blue;
	}
	.box2{
		width: 0px;
		height: 0px;
		padding: 150px;
		border: 1px solid blue;
	}
	.box3{
		width: 100px;
		height:100px;
		padding: 100px;
		border: 1px solid blue;
	}
</style>

這三個盒子的盒模型圖：

如果要想保持一個盒子的真實佔有寬度不變，那麼加width就要減padding。加padding就要減width。

認識padding

padding就是內邊距。padding區域有顏色，css2.1前提下，並且背景顏色一定和內容區域的相同，也就是說background-color將填充所有border以內的區域。

padding是四個方向的，所以我們能夠分別描述四個方向的padding。

方法有兩種，第一種是寫小屬性，第二種是寫綜合屬性，用空格隔開。

小屬性：

padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;

上、右、下、左；少寫一個就沒有其對應的內邊距。

綜合屬性：

padding: 30px 20px 40px 100px;

如果只寫3個值

padding: 30px 20px 40px ;

如果只寫2個值

padding: 30px 20px;

也就是說：

padding: 30px 20px;

等價於

padding-top: 30px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;

要懂得用小屬性層疊大屬性。

padding: 30px;
padding-left: 20px;

一些元素默認帶有padding，比如ul

所以，一般做站的時候，便於控制，總是喜歡清除這個默認的padding。

*{
	margin:0;
	padding:0;
}

但是*的效率不高，所以我們經常使用並集選擇器，羅列所有的標籤

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:04	
}

border

邊框；邊框有三個要素：寬度，樣式，顏色。
顏色如果不寫，默認黑色，另外兩個屬性不寫，無法顯示。

border: 1px dashed red;

所有的樣式：

如果要最求極高的還原度，那麼就不能使用css來製作邊框。就要用到圖片，就要切圖了。所以，比較穩定的就幾個：solid dashed dotted

border是一個大綜合的屬性：

border:1px solid red ;

border屬性能夠被拆分；有兩種拆分方式：

1. 按3要素進行拆分：border-width,border-style,border-color。
2. 按方向進行拆分：border-top，border-right，border-bottom，border-left。

border可以沒有

border:none

border某一邊沒有

border-left:none;

調整左邊邊框的寬度

border-left-width:0;

標準文檔流

宏觀地講，我們的web頁面和photoshop等設計軟件有本質的區別：web頁面的製作是個“流”，必須從上而下。而設計軟件想往哪裏畫個東西，都能畫。

標準文檔流裏的一些微觀現象。

1、空白摺疊現象。
比如，如果我們想讓img標籤之間沒有空隙，必須緊密連接。

<img src="images/1.jpg"><img src="images/2.jpg"/><img src="images/3jpg"/>

2、高矮不齊，底邊對其。

3、自動換行，一行寫不滿，換行寫。

塊級元素和行內元素

標準文檔流等級森嚴，標籤分爲兩種等級。

1. 塊級元素

霸佔一行，不能與其他任何元素並列
能接受寬高
如果不設置寬度，寬度默認爲父親的100%

2. 行內元素

與其他行內元素並列
不能設置寬高，默認寬度爲文字寬度

在HTML中，已經將標籤進行分過類，文本級和容器級。

文本級：p、span、a、b、i、u、s、em、strong、del、ins。。。。
容器級：div、h系列、ul、ol、li、dl、dt、dd。。。。

CSS的分類和上面很像，就p不一樣：

所有的文本級都是行內元素；除了p，p是文本級，但是是一個塊級元素。
所有的容器級都是塊級元素。

塊級元素和行內元素相互轉換

塊級元素變行內元素：

未轉換：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			
			width: 100px;
			height: 100px;
			border: 1px solid blue;
			background-color: pink;
		}
		h1{
			background-color: green;
			font-size: 20px;
			font-weight: normal;
		}
	</style>
</head>
<body>
	<div>我是一個div</div>
	<div>我是一個div</div>
	<h1>我</h1>
	<h1>愛</h1>
	<h1>你</h1>
</body>
</html>

轉換後

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			display: inline;
			width: 100px;
			height: 100px;
			border: 1px solid blue;
			background-color: pink;
		}
		h1{
			display: inline;
			background-color: green;
			font-size: 20px;
			font-weight: normal;
		}
	</style>
</head>
<body>
	<div>我是一個div</div>
	<div>我是一個div</div>
	<h1>我</h1>
	<h1>愛</h1>
	<h1>你</h1>
</body>
</html>

同樣的道理，行內元素也可以轉化爲塊級元素

未轉換

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		span{
			width: 100px;
			height: 100px;
			background-color: pink;
		}
		a{
			width: 250px;
			height: 40px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<span>我是一個span</span>
	<span>我是一個span</span>
	<a href="#">我是一個超鏈接</a>
</body>
</html>

轉換後

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		span{
			display: block;
			width: 100px;
			height: 100px;
			background-color: pink;
		}
		a{
			display: block;
			width: 250px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<span>我是一個span</span>
	<span>我是一個span</span>
	<a href="#">我是一個超鏈接</a>
</body>
</html>

標準文檔流裏面限制非常地多，標籤的性質比較噁心，如果，我想既能設置寬高，又讓其能並排（不霸佔一行），這時候就要去脫離標準文檔流。

CSS中有三種手段，使一個元素脫離標準文檔流。

1. 浮動
2. 絕對定位
3. 固定定位

浮動

浮動是CSS佈局用的最多的屬性。

<style type="text/css">
	.box1{
		float: left;
		width: 300px;
		height: 400px;
		background-color: skyblue;
	}
	.box2{
		float: left;
		width: 400px;
		height: 400px;
		background-color: yellowgreen;
	}
</style>

這時我們發現，兩個元素並排了，並且也可以設置寬高了。

浮動的幾個性質

浮動的元素脫標

證明1：

<style type="text/css">
	.box1{
		float: left;
		width: 300px;
		height: 300px;
		background-color: skyblue;
	}
	.box2{	
		width: 400px;
		height: 400px;
		background-color: yellowgreen;
	}
</style>

證明2

一個span標籤，不需要轉換成塊級元素就可以設置寬高，所以一個元素一旦浮動了，那麼，將能夠設置寬高，能夠並排，無論他是div還以一個span。

浮動的元素互相貼靠

如果有足夠的空間，那麼就會靠着2號，如果沒有足夠的空間，那麼會靠着1號，若也沒有足夠的空間靠着1號，那麼自己就會貼牆。

右浮動：float:right;

浮動的元素有“字圍”效果

<div class="box1">
	<img src="images/3.jpg" alt="">
</div>
<p>
	123文字文字(省略)
</p>

收縮

即一個浮動的元素，如果沒有設置width，那麼將自動收縮爲文字的寬度（非常像行內元素）。

比如：

未浮動默認寬度爲父親的100%

<style type="text/css">
	div{
		background-color: pink;
	}
</style>

浮動

<style type="text/css">
	div{
		float: left;
		background-color: pink;
	}
</style>