CSS(1)---css語法、css選擇器
CSS(1)---css語法、css選擇器
一、CSS語法
1、CSS語法
CSS 規則由兩個主要的部分構成：選擇器以及一條或多條宣告。
屬性 是您希望設定的 樣式屬性。每個屬性有一個屬性值。屬性和屬性值被冒號分開。
示例
<!-- 這行程式碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字型大小設定為 14 畫素 -->
h1 {color:red; font-size:14px;}
<!-- 在這裡，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。 -->二、CSS三種引入方式
CSS三種引入方式有：行內樣式
內部樣式表、外部樣式表。
1、行內樣式
它是通過標籤的 style屬性 來設定元素的樣式，
基本語法示例：
<!--使用行內樣式引入CSS-->
<body>
<p style="color:blue; font-size:40px">歡迎訪問雨點的部落格。</p>
</body>建議 實際在寫頁面時不提倡使用，在測試的時候可以使用。
2、內部樣式表
在 style標籤 中書寫CSS程式碼。style標籤寫在head標籤中。
其基本語法示例：
<head> <!--使用內部樣式表引入CSS--> <style type="text/css"> div{ background: green; } </style> </head>
3、外部樣式表
CSS程式碼儲存在副檔名為.css的樣式表中。有兩種方式：連結式、匯入式。
基本語法示例：
<head> <!--連結式:推薦使用--> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--匯入式--> <style type="text/css"> @import url("css/style.css"); </style> </head>
4、三者比較
三、CSS基礎選擇器
基礎選擇器可以分為: 標籤選擇器、類選擇器、id選擇器、萬用字元選擇器。
1、標籤選擇器
標籤選擇器（元素選擇器）是指用 HTML標籤名稱 作為選擇器，按標籤名稱分類，為頁面中同一類標籤指定統一的CSS樣式。基本語法示例：
<!-- 示例 這裡h1就是標籤-->
h1 {color:red; font-size:14px;}標籤選擇器最大的優點是能快速為頁面中同類型的標籤統一樣式，同時這也是他的缺點，不能設計差異化樣式。
2、類選擇器
類選擇器使用 .（英文點號）進行標識，後面緊跟 類名。
基本語法示例
<head>
<style type="text/css">
.center {text-align: center}
</style>
</head> 注意：類名的第一個字元不能使用數字！
3、 id選擇器
id選擇器使用 # 進行標識，後面緊跟id名，其基本語法示例：
<head>
<style type="text/css">
#red {color:red;}
#green {color:green;}
</style>
</head>id選擇器和類選擇器區別
類選擇器： 好比人的名字,是可以多次重複使用的。
id選擇器： 好比人的身份證號碼,是唯一的不能重複。
4、萬用字元選擇器
萬用字元 選擇器用 * 號表示，他是所有選擇器中作用範圍最廣的，能匹配頁面中所有的元素。
例如下面的程式碼，使用萬用字元選擇器定義CSS樣式，清除所有HTML標記的預設邊距。
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內邊距*/
}
四、CSS複合選擇器
複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。
複合選擇器有:交集選擇器、並集選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器、偽類選擇器。
1、交集選擇器
交集選擇器由兩個選擇器構成，其中第一個為標籤選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如p.className。
基本語法
示例
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
div.red { /*交集選擇器 既要滿足是 div 標籤 又要滿足class叫 red*/
color: red;
}
</style>
</head>
<body>
<div>交集選擇器</div>
<div class="red">交集選擇器</div> <!-- 只有這個會變紅 -->
<p class="red">交集選擇器</p>
</body>
</html>
2、並集選擇器
並集選擇器，只要滿足一個就可以。比如 .className, h1 , #id {color: #F00;} 表示 .className 和 h1 和 #id 這三個選擇器都會執行顏色為紅色。 通常用於集體宣告。
示例
<!DOCTYPE html>
<html>
<head>
<title>並集選擇器</title>
<style>
/*1. 只要滿足其中一個就會變紅*/
div, p, span { /*並集選擇器 用逗號隔開 */
color: red;
}
</style>
</head>
<body>
<div>並集選擇器</div>
<p>並集選擇器</p>
<span>並集選擇器</span>
<h1>並集選擇器</h1> <!-- 只有這一個不會變紅 -->
</body>
</html>
3、後代選擇器
後代選擇器又稱為包含選擇器，一般標籤裡面又會包含標籤,那麼內層標籤就為外層標籤的後代。
示例
<!DOCTYPE html>
<html>
<head>
<title>後代選擇器</title>
<style>
div p { /* 後代選擇器 p 一定是 div 的孩子 */
color: red;
}
</style>
</head>
<body>
<div> 後代選擇器 </div>
<div>
<p>後代選擇器</p> <!-- 只有它變紅 -->
</div>
</body>
</html>
4、子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 > 進行連線，注意，符號左右兩側各保留一個空格。
後代選擇器跟子元素選擇器的區別
後代可以是 親兒子 、親孫子 、親重孫子之類的，而子代只是親兒子。所以後代選擇器的範圍更廣些。
示例
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
ul li > a { /*這裡表示 ul的後代中的li的親兒子才會有效 */
color:red;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">一級選單</a> <!-- 只有這個是li的親兒子，所以只有它會變紅 -->
<div>
<a href="#">二級選單</a> <!-- 這三個只是li的後代但並不是親兒子，所以不會變紅 -->
<a href="#">二級選單</a>
<a href="#">二級選單</a>
</div>
</li>
</ul>
</body>
</html>
5、相鄰兄弟選擇器
如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器
例如，如果要增加緊接在 h1 元素後出現的段落的上邊距，可以這樣寫：
h1 + p {margin-top:50px;}
這個選擇器讀作：“選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素”。
6、 偽類選擇器
偽類選擇器用於向某些選擇器新增特殊的效果。比如給連結新增特殊效果， 比如可以選擇 第1個，第n個元素。
為了和我們剛才學的類選擇器相區別， 類選擇器是一個點 比如 .className {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{}。
示例
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
a:link { /* 未訪問過的連線狀態*/
color: #3c3c3c;
font-size: 25px;
text-decoration: none; /*取消下劃線*/
font-weight: 700;
}
a:visited { /*這個連結我們已經點過的樣子 已訪問過連結*/
color: orange;
}
a:hover { /*滑鼠經過連線時候的樣子*/
color: #f10215;
}
a:active { /*滑鼠按下時候的樣子*/
color: green;
}
</style>
</head>
<body>
<a href="http://www.oujiong.com">點選</a>
</body>
</html>
參考
有關CSS選擇器上面也只是講了一部分，更多的可以看w3school官方文件。當你需要怎麼樣的選擇器到這裡查詢就可以。
1、w3school-CSS 教程
2、CSS 選擇器參考手冊
你如果願意有所作為，就必須有始有終。(3)