eb開發是一個很依賴經驗的領域,然而這對初學者很不友好。
知識一旦脫離了應用場景就會變得晦澀、空洞,且知識本身也滿足“二八定律”,“抓大放小”是提高學習效率的關鍵。
下文向大家介紹了HTML和CSS之間的關系。內容選自《HTML 5與CSS 3核心技法(全彩)》一書。本書主線清晰,講解簡潔,并提供在線效果演示效果,非常適合小白上手!
1 HTML是骨架
很難想象一個人在桌前對著一塊砧板坐一夜,隔一會兒就噼里啪啦敲幾下,一會兒哭一會兒笑,是一種什么景象。事實上,在貓眼中我們就是這樣的。只不過我們面對的是一塊會發光的“砧板”而已。但為什么這塊“板子”如此吸引人?“上網”到底是在做什么?
獲取信息。
重點在“信息”,一種看不見摸不著卻真實存在的東西。無論“1 + 1 = 2”這段字符顯示得多么粗糙,都不會影響它傳遞了完整的信息,以及這條信息的內在邏輯是正確的,不是嗎?HTML就是用來盛放最核心的內容——信息。
所以,在CSS和JavaScript出現之前,HTML就出現了。這是必然的,因為如果連最核心的信息都無法有效傳遞,那圍繞著它的一切裝飾物和附屬品都是毫無意義的。
除滿足承載核心信息的需求外,HTML還解決了一個重要的問題——將信息結構化。
試想有這樣一篇文章:
背影
我說道:“爸爸,你走吧。”他望車外看了看,說:“我買幾個橘子去。你就在此地,不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺,須穿過鐵道,須跳下去又爬上去。父親是一個胖子,走過去自然要費事些。我本來要去的,他不肯,只好讓他去。我看見他戴著黑布小帽,穿著黑布大馬褂,深青布棉袍,蹣跚地走到鐵道邊,慢慢探身下去,尚不大難。可是他穿過鐵道,要爬上那邊月臺,就不容易了。他用兩手攀著上面,兩腳再向上縮;他肥胖的身子向左微傾,顯出努力的樣子。
評論
王花花 大概,天底下的父親,老去的樣子都有些共同的特質吧
李拴蛋 我們都不愿意承認他老了
劉備備 想吃橘子...
此時上面的信息基本沒有結構,只能通過斷行或縮進盡可能讓內容更易讀,編輯時的狀態就是其最終的顯示效果。
HTML就派上了用場,見下方的代碼:
代碼
<artcle>
<h1>背影</h1>
<p>
我說道:“爸爸,你走吧。”他望車外看了看,說:“我買幾個橘子去。你就在此地,不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺,須穿過鐵道,須跳下去又爬上去。父親是一個胖子,走過去自然要費事些。我本來要去的,他不肯,只好讓他去。我看見他戴著黑布小帽,穿著黑布大馬褂,深青布棉袍,蹣跚地走到鐵道邊,慢慢探身下去,尚不大難。可是他穿過鐵道,要爬上那邊月臺,就不容易了。他用兩手攀著上面,兩腳再向上縮;他肥胖的身子向左微傾,顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概,天底下的父親,老去的樣子都有些共同的特質吧</span>
</div>
<divclass="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
一頭霧水沒關系,后面我們會細說每一個部分。總之這段內容給人感覺反而更繁瑣。但繁瑣是代價,重要的是現在這段信息有結構了。這就意味著計算機可以通過結構的規律將其顯示得更便于閱讀(甚至是交互)。
以下是不加任何裝飾性內容直接讓瀏覽器呈現的結果:
效果
這是純HTML在沒有引入任何裝飾時的顯示效果。很明顯,即便是這樣也比純文字狀態易讀了許多。但注意,HTML本身沒有樣式,字體大小和粗細有變化的原因是瀏覽器的默認樣式起了作用,與HTML沒有關系。而重點就在這里,這意味著我們可以基于這個結構設計自己的頁面效果,見下方的示例。
代碼
<style>
body { font-family: 'Microsoft YaHei', sans-serif; }
#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }
#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }
#comment-list .title {
color: #777; font-size: 1.1rem; padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}
</style>
<artcle>
<h1>背影</h1>
<p>
我說道:“爸爸,你走吧。”他望車外看了看,說:“我買幾個橘子去。你就在此地,不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺,須穿過鐵道,須跳下去又爬上去。父親是一個胖子,走過去自然要費事些。我本來要去的,他不肯,只好讓他去。我看見他戴著黑布小帽,穿著黑布大馬褂,深青布棉袍,蹣跚地走到鐵道邊,慢慢探身下去,尚不大難。可是他穿過鐵道,要爬上那邊月臺,就不容易了。他用兩手攀著上面,兩腳再向上縮;他肥胖的身子向左微傾,顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概,天底下的父親,老去的樣子都有些共同的特質吧</span>
</div>
<div class="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
效果
這里只是舉了一個小示例。你可以輕而易舉地讓頁面的風格千變萬化,進而讓用戶體驗有所差異(或差距)。“千變萬化”因CSS靈活、強大,“輕而易舉”因HTML簡潔、有序。結構的力量!
CSS是皮膚
一個充滿活力的生態是不滿足于現狀的。人們在適應了便利地瀏覽核心信息之后,就會想方設法改進瀏覽的體驗。比如,讓自己的博客以多欄顯示,以便在視覺上區分不同板塊;修改字體顏色,以便強調一些重要信息等。
起初的做法是——準備幾種特殊的標簽,專門用于樣式的指定。涉及布局的地方,如果沒有特殊標簽就直接用表格布局。以下沒有任何樣式的狀態(以下代碼均不需要看懂):
代碼
<h1>標題</h1>
<p>
從前有座山,山里有個廟,廟里...
</p>
效果
此時的頁面結構下。
如果想讓標題居中,則需要給其添加元素<center>,見下方的示例。
代碼
<center>
<h1>標題</h1>
</center>
<p>
從前有座山,山里有個廟,廟里...
</p>
效果
此時的頁面結構如下。
居中標題的目的確實達到了,但是有一個很大的問題:如果我改變主意了,不想讓其居中了,那么我還得再去將<center>元素去掉。這對于簡單的頁面確實可行,但如果是復雜的頁面,這種做法的工作量就是噩夢,因為每個地方都得修改,無論是對齊方式、顏色、背景色,還是大的布局都必須通過修改結構才能完成。這種做法的最大問題是可維護性太差,很多時候為了一種樣式要修改很多不必要的結構,枯燥、重復、削足適履的工作太多,基本上寫一次就再也不想改了。
這個問題亟待解決,而且解決方案還要兼容現有規則。現有規則是什么?HTML的語法及結構。不過既然HTML已經有結構了,為什么不好好利用呢?
以前面示例中的文章頁面為例,如果我們想更改標題,是否可以先統一選中所有標題,然后說明想要什么樣式規則呢?就像下面這樣:
所有h1 元素聽著
對齊方式 居中。
字體顏色 黑色。
如果想將所有段落字體放大,則像下面這樣:
所有p 元素聽著
字體大小 150%。
這種方式的確很高效!同時這個規則與HTML語法無關,相當于另一種語言。這樣結構和樣式就不會互相影響,結構是結構,樣式是樣式,兩者隔離開了。如果想修改樣式,則完全不需要勞HTML大駕,只需要修改樣式文件即可,更便于管理和維護。這就是CSS,只不過其語法更簡潔。
下面以修改標題對齊方式為例:
h1 { /* 所有h1 元素聽著 */
text-align: center; /* 對齊方式 居中 */
}
通過批量選擇和處理,極大地提高了開發效率,降低了維護成本,四兩撥千斤。
(完)
圖書推薦
《HTML 5與CSS 3核心技法(全彩)》
表嚴肅 著
本書能夠為自學Web開發初學者建立一套HTML與CSS的核心知識框架,同時借助豐富的示例讓初學者有一個愉悅、輕松的學習過程。
想從事前端開發的,可將本書作為學習的起點。正從事前端開發的,可將本書作為速查的手冊。
/面包理想
一轉眼已經2018年,前端行業也風風雨雨地走過了10多年,網頁布局也從最原始的文檔變成了精彩紛呈的交互。當我看到第四代CSS布局技術的時候,在驚嘆互聯網發展如此突飛猛進的同時,不禁會有一個疑問:CSS經歷1.0到3.0的版本變遷,最終又將走向哪里?
今天我們就回顧一下CSS簡史和四次布局技術的躍遷。
1.CSS簡史
為什么我們需要回顧一下CSS簡史呢?
1.了解過去能夠更好地預測未來,畢竟太陽底下沒有什么新鮮事。
2.相比預測未來,通過了解CSS發展演變趨勢,能夠科學合理地評判CSS的發展,指導我們學習CSS的核心技術,讓我們在有限的精力和時間內學對知識,學好知識。
那是1989年的第一場雪,比1988年來的更早一些,伯納斯·李(Tim Berners-Lee)以超人的智慧和消耗了前額無數濃密的頭發為代價發明了World Wide Web,沒有他就沒有我們今天互聯網相關的工作,也就沒有了這個專欄教程,請允許我代表廣大前端致以崇高的敬意。我們先一睹大神的風采。
對互聯網之父,我只想對他說一句話,有一款洗發水增發效果挺好的,我一直用,你要不要試試?
互聯網誕生了以后,最初的網頁僅僅是純文本,但是隨著互聯網的發展,大家意識到web的原始版本根本就沒有提供一種裝飾網頁的方法。這就好比一個嬰兒不會穿著衣服出生一樣,孩子大了,總不能裸奔吧?這個時候兩個大神提供了解決方案Pei Yaun Wei和Andreesen。
Pei Yaun Wei說,這個好辦,我們可以給孩子穿上紙尿褲。
Pei-Yuan Wei在1991年創建圖形瀏覽器 ViolaWWW ,他整合了自己提出的樣式語言到自己開發的瀏覽器中,還期望自己的樣式語法最終能成為web關于樣式的官方標準。雖然這個目標并未達到,但是他提出的樣式語法確實為其它的一些樣式語法提供了一些靈感。
Andreesen說,那玩意得換多麻煩,我給孩子畫一身衣服吧,當然你懂的,最后Pei Yaun Wei的方案被采用了,但是我們還是看看Andreessen畫出來的情況有多亂。
與此同時,Andreessen 在他開發的網景瀏覽器中進行了不同的嘗試。他并沒有創建一種分離式的標記語言,而是采取拓展HTML標簽的方法來包含非標準化的HTML標簽已達到裝飾網頁的目的。不幸的是,沒過多久,網頁就失去了所有的語義化并看起來像下面這樣混亂:
<MULTICOL COLS="3" GUTTER="25"> <P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P></MULTICOL>
最終被大家采納的語言是由Hakon Wium 在 1994年 10月提出的樣式語法。它被稱為樣式層疊表,簡稱CSS,但是直到1996年的時候,CSS才演變成我們熟悉的樣子。
html { margin-left: 2cm; font-family: "Times", serif; }h1 { font-size: 24px; }
然后在1998年5月W3C發表了CSS2,緊接著一個讓我們深惡痛覺的瀏覽器誕生了!對沒錯,就是你深惡痛絕的那個萬能的IE6,2001年微軟發布了IE6,不過搞笑的是,IE6最初的出現確實很大程度推動了CSS發展。那時候的網頁已經變成跟現在很接近了。
按照常理你肯定會想,后面我就知道了,你不用說了,然后就是CSS3.0了。好吧,如果是我,我也這樣想,但是國際友人的腦回路可能跟我們不一樣,事實上,CSS3早于1999年已經開始制訂,直到2011年6月7日,CSS 3 Color Module終于發布為W3C Recommendation。這個故事告訴我們兩件事:
1.w3c這個組織活的真夠長,甚至比很多讀者年齡都大。
2.不是CSS正式版發布了你才放心使用,如果等到那個時候使用,你的項目可能未曾綻放就枯萎了。
細心的讀者可能會問了,CSS3正式版什么時候發布啊?另外CSS4.0什么時候發布?
好吧,我只能告訴你隨緣吧……而且沒有CSS4.0了,也不會有CSS5.0了。
來我們再看看國際友人的腦回路:
簡單地說,就是從CSS3開始,CSS規范就被拆成眾多模塊(module)單獨進行升級,或者將新需求作為一個新模塊來立項并進行標準化。因此今后不會再有CSS4、CSS5這種所謂大版本號的變更,有的只是CSS某個模塊級別的躍遷。
按照CSS工作組的說法,CSS歷史上并沒有版本的概念,有的只是“級別”(level)的概念。比如,CSS3其實是CSS Level 3,CSS2是CSS Level 2,而CSS Level 1當然就是CSS1。每個級別都以上一個級別為基礎。
大家可能說這個命名好亂啊,這事兒我只想跟你說,你就把CSS工作組當成你女朋友就好了,她開心就好,她說的都是對的,她說啥就是啥……
至于我們,會用就好了。
CSS出現的好處就是讓結構和表現分離,可以更靈活的修飾網頁,學習也很簡單。這里我更想說說它的不足。
1.CSS只有一個全局的命名空間,所以是無法避免出現選擇器沖突的。
2.模塊化做的不夠好,所以造成嵌套和覆蓋混亂,容易產生一大堆亂糟糟的樣式。
所以現在CSS也在向“模塊化、JS化發展”
不過客觀地說,CSS的出現確實是互聯網里程碑式的進步。
CSS其實就做了兩件事:
1.如何布局
2.元素怎么表現
說直白一點就是兩件事,一個房子是蓋成兩室一廳還是三室兩廳,另一件事是精裝修。
這里大家就會看到如果一個房子180平米隔成1個10平米的主臥170平米的廁所,你再怎么精裝修也不會是一個宜居的房間。所以布局在CSS中是極其重要的。與CSS發展簡史類似,CSS布局也經歷了一代又一代的迭代,才成為當前的樣子。
接下來我們就說說CSS布局簡史。
2.CSS布局簡史
初代table布局
在1997年的時候,David Siegel 改變了web,他自己研究出了一項網頁布局技術,利用html中的table元素和gif圖片縫合在一起,創造了表格布局技術,之后他就猶如一頭猛獸泛濫起來。
優點:布局容易、快捷、兼容性好
缺點:改動不便,需要重新調整,工作量大
由于互聯網網站越來越復雜,內容和業務更新頻繁,所以table布局是完全不能勝任的,以至于table布局的發明人都說:
“我把炸醬和面倒在了一起,并且沒法分開它。”
不過這個真不是我杜撰出來的,原文:
David Siegel:“有人說我毀掉了Web,我回答他們,的確如此。我毀掉了Web是因為我把巧克力和花生醬混合在一起卻再也不能把它們分開。我犯下了把結構跟表現混合在一起的錯誤。”
然后第二代布局技術登場了,
CSS+div布局
CSS+div布局總結起來有三大優點,
1.省時,學習容易,寫代碼也很容易,很快,效率高
2.省事,如果業務邏輯變了,改起來特別方便快捷
3.省錢,代碼量少,省帶寬,適合seo
基于這三年不難看出CSS+div布局人畜無害,人見人愛,也就不難解釋為什么被廣泛地使用成為目前主流的布局技術了。當然了他也有缺點:
1.需要考慮平臺兼容性,對制作人員的技能要求較高。
2.在移動端布局顯得有些力不從心,如未知寬高float內部元素居中、垂直水平布局、響應式布局等方面略顯繁瑣。
基于此,第三代布局技術應運而生。
Flex布局
優點:
1.CSS3的布局方式,可以在不使用其他框架的情況下,簡便、完整、響應式地實現各種頁面布局 2.移動端布局簡直太友好
缺點:
兼容性較差,IE瀏覽器版本在9.0以上,基本要10.0 對于其他瀏覽器,要求兼容性寫法
Flex布局日漸成為移動端主流布局技術,但是它是單一維度的布局,這個我會在專欄后面講到,有時候也會捉襟見肘,所以目前出現了第四代的布局技術:
grid布局
因為目前大部分瀏覽器并不支持這種技術,但是它代表了網絡發展,這里大家保持關注就好,這里我重點說下它為什么可以稱為第四代網絡布局技術。首先一個觀點大家先記住:
它并不會取代第三代的布局技術,而是顛覆和突破。就好像Flex遠比div+CSS布局更方便,但是div+CSS依然有用武之地。
我們說下它的突破之處:
1.flex對標的是float,本質上還是一維布局,這就跟別人開著夏利,你開奔馳都是地面上跑沒啥本質區別一樣。但是grid升維了,grid是飛機,在地面馬路這條線一維之上讓人能夠思考高度這個維度,以前是汽車一維交通工具(你只能在水平方向一個方向開),飛機是二維(能俯沖了(橫向、縱向同時)),所以grid可以說是拓寬了CSS布局的維度。不排除將來會有三維布局的出現。到時候CSS不僅僅能控制橫向布局,縱向布局,還可以深度布局(這個要依賴于三維展示的出現,如VR,AR三維立體的展示設備出現)。
2.grid布局里面采用了“可視化布局(template部分,所見即所得)”,這個是顛覆了傳統的,寫一句代碼刷一下瀏覽器這樣的開發方式,不排除以后會出現代碼即效果的開發模式。比如你在一個設備上畫一個區域,然后畫輪播圖。
這種方式類似于vc++控件方式,但是更智能,也更友好。誰說不可能呢?大家不要忘了grid布局的來源是早就廢棄的table布局。說到這里我多說一句搞笑的微軟,frontpage沒火,dreamwaver火了,最早提出“canvas”概念的 VML沒火,最后html5的canvas火了,連CSS3網格布局也是由微軟創建的一個模塊 ,最后火起來居然沒人認識它。心疼微軟一秒鐘。
說到這里大家對CSS簡史和布局也有所了解了,我們總結下,通過本文你應該學到:
(1)CSS的發展歷史。
(2)熟知布局的發展歷史,以便對未來布局技術的發展有一個客觀的判斷,來選擇是否學習。
通過本文的學習大家已經對CSS相關基礎知識有所了解,接下來我們就開始真正的進入技術的學習,大家是不是迫不及待了呢?
4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼,另外兩種是引入 外部 CSS 文件。下面我們就來看看這些方式和它們的優缺點。
內聯方式
內聯方式指的是直接在 HTML 標簽中的 style 屬性中添加 CSS。
示例:
<div style="background: red"></div>
這通常是個很糟糕的書寫方式,它只能改變當前標簽的樣式,如果想要多個 <div> 擁有相同的樣式,你不得不重復地為每個 <div> 添加相同的樣式,如果想要修改一種樣式,又不得不修改所有的 style 中的代碼。很顯然,內聯方式引入 CSS 代碼會導致 HTML 代碼變得冗長,且使得網頁難以維護。
嵌入方式
嵌入方式指的是在 HTML 頭部中的 <style> 標簽下書寫 CSS 代碼。
示例:
<head> <style> .content { background: red; } </style> </head>
嵌入方式的 CSS 只對當前的網頁有效。因為 CSS 代碼是在 HTML 文件中,所以會使得代碼比較集中,當我們寫模板網頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結構和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效,所以當多個頁面需要引入相同的 CSS 代碼時,這樣寫會導致代碼冗余,也不利于維護。
鏈接方式
鏈接方式指的是使用 HTML 頭部的 <head> 標簽引入外部的 CSS 文件。
示例:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式,所有的 CSS 代碼只存在于單獨的 CSS 文件中,所以具有良好的可維護性。并且所有的 CSS 代碼只存在于 CSS 文件中,CSS 文件會在第一次加載時引入,以后切換頁面時只需加載 HTML 文件即可。
導入方式
導入方式指的是使用 CSS 規則引入外部 CSS 文件。
示例:
<style> @import url(style.css); </style>
比較鏈接方式和導入方式
鏈接方式(下面用 link 代替)和導入方式(下面用 @import 代替)都是引入外部的 CSS 文件的方式,下面我們來比較這兩種方式,并且說明為什么不推薦使用 @import。
小結:我們應盡量使用 <link> 標簽導入外部 CSS 文件,避免或者少用使用其他三種方式。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。