“小白,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成長之路》的動力用押!