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官方文檔。當你需要怎么樣的選擇器到這里查找就可以。
你如果願意有所作為，就必須有始有終。(3)