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，最高無限

• • 作用：