六、css層疊樣式表**由網頁組成 網頁的結構由html組成 網頁的樣式由css組成
1.css概念 （ cascading style sheets 層疊 樣式 表 ）css是定義html表現形式的描述性語言
2.如何設定標題文字顏色、對齊方式、背景色
<
h3>北京
h3> 文字顏色【 巢狀<
font
>
font
>
】 對齊方式【h3的align屬性】 背景顏色 【table】
注意：？？？h1-h6 標籤沒有color屬性 改變標題的顏色 要巢狀font 在font的color屬性裡改
<
h3 align
="center"
><
font
color
="blue"
>景
font
>
h3>
但是標籤選擇器 h1 可以
p標籤有color屬性 直接改
<
p style
="color:#008000"
>ddd
p>
1）<
table
bgcolor
="#0000ff"
>
<
tr>
<
td>
<
h3 align
="center"
><
font
color
="blue"
>景
font
>
h3>
td>
tr>
table
>
2）<
h3 style
="color:blue;text-align: center;background: #ccc;"
>解決
h3>
3.如何使多頁面共用相同樣式
1.行內樣式
是在html開始標籤中新增stye屬性來書寫css**的樣式表
<
標籤名 style
="屬性:屬性值"
>被修飾的內容
標籤名》
注意點：1.屬性和屬性值之間是 ：
2.屬性值以 ； 結束
2.內嵌樣式
是在<
head
>
head
>標籤內 巢狀<
style
type
="text/css"
>
style
>
標籤來書寫css**的樣式表
基本語法格式：
<
head
>
<
style
type
="text/css"
>
標籤名中 屬性和值之間 : 連線 以 ; 結尾
屬性:值 //這裡是css**
}style
>
head
>
3.外部樣式
是一種鏈結乙個外部的css檔案來書寫css**的樣式表
引入外部樣式：
<
link
rel="stylesheet"
type
="text/css"
href
="css/style.css"
/>
href:用於指定鏈結的外部css檔案的路徑
rel:用來指定當前頁面與href所鏈結的檔案之間的關係 【stylesheet是樣式表 不可省略】
【html頁面：】
<
head
>
<
link
rel="stylesheet"
type
="text/css"
href
="檔名.css"
/>
head
>
外部css檔案:
標籤名4.匯入樣式
css實現了結構與樣式的分離
css樣式的三種使用方法（根據書寫位置來劃分）
分類 書寫位置 樣式控制 適用情況
行內樣式 開始標籤中新增style屬性 當前頁面 樣式較少
內嵌樣式 head中巢狀style標籤 當前頁面 控制當前頁面樣式
外部樣式 外部css檔案 link鏈結 多個頁面 多個頁面樣式一致
5.三種樣式優先順序
【符合就近原則，距離標籤越近，樣式表優先順序越高】
!important>行內樣式》內嵌樣式》外部樣式
小結：css定義和使用方法（行內樣式、內嵌樣式、外部樣式）
6.css選擇器 是一種選擇標籤的方式 不同的選擇方式對應不同的選擇器 根據選擇元素方式不同 分成不同的選擇器
基本語法格式： 選擇器
基本選擇器：
萬用字元選擇器
標籤選擇器
類選擇器
id選擇器
【css選擇器的優先順序：id選擇器》類選擇器》標籤選擇器》全域性選擇器】
6.1萬用字元選擇器
萬用字元選擇器：用於選擇頁面中的所有標籤
語法：*
場景：用萬用字元選擇器快速設定整個頁面中所有文字大小為12px 字型大小：font-size
6.2標籤選擇器
標籤選擇器 是通過標籤名進行選擇，以便於設定樣式的選擇器
基本語法格式：
標籤名h1 p
6.3 類選擇器
類選擇器 也稱class選擇器 是對html標籤的class屬性進行選擇，設定樣式的選擇器
【注意：1.以. 開頭 2.命名規範與id名一致】
基本語法格式：html標籤引用
<
標籤1
class
='類名'
>
標籤1>
css中定義：
.類名6.4 id選擇器
id選擇器 是對html標籤的id屬性進行選擇 設定樣式的選擇器具有唯一性
基本語法格式：
html標籤中新增id屬性：
<
標籤名 id
='id名'
>
標籤名》
css中選擇設定樣式：
#id名
【注意：以#開頭
1.標籤中新增id屬性，唯一標識
2.『id名』遵循語法規範：
a)只能是字母、數字、下劃線_、連字元-
b)只能以字母開頭
c)嚴格區分大小寫
d)見名知義
3.id選擇器以 # 為字首
】6.5 群組選擇器
群組選擇器 是同時對幾個選擇器進行相同的操作
【注意：
1.選擇器之間用 , 隔開，且不可省略
2.選擇器可以是任意選擇器
基本語法格式：
選擇器1，選擇器2，選擇器3
eg: h3,p,em
6.6 後代選擇器
後代選擇器 選擇作為某標籤後代的標籤
【注意點：
1.選擇器之間用空格隔開，且不可省略
2.選擇器可以是任意選擇器
】基本語法格式：
選擇器1 選擇器2
小結：群組選擇器：比如 選擇器1，選擇器2
後代選擇器：比如 選擇器1 選擇器2
【復合選擇器】就是兩個或多個基本選擇器，通過不同的方式連線成的選擇器
6.7偽類選擇器
偽類選擇器 不是選擇一種標籤，而是選擇標籤的一種【狀態】
比如a標籤有四種狀態：點選前 滑過 點選時 點選後
a:link 鏈結訪問前的初始狀態
a:visited 鏈結訪問後的狀態
a:hover 滑鼠滑過的狀態
a:active 滑鼠點選時的狀態
【注意：選擇器與偽類名之間 ： 隔開，且不可省略】
基本語法格式：
選擇器：偽類名
css使用方法
【樣式優先順序】
1.行內樣式》內嵌樣式》外部樣式
2.外部樣式與內嵌樣式的優先順序取決於位置的先後
3.判斷字型在頁面中的顏色 id選擇器》類選擇器》標籤選擇器》全域性選擇器
4.判斷群組選擇器、後代選擇器等復合選擇器的優先順序 權重 權重越大，優先順序越高
5.當優先順序相同時，最後宣告的樣式將覆蓋前面的
【權重】
萬用字元選擇器 0
標籤選擇器 1
類選擇器 10
id選擇器 100
行內樣式 1000
群組選擇器的權重需分組計算 .title 10 p 1 #box 100
【優先順序總結】
先看樣式表，行內樣式優先順序最高
同一樣式表中，比較選擇器權重，權重高，優先順序高
同一樣式表中，優先順序相同時，符合就近原則，後寫覆蓋先寫
選擇器 定義
語法分類:萬用字元選擇器* 標籤選擇器（標籤名） 類選擇器（.class） id選擇器（#id）
選擇器 復合選擇器 （群組選擇器 後代選擇器）
偽類選擇器
css 使用方法 ： 行內樣式 內嵌樣式 外部樣式
選擇器： 基本選擇器 偽類選擇器 復合選擇器
pre>
css層疊樣式表 基本選擇器
css 層疊樣式表 style 樣式 修飾和美化整個網頁，實現各種不同的網頁布局風格 行內樣式的優先順序最高 內部樣式和外部樣式並沒有明確的優先順序，看先後書寫順序，後寫的會覆蓋先寫的 行內樣式 將css樣式直接加到html每乙個標籤上，在頭部標籤書寫 類似於寫html的屬性 使用style 樣式名...
css樣式表及選擇器
css樣式表及選擇器 內嵌式是將css 集中寫在html文件的head頭部標籤中，並且用style標籤定義，其基本語法格式如下 type text css 選擇器style head 1.在html5中可以省略，但一般都會寫上，比較規範 2.一般放在head標籤內，也可以放在其他位置 內聯樣式，又有...
CSS選擇器及CSS樣式表
牛腩新聞發布系統中記憶最深的就是各種 css選擇器各種 css樣式，這些選擇器之間肯定有它的優先順序，包括 css樣式也一樣，也是有它的優先順序，本文介紹一些各種 css選擇器各種 css樣式以及它們的優先順序。由兩個主要的部分構成 選擇器，以及一條或者多條宣告。部分css部分 h1html 部分z...