九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

CSS全稱為： Cascading Style Sheets ，意為層疊樣式表 ，與HTML相輔相成，實現(xiàn)網(wǎng)頁的排版布局與樣式美化

2.1 CSS使用方式

1.1.1 行內(nèi)樣式/內(nèi)聯(lián)樣式

Body中借助于style標簽屬性，為當前的元素添加樣式聲明。語法：<標簽名 style="樣式聲明">

例如：<div id="con" style="color: red; background-color: aqua; font-size: 50px;">

  常用CSS屬性 :

文本顏色 color:red;

背景顏色 background-color:green;

字體大小 font-size:32px;

2.1.2 內(nèi)嵌樣式

借助于style標簽，在HTML文檔head中嵌入CSS樣式代碼，可以實現(xiàn)CSS樣式與HTML標簽之間的分離。同時需借助于CSS選擇器到HTML 中匹配元素并應用樣式  示例:

<!-- 內(nèi)嵌樣式 在style標簽中寫css代碼 -->

    <style>       

        h1 {

            color: red;

        }

    </style>

2.1.3 外鏈樣式表

創(chuàng)建外部樣式表文件 后綴使用.css,在HTML文件head中使用<link>標簽引入外部樣式表.

<!-- 外聯(lián)樣式 從外部導入css修飾 -->

<link rel="stylesheet" href="css/demo.css">

2.2 樣式表特征

層疊性:多組CSS樣式共同作用于一個元素

繼承性:后代元素可以繼承祖先元素中的某些樣式 例 : 大部分的文本屬性都可以被繼承

2.3 CSS 選擇器

作用:匹配文檔中的某些元素為其應用樣式

2.3.1 分類

基礎選擇器：

    /* 標簽選擇器  標簽名{屬性：屬性值} */

    h1 {color: red;}

    /* id選擇器  #id屬性值{ } id具有唯一性 */

    #one {color: blueviolet;}

    /* class類選擇器 .class屬性{ } */

.big {font-size: 20px;}

注意 :  

id屬性值自定義,可以由數(shù)字，字母，下劃線，- 組成，不能以數(shù)字開頭;盡量見名知意，多個單詞組成時，可以使用連接符，下劃線，小駝峰表示.

class屬性值可以重復使用,實現(xiàn)樣式的復用,也可以指定某個標簽的某個類進行設置，標簽在前,類選擇器在后  例 : a.c1{ }

組合選擇器：

/* 群組選擇器:多個選擇器選擇結果的集合 篩選li標簽中，class值是one的元素 */

li.one,h1 {color: red;}

/* 后代選擇器:匹配滿足選擇器的所有子孫后代元素*/

#con ol li {font-size: 30px;color: aqua;}

/* 子代選擇器:每次只向下找一層*/

div>.one {color: green;}

/* 通用選擇器：選擇所有標簽元素，通常用于去除標簽默認樣式*/

* {margin: 0px;padding: 0px;}

偽類選擇器

a {font-size: 30px;}

/* 偽類選擇器：用于定義元素的特殊狀態(tài)

    :link 超鏈接訪問前的狀態(tài)

    :visited 超鏈接訪問后的狀態(tài)

    :hover 鼠標滑過時的狀態(tài) ，也可以用于其他標簽

    :active 鼠標點按不抬起時的狀態(tài)(即激活狀態(tài)) */

a:link {color: red;}

a:visited {color: red;}

a:active {color: pink;} /* 偽類4 點擊激活狀態(tài) */

h1:hover {background-color: red;} /* 用于其他標簽 */

注意 :

超鏈接如果需要對四種狀態(tài)分別設置樣式,必須按照以下順序書寫

   :link --> :visited  --> :hover  --> :active

2.3.3 優(yōu)先級問題

同一個元素的同一個樣式(例如文本色)，在不同地方多次進行設置，最終選用哪一種樣式？此時哪一種樣式表的優(yōu)先級高或者選擇器綜合權重大選用哪一種。

- 行內(nèi)樣式的優(yōu)先級最高

- 文檔內(nèi)嵌與外鏈樣式表,優(yōu)先級一致,看代碼書寫順序,后來者居上

- 瀏覽器默認樣式和繼承樣式優(yōu)先級都較低但瀏覽器默認樣式比繼承樣式高

使用選擇器為元素設置樣式發(fā)生樣式?jīng)_突時,選擇器的權重需要計算比較,權重越大,優(yōu)先級越高

| 選擇器       | 權重 |

| ------------ | ---- |

| 標簽選擇器   | 1    |

| (偽)類選擇器 | 10   |

| id選擇器     | 100  |

| 行內(nèi)樣式     | 1000 |

復雜選擇器(后代,子代,偽類)最終的權重為各個選擇器權重值之和 群組選擇器權重以每個選擇器單獨的權重為準，不進行相加計算 例 :

/*群組選擇器之間互相獨立，不影響優(yōu)先級*/

body,h1,p{ /*標簽選擇器權重為 1 */

 color:red;

}

.c1 a{ /*當前組合選擇器權重為 10+1  */

 color:green;

}

#d1>.c2{ /*當前組合選擇器權重為 100+10 */

 color:blue;

}

2.4 標簽分類

塊元素：獨占一行,不與元素共行;可以手動設置寬高,默認寬度與與父元素保持一致 例 : body  div   h1~h6   p   ul   ol   li   form    table    hr

行內(nèi)元素：可以與其他元素共行顯示;不能手動設置寬高,尺寸由內(nèi)容決定 例 : span   a   

行內(nèi)塊元素：可以與其他元素共行顯示,又能手動調(diào)整寬高 例 : img   input   button    textarea  td

嵌套原則：

1. 塊元素中可以嵌套任意類型的元素

2. p元素段落標簽只嵌套行內(nèi)元素,不嵌套塊元素

3. 行內(nèi)元素中最好只嵌套行內(nèi)或行內(nèi)塊元素

2.5 顏色和長度

2.5.1 常用長度單位

許多 CSS 屬性接受“長度”值，諸如 `width`、`margin`、`padding`、`font-size` 等。長度單位有絕對長度和相對長度單位，絕對長度單位是固定的，用任何一個絕對長度表示的長度都將恰好顯示為這個尺寸，但是我們不建議在屏幕上大量使用絕對長度單位，因為屏幕尺寸變化很大。

| 單位 | 描述                                               |

| ---- | -------------------------------------------------- |

| cm   | 絕對單位，厘米                                     |

| mm   | 絕對單位，毫米                                     |

| px   | 像素，一個相對屏幕分辨率的點                       |

| em   | 相對于元素的字體大?。ㄎ丛O置則相對瀏覽器默認字體） |

| %    | 相對父元素的百分比                                 |

2.5.2 顏色表達

英文單詞：red，green，blue

RGB(r,g,b) 使用三原色表示，每種顏色取值0~255

RGBA(r,g,b,alpha) 三原色每種取值0~255，alpha取值0.0（透明）~1.0（不透明）

HEX顏色 ： 即顏色的十六進制表示，以#為前綴,每兩位為一組，代表一種三原色；每位的取值范圍00-ff。比如紅色rgb(255,0,0) 對應這種表達方式為 #ff0000

2.6 常用CSS樣式

2.6.1背景

2.6.2 字體

2.6.3 文本

2.6.4 邊框

2.6.5 邊距

2.7布局方式

標準流/靜態(tài)流：默認布局方式,按照代碼書寫順序及標簽類型從上到下,從左到右依次顯示。

2.7.1 浮動布局：float

主要用于設置塊元素的水平排列，屬性：float:left/right;

特點：

浮動會脫離標準流，從原始位置脫流,向左或向右依次?？吭谄渌剡吘?在文檔中不再占位。

元素設置浮動,就具有行內(nèi)塊元素的特征,可以手動調(diào)整寬高；

元素設置浮動，按標準流在body中進行元素的先后順序進行排布；

"文字環(huán)繞":浮動元素遮擋正常元素的位置,無法遮擋正常內(nèi)容的顯示,內(nèi)容圍繞在浮動元素周圍顯示

常見問題：

子元素全部設置浮動,導致父元素高度為0,影響父元素展示

解決辦法：

對于內(nèi)容固定的元素,如果子元素都浮動,可以給父元素固定高度(例:導航欄)

在父元素的末尾添加空的塊元素。設置clear:both;清除浮動

為父元素設置overflow:hidden;解決高度為0

2.7.2 定位布局：postion

    結合偏移屬性調(diào)整元素的顯示位置

    屬性：postion:relative/absolute/fixed/static

偏移屬性(top/right/bottom/left):設置定位的元素可以使用偏移屬性調(diào)整距離參照物的位置

相對定位(reative):元素設置相對定位,可參照元素在文檔中的原始位置進行偏移,不會脫離文檔流，但涉及同層元素的覆蓋

絕對定位(absolute):參照物是已定位的父元素偏移，會脫離文檔流。"父相子絕" : 父元素設置相對定位,子元素絕對定位。

固定定位(fixed):參照物是整個網(wǎng)頁，會脫離文檔流。

z-index:-1 設置元素層級，后邊的數(shù)字是層級