1071 小賭怡情 (15分)
CSS
目錄
1.CSS是什麼
2.CSS怎麼用（快速入門）
3.CSS選擇器（重點+難點）
4.美化網頁（文字，陰影，超連結 ，列表漸變）
5.盒子模型
6.浮動
7.定位
8.網頁動畫（特效效果）
什麼是CSS和發展史
1. Cascading Style Sheet層疊級聯樣式表 a. CSS：表現（美化網頁）字型，顏色，邊距，高度，寬度，背景圖片，網頁定位，網頁浮動 2. 發展史： i. CSS1.0 ii. CSS2.0 DⅣ（塊）+CSS,HTML與CSS結構分離的思想，網頁變得簡單，SEO iii. CSS2.1 浮動，定位 iv. CSS3.0 圓角，陰影，動畫瀏覽器相容性～
CSS的快速入門及優勢
建議程式格式
規範：
練習時可直接在html檔案的head下用
<style>css程式</style>
css優勢
a. 內容和表現分離
b. 網頁結構表現統一，可以實現複用
c. 樣式十分的豐富
d. 建議使用獨立於html的cs檔案
e.利用SEO，容易被搜尋引擎收錄
四種CSS的匯入方式
行內樣式：
<--!在標籤元素內，編寫一個style屬性，編寫樣式即可-->
<h1 style="color:red">
內容
</h1>
內部樣式：
在head內寫<style>css程式碼</style>
外部樣式：
１、編寫css檔案
2、在html程式碼中，打入關聯語句
第一種寫法連結式：
<link rel="stylesheet" href="css/style.css">
第二種寫法匯入式：
<style>
@import url("css/style.css")
</style>
各種匯入方式的優先順序:就近原則
選擇器
-
選擇器作用：
-
- 作用：選擇頁面上的某一個或者某一類元素
標籤選擇器
- 標籤選擇器，會選擇到頁面上所有的這個標籤的元素
- 格式：標籤型別{}
h1{color:"red";}
類選擇器
格式：對應已定義的class， .class名{}
定義：class="映上"
選擇器：.映上{
color:"red";
}
好處：可以多個標籤歸類，是同一個 class，可以複用
id選擇器
格式：對應已定義的id， #id號{}
定義：id="映上"
選擇器：#映上{
color:"red";
}
好處：id全場唯一
三種基本選擇器的優先順序問題：
- 不遵循就近原則，固定的id選擇器 class選擇器>標籤選擇器
層次選擇器
-
後代選擇器：
-
- 在某個元素的後面 祖爺爺 爺爺 爸爸 你
- 格式： 基本選擇器 p{}
/*後代選則器,選擇body括號內的所有p標籤*/
body p
{background:red;}
- 子選擇器:
- 只選擇兒子
- 格式： 基本選擇器>p{}
/*子選擇器,選擇body括號內的p標籤，不包括P標籤括號內的*/
body>p
{background:red;}
- 相鄰兄弟選擇器:
- 同輩,一個
- 格式： 基本選擇器+p{}
/*相鄰兄弟選擇器，只有一個相鄰向下*/
.active+p{
background:red;
}
- 通用選擇器：
- 當前選中元素的向下的所有兄弟元素
- 格式：基本選擇器~p{}
/*相鄰兄弟選擇器，當前選中元素的向下的所有兄弟元素*/
.active~p{
background:red;
}
結構偽類選擇器
- 兩個好理解的結構偽類選擇器：
<!-- 選擇ul下的第一個li元素-->
ul li:first-child
{
background:red;
}
<!-- 選擇ul下的最後一個li元素-->
ul li:last-child
{
background:blue;
}
- 兩個複雜的結構偽類選擇器：
/* 定位到父元素，選擇當前的第一個元素，而且必須為當前元素才生效*/
p:nth-child(1)
{
background: green;
}
/*選中父元素，選擇當前p元素的第二個*/
p:nth-of-type(2)
{
background: aqua;
}
屬性選擇器-重要、常用
-
格式：
-
- 元素名[屬性條件（可用正則表示式）]{css程式};
a[hrep$=jpg]{
background:yellow;
}
- =絕對等於 *=包含 ^=開頭為 $=結尾為
span標籤及字型樣式
span標籤：重點要突出的字，使用span套起來，約定俗成
字型樣式：
font-family:字型
font-size：字型大小
font-weight：字型粗細
color：字型顏色
可以直接一起寫：
p{font:oblique bolder 16px "楷書";}
文字樣式
- 文字顏色：
p[class=fff]
{
color:green;
}
/*顏色
單詞
RGB 0-f
RGBA 0-f*/
p[class=fff]
{color:green;}
- 文字居中：
- 格式：text-align:排版，居中
text-align:center
- 段落首行縮排：
text-indent:2em(兩個欄位)
- 行高：
height:300px;
line-height:300px;
說明：行高和塊的高度，就可以上下居中
- 劃線：
text-decoration:underline/line-through/overline(下中上劃線)
○ 超連結標籤預設有下劃線，去除：
text-decoration:none;
- 文字圖片水平對齊：
img,span{
vertical-align:middle;
}
文字陰影和超連結偽類
超連結偽類：
<style>
/*預設*/
a{}
/*滑鼠懸浮的狀態*/
a:hover{}
/*滑鼠按住未釋放的狀態*/
a:active{}
/*已點選過後的狀態*/
a:visited{}
</style>
文字陰影：
格式：/*text-shadow:陰影顏色，水平偏移，垂直偏移，陰影半徑*/
#price{
text-shadow:red 10px 10px 10px;
}
盒子模型及邊框使用
什麼是盒子：
margin：外邊距 padding：內邊距 border：邊框
border邊框：
border:1px solid red;
-
邊框的粗細 邊框的樣式：solid 實線 dashed 虛線 邊框的顏色
圓角邊框:格式：border-radius:10px
display和浮動
回憶塊元素和行內元素：
塊級元素：獨佔一行 h1~h6 p div 列表...
行內元素：不獨佔一行 span a img strong...
-
display使用：
-
-
display:
-
- block(塊元素)
- inline(行內元素）
- inline-block(是塊元素，但是可以內聯，在一行!)
-
說明：這個也是一種實現行內元素排列的方式，但是我們很多情況都是用foat，因為還在標準文件裡面。
-
-
loat使用：
-
-
float:
-
- right:右浮動
- left：左浮動
-
overflow及父級邊框場陷問題
-
overflow用法：
-
overflow:hidden：
-
- 當父元素設定了height值時，則設定overflow:hidden後，子元素超出父元素部分隱藏
- 當父元素的高度是靠子元素撐開的時候，子元素浮動時，則在父元素使用overflow: hidden可以清除浮動，使得父元素的高度依舊是靠子元素撐開。
-
clear說明：
-
父級邊框塌陷問題解決：
-
增加父級元素的高度：
-
增加一個空的dⅳ標籤，清除浮動：
-
-
-
在父級元素中增加一個 overflow:hidden；
-
- 父類新增一個偽類：after：
-
-
什麼是偽類和偽元素：
-
- 不專業的說帶冒號的就是偽類或者偽元素了。作用就是提供一些特定的效果，比如未訪問過的連結visited這些。
- 偽元素的作用就是為你提供一些方便，如果有3行字，第一行要有不一樣的效果，直接是
第一行第二行第三行
，然後定義 p:first-line就可以了。
-
小結：
-
浮動元素後面增加空div:簡單，程式碼中儘量避免空div
-
設定父元素的高度:簡單，元素假設有了固定的高度，就會被限制
-
overflow:簡單，下拉的一些場景避免使用
-
父類新增一個偽類：after（推薦）寫法稍微複雜一點，但是沒有副作用，推薦使用！
-
-
display和overfloat的對比：
-
-
display：
-
- 方向不可以控制
-
float：
-
- 浮動起來的話會脫離標準文欄流，所以要解決父級邊框塌陷的問題
-
相對定位：
-
-
相對定位：position:relative；
-
- 相對於原來的位置，進行指定的偏移，相對定位的話，它任然在標準文件流中，原來的位置會被保留
-
-
例子：
絕對定位和固定定位
-
絕對定位：
-
-
沒有父級元素定位的前提下，相對於瀏覽器定位。
-
假設父級元素存在定位，我們通常會相對於父級元素進行偏移
-
在父級元素範圍內移動
-
說明：
-
- 相對於父級或瀏覽器的位置，進行指定的偏移，絕對定位的話，它不在在標準文件流中，原來的位置不會被保留
-
-
固定定位fixed：
-
-
格式：
-
- position:fixed;
-
-
絕對定位、固定定位的區別：
-
- 都會出現在相對於瀏覽器的位置，但絕對定位會隨著滾動條發生位移，固定定位不會。
z-index及透明度
-
背景透明度；
-
- 格式：opacity: 0~1;
-
z-index：預設是0，最高無限
-
- 作用：