7. CSS樣式基本知識與選擇器、繼承、層疊和特殊性
css 樣式由選擇符和宣告組成，而宣告又由屬性和值組成
p{ color: blue }
p_選擇符
{}_宣告
color_屬性
blue_值
第7章 CSS樣式基本知識
內聯式、嵌入式和外部式三種 三種方法的優先順序:內聯式 > 嵌入式 > 外部式
6.1 聯式css樣式，直接寫在現有的HTML標籤中
<p style="color:red">這裡文字是紅色。</p>
例:<p>慕課網，<span style="color:blue">超酷的網際網路</span>
6.2 嵌入式css樣式，寫在當前的檔案中
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css樣式必須寫在<style></style>之間，並且一般情況下嵌入式css樣式寫在<head></head>之間
6.3 外部式css樣式，寫在單獨的一個檔案中
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css樣式檔名稱以有意義的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、<link>標籤位置一般寫在<head>標籤之內。
-----------------------------------------------------------------------------------------------
第8章 CSS選擇器
8.1 什麼是選擇器？
style type="text/css">
body{
font-size:18px;
color:blue;
}
</style>------body就是選擇器
8.2 標籤選擇器
標籤選擇器其實就是html程式碼中的標籤,<html>、<body>、<h1>、<p>、<img>
例:
<style type="text/css">
h1{
font-weight:normal;
color:red;
}
</style>
8.3 類選擇器
.類選器名稱{css樣式程式碼;}
使用方法：
第一步：使用合適的標籤把要修飾的內容標記起來，如下：
<span>膽小如鼠</span>
第二步：使用class="類選擇器名稱"為標籤設定一個類，如下：
<span class="stress">膽小如鼠</span>
第三步：設定類選器css樣式，如下：
.stress{color:red;}/*類前面要加入一個英文圓點*/
8.4 ID選擇器
#setGreen{
color:green;
}
<span id="setGreen">公開課</span>
8.5 類和ID選擇器的區別
相同點：可以應用於任何元素
不同點：ID選擇器只能在文件中使用一次。與類選擇器不同，在一個HTML文件中，ID選擇器只能使用一次，而且僅一次。
而類選擇器可以使用多次
8.6 子選擇器
即大於符號(>),用於選擇指定標籤元素的第一代子元素
.food>li{border:1px solid red;}
8.7 包含(後代)選擇器
即加入空格,用於選擇指定標籤元素下的後輩元素
.first span{color:red;}
8.8 通用選擇器
它使用一個（*）號指定，它的作用是匹配html中所有標籤元素
* {color:red;}
8.9 分組選擇符
h1,span{color:red;}
------------------------------------------------------------------------------------------------------------------------
第9章 CSS的繼承、層疊和特殊性
9.1 繼承
繼承是一種規則，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。
p{color:red;}
<p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
但注意有一些css樣式是不具有繼承性的。如border:1px solid red;
p{border:1px solid red;}
<p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
9.2 特殊性
瀏覽器是根據權值來判斷使用哪種css樣式的，權值高的就使用哪種css樣式
下面是權值的規則：
標籤的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。例如下面的程式碼：
p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/
9.3 層疊
當有相同權重的樣式存在時，會根據這些css樣式的前後順序來決定，處於最後面的css樣式會被應用。
內聯樣式表（標籤內部）> 嵌入樣式表（當前檔案中）> 外部樣式表（外部檔案中）。
p{color:red;}
p{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
9.4 重要性
!important設定具有最高權值
p{color:red!important;}
p{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
------------------------------------------------------------------------------------------------------------------------