1. 程式人生 > >CSS基礎總結

CSS基礎總結

line 表達 repeat-x 匹配 attach position 不包含 city 顏色表

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%

html,body {

height: 100%;

}

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

background-position: center center;

1background-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:屬性向框添加一個或多個陰影。

屬性值

描述

h-shadow

必需。水平陰影的位置,允許負值。

v-shadow

必需。垂直陰影的位置,允許負值。

blur

可選。模糊距離。

spread

可選。陰影的尺寸。

color

可選。陰影的顏色。

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

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

屬性值

描述

content-box

設置元素觸發標準盒子模型

border-box

設置元素觸發怪異(IE)盒子模型

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

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

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

4CSS3的過度

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

transition: property duration timing-function delay;

屬性值

描述

property

指定CSS屬性的name,transition效果

duration

transition效果需要指定多少秒或毫秒才能完成

timing-function

指定transition效果的轉速曲線

delay

定義transition效果開始的時候

timing-function取值

描述

linear

規定以相同速度開始至結束的過渡效果

ease

規定慢速開始,然後變快,然後慢速結束的過渡效果

ease-in

規定以慢速開始的過渡效果

ease-out

規定以慢速結束的過渡效果

ease-in-out

規定以慢速開始和結束的過渡效果,中間勻速

實例:將鼠標懸停在一個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基礎總結