CSS樣式學習（一）

本篇內容：
一、CSS簡介
 二、樣式屬性
 三、CSS選擇器
     （一）基礎選擇器
     （二）僞類選擇器
             1）鏈接僞類選擇器
             2）結構僞類選擇器
             3）目標僞類選擇器
     （三）屬性選擇器
     （四）關係選擇器
     （五）僞元素選擇器
 四、設置CSS樣式的方法

CSS樣式是網頁的重要組成部分，就像是化妝品，用的好與差，決定了用戶對網頁的第一印象。

一、CSS簡介

CSS通常被稱爲樣式疊層表，通過對標籤增加樣式，實現字體，顏色，背景，元素大小等，用於網頁排版的細化處理。

基本語法：

以鍵值對的形式出現
以分號結尾

二、樣式屬性

（一些簡單的屬性不再贅述，直接寫在註釋裏，更多屬性更多詳細的用法請自行查找，這裏僅簡單介紹）

<style>
	p{
		/* 斜體 */
	  	font-style: italic;
	  	/* 字體大小 */
	  	font-size: 30px;
	  	/* font-family的值填寫中文如果出現亂碼，可以嘗試英文名字或unicode編碼 */
	  	font-family:"宋體";
	  	/* 粗體 */
	  	font-weight:bold;
        /* 紅色字體 */
        color:red;
	}
</style>
<body>
    <p>這是一段字體爲30像素的文字</p>
    <p>這是一段字體爲30像素的文字</p>
</body>

實現效果：

css中提供了很多方便的優化方案來簡化代碼，比如以上這些代碼，可以進行如下優化

<style>
	p{
		/* {font: font-style font-weight font-size/line-height font-family;}  */
		font:italic bold 30px/10px "宋體";
        /* 紅色字體 */
        color:red;
        
	}
</style>
<body>
    <p>這是一段字體爲30像素的文字</p>
    <p>這是一段字體爲30像素的文字</p>
</body>

實現效果：

三、CSS選擇器

（一）基礎選擇器

<style>
   /* 標籤選擇器 */
    p{
        color:red;
    }
    /* id選擇器 */
    #span_1{
        color:blueviolet;
    }
    /* 類選擇器 */
    .span_2{
        color:orange;
    }
    .size{
        font-size: 20px;
    }
</style>
<body>
    <p>第一段文字</p>
    <p>第二段文字</p>
    <p>第三段文字</p>
    <span id="span_1">第四段文字</span><br/>
    <span class="span_2">第五段文字</span><br/>
    <span class="span_2">第六段文字</span>
    <span class="span_2 size">多類名的情況</span>
</body>

多類名的情況就是給標籤設置了多個類名，並且每個類名都設置了不同的CSS樣式，那效果就能在標籤上同時實現。

實現效果：

除了id選擇器，類選擇器和標籤選擇器之外，還有通配符選擇器(*)，可以對所有的標籤設置樣式。

（二）僞類選擇器

1）鏈接僞類選擇器

<style>
    /* 鏈接未點擊過的狀態 */
    a:link{
        color:green;
    }
    /* 點擊過的狀態 */
    a:visited{
        color:yellow;
    }
    /* 鼠標懸停時的狀態 */
    a:hover{
        color:yellowgreen;
    }
    /* 按下鼠標的狀態 */
    a:active{
        color:violet;
    }
</style>

2）結構僞類選擇器

:first-child 選擇第一個子元素
:last-child 選擇最後一個子元素
:nth-child(n) 選擇第n個子元素
:nth-last-child(n) 選擇倒數第n個子元素

<style>
    div p:first-child{
        color:red;
    }
    div p:last-child{
        color:orange;
    }
    div p:nth-child(3){
        color:orchid;
    }
    div p:nth-last-child(3){
        color:palegreen;
    }
</style>

實現效果：

3）目標僞類選擇器

:first-of-type 選擇同類元素第一個子元素
:last-of-type 選擇同類元素最後一個子元素
:nth-of-type(n) 選擇同類元素第n個元素
:only-of-type 選擇子元素中標籤類型唯一的標籤

<style>
    div>p:first-of-type{
        color:red;
    }
    div>span:last-of-type{
        color:violet;
    }
    div>p:nth-of-type(3){
        color:blue;
    }
    div :only-of-type{
        color:rgb(24, 155, 179);
    }
</style>
<div>
    <span>第一段文字</span>
    <p>第二段文字</p>
    <p>第三段文字</p>
    <p>第四段文字</p>
    <p>第五段文字</p>
    <div>only</div>
    <p>第六段文字</p>
    <p>第七段文字</p>
    <span>第八段文字</span>
</div>

顯示效果：

:root 選擇根元素，即html標籤
:not() 選擇某個標籤之外的所有標籤
:empty 選擇內容爲空的標籤，有文本節點無法選擇到
:target 選擇被激活的target。所謂target，就是某個標籤的id被用作a標籤的鏈接地址，這時候，a標籤被點擊之後，那個被使用id的標籤就是一個被激活的target。

<style>
    :root{
        background: gray;
    }
    p:not(.second){
        color:salmon;
    }
    p:empty{
        width: 20px;
        height: 20px;
        background: rebeccapurple;
    }
    :target{
        color: aqua;
    }
</style>
<p id="first">ssss</p>
<p class="second">aaaa</p>
<p class="second">bbbb</p>
<p>bbbb</p>
<p><p>
<a href="#foot" id="head">鏈接</a>
<a href="#head" id="foot">鏈接</a>

顯示效果：

（三）屬性選擇器

簡單來說，就是選擇標籤並指定屬性

[attribute=value] 屬性對應值與value完全相同
[attribute~=value] 屬性對應值與value有部分相同或完全相同
[attribute^=value] 屬性對應值以value開頭
[attribute$=value] 屬性對應值以value結尾
[attribute*=value] 屬性對應值中包含value
[attribute|=value] 屬性對應值以value整個單詞開頭

<style>
    p[id="cat"]{
        color:red;
    }
    p[class~="dog"]{
        color:orchid;
    }
    p[class~="bird"]{
        color:palegreen;
    }
    p[info^="love"]{
        color: blueviolet;
    }
    p[info$="ful"]{
        color: wheat;
    }
    p[info*="ick"]{
        color: salmon;
    }
    p[info|="clear"]{
        color: aqua;
    }
</style>

實現效果：

（四）關係選擇器

<style>
	/* 這裏以空格隔開的是後代選擇器,隔了兩代選取到p標籤 */
	.outside .first{
	    color:red;
	}
	/* 這裏的'div.inside'是交集選擇器,以'>'隔開的是子代選擇器 */
	div.inside>p{
	    font-size: 20px;
	}
	/* 這裏以'+'隔開的是兄弟選擇器,以','隔開的是並集選擇器 */
	.first+p,.third{
	    color: blue;
	}
</style>
<div class="outside">
    <div class="inside">
        <p class="first">66666</p>
        <p class="second">77777</p>
        <p class="third">88888</p>
    </div>
</div>

效果實現：

（五）僞元素選擇器

<style>
	/* 選中第一行第一個文字 */
	p::first-letter {
	   font-size: 30px;
	   color: firebrick;
	}
	/* 選中第一行 */
	p::first-line {
	   font-size: 20px;
	   color: greenyellow;
	}
	/* 高亮選中的文字 */
	p::selection {
	   color: red;
	}
</style>
<p>
    HTML 標籤原本被設計爲用於定義文檔內容。<br/>通過使用 h1、p、table 這樣的標籤，<br/>
    HTML 的初衷是表達“這是標題”、“這是段落”、“這是表格”之類的信息。<br/>
    同時文檔佈局由瀏覽器來完成，而不使用任何的格式化標籤。
</p>

實現效果：

四、設置CSS樣式的方法

首先，三種方法的效果是一模一樣的，css樣式較多時，建議使用外聯式，防止代碼冗長雜亂。
1）內聯式
直接把style樣式寫在標籤裏形成關聯的方法。

<p style="color:red">CSS內聯式</p>

實現效果：

2）嵌入式
通過在head頭標籤裏寫style標籤，然後在style標籤中通過css選擇器寫樣式的方法；從整個源代碼來看，就是一塊嵌入進去的代碼塊。

<style>
    p{
        color:red;
    }
</style>
<p>CSS內聯式</p>

效果實現：

3）外鏈式
通過外部導入css文件的方式設置css樣式

首先自己創建一個css文件

內容如下：

p{
    color:red;
}

網頁代碼

<head>
	<link href="css_03.css" type="text/css" rel="StyleSheet"/>
</head>

<p>CSS內聯式</p>

CSS樣式學習（一）