1. css概述
1. 問題
先帶着問題學習css：
- 設置頁面中所有的文本顏色爲紅色。
- 設置頁面中所有的p元素文本爲藍色。
- 設置頁面中所有的h3元素文本也爲藍色。
- 將頁面中所有的p元素文本顏色改爲綠色。
HTML的不足：
1. 不同的標記想完成相同的效果使用的是不同
...
<body text="red"> 修改文本顏色
<font color="blue"> 修改文本顏色
2. 樣式效果不通用
css作用：
1. 以統一的方式實現樣式的定義
color：red；
2. 提高頁面樣式的可重用性和可維性
2. 什麼是css
簡介：CSS（Cascading Style Sheets）
層疊樣式表，級聯樣式表， 簡稱 樣式表
實現了內容（HTML）與表現（CSS）的分離
3. CSS 與 HTML 之間的關係
HTML是構建網頁的結構
css是構建HTML元素樣式
4. HTML屬性與CSS樣式的使用原則
ex（例子）：
html ： 修改文本顏色
css ： color：red； 修改文本顏色
w3c： 建議儘量使用css樣式取代HTML屬性
<td colspan="3">
colspan屬性在css中沒有方式能夠取代，所以針對跨列來講，
只能使用 HTML1 元素屬性，不能使用css屬性
2.css語法
1. 使用css樣式表
分爲：
- 內聯方式
- 內部樣式表
- 外部樣式表
1. 內聯方式
內聯方式介紹：將樣式聲明在元素的style屬性中
語法：
<ANY style=“樣式聲明;> 樣式聲明”</ANY>
樣式聲明： 表示一個具體顯示效果，多個樣式聲明之間，用；隔開
每個樣式聲明都由兩部分組成：
樣式屬性; 屬性值
ex（例子）：
樣式屬性： 屬性值
color 顏色英文表示法
font-size 以px或pt爲單位的數值
background-color 顏色英文表示法
設置某元素的 文本顏色爲紅色， 文字大小爲24px，背景顏色爲綠色 ：
<ANY style="color：red;font-size:24px;background-color:gree;"></ANY>
2. 內部樣式表
內部樣式表介紹：將樣式聲明定義在頁面的style 元素中
-
在<head>中添加<style></style>元素
2. 在style中添加任意多“樣式規則”
樣式規則：
選擇器{
樣式聲明；/* 屬性：值； */
樣式聲明；
… …
}選擇器： 規範了頁面中哪些元素能夠使用定義好的樣式。
ex（例子）：
p{
color：red；
font-size：48px；
background-color：green；
}
p{}： 定義頁面中所有p元素的樣式
命令例子顯示：
顯示例子：
3. 外部樣式表
步驟：
-
創建一個單獨的樣式表文件保存樣式規則
**.css
只能編寫遵循css規範的內容-
在需要的頁面上引入樣式表文件
<head> <link rel="stylesheet" href="css文件 url"> </head>
-
(例子1) 文本顏色爲紅色，文字大小：24px：
命令顯示例子：
顯示例子：
2. css樣式特徵
1. 繼承性
子級元素可以直接使用父級元素聲明好的樣式
大部分的css樣式屬性是可以被繼承的。
2. 層疊性
可以爲一個元素聲明多個樣式規則中的樣式如果樣式不衝突的話
，多個樣式規則中的樣式可以層疊爲一個。
3. 優先級
樣式定義衝突時，按照不同樣式使用的“優先級”來應用樣式
瀏覽器缺省設置愛（User Agent Stylesheet）中：
外部樣式表或內部樣式表
就近原則-誰離元素近，就用誰高：內聯樣式
4. ！important 規則
作用： 顯示調整樣式的優先級
語法：
屬性名稱： 值 ！important;
（儘量少用）
IE以及以下瀏覽器不支持
打破默認優先級規則
2. css基礎選擇器
1. 它的作用：
規範了頁面中哪些元素能夠使用定義好的樣式
目的： 匹配頁面元素
2. 詳解：
1. 通用選擇器
作用： 匹配頁面中所有的元素
語法：
*{樣式聲明;}
缺點： 效率較低，儘可能少用
2. 元素選擇器
作用：定義頁面某一標籤的默認樣式
語法：
元素{
樣式聲明；
}
3. 類選擇器
作用：
由css定義好，可以被任意標記的class屬性值進行引用的選擇器
語法：
.類名{樣式聲明;}
類名：
- 不能以數字開始
2. 除_,-意外不能有其它特殊符號
引用：
<ANY class=“類名”>
引用方式 - 多類選擇器的引用
可以將多個類選擇器，同時應用在一個元素中
語法： <ANY class=“class1 class2 class3”>
練習：
span元素的背景顏色爲灰色（gray），
文本顏色爲綠色（green）， div文字顯示爲橘黃色，文字加粗顯示。
p、h3 文本顏色爲紅色。
解析：
顯示命令例子：
實例演示：
