前端Day9

CSS顏色表示

1.RGB顏色表示法:

color:rgb(紅色俯萎,綠色借嗽,藍色)

可以用數(shù)字,也可以用百分數(shù)

2.十六進制表示法:

color:#十六進制數(shù)


CSS長度單位

相對長度單位:


px:像素點,像素就是顯示器的一個點剔猿;


em:1em等于當前字體大小,比如嬉荆,當前字體大小為16px归敬,1em=16px。



css字體樣式屬性

1.font-size:字號大小

推薦使用像素單位;


可選參數(shù)值:xx-large汪茧,x-small椅亚,small,medium舱污,large呀舔,x-large,xx-large扩灯,smaller媚赖,larger


一般頁面字體大小:12px珠插,14px



2.font-family:字體


屬性值可由英文惧磺,中文組成,但若字體名有中文或空格捻撑,則應用括號括起來磨隘;


一般可有幾個值,若瀏覽器找不到前面的字體布讹,則嘗試下一個琳拭,直到找到合適的字體;


盡量使用默認字體描验,保證任何用戶瀏覽器中都能正確顯示白嘁;


用瀏覽器中的escape()函數(shù)可把中文字符轉(zhuǎn)換成UFT-8編碼。


設置字體系列:

襯線體:有修飾膘流,讓字體變美觀(serif)絮缅;

非襯線體:無修飾(sans-serif);

前面的字體查找失敗后呼股,在系統(tǒng)中找一種sans-serif作為默認字體耕魄,只能放在最后,若放在前面彭谁,則字體失效吸奴。


3.font-weight:字體粗細


html標簽:<b> </b>

屬性值:normal(正常)、bold(加粗)缠局、bolder则奥,lighter搔课,100~900(100的整數(shù)倍)删铃、有繼承性

400:normal

700:bold

推薦使用數(shù)字,無單位猜惋。


font-style:字體風格

屬性值:

normal:默認值唱矛,顯示標準字體樣式罚舱;

italic:使用斜體的字體樣式顯示井辜,若字體本身沒有,那么正常顯示管闷;

oblique:讓文字傾斜顯示粥脚;


字體合寫樣式:font:字體樣式? 字體設置加粗? 字體大小/行高? 字體類型

不需要設置的屬性可以忽略(取默認值),但必須保留font-size和font-family屬性渐北,否則合寫將不起作用阿逃。


CSS文本外觀屬性

1.color:文本顏色

預定義顏色值:red铭拧,blue赃蛛,pink等;

十六進制:如#FF0000搀菩、#FF6600呕臂;十六進制是最常用的方式;

RGB代碼:rgb(255,0,0)或rgb(100%肪跋,0%歧蒋,0%);若使用顏色百分比顏色值州既,取值為0時也不能省略百分號谜洽;


2.letter-spaceing:字間距,字符與字符之間的距離

允許使用負值吴叶,默認normal阐虚;


3.word-spacing:單詞間距,對中文無效

如果中文字之間有空格的話蚌卤,會把空格設置成20px寬度实束;


CSS控制按鈕文本


1.line-height:行高,控制文本垂直方向居中


若屬性值與標簽高度一致逊彭,則可以設置文本居中咸灿。


2.text-align:控制文本水平方向居中


屬性值:center,left侮叮,right


3.text-decoration:文本裝飾


屬性值為:


none:沒有裝飾避矢;


underline:下劃線;


overline:上劃線囊榜;


line-through:刪除線审胸。



4.text-indent:首行縮進


text-indent屬性用于設置段落首行文本的縮進,只能設置于塊級標簽锦聊。其屬性值可為不同單位的數(shù)值歹嘹、em字符寬度的倍數(shù)、或相對于瀏覽器窗口寬度的百分比%孔庭,允許使用負值尺上,建議使用em作為設置單位材蛛。


5.white-space:空白符的顯示

normal:正常的顯示,如果寬度不夠進行折行顯示怎抛。

nowrap:即使超過盒子的寬度卑吭,文本也不進行換行顯示。

pre:寫html代碼的時候是什么樣式的马绝,顯示就顯示成什么樣的豆赏。


6.word-break:自動換行

normal:不打斷單詞;

break-all:可以把一個單詞放在兩行中富稻,充分利用空間掷邦;

keep-all:只能在半角空格或連字符處換行。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末椭赋,一起剝皮案震驚了整個濱河市抚岗,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌哪怔,老刑警劉巖宣蔚,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異认境,居然都是意外死亡胚委,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進店門叉信,熙熙樓的掌柜王于貴愁眉苦臉地迎上來亩冬,“玉大人,你說我怎么就攤上這事茉盏〖矗” “怎么了?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵鸠姨,是天一觀的道長铜秆。 經(jīng)常有香客問我,道長讶迁,這世上最難降的妖魔是什么连茧? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮巍糯,結(jié)果婚禮上啸驯,老公的妹妹穿的比我還像新娘。我一直安慰自己祟峦,他們只是感情好罚斗,可當我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著宅楞,像睡著了一般针姿。 火紅的嫁衣襯著肌膚如雪袱吆。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天距淫,我揣著相機與錄音绞绒,去河邊找鬼。 笑死榕暇,一個胖子當著我的面吹牛蓬衡,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播彤枢,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼狰晚,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了堂污?” 一聲冷哼從身側(cè)響起家肯,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤龄砰,失蹤者是張志新(化名)和其女友劉穎盟猖,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體换棚,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡式镐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了固蚤。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片娘汞。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖夕玩,靈堂內(nèi)的尸體忽然破棺而出你弦,到底是詐尸還是另有隱情,我是刑警寧澤燎孟,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布禽作,位于F島的核電站,受9級特大地震影響揩页,放射性物質(zhì)發(fā)生泄漏旷偿。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一爆侣、第九天 我趴在偏房一處隱蔽的房頂上張望萍程。 院中可真熱鬧,春花似錦兔仰、人聲如沸茫负。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽忍法。三九已至置吓,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間缔赠,已是汗流浹背衍锚。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留嗤堰,地道東北人戴质。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像踢匣,于是被迫代替她去往敵國和親告匠。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,969評論 2 355

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案离唬? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,754評論 1 92
  • 學習CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,060評論 0 1
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素后专;行內(nèi)(內(nèi)聯(lián)、inline-level)元素输莺。 塊元素的...
    饑人谷_小侯閱讀 2,006評論 1 4
  • 本文為閱讀《Head First HTML 與 CSS》的css部分的讀書筆記戚哎,方便回顧書上的知識,另一篇為Hea...
    兼續(xù)閱讀 1,829評論 0 17
  • 感恩滴滴打車軟件嫂用,能快捷叫車型凳,我一邊吃早飯,一邊約車嘱函,不用等時間甘畅,下樓車剛好到,平安順利的把我送到高鐵站往弓。提前半個...
    麗日風清閱讀 173評論 0 0