建站
咨詢
售后
建站咨詢
新聞中心
1. HTML的困境
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供七星關(guān)區(qū)網(wǎng)站建設(shè)、七星關(guān)區(qū)做網(wǎng)站、七星關(guān)區(qū)網(wǎng)站設(shè)計、七星關(guān)區(qū)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、七星關(guān)區(qū)企業(yè)網(wǎng)站模板建站服務(wù)，十載七星關(guān)區(qū)做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
我是著名的CSS, 很多人都知道我的名字， 但是卻對我的原理和細(xì)節(jié)不求甚解。
這也可以理解，相比于簡單的HTML，我要復(fù)雜得多， 尤其是想要使用我做出美奐美倫的頁面，需要了解太多的細(xì)節(jié)，那真不是一件普通人能干的事兒。 于是大家看見我以后最多打個招呼，然后馬上低頭繞行。
說起HTML，這其實(shí)是個非常單純的家伙， 他只關(guān)注內(nèi)容的語義， 比如說他用
表明這是一個大標(biāo)題，用
表明這是一個段落，用 表明這兒有一個圖片， 用 表示此處有鏈接。
鏈接真是個有趣的發(fā)明， 它可以從一個網(wǎng)頁跳到另外一個網(wǎng)頁，從一個網(wǎng)站跳到另外一個網(wǎng)站，于是整個世界的網(wǎng)站都鏈接了起來，形成了一張大網(wǎng) 。
在我誕生之前， 世界上的網(wǎng)站雖然很多，但是他們都有一個共同的特點(diǎn)： 丑。
原因很簡單， 一個HTML文檔有很多標(biāo)簽， 當(dāng)這些標(biāo)簽組合起來的時候，到底該怎么顯示呢? 用什么樣的字體? 什么顏色? 怎么對齊?
HTML不想管也管不了，于是早期的網(wǎng)站大部分長這個樣子：
真是難以想象，上個世紀(jì)的人們竟然用這么簡陋的網(wǎng)站來購物 !
無數(shù)的人向HTML投訴： 你就不能把自己打扮得漂亮一點(diǎn)嗎?
HTML理直氣壯地回答：不不，我的主人只讓我負(fù)責(zé)網(wǎng)頁的內(nèi)容和結(jié)構(gòu)，至于這些結(jié)構(gòu)要顯示成什么樣子，瀏覽器可以負(fù)責(zé)啊。
而瀏覽器也會推卸責(zé)任：“這我可管不了，你不告訴我你用什么字體，什么顏色，我怎么可能給你展示出來?”
理由很充分，對吧，瀏覽器確實(shí)不應(yīng)該做這件事情。
HTML沒有辦法，只好向組織上申請，給自己加上一堆新的標(biāo)簽， 專門用來描述展示相關(guān)的東西：
于是網(wǎng)頁變得比以前漂亮了一些，大家似乎滿意了。
只是HTML發(fā)現(xiàn)自己的身軀越來越臃腫，這些負(fù)責(zé)顯示的標(biāo)簽把原本的內(nèi)容都給淹沒了， 更要命的是修改的難度越來越高，你可以想象一下，當(dāng)一個html文件中有上百個標(biāo)簽時， 老板讓你把字體改小一號， 那肯定要抓狂的。
組織上看到了問題的癥結(jié)所在， 決定為HTML瘦身， 他定下了一個目標(biāo)： “內(nèi)容和樣式必須要分離!”
這個重?fù)?dān)就交給了我。
2 選擇器
剛開始的時候，我一點(diǎn)思路都沒有，到底怎么把內(nèi)容和樣式分離呢? 我為此苦苦思考了好幾天，既然我想給內(nèi)容施加樣式， 作為***步， 必須要解決定位的問題，換句話說我需要能找到HTML中的元素才可以。
我問HTML：“ 你一個頁面這么多標(biāo)簽， 我怎么才能獲得你完整的結(jié)構(gòu)呢?”
“結(jié)構(gòu)? 那很簡單啊， 我在瀏覽器中就是一個DOM 樹啊， 你盡管訪問啊 ”
好 ! 有這個玩意兒就好辦事了，但是我怎么定位到一個元素，去設(shè)定這個元素的字體，顏色等顯示屬性呢?
XML向我支招： “這太容易了， 你可以仿照我的XPath啊，例如那個DOM樹，你想選中title 元素，就用 /html/head/title ，或者簡單一點(diǎn)//title ; 你想選中***個div 下面的h3, 可以這么做 /html/head/div[1]/h3 ，是不是很方便? ”
(碼農(nóng)翻身老劉注：實(shí)際上XPath的出現(xiàn)要比CSS晚)
“方便是方便， 可是你這為什么要一個斜杠呢? 直接寫成html head title 不行嗎? ”
"這。" XML無語了。
我決定不用斜杠，我要討好程序員，就用div ul li 這樣寫起來很簡潔的方式， 我也不想叫XPath, 那是XML的寶貝。
我打算把它叫做選擇器(Selector)。比如說我想把所有的h3都變成紅色， 黑體， 可以這么寫：
h3 {color:blue ; font-weight:bold;}
當(dāng)然我設(shè)計的選擇器能力可不僅僅這么簡單，使用它你完全可以選擇一個特定的節(jié)點(diǎn)(如果有id屬性或class屬性的話)，不管這個節(jié)點(diǎn)“隱藏”得有多深。
還可以選擇一個節(jié)點(diǎn)的兄弟節(jié)點(diǎn)， 某組元素的第x個孩子，任何帶有屬性名的標(biāo)簽名等等。
一句話， 使用Selector， 你可以盡情在DOM樹中遨游， 找到你想要的地方， 然后設(shè)置樣式。
內(nèi)容和樣式就分離了。
3 盒子
定位的問題解決了， 初步的樣式也解決了。 但是最讓人排版的問題依然存在， 想想你曾經(jīng)看過的報紙和雜志，人家那圖文并茂，賞心悅目的排版， 我們得好好學(xué)習(xí)下了。
我對雜志的排版做了仔細(xì)的研究， 分欄，間距，對齊， 圖文混排， 本質(zhì)上他們是由一個個“塊”組成的。
我對HTML說： 咱們能不能也把內(nèi)容搞成一個一個的塊啊， 然后把這些塊進(jìn)行組合不就成了?
HTML回答： “塊(block) 我有啊， 你還不知道嗎， 所有的HTML元素要么是塊級(block)元素，要么是行內(nèi)(inline)元素?！?/p>
“什么意思?”
“塊級元素(比如標(biāo)題和段落) 會一個接一個的堆疊起來沿著頁面向下排列，每個元素占一行; 行內(nèi)元素(比如鏈接和圖片)則會在一行內(nèi)相互并列，只有在空間不足以并列的時候才會折到下一行。你可以想象一下， 一個文檔其實(shí)就是這些元素在頁面上堆疊流動而已， 俗稱文檔流?！?/p>
既然如此， 我就可以把這些元素當(dāng)成一個個的“盒子”了，為了能夠排版，我給每個盒子都都設(shè)定三個屬性：
邊框(border)： 可以設(shè)定寬窄，樣式，顏色
內(nèi)邊距(padding)： 內(nèi)容到邊框的間距
外邊距(margin)： 邊框到相鄰元素的間距
通過調(diào)整內(nèi)外邊距和邊框，你就可以對頁面做一點(diǎn)基本的美化排版了。
4 浮動和定位
盒子還只是在在文檔流中按次序流動而已， 想要做到漂亮的排版， 還得讓他們靈活地定位才行。
比如說有人想把一個盒子放到瀏覽器的最右邊，不會隨著頁面滾動而滾動;
或者大盒子中套了一個小盒子，小盒子要相對于大盒子來定位;
或者兩個盒子想羅列起來;
或者像報紙雜志那樣分欄顯示，左邊是菜單，中間是內(nèi)容，再加上一個右邊欄; 等等諸如此類的要求。
所以，一個盒子必須得能在常規(guī)的文檔流中重新定位，于是我給盒子添加了兩個重要的屬性：float和position 。
float可以讓一個盒子脫離標(biāo)準(zhǔn)的文檔流，一直往上飄，直到遇到父元素的邊界。
當(dāng)有多個盒子都在飄的時候，就可以按照次序形成分欄的效果了。
比如下面這3個
對于position 來說， 那就更加靈活了。 如果不設(shè)置，那就是默認(rèn)定位，在文檔流中的位置不做改變。
可以設(shè)置為相對于盒子在原來文檔流中的位置做定位(原來的位置沒有被別的div占據(jù))：
還可以設(shè)置成相對于某個父元素做絕對定位(下圖中祖先元素就是橙色的框，div2原來的位置被div3占據(jù)了) 。
唉，給大家說這么多瑣碎的東西， 我自己都有點(diǎn)煩了， 總結(jié)下就是：我提供了各種各樣的方式讓你的盒子可以靈活的排列起來。
當(dāng)然我必須得承認(rèn)， 這些布局對程序員們確實(shí)不那么友好，你沒有辦法通過拖拽的方式對這些盒子進(jìn)行排版。
為了減少工作量，大量CSS框架在源源不斷地推出，例如Bootstrap, Semantic UI, Pure.css , EZ-CSS。 這是后話了。
5 CSS
浮動和定位可以說是我搞出的最復(fù)雜的東西， 其他的像背景了，字體了，文本了就簡單得多，就不再啰嗦了。
當(dāng)我告訴HTML我的定義工作基本搞定時， 他提出了一個問題： “你這些選擇器，盒子模型，浮動和定位， 背景，字體之類定義，最終要放在哪兒啊? 你不會還是想放在我這里吧?”
我想了想，必須得有***的靈活度，程序員可以直接寫到元素的標(biāo)簽中(叫行內(nèi)樣式)， 也可以寫到html的