小白H5成長之路5:CSS需要全學么徐块?

“小白,CSS樣式看的怎么樣了灾而?”第二天老朱找到小白問道胡控。

小白郁悶的說道:“過了一遍,不過CSS樣式太多了旁趟,看的有點暈昼激。”

“嗯锡搜,過一遍就可以了橙困,我來跟你說一下CSS怎么用吧!你還是打開昨天的文檔余爆》子睿”

“打開了!”

“好的蛾方!CSS樣式最常見的就是控制一個容器(div像捶、p、span桩砰、li等這些都是容器)的文字樣式拓春、高寬度、背景亚隅、間距硼莽、邊框等,比如width:100px就代表這個容器的寬度是100個像素煮纵。寫CSS樣式的時候你可以直接寫到容器的style屬性上懂鸵。”

“朱哥行疏,我打斷一下匆光,什么事容器的屬性呢?”

“你學過面向?qū)ο缶幊堂茨鹆咳绻麑W過你應該知道對象吧终息!在html標簽里面夺巩,每個標簽都是一個對象,而對象都有他們自己的屬性周崭、事件和方法柳譬,在你之前做的那個最基礎的頁面里面,id就是div的一個屬性续镇,至于事件和方法我們以后再說美澳,你現(xiàn)在可以嘗試的往div上面添加一個style屬性∶剑”

“是這個樣子么人柿?”

“嗯,是的忙厌,你太棒了凫岖,另外跟你說個小知識點,style是容器的默認屬性逢净,有時候我們?yōu)榱朔奖憧刂聘绶牛赡軙o容器添加一些自定義的屬性,比如xiaobai='菜鳥'爹土,哈哈甥雕,開個玩笑!你先在先給div容器里面加點文字內(nèi)容胀茵,然后我告你幾個常用的css用法社露!”

“好了,加上了”琼娘。

“OK峭弟,現(xiàn)在我告你幾個CSS里面常用的樣式控制,你目前只需要記住這幾個樣式就可以足夠你完成絕大多數(shù)網(wǎng)頁布局了脱拼。第一個就是容器的高度(width)和寬度(weight)瞒瘸,我習慣給他們像素值,比如style="width:200px;height:100px;"熄浓,通過width和height就可以改變?nèi)萜鞯母叨群蛯挾惹槌簦叨群蛯挾韧ǔG闆r下只對塊級容器起作用!”

“那什么是塊級容器呢赌蔑?”

“網(wǎng)頁里面最常見的兩種容器一種是塊級元素一種是行內(nèi)元素俯在,哦對了!很多人都叫div啊p啊這也標簽塊級元素娃惯,可是我習慣稱它們?yōu)槿萜骰蛘邏K級容器跷乐。這個看個人喜好,我只是覺得容器更能體現(xiàn)他們含義石景,或者更容易通過對象的方式來理解它劈猿。回歸正題潮孽,塊級容器前后有換行符揪荣,用白話講就是每個塊級容器在頁面里面默認顯示的時候它的左右不能有其他元素,舉個簡單的例子你可以把每個元素看作一個word中的文字往史,如果文字前后都有換行符是不是這個樣子的仗颈?”

“還有一種就是行內(nèi)元素,這個更容易理解椎例,行內(nèi)元素就是前后沒有換行符挨决,比如span就是行內(nèi)元素。關于行內(nèi)元素和塊級元素我們后面會詳細分析他們的原理订歪,這個你有個大概印象就可以了〔逼恚現(xiàn)在我們繼續(xù)說CSS吧!下一個要記住的就是文字樣式的幾個控制刷晋,他們分別是文字的顏色(color)盖高、大小(font-size)、加粗(font-weight)眼虱、行距(line-height)喻奥,比如讓你文本顏色為紅色(color:#f00)、大小是14px(font-size:14px;)捏悬、加粗(font-weight:bold;)撞蚕、行距(line-height:30px;)就是下面的效果」溃”

“下一個要理解的是邊框(border)甥厦,邊框?qū)乃膫€拓展就是上邊框、右邊框寇钉、下邊框矫渔、左邊框,邊框常用的屬性分別是邊框的寬度摧莽、顏色庙洼、樣式(實線、虛線镊辕、雙實線等等)油够,比如讓一個div的左邊框?qū)挾?像素,顏色藍色征懈,實線(border-left:#0000ff 6px solid;)”石咬。

"今天最后一個是容器的內(nèi)邊距(padding)和外邊距(margin),他們也是各有上下左右四個擴展卖哎,外邊距就是容器外面的距離鬼悠,比如你是一個容器删性,我是一個容器,咱倆的距離就是外邊距焕窝。內(nèi)邊距可以看作你的表皮的厚度蹬挺。更簡單點就是一個箱子我們從外表看他并不知道它能裝多少東西,只有知道他的厚度才能了解它掂。內(nèi)邊距通俗理解就是厚度巴帮。"

“好了就我今天說的這四個方面的css樣式,你自己看書或者去網(wǎng)上看他們的用法虐秋,自己練習練習榕茧,你應該可以完成這樣一個頁面布局,明天我看你的代碼~~”


想學H5的朋友可以關注老爐客给,您的關注是我持續(xù)更新《小白H5成長之路》的動力用押!

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市靶剑,隨后出現(xiàn)的幾起案子只恨,更是在濱河造成了極大的恐慌,老刑警劉巖抬虽,帶你破解...
    沈念sama閱讀 223,207評論 6 521
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件官觅,死亡現(xiàn)場離奇詭異,居然都是意外死亡阐污,警方通過查閱死者的電腦和手機休涤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,455評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來笛辟,“玉大人功氨,你說我怎么就攤上這事∈执保” “怎么了捷凄?”我有些...
    開封第一講書人閱讀 170,031評論 0 366
  • 文/不壞的土叔 我叫張陵,是天一觀的道長围来。 經(jīng)常有香客問我跺涤,道長,這世上最難降的妖魔是什么监透? 我笑而不...
    開封第一講書人閱讀 60,334評論 1 300
  • 正文 為了忘掉前任桶错,我火速辦了婚禮,結果婚禮上胀蛮,老公的妹妹穿的比我還像新娘院刁。我一直安慰自己,他們只是感情好粪狼,可當我...
    茶點故事閱讀 69,322評論 6 398
  • 文/花漫 我一把揭開白布退腥。 她就那樣靜靜地躺著任岸,像睡著了一般。 火紅的嫁衣襯著肌膚如雪狡刘。 梳的紋絲不亂的頭發(fā)上享潜,一...
    開封第一講書人閱讀 52,895評論 1 314
  • 那天,我揣著相機與錄音颓帝,去河邊找鬼。 笑死窝革,一個胖子當著我的面吹牛购城,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播虐译,決...
    沈念sama閱讀 41,300評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼瘪板,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了漆诽?” 一聲冷哼從身側響起侮攀,我...
    開封第一講書人閱讀 40,264評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎厢拭,沒想到半個月后兰英,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,784評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡供鸠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,870評論 3 343
  • 正文 我和宋清朗相戀三年畦贸,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片楞捂。...
    茶點故事閱讀 40,989評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡薄坏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出寨闹,到底是詐尸還是另有隱情胶坠,我是刑警寧澤,帶...
    沈念sama閱讀 36,649評論 5 351
  • 正文 年R本政府宣布繁堡,位于F島的核電站沈善,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏椭蹄。R本人自食惡果不足惜矮瘟,卻給世界環(huán)境...
    茶點故事閱讀 42,331評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望塑娇。 院中可真熱鬧澈侠,春花似錦、人聲如沸埋酬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,814評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至拳球,卻和暖如春审姓,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背祝峻。 一陣腳步聲響...
    開封第一講書人閱讀 33,940評論 1 275
  • 我被黑心中介騙來泰國打工魔吐, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人莱找。 一個月前我還...
    沈念sama閱讀 49,452評論 3 379
  • 正文 我出身青樓酬姆,卻偏偏與公主長得像,于是被迫代替她去往敵國和親奥溺。 傳聞我的和親對象是個殘疾皇子辞色,可洞房花燭夜當晚...
    茶點故事閱讀 45,995評論 2 361

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,762評論 1 92
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素浮定;行內(nèi)(內(nèi)聯(lián)相满、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,017評論 1 4
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表桦卒,主要用...
    寥寥十一閱讀 1,839評論 0 6
  • 本文主要是起筆記的作用立美,內(nèi)容來自慕課網(wǎng). 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,652評論 0 30
  • 前段時間出了趟門迎吵,好友的孩子滿月躲撰,一別數(shù)年,我們幾個曾同吃同住的兄弟击费,終于又聚在了一起拢蛋。出了火車站,他們接我蔫巩,幾目...
    鑨櫳瀧爖壠龍閱讀 965評論 0 0