css基礎學習筆記(二)

2021-07-02 01:47:19 字數 1282 閱讀 4464

一、css背景

背景色p

p (背景色從元素中的文字向外少有延伸,只需增加一些內邊距)

背景影象

body

p.flower

背景重複

body

背景定位

關鍵字(top、bottom、left、right 和 center,通常成對使用,預設為center)

p百分數值(影象中心與其元素的中心對齊。換句話說,百分數值同時應用於元素和影象)

body

長度值(影象的左上角與 background-position 宣告中的指定的點對齊,而不是中心對齊)

body

背景關聯

body

二、css文字

p (縮排文字)

p 使用百分比縮排,百分數要相對於縮排元素父元素的寬度

div

p this is a paragragh

水平對齊

text-align:center (left、right )

屬性justify(兩端對齊)

字間隔word-spacing(可以為正值和負值)

letter-spacing (字母間隔,可以為正值和負值)

p.spread

p.tight

字元轉換

text-transform(值none, uppercase ,lowercase, capitalize)處理文字的大小寫

h1 文字裝飾

text-decoration (none, underline ,overline ,line-through, blink)

三、css字型

指定字型系列 font-family

當字型名中有乙個或多個空格(比如 new york),或者如果字型名包括 # 或 $ 之類的符號,需要在 font-family 宣告中加引號。

body

字型風格  font-style

normal - 文字正常顯示

italic - 文字斜體顯示

oblique - 文字傾斜顯示

p.italic

字型加粗  font-weight

關鍵字 100 ~ 900 為字型指定了 9 級加粗度。700 等價於 bold

p.thick

p.thicker

字型大小  font-size

使用 em 來設定字型大小,1em 就等於 16 畫素

body

h1 h2 



CSS 基礎筆記(二)

一 浮動 css的浮動是乙個非常有用的工具,我們可以通過使用float屬性設定浮動的方向 float left float right 設定過浮動的元素會自動聚攏,關於浮動,推薦一篇寫的很詳細的部落格 二 css框模型 元素框的最內部分是實際內容,padding 屬性定義元素的內邊距 腎7plus ...

CSS基礎筆記(二)

下表是對這些選擇器的簡單總結 型別描述 abc def 選擇 abc 屬性值以 def 開頭的所有元素 abc def 選擇 abc 屬性值以 def 結尾的所有元素 abc def 選擇 abc 屬性值中包含子串 def 的所有元素 可以想到,這些選擇有很多用途。a href w3school.c...

CSS基礎學習(二)

字型 顏色,通過color屬性來指定,合法的顏色表示都可以。字型種類 通過屬性font family來指定。同時還可以引入web字型,也就是非本地的字型,web字型可以提供更多樣的文字,具體方法為 font face p字型大小 通過屬性font size設定,常用的單位是px和em。字型樣式 fo...