前端學習Day5

2021-10-04 04:37:10 字數 2749 閱讀 7386

一.選擇符的權重:

id > class > 標籤

四個數字表示權重:

1.內聯樣式表 -> 1000

2.id -> 100

3.class -> 10

4.標籤 -> 1

5.偽類選擇符 -> 10

6.萬用字元 -> 0

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

eg : #box div{} 權重: 100 + 1 == 101

.wrap .con p{} 權重:10 + 10 + 1 == 21

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

9. !important 權重是最高的(加在屬性上的)

二.css的層疊性(權重 )

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

0: !important 最重要的樣式

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

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

2:選擇符的權重: id > class/偽類 > 標籤

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

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

三.css文字屬性

css的語法:選擇符

css屬性:width\height\background\color\border…

css的屬性值:常規屬性值、法定屬性值。

常規屬性值:100px\200px\300px

法定屬性值:官方指定乙個單詞,具有某種意義。

文字屬性:

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

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

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

c:pc端專案,設定最小盡量別低於12px(用ps量文字高度)

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);a指透明,a=0.5即為半透明,a=1即為不透明。

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:如果子元素新增浮動,寬度大於父元素的時候,後面的元素被擠到下一行。

WEB前端學習日誌Day5

選擇符的權重 id class 標籤 首先通過四個數字表示權重 內聯樣式表 1000 id 100 class 10 標籤 1 偽類選擇符 10 萬用字元 0 當 現包含選擇符的多個class或是其自身的id時,權重之和越高權重越大。例 box div 100 1 101 wrap con p 10...

java學習筆記day5

面向過程 強調的是功能行為 物件導向 將功能封裝進物件,強調具備了功能的物件。面向過程 開啟冰箱 儲存進冰箱 關閉冰箱 物件導向 冰箱.開啟 冰箱.儲存 冰箱.關閉 物件導向 3個特徵 封裝 繼承 多型。找物件,建立物件,使用物件。維護物件的關係。類 描述。物件 實體。成員變數和區域性變數 作用範圍...

python學習日誌 day5

json和pickle模組主要用於序列化,有四個方法 dump dumps loads load 1.模組定義 用來從邏輯上組織python 本質上就是以.py結尾的python檔案 檔名test.py對應模組名 test 2.模組匯入方法 import module name import mod...