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>

效果

這里只是舉了一個小示例。你可以輕而易舉地讓頁面的風格千變萬化，進而讓用戶體驗有所差異（或差距）?！扒ё內f化”因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的核心知識框架，同時借助豐富的示例讓初學者有一個愉悅、輕松的學習過程。

想從事前端開發的，可將本書作為學習的起點。正從事前端開發的，可將本書作為速查的手冊。

一篇文章說了HTML，現在再來說一說CSS，所謂CSS是指層疊樣式表 (Cascading Style Sheets)，通過引入樣式表，從而極大的提高了工作效率。

搭配視頻觀看效果更佳~~

Web前端開發零基礎入門HTML/CSS/JavaScript

https://www.ixigua.com/6907467670300393988

什么是CSS？

Cascading Style Sheet

層疊樣式表語言（不是編程語言，屬于樣式表語言，沒有變量、數據類型、控制語句...）

CSS其實是專門用來修飾HTML的，讓HTML更好看。

CSS是HTML的化妝品。

CSS是為HTML服務的，所以HTML還是主體，CSS是依附在HTML上的，

所以進行CSS的開發，我們還是需要新建html/htm文件。

在HTML中怎么嵌入CSS樣式呢？

第一種方式：內聯定義

第二種方式：定義內部樣式塊對象

第三種方式：鏈入外部樣式表文件（這種方式最常用?。?/p>

關于選擇器的優先級：

• 標簽選擇器優先級最低。
• 其次是類選擇器。
• 最高優先級是id選擇器。

CSS設置背景(background)

• 背景顏色 background-color
• 背景圖片 background-image
• 背景重復 background-repeat:repeat-x/repeat-y
• 背景位置 background-position:bottom/left/top/right/center
• 背景關聯 background-attachment:fixed/scroll

綜合寫法：

.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

CSS設置文本格式

通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。

文本縮進 ：Text-indent:2em

文本對齊方式：Text-align:left/right/center/ justify

文本修飾：Text-decoration:underline/line-through/overline/none

字符間距：Word-spacing:px/em 英文單詞之間的間隔；

Letter-spacing:px/em漢字和英文字母之間的間隔；

文本轉換：Text-transform:uppercase/lowercase/ capitalize

行與行間距：Line-height:px/%

垂直對齊圖像： vertical-align：text-top/text-bottom

文本陰影：text-shadow:水平偏移，垂直偏移 顏色

字體

字體類型:font-family:”sans-serif”;

字體樣式:font-style:normal ;

字體大小:font-size:20px/3.75em/100%;默認大小為16px,字體為宋體

字體加粗:font-weight:normal;

字體的轉變:font-variant:normal/smallcaps;

CSS鏈接

鏈接的四種狀態

a:link {color:#FF0000;}     /* 未被訪問的鏈接 */
a:visited {color:#00FF00;}  /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;}    /* 鼠標指針移動到鏈接上 */
a:active {color:#0000FF;}   /* 正在被點擊的鏈接 */

【注意】當為鏈接的不同狀態設置樣式時，請按照以下次序規則：

a:hover 必須位于 a:link 和 a:visited 之后

a:active 必須位于 a:hover 之后

去掉a鏈接默認的下劃線

text-decoration:{none/underline}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

創建鏈接塊

display:block;

列表樣式

在一個無序列表中，列表項的標志 (marker) 是出現在各列表項旁邊的圓點。在有序列表中，標志可能是字母、數字或另外某種計數體系中的一個符號。

要修改用于列表項的標志類型，可以使用屬性 list-style-type：

ul {list-style-type : square;}

上面的聲明把無序列表中的列表項標志設置為方塊。

列表項圖像

你可能想對各標志使用一個圖像，這可以利用 list-style-image 屬性做到：

ul li {list-style-image : url(xxx.gif);}

列表標志位置

ul{
  list-style-position:inside;
  }

CSS表格

表格邊框

table,th,td{border:1px solid red;}

折疊邊框

border-collapse:collapse;

• 表格的寬度和高度

width,height

• 表格的文字水平對齊

text-align:center/right/left;

• 表格的文字垂直對齊

vertical-align:bottom;

• 表格的內邊距

padding

• 表格的背景顏色

background

盒子模型

margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制塊級元素之間的距離, 它們是透明不可見的。

根據上, 右, 下, 左的順時針規則, 簡寫為

margin: 40px 40px 40px 40px;

為便于記憶, 請參考下圖：

當上下, 左右margin值分別一致, 可簡寫為:

margin: 40px 40px;

前一個40px代表上下margin值, 后一個40px代表左右margin值.

當上下左右margin值均一致, 可簡寫為:

margin: 40px;

padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級元素內部, content與border之間的距離

【注意】當你想讓兩個元素的content在垂直方向(vertically)分隔時, 既可以選擇padding-top/bottom, 也可以選擇margin-top/bottom, 在此建議你盡量使用padding-top/bottom來達到你的目的, 這是因為css中存在Collapsing margins(折疊的margins)的現象.

邊框

• 邊框樣式：border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
• 邊框寬度：border-width
• 邊框顏色：border-color

綜合寫法：

border:1px solid red;

輪廓(outline)

可以按順序設置如下屬性：

• outline-color
• outline-style
• outline-width

CSS所有尺寸

• 寬度

width/min-width/max-width

• 高度

height/min-height/max-height

• 行高

line-height

display顯示類型

隱藏元素—–display:none或者visibility:hiddden

display通?？梢栽O置為none、inline、block

visibility通常可以設置為hidden、visible

二者的區別在于display會將元素隱藏掉，并且位置不再被占據，而visibility則是占據原來的位置。

CSS塊級元素和內聯元素—-display:block/inline/inline-block;

CSS定位(position)

position 屬性值的含義：

static

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute

元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身。

CSS浮動

設置浮動：float:left/right;

清除浮動：clear:both/left/right/null;

浮動的兩個影響因素：1、文檔流 2、顯示類型

元素內容溢出

• 溢出滾動條

overflow:scroll（不管是否溢出都會有滾動條）、auto（自動添加）

• 溢出隱藏

overflow:hidden;

CSS的相關特性

1、繼承性

它不僅允許樣式應用于某個特定的html標簽元素，而且還可引用于其后代；

2、CSS層疊

當有相同權重的樣式存在時，會根據這些CSS樣式的前后順序來決定，處于最后面的CSS樣式會被應用，后面的CSS樣式會覆蓋前面的樣式。

總而言之：內聯樣式表(標簽內部)>嵌入樣式表(當前文件中)>外部樣式表(外部引入文件)

、什么是css

css的英文全稱是：Cascading Style Sheets，翻譯過來叫：層疊樣式表。

這其中有兩個關鍵字，一個是層疊一個是樣式。

樣式指的是給html調整樣式

層疊指的是可以疊加調整，給一個html的a標簽指定5條樣式，5條樣式疊加起來作用到html的標簽上。

舉個更容易理解的例子：（在index.html中寫一個a標簽）

用css給a標簽加樣式，一共加了五條，具體看圖片中的注釋。

5條樣式都加到了a標簽上面，都生效，這就是層疊的意思了。

二、css的作用

從上面的例子中也可以明顯地感受到，css的主要作用就是美化html的。使用css可以讓html變得更加的豐富多彩。如果學了JavaScript的話就可以讓html動起來。

在正式開講css前，先補充一點關于sublime text的快捷使用方法，這樣我們寫代碼的速度就會變得快起來。

如果還有不知道sublime text是什么的同學，可以返回頭去看看《踏上編程之路的必經之路之html篇二》，其中用動圖的方式仔細講解了如何下載它。

在sublime text這款編輯器里面可以快速生成html的主要結構（頭部、體部），接下來看動圖演示：

沒錯，只要輸入一個“!”，按tab鍵就能快速生成html的主要結構代碼了（下圖紅框的框住的就是tab鍵）

除了可以快速生成上面代碼，還以快速生成經常使用的各種標簽代碼：（如下圖演示）

如果你要寫一個a標簽，只需要寫a再按tab鍵，sublime text就會自動給你補全代碼。

當然了，還有更快捷的

（接下來快捷生成<a href="https://www.baidu.com">百度</a>）

在“[]”里面寫要給a標簽添加的屬性，在{}里面寫a標簽的文字。如果有多個屬性的就寫兩個“[]”。

具體看動圖演示：

接下來再看看ul和li標簽如何快速生成（ul里面包含5個li）

新聞后面的$用于生成一個序號，當然你也可以不寫，也可以寫兩個，寫兩個的話生成的就會是新聞01、新聞02

在sublime text中只要是html的標簽就可以快捷生成，那在來試一試table

我們學過很多的html標簽，你都可以拿來嘗試一下，要想事半功倍，熟練使用sublime text是個有效的途徑。

三、css的基本格式

在css的初始階段，建議大家把css代碼寫在html的head標簽中。

css代碼的樣式代碼寫在style標簽中。

具體看一下圖：

寫一個a標簽，讓a標簽中的字變為紅色

在style中寫css代碼，沒有style，是不會有效果的。style可以寫在任意位置，但是為了代碼規范，約定俗成都寫在head標簽中。

style中我們先要指定給哪一個標簽添加樣式，這里我們指定了a。這種方式也叫做css選擇器，就是你要給誰添加樣式，你得先指定或者選定一個標簽，然后再寫你要添加的樣式代碼。我們這里選定a，給a添加字體變紅的的樣式。

上面代碼在瀏覽器中的效果如下：

好了，今天的內容就這么多。記得要勤動手練習。