CSS細化知識點總結

1.行內樣式:只對它所修飾的元素起作用

語法：style=”屬性1：值1;屬性2：值2...屬性n:值n”

2. 樣式的優先級： 當有多個樣式作用在同一元素上時，誰離元素近，就使用誰的樣式，即誰離得近，誰的優先級高.

3. 長度單位em:1em就是當前一個字體的尺寸，text-indent: 2em;讓文本縮進2個字符

4. 顏色的三種表示法：

1.rgb顏色表示法：rgb(red,green,blue)，其中三個參數代表三種顏色的強度，值是[0,255]

2.十六進制表示法：用十六進制的值表示顏色，#RRGGBB

3.英文單詞表示法：用英文單詞表示顏色，例如紅色是red

5.基礎選擇器：1. 標簽選擇器：用元素名稱作為選擇器，選擇出網頁上所有名稱匹配的元素

2.類選擇器使用分2步：

2.1.給要選中的元素添加class屬性， 格式class="值"

2.2.聲明類選擇器，類選擇器名稱:.class屬性值

類選擇器可以選出多個元素，它們的類名要相同

3. ID選擇器使用分2步：

3.1.給要選中的元素添加id屬性， 格式id="值"

3.2.聲明ID選擇器，ID選擇器名稱:#id屬性值

按h5的標準，每個元素的id都是唯一的，ID選擇器只能選出一個元素

4. 通配符選擇器*:選出網頁上所有的元素

6.關系選擇器：1. 交集選擇器:由2個選擇器直接構成,選擇的元素範圍是它們各自的元素的公共部分,即交集

2. 並集選擇器:由多個選擇器通過逗號連接在一起,這些元素可以是任意的基礎選擇器，並集選擇器選擇的元素範圍是所有選擇器選出的元素的並集(合並在一起)

3. 後代選擇器:選出參考元素的所有後代元素，

語法：E F，即選出所有E選擇器匹配元素的所有後代F元素(包含兒子和孫子)

4. 親子選擇器:選出參考元素的所有親子元素，

語法：E>F，即選出所有E選擇器匹配元素的所有直接兒子元素F(不包含孫子元素)

7.屬性及偽類選擇器：1.屬性選擇器:根據元素的屬性來選擇元素

語法1： [attr]:選擇網頁上具有attr屬性的所有元素，不用管attr屬性的值

語法2：E[attr]:選擇具有attr屬性的所有E元素,不用管attr屬性的值

語法3：E[attr=value]:選擇具有attr屬性且屬性值是value的所有E元素

語法4：[attr=value]:選擇具有attr屬性且屬性值是value的所有元素

註意：如果屬性值value沒有/及：等特殊字符，那麽value可以不用雙引號包裹

2. 偽類選擇器:

2.1.:active:鼠標在元素上按下時的狀態

2.2. :hover:鼠標懸浮(停在上面)在元素上的狀態

8.選擇器的優先級：1.簡單選擇器優先級順序: !important>id選擇器>類選擇器>標簽選擇器>通配符選擇器 如果在簡單選擇器裏的某個樣式上加了!important，那麽此時它的優先級是最高的

2. 當修飾元素的選擇器是復合選擇器時，先比較id選擇器出現的次數，誰的id選擇器的次數多，誰的優先級高；在id選擇器次數相同情況下，再比較類選擇器的次數，誰的類選擇器的次數多，誰的優先級高

9. css屬性

背景屬性

可以使用background屬性來代替background-image, background-repeat, background-position三個屬性

技巧：

設置背景圖片水平和豎直方向都居中

1)將html和body的高度都設為100%

2)設置背景圖片的位置為50% 50%或者center center

（1）background-repeat：設置背景圖片重復，默認值是repeat(在水平和豎直方向都平鋪)

* repeat-x：在水平方向平鋪

* repeat-y：在豎直方向平鋪

* no-repeat:不平鋪，只顯示一張

（2）background-position: center center; 背景圖片居中,默認只能水平居中

（3）background-attachment: fixed; 將背景圖片固定，不會隨著文檔滾動而消失

文本屬性

（1） opacity：設置不透明度,範圍是[0,1],1表示完全不透明，最清楚，0表示完全透明，元素就隱藏了

（2） font-style: italic; 字體風格,italic為斜體

（3） font-weight: bold；字體粗細 ,bold和bolder都是加粗

（4） text-decoration: line-through；text-decoration:文本裝飾，可以定義文本的下劃線，上劃線或中劃線

（5） letter-spacing: letter-spacing:字與字之間的間距

（6） height: 50px;line-height: 50px; 當元素內的行高和高度相同時，元素內的文本就能在豎直方向上居中

（7） text-align: text-align:設置塊級元素內的文本的水平對齊方式

（8） overflow: hidden:超出元素框的內容會被修剪，看不到了

scroll:多余的內容能夠看到，會出現滾動條

auto:自動適應，如果元素高度不夠，則會出現滾動條，否則沒有滾動條

10.列表屬性

有序列表ol>li

list-style-type: upper- alpha:列表項的符號是大寫英文字母

upper- roman:列表項的符號是大寫羅馬字母

11.元素分類：

(1) 塊級元素：獨占一行的元素，不能和相鄰元素共享一行，例如：h1-h6,p，div,ol,ui,li,pre,table等

(2) 行內元素：能和相鄰元素共享一行的元素，例如：span,a,img等

特點：不要對行內元素設置寬和高，設了也沒用,寬和高自動適應內容,img除外(它可以設置寬高)

(3)行內元素和塊級元素的轉換：

塊級元素轉換為行內元素:給塊級元素設置display:inline

行內元素轉換為塊級元素:給行內元素設置display:block

（4）行內塊級元素：既有行內元素的特點(可以和相鄰的行內元素共享一行)，

又有塊級元素的特點(可以設置寬和高，以及padding和maring)

將元素設置為行內塊級元素：display:inline-block

（5）把元素隱藏起來，有兩種方式：

方式1：給元素設置display屬性，值為none,隱藏元素且不會保留元素的物理空間，與它相鄰的元素會擠過來

方式2：給元素設置visibility屬性，值為hidden，隱藏元素，但是會保留元素的物理空間

12.CSS定位

（1）絕對定位（position: absolute;）：設置絕對定位，此時元素會脫離文檔流 ,它原來的物理空間會被相鄰的元素占有.，絕對定位的元素在移動過程中是參照離它最近的父元素進行平移

left:讓元素向右移動多少像素

top:讓元素向下移動多少像素

絕對定位的元素會脫離文檔流，與它相鄰的元素會擠過來

固定定位：特殊的絕對定位，它的參照物是body元素(網頁上所有的元素的祖先元素)

（2）相對定位:參照元素當前的位置進行定位，相對定位元素需要配合left,right,top,bottom來定位，相對定位的元素沒有脫離文檔流，在定位過程中保留了物理空間 ，不會被相鄰元素占有

絕對定位，參照物是離他最近的父元素

相對定位:參照元素當前的位置進行定位

（3）Z-index屬性：在z軸(視覺線)上的堆疊順序，值越大的就越在前面，離我們的眼睛越近

13.CSS浮動：float

left: 設置元素向左浮動,參照父元素的左上角,向父元素的左邊移動

right:設置向右浮動,

設置了浮動的元素的物理空間消失了，會被相鄰的元素占有--浮動定位的元素脫離了文檔流

註意：浮動定位的元素也脫離了文檔流

清除浮動：讓浮動的元素再次回到文檔流中，重新擁有物理空間，清除浮動的步驟

1.在最後一個浮動元素的後面添加一個空div

2.給空div設置clear樣式，值是left/right/both，left是清除左邊的浮動元素 right清除向右浮動元素 both是清除兩邊的浮動元素

14.CSS的盒子模型

（1）內邊距padding：

左內邊距，即內容到左邊框的距離

padding-left:20px ;

右內邊距，即內容到右邊框的距離

padding-right:20px ;

上內邊距，即內容到上邊框的距離

padding-top:40px ;

下內邊距，即內容到下邊框的距離

padding-bottom:40px;

統一設置4個方向的內邊距

padding: 40px;

（2）邊框boder：

設置4個方向的邊框，值：邊框寬度 樣式 顏色 dashed:虛線邊框 solid:實線邊框

border-top:20px solid red;

border-bottom: 20px solid red;

border-left:20px solid red;

border-right: 20px solid red;

統一設置4個方向的邊框

border:10px solid red;

（3）外邊距margin

margin-top:20px;

margin-bottom: 20px;

margin-left:20px;

margin-right: 20px

設置4個方向的外邊距

margin: 20px;

(4)清除默認樣式，充分利用整個body

*{

margin: 0;

padding: 0;

}

(5)塊級元素居中對齊

清除默認樣式，充分利用整個body

*{

margin: 0;

padding: 0;

}

div{

設置塊級元素左右的margin為auto，會自動適應父元素，在水平方向上居中

margin:值1(上下的margin) 值2(左右的margin)

margin:0px auto;

15.CSS3的新知識

（1）設置圓角邊框：border-radius: 20px;

（2）box-shadow：屬性向框添加一個或多個陰影。

註意：擴展：text-shadow添加文字陰影

（3）box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。

標準盒子模型：width和height屬性設置的是內容區的寬高。

怪異盒子模型：width和height屬性設置的是內容區、內邊距和邊框的寬高。

常見的怪異盒子標簽：input[type=‘submit‘]和input[type=‘reset‘]。

（4）CSS3的過度

通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。

transition: property duration timing-function delay;

實例：將鼠標懸停在一個div元素上，實現在3秒內實現盒子的寬度從100px到500px：

.box {
    width: 100px;
    height: 100px;
    
    transition: width 3s ease;
}
.box:hover {
    width: 500px;
}

實例：將鼠標懸停在一個div元素上，實現在4秒內實現盒子的寬度從100px到500px，並且在10秒內改變盒子背景顏色：

 1 .box {
 2      width: 100px;
 3      height: 100px;
 4      
 5      transition: width 4s ease, background-color 10s linear;
 6 }
 7 .box:hover {
 8      width: 500px;
 9      
10 }
11  

精品java學習視頻

正則表達式和文本操作：鏈接：https://pan.baidu.com/s/1f2As51CjLdTNDFQTbg1K6Q 提取碼：98b4

CSS基礎總結