前端學習 第五天

2021-10-04 04:47:31 字數 2997 閱讀 7522

第五天知識總結:

一、選擇符的權重:

id > class > 標籤

四個數字表示權重:

內聯樣式表 -> 1000

id -> 100

class -> 10

標籤 -> 1

偽類選擇符 -> 10

萬用字元 -> 0

包含選擇符的權重為權重之和

eg :

#box div{} 100 + 1 == 101

.wrap .con p{} 10 + 10 + 1 == 21

群組選擇符的權重是不會發生變化的,保持原來的權重值。

!important 權重是最高的

二、css的層疊性 -> 權重

產生權重關係,必然體現css的層疊性。

a:!important 最重要的樣式

b:內聯樣式表 > 內部/外部

內部和外部和書寫順序有關,後寫把前寫的覆蓋。

c:選擇符的權重:

id > class/偽類 > 標籤

d:開發者樣式權重 > 讀者(使用者)樣式 > 瀏覽器樣式

e:當權重相同的時候,後寫的樣式會前寫的樣式 給 覆蓋掉

三、文字屬性:

1: font-size:; 控制文字大小

a:為了消除系統之間顯示差異,規定:16px 為標準字型大小。

b:文字大小設定,設定為偶數。

c:pc端專案,設定最小盡量別低於12px ;

d:從ps中獲取文字大小,漢字量取文字高度。

e:文字單位: px \ em \ pt(磅)【常用在印刷領域】

12px == 9pt

em ( 相對大小單位,相對于父元素的font-size值而定 )

(預設情況下, 1em == 16px)

f:(了解)

xx-small =9px

x-small =11px

small =13px

medium =16px

large =19px

x-large =23px

xx-large =27px

2:color:; 控制網頁中的文字顏色

顏色值:

a:十六進製制表示顏色值:

16進製制數字:0 - 9 a - f

顏色值: #ff0000

6個數字:

前兩位 紅色

中間兩位 綠色

最後兩位 藍色

b: rgb(255,0,0) 模式

拓展: rgba(255,0,0,0.5);

3:font-family:;控制的是網頁中字型型別。

預設的字型型別:「微軟雅黑」

系統能支援的字型:web安全字型:微軟雅黑、宋體、楷體…

英文預設的字型:arial

語法:font-family:字型1,字型2,字型3,…

注:a:中文字型必須放在引號裡面

b:如果乙個字型多個單詞組成 也要放在引號裡面

c:如果字型是乙個單詞 不需要引號。

d:先寫英文本型,後寫中文字型。

4:font-weight:;控制文字是否加粗

屬性值:

bold 加粗

bolder 加粗

normal 清除加粗,恢復常規文字

100 - 900

100 - 500:不加粗

600 - 900:加粗的狀態

5: font-style:;控制文字的傾斜

屬性值:

italic 傾斜

oblique 傾斜(傾斜幅度更大,但是一般不會有明顯變化)

normal 恢復常規文字

6: line-height:; 控制文字的行高。

a: 從ps設計圖上:怎麼獲取行高:從第一行開始量到第二行開始。

b:單行文字:

如果讓單行文字在容器裡面上下居中,line-height設定容器高度即可

顯示狀態:

小於容器高度的時候:文字往上移動

大於容器高度的時候:文字往下移動

7:text-align:; 控制文字的水平對齊方式

屬性值:

center 居中對齊

left 左對齊

right 右對齊

justify 兩端對齊

8:text-decoration:; 文字修飾(下劃線、上劃線、刪除線)

屬性值:

none 清除下劃線

underline 新增下劃線

overline 新增上劃線

line-through 新增刪除線

9: text-indent:;

text-indent:2em;首行縮排:

text-indent能設定負值:文字往左走。(懸掛式縮排)

10:字間距、詞間距

letter-spacing:; 字間距

word-spacing:; 詞間距

11: text-transform:; 控制文字大小寫。

屬性值:

uppercase 大寫

lowercase 小寫

capitalize 每個單詞的首字母大寫

四、浮動!

屬性:float

屬性值:

left

right

none

特點:a:新增浮動之後,元素是不佔據空間。

b:如果讓多個元素橫向進行排列,所有的排列的元素,都必須新增浮動。

c:如果子元素新增浮動,寬度大於父元素的時候,後面的元素被擠到下一行。

前端學習第五天

用到方法 相對定位position relative 絕對定位position absolute 記憶 兩個中,left和top是一相對於二中經常用到的,達到重疊的效果 頁面結構 樣式修飾 溢位隱藏轉為滾動 overflow scroll scroll 滾動條 溢位隱藏自動換行 overflow a...

web前端學習 第五天

rgb red green blue 0,10,255 0010fe css中顏色的表示方法 加粗為重點 1 預定義顏色 blue,red,black 2 十六進製制顏色 0f0f0f 3 rgb顏色 128,0,0 全紅 4 rggba,在rgb的基礎上又新增了表示透明度的alpha 5 hsl ...

學習第五天

清楚測試用例是什麼 測試用例的重要性 有效性 測試用例是測試人員測試過程中的重要參考依據,準確的測試用例的計畫 執行和跟蹤是 測試的有效性的有力證明 可復用性 設計良好的測試用例可以重複執行,能節約時間,提高測試效率 易組織性 清晰詳細的測試用例能夠便於測試執行的開展 可評估性 測試用例的通過率是檢...