HTML總結(jié)

css字體樣式

? ? ? ? 字體大小:font-size

? ? ? ? ? 網(wǎng)頁默認(rèn)大小為16px

? ? ? ? ? 正常網(wǎng)頁支持大小為16px

? ? ? ? ? px 像素,像素是一個相對單位绵估,相對于分辨率

? ? ? ? ? 字體大小集币,絕大數(shù)是以高為準(zhǔn)。

? ? ? ? 字體類型:默認(rèn)為微軟雅黑

? ? ? ? ? ? ? ? ? ? ? ? 常見的字體泌射,宋體粘姜,微軟雅黑

? ? ? ? ? ? ? ? ? ? ? 1. 常見用法 font-family: 字體1,字體2?

? ? ? ? ? ? ? ? ? ? ? ? 2.? 如果字體名字是多個單詞組成熔酷,加引號孤紧。


? ? ? ? ? 字體加粗:font-weight:? (bold 加粗)

? ? ? ? ? ? ? ? 看情況:字體有無? -> (lighter 細(xì)體)(bolder 更粗)


? ? ? ? ? ? 字體傾斜:font-style:italic;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? normal18:05 2018/9/5 星期三

? ? ? ? ? ? ? 字體顏色:

? ? ? ? ? ? ? ? ? ? ? ? ? color:

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1拒秘、單詞

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2号显、16進(jìn)制表示法 0-9A-F

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? #00? 00? 00

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? r? ? ? g? ? b

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.? ? ? 如果三組都是成對相同,可以省略一位

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 4躺酒、css3出現(xiàn)了 rgba(255押蚤,25,25羹应,0-1)a為透明度

css文本樣式

? ? ? ? ? ? ? ? ? 文本對齊? ? text-align:center? 居中揽碘。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? left 默認(rèn)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? right

? ? ? ? justify? 兩端對齊

? ? ? ? ? ? ? ? ? 文本行高? ? line-height? ? 寫單位


? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文本的的垂直水平居中

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-align:center

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? line-height:外層文本高度 垂直


? ? ? ? ? ? ? ? ? 文本縮進(jìn):

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-indent: 一個字體大小

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? em? 相對單位

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1 em=1*一個字體的大小,如果自己沒有字體大小,會繼承父級的字體大小


? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 關(guān)于logo

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 寫css樣式縮進(jìn)-9999 讓文字飛出去? ? ? ? 當(dāng)所有的css? js 加載不出來時

? ? ? ? ? ? ? ? ? ? 下劃線:

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-decoration:underline雳刺;

? ? ? ? ? ? ? ? ? ? 上劃線:

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-decoration:overline劫灶;

? ? ? ? ? ? ? ? ? ? 中劃線:

? ? ? ? ? ? ? ? ? ? ? ? ? ? text-decoration:line-thoungt

? ? ? ? ? ? ? ? ? ? ? 不要線:

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-decoraton:none

css背景樣式


? ? ? ? ? ? ? ? ? ? ? background

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background-color:背景色

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background-image:url( 地址)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background-repeat:no-repeat;平鋪

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? repeat-x掖桦;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? repeat-y浑此;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background-position:x軸? y軸

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1、? left center right top bottom

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2滞详、px

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3凛俱、%? 相對單位? 相對父級

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 50%? 50%居中

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size:100px? 100px

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖片? 寬? ? 高

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? contain? 優(yōu)先占滿寬度

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cover? ? 優(yōu)先沾滿高度

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 關(guān)于簡寫 :backgrond url()重復(fù)? 定位?

? ? ? ? ? ? ? ? ? 【雪碧軸的使用方法】用絕對定位 background-position 用ps量它的位置!料饥!

css邊框

? ? ? ? ? ? ? ? ? ? ? ? border: border-witgh 邊框大小

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? border-color 邊框顏色? transparent? ? 透明色

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? border- style 邊框樣式


圓角

? ? ? ? ? ? ? ? ? ? border-radiuo:50%? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?


盒子模型

? ? ? ? ? ? ? ? ? ? ? 盒子的大小=內(nèi)容大衅讶(寬高)+邊框+padding

? ? ? ? ? ? ? ? ? ? ? ? margin? 外邊距

? ? ? ? ? ? ? ? ? ? ? ? padding? 內(nèi)邊距? 填充

? ? ? ? ? ? ? ? ? ? 塊級標(biāo)簽和行內(nèi)標(biāo)簽居中:margin: 0 auto

? ? ? ? ? ? ? ? ? 行內(nèi)標(biāo)簽水平居中? text-align:center

? ? ? ? ? ? ? ? ? ? ? 行內(nèi)元素豎直居中:display:table-cell? 注:將一個行內(nèi)元素轉(zhuǎn)化為表格元素

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? vertical-align:middle

? ? ? ? ? ? ? ? ? ? ? ? 圖片文本的對齊:

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市岸啡,隨后出現(xiàn)的幾起案子原叮,更是在濱河造成了極大的恐慌,老刑警劉巖巡蘸,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件奋隶,死亡現(xiàn)場離奇詭異,居然都是意外死亡悦荒,警方通過查閱死者的電腦和手機(jī)唯欣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來搬味,“玉大人境氢,你說我怎么就攤上這事∨鑫常” “怎么了萍聊?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長悦析。 經(jīng)常有香客問我寿桨,道長,這世上最難降的妖魔是什么强戴? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任亭螟,我火速辦了婚禮,結(jié)果婚禮上酌泰,老公的妹妹穿的比我還像新娘媒佣。我一直安慰自己匕累,他們只是感情好陵刹,可當(dāng)我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般衰琐。 火紅的嫁衣襯著肌膚如雪也糊。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天羡宙,我揣著相機(jī)與錄音狸剃,去河邊找鬼。 笑死狗热,一個胖子當(dāng)著我的面吹牛钞馁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播匿刮,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼僧凰,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了熟丸?” 一聲冷哼從身側(cè)響起训措,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎光羞,沒想到半個月后绩鸣,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡纱兑,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年呀闻,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片潜慎。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡总珠,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出勘纯,到底是詐尸還是另有隱情局服,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布驳遵,位于F島的核電站淫奔,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏堤结。R本人自食惡果不足惜唆迁,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望竞穷。 院中可真熱鬧唐责,春花似錦、人聲如沸瘾带。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至朴恳,卻和暖如春抄罕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背于颖。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工呆贿, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人森渐。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓做入,卻偏偏與公主長得像,于是被迫代替她去往敵國和親同衣。 傳聞我的和親對象是個殘疾皇子母蛛,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,514評論 2 348

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