CSS常見樣式(一)——顏色祈搜,字體缕减,文本庭再,display樣式捞奕,繼承

一、顏色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)換為/,如下圖:
Unicode碼字體獲得方式
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ì)最后一行無效:

justify對(duì)齊
1.2 text-indent首行縮進(jìn)衅枫,常用單位:px嫁艇,em,rem弦撩,百分比步咪。
首行 縮進(jìn)2字
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í)容器必須有指定高度姐仅,heightmax-height或?qū)?code>white-space設(shè)置為nowrap文字遇邊界不折行花枫,只是展示一行。
text-overflow 溢出和隱藏
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ù)生均。
  1. opacity: 0~1;: 透明度,作用于整體腥刹,用的比較少马胧。
  2. visibility:hidden;: 元素可見度,表示該元素透明衔峰,依然占據(jù)位置漓雅。
  3. background-color:rgba(0,0,0,0~1);:表示背景色的透明度录别,a的值為0時(shí)完全透明,數(shù)值越大越不透明邻吞。
  • 隱藏
    display:none; 表示該元素消失组题,不占據(jù)位置也看不見。

六抱冷、css樣式繼承

  • 什么是css樣式繼承
    繼承就是子元素繼承了父元素的CSS樣式的屬性
  • 常用的繼承樣式
  1. 字體:family, size, weight, line-height
  2. 文本:letter-spacing, word-spacing, text-align, text-indent
  3. 列表:list-style-type
  4. 顏色:color, ps: a 標(biāo)簽不能繼承父元素的字體顏色崔列,原因是 a標(biāo)簽有自己默認(rèn)的字體顏色,會(huì)覆蓋繼承父元素字體顏色旺遮。
  • 不能繼承的屬性
  1. display
  2. float
  3. padding和 margin
  4. 背景相關(guān)赵讯,比如顏色和圖片

參考:https://static.xiedaimala.com/xdml/file/f40ceb64-df08-4420-9226-7f76dbff15d5/2019-11-7-15-59-8.pdf

http://www.reibang.com/p/a76ff389245f

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市耿眉,隨后出現(xiàn)的幾起案子边翼,更是在濱河造成了極大的恐慌,老刑警劉巖鸣剪,帶你破解...
    沈念sama閱讀 218,122評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件组底,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡筐骇,警方通過查閱死者的電腦和手機(jī)债鸡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來铛纬,“玉大人厌均,你說我怎么就攤上這事「嫠簦” “怎么了棺弊?”我有些...
    開封第一講書人閱讀 164,491評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)擒悬。 經(jīng)常有香客問我模她,道長(zhǎng),這世上最難降的妖魔是什么茄螃? 我笑而不...
    開封第一講書人閱讀 58,636評(píng)論 1 293
  • 正文 為了忘掉前任缝驳,我火速辦了婚禮连锯,結(jié)果婚禮上归苍,老公的妹妹穿的比我還像新娘。我一直安慰自己运怖,他們只是感情好拼弃,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,676評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著摇展,像睡著了一般吻氧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,541評(píng)論 1 305
  • 那天盯孙,我揣著相機(jī)與錄音鲁森,去河邊找鬼。 笑死振惰,一個(gè)胖子當(dāng)著我的面吹牛歌溉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播骑晶,決...
    沈念sama閱讀 40,292評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼痛垛,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了桶蛔?” 一聲冷哼從身側(cè)響起匙头,我...
    開封第一講書人閱讀 39,211評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎仔雷,沒想到半個(gè)月后蹂析,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,655評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡朽寞,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,846評(píng)論 3 336
  • 正文 我和宋清朗相戀三年识窿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片脑融。...
    茶點(diǎn)故事閱讀 39,965評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡喻频,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出肘迎,到底是詐尸還是另有隱情甥温,我是刑警寧澤,帶...
    沈念sama閱讀 35,684評(píng)論 5 347
  • 正文 年R本政府宣布妓布,位于F島的核電站姻蚓,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏匣沼。R本人自食惡果不足惜狰挡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,295評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望释涛。 院中可真熱鬧加叁,春花似錦、人聲如沸唇撬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽窖认。三九已至豫柬,卻和暖如春告希,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背烧给。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工燕偶, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人础嫡。 一個(gè)月前我還...
    沈念sama閱讀 48,126評(píng)論 3 370
  • 正文 我出身青樓杭跪,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親驰吓。 傳聞我的和親對(duì)象是個(gè)殘疾皇子涧尿,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,914評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容