一文讀懂HTML和CSS的關(guān)系

eb開(kāi)發(fā)是一個(gè)很依賴經(jīng)驗(yàn)的領(lǐng)域，然而這對(duì)初學(xué)者很不友好。

知識(shí)一旦脫離了應(yīng)用場(chǎng)景就會(huì)變得晦澀、空洞，且知識(shí)本身也滿足“二八定律”，“抓大放小”是提高學(xué)習(xí)效率的關(guān)鍵。

下文向大家介紹了HTML和CSS之間的關(guān)系。內(nèi)容選自《HTML 5與CSS 3核心技法（全彩）》一書(shū)。本書(shū)主線清晰，講解簡(jiǎn)潔，并提供在線效果演示效果，非常適合小白上手！

1 HTML是骨架

很難想象一個(gè)人在桌前對(duì)著一塊砧板坐一夜，隔一會(huì)兒就噼里啪啦敲幾下，一會(huì)兒哭一會(huì)兒笑，是一種什么景象。事實(shí)上，在貓眼中我們就是這樣的。只不過(guò)我們面對(duì)的是一塊會(huì)發(fā)光的“砧板”而已。但為什么這塊“板子”如此吸引人？“上網(wǎng)”到底是在做什么？

獲取信息。

重點(diǎn)在“信息”，一種看不見(jiàn)摸不著卻真實(shí)存在的東西。無(wú)論“1 + 1 = 2”這段字符顯示得多么粗糙，都不會(huì)影響它傳遞了完整的信息，以及這條信息的內(nèi)在邏輯是正確的，不是嗎？HTML就是用來(lái)盛放最核心的內(nèi)容——信息。

所以，在CSS和JavaScript出現(xiàn)之前，HTML就出現(xiàn)了。這是必然的，因?yàn)槿绻B最核心的信息都無(wú)法有效傳遞，那圍繞著它的一切裝飾物和附屬品都是毫無(wú)意義的。

除滿足承載核心信息的需求外，HTML還解決了一個(gè)重要的問(wèn)題——將信息結(jié)構(gòu)化。

試想有這樣一篇文章：

背影

我說(shuō)道：“爸爸，你走吧。”他望車外看了看，說(shuō)：“我買幾個(gè)橘子去。你就在此地，不要走動(dòng)。”我看那邊月臺(tái)的柵欄外有幾個(gè)賣東西的等著顧客。走到那邊月臺(tái)，須穿過(guò)鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過(guò)去自然要費(fèi)事些。我本來(lái)要去的，他不肯，只好讓他去。我看見(jiàn)他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過(guò)鐵道，要爬上那邊月臺(tái)，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

評(píng)論

王花花大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧

李拴蛋我們都不愿意承認(rèn)他老了

劉備備想吃橘子...

此時(shí)上面的信息基本沒(méi)有結(jié)構(gòu)，只能通過(guò)斷行或縮進(jìn)盡可能讓內(nèi)容更易讀，編輯時(shí)的狀態(tài)就是其最終的顯示效果。

HTML就派上了用場(chǎng)，見(jiàn)下方的代碼：

代碼

<p>

</p>

</artcle>

<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>

</div>

<divclass="comment">

<span class="content">我們都不愿意承認(rèn)他老了</span>

</div>

</div>

</section>

一頭霧水沒(méi)關(guān)系，后面我們會(huì)細(xì)說(shuō)每一個(gè)部分。總之這段內(nèi)容給人感覺(jué)反而更繁瑣。但繁瑣是代價(jià)，重要的是現(xiàn)在這段信息有結(jié)構(gòu)了。這就意味著計(jì)算機(jī)可以通過(guò)結(jié)構(gòu)的規(guī)律將其顯示得更便于閱讀（甚至是交互）。

以下是不加任何裝飾性內(nèi)容直接讓瀏覽器呈現(xiàn)的結(jié)果：

效果

這是純HTML在沒(méi)有引入任何裝飾時(shí)的顯示效果。很明顯，即便是這樣也比純文字狀態(tài)易讀了許多。但注意，HTML本身沒(méi)有樣式，字體大小和粗細(xì)有變化的原因是瀏覽器的默認(rèn)樣式起了作用，與HTML沒(méi)有關(guān)系。而重點(diǎn)就在這里，這意味著我們可以基于這個(gè)結(jié)構(gòu)設(shè)計(jì)自己的頁(yè)面效果，見(jiàn)下方的示例。

代碼

<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>

<p>

</p>

</artcle>

<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>

</div>

<span class="content">我們都不愿意承認(rèn)他老了</span>

</div>

</div>

</section>

效果

這里只是舉了一個(gè)小示例。你可以輕而易舉地讓頁(yè)面的風(fēng)格千變?nèi)f化，進(jìn)而讓用戶體驗(yàn)有所差異（或差距）。“千變?nèi)f化”因CSS靈活、強(qiáng)大，“輕而易舉”因HTML簡(jiǎn)潔、有序。結(jié)構(gòu)的力量！

CSS是皮膚

一個(gè)充滿活力的生態(tài)是不滿足于現(xiàn)狀的。人們?cè)谶m應(yīng)了便利地瀏覽核心信息之后，就會(huì)想方設(shè)法改進(jìn)瀏覽的體驗(yàn)。比如，讓自己的博客以多欄顯示，以便在視覺(jué)上區(qū)分不同板塊；修改字體顏色，以便強(qiáng)調(diào)一些重要信息等。

起初的做法是——準(zhǔn)備幾種特殊的標(biāo)簽，專門用于樣式的指定。涉及布局的地方，如果沒(méi)有特殊標(biāo)簽就直接用表格布局。以下沒(méi)有任何樣式的狀態(tài)（以下代碼均不需要看懂）：

代碼

<h1>標(biāo)題</h1>

<p>

從前有座山，山里有個(gè)廟，廟里...

</p>

效果

此時(shí)的頁(yè)面結(jié)構(gòu)下。

如果想讓標(biāo)題居中，則需要給其添加元素<center>，見(jiàn)下方的示例。

代碼

<center>

<h1>標(biāo)題</h1>

</center>

<p>

從前有座山，山里有個(gè)廟，廟里...

</p>

效果

此時(shí)的頁(yè)面結(jié)構(gòu)如下。

居中標(biāo)題的目的確實(shí)達(dá)到了，但是有一個(gè)很大的問(wèn)題：如果我改變主意了，不想讓其居中了，那么我還得再去將<center>元素去掉。這對(duì)于簡(jiǎn)單的頁(yè)面確實(shí)可行，但如果是復(fù)雜的頁(yè)面，這種做法的工作量就是噩夢(mèng)，因?yàn)槊總€(gè)地方都得修改，無(wú)論是對(duì)齊方式、顏色、背景色，還是大的布局都必須通過(guò)修改結(jié)構(gòu)才能完成。這種做法的最大問(wèn)題是可維護(hù)性太差，很多時(shí)候?yàn)榱艘环N樣式要修改很多不必要的結(jié)構(gòu)，枯燥、重復(fù)、削足適履的工作太多，基本上寫(xiě)一次就再也不想改了。

這個(gè)問(wèn)題亟待解決，而且解決方案還要兼容現(xiàn)有規(guī)則。現(xiàn)有規(guī)則是什么？HTML的語(yǔ)法及結(jié)構(gòu)。不過(guò)既然HTML已經(jīng)有結(jié)構(gòu)了，為什么不好好利用呢？

以前面示例中的文章頁(yè)面為例，如果我們想更改標(biāo)題，是否可以先統(tǒng)一選中所有標(biāo)題，然后說(shuō)明想要什么樣式規(guī)則呢？就像下面這樣：

所有h1 元素聽(tīng)著

對(duì)齊方式居中。

字體顏色黑色。

如果想將所有段落字體放大，則像下面這樣：

所有p 元素聽(tīng)著

字體大小 150%。

這種方式的確很高效！同時(shí)這個(gè)規(guī)則與HTML語(yǔ)法無(wú)關(guān)，相當(dāng)于另一種語(yǔ)言。這樣結(jié)構(gòu)和樣式就不會(huì)互相影響，結(jié)構(gòu)是結(jié)構(gòu)，樣式是樣式，兩者隔離開(kāi)了。如果想修改樣式，則完全不需要?jiǎng)贖TML大駕，只需要修改樣式文件即可，更便于管理和維護(hù)。這就是CSS，只不過(guò)其語(yǔ)法更簡(jiǎn)潔。

下面以修改標(biāo)題對(duì)齊方式為例：

h1 { /* 所有h1 元素聽(tīng)著 */

text-align: center; /* 對(duì)齊方式居中 */

}

通過(guò)批量選擇和處理，極大地提高了開(kāi)發(fā)效率，降低了維護(hù)成本，四兩撥千斤。

（完）

圖書(shū)推薦

《HTML 5與CSS 3核心技法（全彩）》

表嚴(yán)肅著

本書(shū)能夠為自學(xué)Web開(kāi)發(fā)初學(xué)者建立一套HTML與CSS的核心知識(shí)框架，同時(shí)借助豐富的示例讓初學(xué)者有一個(gè)愉悅、輕松的學(xué)習(xí)過(guò)程。

想從事前端開(kāi)發(fā)的，可將本書(shū)作為學(xué)習(xí)的起點(diǎn)。正從事前端開(kāi)發(fā)的，可將本書(shū)作為速查的手冊(cè)。

一篇文章說(shuō)了HTML，現(xiàn)在再來(lái)說(shuō)一說(shuō)CSS，所謂CSS是指層疊樣式表 (Cascading Style Sheets)，通過(guò)引入樣式表，從而極大的提高了工作效率。
搭配視頻觀看效果更佳~~
Web前端開(kāi)發(fā)零基礎(chǔ)入門HTML/CSS/JavaScript
https://www.ixigua.com/6907467670300393988

什么是CSS？

Cascading Style Sheet

層疊樣式表語(yǔ)言（不是編程語(yǔ)言，屬于樣式表語(yǔ)言，沒(méi)有變量、數(shù)據(jù)類型、控制語(yǔ)句...）

CSS其實(shí)是專門用來(lái)修飾HTML的，讓HTML更好看。

CSS是HTML的化妝品。

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

所以進(jìn)行CSS的開(kāi)發(fā)，我們還是需要新建html/htm文件。

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

第一種方式：內(nèi)聯(lián)定義

第二種方式：定義內(nèi)部樣式塊對(duì)象

第三種方式：鏈入外部樣式表文件（這種方式最常用！）

關(guān)于選擇器的優(yōu)先級(jí)：

標(biāo)簽選擇器優(yōu)先級(jí)最低。
其次是類選擇器。
最高優(yōu)先級(jí)是id選擇器。

CSS設(shè)置背景(background)

背景顏色 background-color
背景圖片 background-image
背景重復(fù) background-repeat:repeat-x/repeat-y
背景位置 background-position:bottom/left/top/right/center
背景關(guān)聯(lián) background-attachment:fixed/scroll

綜合寫(xiě)法：

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

CSS設(shè)置文本格式

通過(guò)文本屬性，您可以改變文本的顏色、字符間距，對(duì)齊文本，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)，等等。

文本縮進(jìn) ：Text-indent:2em

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

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

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

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

文本轉(zhuǎn)換：Text-transform:uppercase/lowercase/ capitalize

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

垂直對(duì)齊圖像： vertical-align：text-top/text-bottom

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

字體

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

字體樣式:font-style:normal ;

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

字體加粗:font-weight:normal;

字體的轉(zhuǎn)變:font-variant:normal/smallcaps;

CSS鏈接

鏈接的四種狀態(tài)

a:link {color:#FF0000;}     /* 未被訪問(wèn)的鏈接 */
a:visited {color:#00FF00;}  /* 已被訪問(wèn)的鏈接 */
a:hover {color:#FF00FF;}    /* 鼠標(biāo)指針移動(dòng)到鏈接上 */
a:active {color:#0000FF;}   /* 正在被點(diǎn)擊的鏈接 */

【注意】當(dāng)為鏈接的不同狀態(tài)設(shè)置樣式時(shí)，請(qǐng)按照以下次序規(guī)則：

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

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

去掉a鏈接默認(rèn)的下劃線

text-decoration:{none/underline}

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

創(chuàng)建鏈接塊

display:block;

列表樣式

在一個(gè)無(wú)序列表中，列表項(xiàng)的標(biāo)志 (marker) 是出現(xiàn)在各列表項(xiàng)旁邊的圓點(diǎn)。在有序列表中，標(biāo)志可能是字母、數(shù)字或另外某種計(jì)數(shù)體系中的一個(gè)符號(hào)。

要修改用于列表項(xiàng)的標(biāo)志類型，可以使用屬性 list-style-type：

ul {list-style-type : square;}

上面的聲明把無(wú)序列表中的列表項(xiàng)標(biāo)志設(shè)置為方塊。

列表項(xiàng)圖像

你可能想對(duì)各標(biāo)志使用一個(gè)圖像，這可以利用 list-style-image 屬性做到：

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

列表標(biāo)志位置

ul{
  list-style-position:inside;
  }

CSS表格

表格邊框

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

折疊邊框

border-collapse:collapse;

表格的寬度和高度

width,height

表格的文字水平對(duì)齊

text-align:center/right/left;

表格的文字垂直對(duì)齊

vertical-align:bottom;

表格的內(nèi)邊距

padding

表格的背景顏色

background

盒子模型

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

根據(jù)上, 右, 下, 左的順時(shí)針規(guī)則, 簡(jiǎn)寫(xiě)為

margin: 40px 40px 40px 40px;

為便于記憶, 請(qǐng)參考下圖：

當(dāng)上下, 左右margin值分別一致, 可簡(jiǎn)寫(xiě)為:

margin: 40px 40px;

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

當(dāng)上下左右margin值均一致, 可簡(jiǎn)寫(xiě)為:

margin: 40px;

padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級(jí)元素內(nèi)部, content與border之間的距離

【注意】當(dāng)你想讓兩個(gè)元素的content在垂直方向(vertically)分隔時(shí), 既可以選擇padding-top/bottom, 也可以選擇margin-top/bottom, 在此建議你盡量使用padding-top/bottom來(lái)達(dá)到你的目的, 這是因?yàn)閏ss中存在Collapsing margins(折疊的margins)的現(xiàn)象.

邊框

邊框樣式：border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
邊框?qū)挾龋篵order-width
邊框顏色：border-color

綜合寫(xiě)法：

border:1px solid red;

輪廓(outline)

可以按順序設(shè)置如下屬性：

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通常可以設(shè)置為none、inline、block

visibility通常可以設(shè)置為hidden、visible

二者的區(qū)別在于display會(huì)將元素隱藏掉，并且位置不再被占據(jù)，而visibility則是占據(jù)原來(lái)的位置。

CSS塊級(jí)元素和內(nèi)聯(lián)元素—-display:block/inline/inline-block;

CSS定位(position)

position 屬性值的含義：

static

元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。

relative

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

absolute

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

fixed

元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過(guò)其包含塊是視窗本身。

CSS浮動(dòng)

設(shè)置浮動(dòng)：float:left/right;

清除浮動(dòng)：clear:both/left/right/null;

浮動(dòng)的兩個(gè)影響因素：1、文檔流 2、顯示類型

元素內(nèi)容溢出

溢出滾動(dòng)條

overflow:scroll（不管是否溢出都會(huì)有滾動(dòng)條）、auto（自動(dòng)添加）

溢出隱藏

overflow:hidden;

CSS的相關(guān)特性

1、繼承性

它不僅允許樣式應(yīng)用于某個(gè)特定的html標(biāo)簽元素，而且還可引用于其后代；

2、CSS層疊

當(dāng)有相同權(quán)重的樣式存在時(shí)，會(huì)根據(jù)這些CSS樣式的前后順序來(lái)決定，處于最后面的CSS樣式會(huì)被應(yīng)用，后面的CSS樣式會(huì)覆蓋前面的樣式。

總而言之：內(nèi)聯(lián)樣式表(標(biāo)簽內(nèi)部)>嵌入樣式表(當(dāng)前文件中)>外部樣式表(外部引入文件)

、什么是css

css的英文全稱是：Cascading Style Sheets，翻譯過(guò)來(lái)叫：層疊樣式表。

這其中有兩個(gè)關(guān)鍵字，一個(gè)是層疊一個(gè)是樣式。

樣式指的是給html調(diào)整樣式

層疊指的是可以疊加調(diào)整，給一個(gè)html的a標(biāo)簽指定5條樣式，5條樣式疊加起來(lái)作用到html的標(biāo)簽上。

舉個(gè)更容易理解的例子：（在index.html中寫(xiě)一個(gè)a標(biāo)簽）

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

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

二、css的作用

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

在正式開(kāi)講css前，先補(bǔ)充一點(diǎn)關(guān)于sublime text的快捷使用方法，這樣我們寫(xiě)代碼的速度就會(huì)變得快起來(lái)。

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

在sublime text這款編輯器里面可以快速生成html的主要結(jié)構(gòu)（頭部、體部），接下來(lái)看動(dòng)圖演示：

沒(méi)錯(cuò)，只要輸入一個(gè)“!”，按tab鍵就能快速生成html的主要結(jié)構(gòu)代碼了（下圖紅框的框住的就是tab鍵）

除了可以快速生成上面代碼，還以快速生成經(jīng)常使用的各種標(biāo)簽代碼：（如下圖演示）

如果你要寫(xiě)一個(gè)a標(biāo)簽，只需要寫(xiě)a再按tab鍵，sublime text就會(huì)自動(dòng)給你補(bǔ)全代碼。

當(dāng)然了，還有更快捷的

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

在“[]”里面寫(xiě)要給a標(biāo)簽添加的屬性，在{}里面寫(xiě)a標(biāo)簽的文字。如果有多個(gè)屬性的就寫(xiě)兩個(gè)“[]”。

具體看動(dòng)圖演示：

接下來(lái)再看看ul和li標(biāo)簽如何快速生成（ul里面包含5個(gè)li）

新聞后面的$用于生成一個(gè)序號(hào)，當(dāng)然你也可以不寫(xiě)，也可以寫(xiě)兩個(gè)，寫(xiě)兩個(gè)的話生成的就會(huì)是新聞01、新聞02

在sublime text中只要是html的標(biāo)簽就可以快捷生成，那在來(lái)試一試table

我們學(xué)過(guò)很多的html標(biāo)簽，你都可以拿來(lái)嘗試一下，要想事半功倍，熟練使用sublime text是個(gè)有效的途徑。

三、css的基本格式

在css的初始階段，建議大家把css代碼寫(xiě)在html的head標(biāo)簽中。

css代碼的樣式代碼寫(xiě)在style標(biāo)簽中。

具體看一下圖：

寫(xiě)一個(gè)a標(biāo)簽，讓a標(biāo)簽中的字變?yōu)榧t色

在style中寫(xiě)css代碼，沒(méi)有style，是不會(huì)有效果的。style可以寫(xiě)在任意位置，但是為了代碼規(guī)范，約定俗成都寫(xiě)在head標(biāo)簽中。

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

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

好了，今天的內(nèi)容就這么多。記得要勤動(dòng)手練習(xí)。

在線咨詢

上一篇：JQuery中html()與text()方法的區(qū)別
下一篇：「HTML」操作表格

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

一文讀懂HTML和CSS的關(guān)系

什么是CSS？

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

關(guān)于選擇器的優(yōu)先級(jí)：

CSS設(shè)置背景(background)

CSS設(shè)置文本格式

字體

CSS鏈接

列表樣式

CSS表格

border-collapse:collapse;

盒子模型

邊框

輪廓(outline)

CSS所有尺寸

display顯示類型

CSS定位(position)

CSS浮動(dòng)

元素內(nèi)容溢出

CSS的相關(guān)特性

您的項(xiàng)目需求