上集

CSS

2 CSS選擇器

2.3.4 偽類選擇器

• 選擇到元素的某個時間點（段），用來新增一些選擇器的特殊效果。
• 偽類的語法：

selector:pseudo-class {property:value;}

• CSS類也可以使用偽類：

selector.class:pseudo-class {property:value;}

• Anchor偽類

a:link {color:#FF0000;} /* 未訪問的連結 */
a:visited {color:#00FF00;} /* 已訪問的連結 */
a:hover {color:#FF00FF;} /* 滑鼠劃過連結 */
a:active {color:#0000FF;} /* 已選中的連結 */
 

1. :hover{} 滑鼠懸停，新增樣式

	a:hover{
		background:red;
		color:yellow;
	}

• 在CSS定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的。

2. :active{}被點選時，新增樣式

	a:active{
		background:black;
		color:white;
	}

• 在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效的。
  【例項】

	h1:hover{
		background: red;
		color: yellow;
	}
	div:active{
		background: black;
		color: white;
	}
 

• 偽類前面可以使用任何選擇器
• :hover, :active可以作用於任何元素

3. :link{}

	a:link{
		background: yellow; 
		color: pink;
	}

• 超連結未被使用時（href指定的頁面沒有被訪問過），新增樣式

4. :visited{}

	a:visited{
		background:blue;
		color:gold
	}

• 超連結被使用過後（href指定的頁面被訪問過），新增樣式

• :link{},:visited{}只能作用於超連結

• 當四個偽類同時作用與一個a標籤上時，必須按照以下的順序，否則有的偽類會失效

	:link  :visited  :hover  :active 
	（LoVe & HAte）
 

2.3.5 偽元素選擇器

• 語法：

selector:pseudo-element {property:value;}

• CSS類也可以使用偽元素：

selector.class:pseudo-element {property:value;}

1. :first-line偽元素
   "first-line" 偽元素用於向文字的首行設定特殊樣式。

p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

• "first-line" 偽元素只能用於塊級元素。

2. :first-letter偽元素

p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

3. :before偽元素

• ":before" 偽元素可以在元素的內容前面插入新內容。

下面的例子在每個h1元素前面插入一幅圖片：

h1:before 
{
    content:url(smiley.gif);
}

4. :after 偽元素
   ":after" 偽元素可以在元素的內容之後插入新內容。

下面的例子在每個h1元素後面插入一幅圖片：

h1:after
{
    content:url(smiley.gif);
}

【拓展】

• 1 偽類
  偽類選擇元素基於的是當前元素處於的狀態，
  或者說元素當前所具有的特性，而不是元素的id、class、
  屬性等靜態的標誌。由於狀態是動態變化的，所以一個元
  素達到一個特定狀態時，它可能得到一個偽類的樣式；當
  狀態改變時，它又會失去這個樣式。由此可以看出，它的
  功能和class有些類似，但它是基於文件之外的抽象，
  所以叫偽類。

• 2 偽元素
  與偽類針對特殊狀態的元素不同的是，偽元素是對元素中
  的特定內容進行操作，它所操作的層次比偽類更深了一層，
  也因此它的動態性比偽類要低得多。實際上，設計偽元素
  的目的就是去選取諸如元素內容第一個字（母）、第一行，
  選取某些內容前面或後面這種普通的選擇器無法完成的工
  作。它控制的內容實際上和元素是相同的，但是它本身只
  是基於元素的抽象，並不存在於文件中，所以叫偽元素。

3 CSS佈局

3.1 尺寸

1. width height

• 【塊元素】、【行內塊】設定寬高有效

2. 單位：最常用px 畫素

• 絕對長度：cm m
• 相對長度 px（根據螢幕解析度產生變化）

3.2 越界

• 【問題】當子元素的尺寸超過父元素時，就會產生越界，
• CSS overflow 屬性用於控制內容溢位元素框時顯示的方式。
  
• 【解決】給父元素新增overflow，控制越界部分

	scroll    產生橫向縱向兩條滾動條，不管有沒有越界部分
	auto     當有越界部分是產生滾動條，沒有則不產生

• 注意:overflow 屬性只工作於指定高度的塊元素上。

3.3 邊框

1. 四個方向的邊框統一設定

• 1px--邊框粗細
• solid--邊框樣式 實線--必要屬性值，如果不新增就沒有邊框
• dotted--圓點虛線
• dashed--虛線
• double--雙線
• green--邊框顏色
  

2. 單獨設定一個方向的邊框

• border-top
• border-right
• border-bottom
• border-left

3. 三個方向邊框都一樣，只有一個邊框不同

	div{
		border: 1px solid;  先設定四個方向邊框（相同樣式），再單獨設定不同邊框
		border-left: 1px solid red
	}

【注意】邊框多個屬性值排列
border-style：屬性1，屬性2，屬性3，屬性4
上->右->下->左

border-style：屬性1，屬性2，屬性3
上->左右->下

border-style：屬性1，屬性2
上下->左右

border-style：屬性1
上下左右屬性相同

• 【注意】border-color單獨使用是不起作用的，必須得先使用border-style來設定邊框樣式。

	p.one
	{
		border-style:solid;
		border-color:red;
	}
	p.two
	{
		border-style:solid;
		border-color:#98bf21;
	}

4. 邊框圓角

• border-radius
  -【如何做一個圓】
  • 1. 先做一個正方形（寬高一致）
  • 2. 設定邊框圓角50%

5. 盒子模型

• 【邊框簡寫】
• 上面的例子用了很多屬性來設定邊框。也可以在一個屬性中設定邊框。
• 在"border"屬性中設定：

border-width
border-style (required)
border-color
【例項】
border:5px solid red;

盒子模型

• 藍色部分---內容

• 綠色部分---padding 內邊距

• 黃色部分---border 邊框

• 土黃色部分---margin 外邊距

• Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。

• Border(邊框) - 圍繞在內邊距和內容外的邊框。

• Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。

• Content(內容) - 盒子的內容，顯示文字和影象。

【面試題】
元素width:100px height:50px padding:10px border:1px solid margin:20px
求元素面積？
【解答】
長：100+20+2+40 = 162px
寬：50+20+2+40 = 112px 面積=長*寬

【注意】基本的清除固有樣式模板

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}

3.4 margin 外邊距

• 塊標籤上下外邊距有效
• 行內標籤上下外邊距無效
• 行內塊標籤上下外邊距有效，而且讓一行裡的行內元素上下外邊距也有效

問題：外邊距溢位

• 定義：子元素div新增上外邊距，移動的卻是父元素div
• 【解決辦法】：

  1. 給父元素加上邊框。弊端：增加了父元素實際佔據高度

  2. 給父元素新增上內邊距。弊端：增加了父元素實際佔據高度

  3. 給父元素設定 overflow:hidden/auto 。弊端：元素如果想溢位顯示，就衝突了

  4. 把子元素變成行內塊元素 display:inline-block 。弊端：改變了子元素的顯示模式

  5. 在該子元素的前面，新增一個空的元素，比如 </table> 弊端：新增無意義標籤，結構化差

  6. 利用父元素的偽類 before 新增一個空 table 元素（推薦使用）

	#parent::before {
	content:"";
	display:table;
	}

問題：如何讓塊元素在父級元素中水平居中？

1. 行內元素：text-align:"center"
2. 塊元素：margin: 0 auto - 上下無外邊距，左右自動居中

• 上下外邊距設計，左右自動居中：

	margin: 10px auto