Css基礎總結 常見樣式宣告

2021-10-08 10:25:53 字數 2310 閱讀 2275

1. color

元素內部的文字顏色

預設值:定義好的單詞

三原色,色值:光學三原色(紅、綠、藍),每個顏色可以使用0-255之間的數字來表達,色值。

rgb表示法:

rgb(0, 255, 0)

hex(16進製制)表示法:

#紅綠藍

**紅:#ff4400, #f40

黑色:#000000,#000

白色:#ffffff, #fff

紅:#ff0000, #f00

綠:#00ff00, #0f0

藍:#0000ff, #00f

紫:#f0f

青:#0ff

黃:#ff0

灰色:#ccc

2. background-color

元素背景顏色

3. font-size

元素內部文字的尺寸大小

1)px:畫素,絕對單位,簡單的理解為文字的高度佔多少個畫素

2)em:相對單位,相對于父元素的字型大小

每個元素必須有字型大小,如果沒有宣告,則直接使用父元素的字型大小,如果沒有父元素(html),則使用基準字型大小。

user agent,ua,使用者**(瀏覽器)

4. font-weight

文字粗細程度,可以取值數字,可以取值為預設值

strong,預設加粗。

5. font-family

文字型別

必須使用者計算機中存在的字型才會有效。

使用多個字型,以匹配不同環境

sans-serif,非襯線字型

襯線字型 列印好看

非襯線字型 sans-serif 顯示好看

6. font-style

字型樣式,通常用它設定斜體

i元素,em元素,預設樣式,是傾斜字型; 實際使用中,通常用它表示乙個圖示(icon)

7. text-decoration

文字修飾,給文字加線。

a元素

del元素:錯誤的內容

s元素:過期的內容

8. text-indent

首行文字縮排

9. line-height

每行文字的高度,該值越大,每行文字的距離越大。

設定行高為容器的高度,可以讓單行文字垂直居中

行高可以設定為純數字,表示相對於當前元素的字型大小 ▲

10. width

寬度11. height

高度12. letter-space

文字間隙

13. text-align

① 元素內部文字的水平居中排列方式

② 行盒、行塊盒 居中

透明度

1.) opacity,它設定的是整個元素的透明,它的取值是0 ~ 1

2.) 在顏色位置設定alpha通道(rgba )

3.)hex

2.滑鼠

使用cursor設定

盒子隱藏

display:none,不生成盒子

visibility:hidden,生成盒子,只是從視覺上移除盒子,盒子仍然佔據空間。

4.背景圖

1.)和img元素的區別

img元素是屬於html的概念

背景圖屬於css的概念

當屬於網頁內容時,必須使用img元素

當僅用於美化頁面時,必須使用背景圖

2.)涉及的css屬性

① background-image

② background-repeat

預設情況下,背景圖會在橫座標和縱座標中進行重複

③ background-size

預設值:contain、cover,類似於object-fit

數值或百分比

④ background-position

設定背景圖的位置

預設值:left、bottom、right、top、center

數值或百分比

雪碧圖(精靈圖)(spirit)

⑤ background-attachment

通常用它控制背景圖是否固定

learning form 渡一

常見樣式宣告

color 元素內部的文字顏色 預設值 定義好的單詞 三原色,色值 光學三原色 紅 綠 藍 每種顏色可以使用0 255之間的數字來表達,色值。rgb表示法 rgb 0,255,0 hex 16進製制 表示法 紅綠藍常見色 紅 ff4400 f40 黑色 000000 000 白色 ffffff ff...

css基礎樣式總結

顏色 單位color 設定文字顏色 text align 設定文字對齊方式 letter spacing 字間距 字母間距 word spacing 單詞間距,有空格就設定,中文看空格.line height 行高 第二行的行高 第一行底部到第三行頂部 text indent 一般30px就2個 t...

2 常見樣式宣告

color 元素內部的文字顏色 預設值 定義好的單詞 數量有限 三原色 光學三原色 紅 綠 藍 每個顏色可以使用0 255之間的數字表達他的色值 rgb n,n,n hex 16進製制 紅綠藍 各兩位 rgb的三個n分別代表紅 綠 藍的色值 紅 ff4400,f4o 三個數字個位十位都相同,可以簡寫...