一、顏色color
- 單詞: red, blue, yellow...
- 十六進(jìn)制:#ff00ff拄轻、#f0f...
- rgb形式:rgb(0, 0, 0) 颅围, r(紅), g(綠), b(藍(lán))可以是數(shù)字,也可以是百分比恨搓,255相當(dāng)于100%院促,數(shù)字1相當(dāng)于100%。
- rgba形式:rgba(0,0,0,0.6),里面的a代表的是透明度斧抱,范圍為0~1常拓,數(shù)值越大越不透明。
- hsl形式:hsl(0, 100%, 50%)辉浦,主要構(gòu)成:色相(0和360是紅弄抬,120是綠,240是藍(lán)) 飽和度(0%灰) 明度(0%是黑)
- hsla形式:同上hsl,后面的a是透明度宪郊。
- 關(guān)鍵詞:透明色 transparent眉睹,currentColor主要用于邊框的顏色,可以和設(shè)置的字體顏色一致废膘,字體顏色改變竹海,他也會(huì)隨之改變。沒有設(shè)置color就會(huì)繼承父親的樣式丐黄。
二斋配、字體font
1. 四個(gè)常見屬性:
1.1 font-size
(大小)
1.2 font-family
(字體類型)
1.3 font-style
(字體風(fēng)格)
1.4 font-weight
(字體粗細(xì))
1.5 line-height
(行高)
1.1 font-size
字體大小,有以下單位:
px
(像素):瀏覽器默認(rèn)的字體大小為16px,Chrome最小字體限制(11px or 12px);-
em
(相對(duì)長(zhǎng)度單位):2em相對(duì)于相對(duì)于父親字體大小的倍數(shù)(如果是非font-size屬性對(duì)應(yīng)的值,則是相對(duì)于當(dāng)前元素的font-size)艰争;主要應(yīng)用于倍增或者遞減坏瞄。
例:設(shè)置每層列表
每層列表字體逐漸減小
PS:除了font-size本身才是相對(duì)于父親的大小,其他的屬性的em都是相對(duì)于自己的font-size大小
rem
: 2rem,是相對(duì)于根元素(html或者:root)字體的倍數(shù),不是相對(duì)于body甩卓;百分比:80%鸠匀,同em相對(duì)于父親字體的大小倍數(shù);
vw, vh
①長(zhǎng)度單位:
1vw=視窗寬度的1%逾柿,100vw表示水平滿屏缀棍;
1vh=視窗高度的1%,100vh表示垂直滿屏机错;
②兼容性:
可以打開這個(gè)網(wǎng)站砍砍:https://caniuse.com/#search=vw
③應(yīng)用:主要實(shí)現(xiàn)移動(dòng)端適配(等比放大或縮信婪丁)
1.2 font-family
①、指定一個(gè)優(yōu)先級(jí)從高到低的可選字體列表弱匪,先找第一個(gè)字體青瀑,找不到再找第二個(gè),依次往后萧诫。斥难。。
②帘饶、字體形狀樣式哑诊,在CSS中,font-family
有三種寫法(微軟雅黑舉例):
- 英文寫法:
font-family: "Microsoft YaHei"
- 中文寫法:
font-family: "微軟雅黑"
- Unicode寫法:
font-family: /5FAE/8F6F/96C5/9ED1
注意:
- 英文寫法中如果有空格以及采用中文寫法的話要加引號(hào)尖奔;
- 盡量采用Unicode碼字體,因?yàn)槿绻绻苯訉懼形那闆r下編碼方式和解碼方式不一致有可能不匹配穷当,導(dǎo)致亂碼提茁;
- 字體的Unicode碼可以在開發(fā)者工具的console里用escape(字體中文)獲得,但是要注意的是馁菜,里面的
%u
要轉(zhuǎn)換為/
,如下圖:
1.2.1 @font-face
:設(shè)置自定義字體
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body {
font-family: "Bitstream Vera Serif Bold", serif;
}
1.3 font-style
字體風(fēng)格: 設(shè)置文字是否以斜體顯示
-
normal
正常 -
italic
斜體 -
oblique
模擬斜體
1.4 font-weight
字體加粗: 設(shè)置字體粗細(xì)
-
normal
正常 -
bold
粗體 -
lighter
比父元素字體細(xì)一級(jí) -
bolder
比父元素字體粗一級(jí) -
100-900
用于微調(diào)字體粗細(xì)
注意:設(shè)置字體的粗細(xì)還取決于字體庫是否存在該粗細(xì)尺寸的字體圖形描述茴扁。
1.5 line-height
字體高度:
- 常用單位是px, em, rem, 百分比;
- 瀏覽器默認(rèn)的字體16px, 最小的字體是12px汪疮。
三峭火、文本text
1. text
是指文本在盒模型中格式表現(xiàn)形式,常用的有以下:
1.1 text-align
(對(duì)齊方式)
1.2 text-indent
(縮進(jìn))
1.3 text-decoration
(設(shè)置字體劃線樣式)
1.4 text-transform
(文本轉(zhuǎn)換器)
1.5 text-shadow
(文本陰影)
1.6 text-overflow
(溢出和隱藏)
1.7 letter-spacing
(字符間距)
1.8 word-spacing
(單詞間距)
1.1 text-align
對(duì)齊方式智嚷,應(yīng)用在塊級(jí)容器上卖丸,對(duì)行內(nèi)內(nèi)容生效。
left
左對(duì)齊right
右對(duì)齊-
center
居中
左對(duì)齊盏道,右對(duì)齊稍浆,居中 justify
文字向兩側(cè)對(duì)齊,字間距有可能會(huì)發(fā)生變化,對(duì)最后一行無效:
1.2 text-indent
首行縮進(jìn)衅枫,常用單位:px嫁艇,em,rem弦撩,百分比步咪。
1.3 text-decoration
設(shè)置字體劃線樣式
-
none
取消 下劃線 -
underlie
設(shè)置下劃線 -
overline
上劃線 -
line-though
中劃線
text-decoration字體劃線
1.4 text-transform
文本轉(zhuǎn)換器 :用于改變字母大小。
-
none
取消轉(zhuǎn)換效果 -
uppercase
轉(zhuǎn)為大寫 -
lowercase
轉(zhuǎn)為小寫 -
capotalize
轉(zhuǎn)為首字母大寫
text-transform文本轉(zhuǎn)換器
1.5 text-shadow
文本陰影
- 主要寫法:
text-shadow
:水平偏移 垂直偏移 模糊半徑 顏色益楼;
text-shadow文本陰影
1.6 text-overflow
溢出和隱藏猾漫,應(yīng)用在塊級(jí)元素上,設(shè)置內(nèi)部文本溢出后的展示樣式偏形。
- 不設(shè)置静袖,默認(rèn)溢出隱藏切斷
-
text-overflow: clip;
溢出隱藏切斷 -
text-overflow: ellipsis;
溢出最后展示...
1.6.1 overflow
內(nèi)容過多設(shè)置
-
overflow: visible;
默認(rèn)值,不修剪俊扭,會(huì)溢出框外队橙。 -
overflow: hidden;
內(nèi)容被修剪,不出現(xiàn)滾動(dòng)條萨惑。 -
overflow: scroll;
隱藏并出現(xiàn)滾動(dòng)條捐康。 -
overflow: anto;
不超出無滾動(dòng)條,超出出現(xiàn)滾動(dòng)條庸蔼。
注意:
-
overflow
可以單獨(dú)設(shè)置水平和垂直方向解总,如:overflow-x: scroll; overflow-y: hidden;
- 使用
overflow
,塊級(jí)容器必須有指定高度姐仅,height
或max-height
或?qū)?code>white-space設(shè)置為nowrap
文字遇邊界不折行花枫,只是展示一行。
1.7掏膏,1.8 letter-spacing
字符間距劳翰,word-spacing
單詞間距
四、display樣式(改變?cè)氐募?jí))
-
display
樣式有三個(gè)常用的值:inline
(行內(nèi))馒疹,block
(塊級(jí))佳簸,inline-block
(行內(nèi)塊級(jí)) -
inline
:設(shè)置元素為行內(nèi)元素 -
block
:設(shè)置元素為塊級(jí)元素 -
inline-block
:設(shè)置元素為行內(nèi)塊級(jí)元素 -
display
其他值還有:table
,table-cell
,table-cell
,table-row
,list-item
,none
,inherit
五、隱藏和透明
- 透明:元素不能被看見颖变,但是位置依然被占據(jù)生均。
-
opacity: 0~1;
: 透明度,作用于整體腥刹,用的比較少马胧。 -
visibility:hidden;
: 元素可見度,表示該元素透明衔峰,依然占據(jù)位置漓雅。 -
background-color:rgba(0,0,0,0~1);
:表示背景色的透明度录别,a的值為0時(shí)完全透明,數(shù)值越大越不透明邻吞。
- 隱藏
display:none;
表示該元素消失组题,不占據(jù)位置也看不見。
六抱冷、css樣式繼承
- 什么是css樣式繼承
繼承就是子元素繼承了父元素的CSS樣式的屬性 - 常用的繼承樣式
- 字體:family, size, weight, line-height
- 文本:letter-spacing, word-spacing, text-align, text-indent
- 列表:list-style-type
- 顏色:color, ps: a 標(biāo)簽不能繼承父元素的字體顏色崔列,原因是 a標(biāo)簽有自己默認(rèn)的字體顏色,會(huì)覆蓋繼承父元素字體顏色旺遮。
- 不能繼承的屬性
- display
- float
- padding和 margin
- 背景相關(guān)赵讯,比如顏色和圖片
參考:https://static.xiedaimala.com/xdml/file/f40ceb64-df08-4420-9226-7f76dbff15d5/2019-11-7-15-59-8.pdf