整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          一文讀懂HTML和CSS的關系


          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 屬于 HTML,通過 <link> 標簽中的 href 屬性來引入外部文件,而 @import 屬于 CSS,所以導入語句應寫在 CSS 中,要注意的是導入語句應寫在樣式表的開頭,否則無法正確導入外部文件;
          • @import 是 CSS2.1 才出現的概念,所以如果瀏覽器版本較低,無法正確導入外部樣式文件;
          • 當 HTML 文件被加載時,link 引用的文件會同時被加載,而 @import 引用的文件則會等頁面全部下載完畢再被加載;

          小結:我們應盡量使用 <link> 標簽導入外部 CSS 文件,避免或者少用使用其他三種方式。


          主站蜘蛛池模板: 欧美日韩精品一区二区在线视频 | 国产一区二区精品久久岳√| 国产亚洲综合一区柠檬导航| 国产av天堂一区二区三区| 国产亚洲福利精品一区| 中文字幕日韩一区二区三区不卡| 国产成人一区二区三中文| 天美传媒一区二区三区| 成人精品视频一区二区三区| 中文字幕在线一区二区在线| 另类ts人妖一区二区三区| 黄桃AV无码免费一区二区三区 | 中文字幕精品一区| 91精品乱码一区二区三区| 国产在线一区二区杨幂| 久久久久久综合一区中文字幕| 91视频一区二区三区| 一区二区三区视频网站| 久久久av波多野一区二区| 无码一区二区三区中文字幕| 国产午夜毛片一区二区三区| 在线日产精品一区| 成人午夜视频精品一区| 亚洲av成人一区二区三区在线播放| 免费在线观看一区| 国产高清一区二区三区| 免费看一区二区三区四区| 狠狠综合久久av一区二区| 鲁丝片一区二区三区免费| 内射一区二区精品视频在线观看| 国产精品美女一区二区视频| 国产一区风间由美在线观看| 久久99精品一区二区三区| 乱人伦一区二区三区| 亚洲一区精彩视频| 亚洲综合无码一区二区| 亚洲一区二区三区写真| 国产伦一区二区三区高清 | 久久精品一区二区三区四区| 免费av一区二区三区| 亚洲Av永久无码精品一区二区 |