CSS總結 第2章 CSS樣式

2021-10-11 09:21:20 字數 3011 閱讀 9351

屬性

含義屬性值

font-size

大小(預設:inherited,繼承父級大小)(畫素:px、百分比:%、倍數:em)(小:small、大:large、正常:medium)

font-weight

粗細(預設:normal、普通)(粗體:bold、有強調的意思、粗細700)(自定義:100-900)

font-family

字型(格式:「宋體」,「arial」;)新增多種字型,用逗號隔開、防止一些使用者沒有第一種字型,就會顯示第二種字型

font-style

樣式(預設:normal)(有斜體的字型設定斜體:italic)(所以字型斜體:oblique)

color

顏色三種樣式:(名稱:red)(16進製制的rgb值:#rrggbb)(rgba函式:rgba(255,0,0,0.5))紅,綠,藍,透明度

font

復合基本寫法:(style weight size family)必要寫法:(size family)

屬性含義

屬性值background-color

背景顏色

和文字樣式的三種寫法一樣

background-image

背景(路徑:url(路徑))

background-repeat

背景平鋪方式

(預設:repeat,平鋪滿)(水平平鋪:repeat-x)(垂直平鋪:repeat-y)(不平鋪:no-repeat)

background-position

背景位置

座標:(x y)、數字:(px/%)、水平:(left/center/right)左/中/右、垂直(top/bottom)上/下

background-attachment

背景圖隨滾動條的移動方式

(按元素進行偏移(預設):scroll)(按瀏覽器進行偏移:fixed)

background

復合基本寫法:(color image repeat position)

屬性含義

屬性值text-align

對齊方式

(預設左對齊:left)(居中:center)(右對齊:right)(兩端對齊:justify)

line-height

行高(預設:不是固定值,根據當前字型的大小變化)(數字:px或scale[相對於原來字型的比例])

text-indent

首行縮排

縮排:font-size的兩倍,或2em[em相對單位],永遠跟乙個字型設定的大小相同

text-decoration

文字裝飾

(預設:none)(下劃線:underline)(刪除線:line-through)(上劃線:overline)

text-transform

文字大小寫

針對英文(小寫:lowercase)(大寫:uppercase)(首字母大寫:capitalize)

letter-spacing

字間距word-spacing

詞間距針對英文

word-break

非常強烈的折行

break-all

word-wrap

不是那麼強烈的折行

break-word

direction

內聯內容方向

(左往右:ltr 表示:left-to-right) (右往左:rtl 表示:right-to-left)

writing-mode

文字排版方式

(預設值:horizontal-tb 表示:水平-top-bottom) (垂直,左至右:vertical-lr) (垂直,右至左:vertical-rl)

text-stroke

文字描邊

(描邊寬度:text-stroke-width) (描邊顏色:text-stroke-color)

z-index

堆疊順序

數字,數字越大,就處於越頂層

屬性含義

屬性值border-width

邊框大小

(畫素:px)(倍數:em)

border-color

邊框顏色

和文字樣式的三種寫法一樣

border-radius

圓角邊框

(畫素:px)(百分比:%)

border-style

邊框樣式

(預設,實線:solid)(虛線:dashed)(點線:dotted)

border-collapse

合併**邊框

(預設,分開:separated)(合併:collapse)

-單獨選擇一邊

(上:border-top)(右:border-right)(下:border-bottom)(左:border-left)

border

復合樣式

基本寫法:(大小,樣式,顏色)

● 層疊性

- 後來居上:後面的會替代前面的樣式

● 繼承性

- 子承父業:繼承父元素的某些樣式

屬性含義

屬性值display

元素顯示型別

(塊級元素:block)(行內元素:inline)(行內塊元素:inline-block)(不佔空間隱藏:none)

-塊級元素

block

-行內元素

inline

-行內塊元素

inline-block

-不佔空間隱藏

none

visibility

元素顯示和隱藏

(預設,顯示:visible)(佔空間隱藏:hidden)

css樣式總結

一 浮動及清除 1.float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象,使文字圍繞在影象周圍,在 css 中,任何元素都可以浮動。浮動元素會生成乙個塊級框。值描述 left 元素向左浮動 right 元素向右浮動 none 不浮動 預設 inherit 繼承父類的float屬性 2.浮...

css樣式總結

1.div在div中上下居中 父元素 display flex align item center 2.flex布局 display flex flex wrap wrap justify content space between 3.文字劃線 text decoration none 沒有 bl...

css樣式總結

web前端開發css基礎樣式總結 顏色和單位的使用 顏色用顏色的名字表示顏色,比如 red 用16進製表示演示 比如 ff0000 用rgb數值表示顏色,rgb 紅,綠,藍 每個值都在0 255之間 一般都用16進製表示顏色 單位px 畫素,與解析度設定相關.相對於瀏覽器的百分之多少,可以對寬度wi...