CSS基礎總結

2022-08-31 21:00:11 字數 2429 閱讀 3943

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選擇器次數相同情況下,再比較類選擇器的次數,誰的類選擇器的次數多,誰的優先順序高

背景屬性

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

技巧:設定背景水平和豎直方向都居中

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

html,body

(5)塊級元素居中對齊

清除預設樣式,充分利用整個body

*div

.box:hover

例項:將滑鼠懸停在乙個div元素上,實現在4秒內實現盒子的寬度從100px到500px,並且在10秒內改變盒子背景顏色:

1

.box

7.box:hover

11

CSS基礎總結

css cascading style sheets 層疊樣式表 用來為結構化文件 如html文件或xml應用 新增樣式 字型 間距和顏色等 css不能單獨使用,必須與html或xml一起協同工作,為html或xml起裝飾作用。rel stylesheet type text css href te...

CSS基礎學習總結

1.標準文件流 2.塊級標籤和行級標籤 塊級標籤 div form p h1等 行級標籤 span strong input img等 strong 文字加粗 塊級標籤和行級標籤都是盒子模型 3.盒子模型 都有的屬性border margin pading content 四個值 上右下左,順時針方...

css基礎總結(上)

1.css 規則由兩個主要的部分構成 選擇器 以及一條或多條宣告。例如 2.如果值為若干單詞,則要給值加引號 p 3.多重宣告 p 注意,乙個屬性的宣告結束後,加分號,分號進表示分割符號,而不是結束符號 好處 當你從現有的規則中增減宣告時,會盡可能地減少出錯的可能性 每行最好只有乙個屬性,增加樣式定...