整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入 外部 CSS 文件。下面我們就來(lái)看看這些方式和它們的優(yōu)缺點(diǎn)。
內(nèi)聯(lián)方式
內(nèi)聯(lián)方式指的是直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS。
示例：
<div style="background: red"></div>
這通常是個(gè)很糟糕的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) <div> 擁有相同的樣式，你不得不重復(fù)地為每個(gè) <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長(zhǎng)，且使得網(wǎng)頁(yè)難以維護(hù)。
嵌入方式
嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書寫 CSS 代碼。
示例：
<head>
<style>
.content {
background: red;
}
</style>
</head>
嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁(yè)有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁(yè)時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁(yè)面有效，所以當(dāng)多個(gè)頁(yè)面需要引入相同的 CSS 代碼時(shí)，這樣寫會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。
鏈接方式
鏈接方式指的是使用 HTML 頭部的 <head> 標(biāo)簽引入外部的 CSS 文件。
示例：
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會(huì)在第一次加載時(shí)引入，以后切換頁(yè)面時(shí)只需加載 HTML 文件即可。
導(dǎo)入方式
導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。
示例：
<style> @import url(style.css); </style>
比較鏈接方式和導(dǎo)入方式
鏈接方式（下面用 link 代替）和導(dǎo)入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來(lái)比較這兩種方式，并且說(shuō)明為什么不推薦使用 @import。
小結(jié)：我們應(yīng)盡量使用 <link> 標(biāo)簽導(dǎo)入外部 CSS 文件，避免或者少用使用其他三種方式。
我們開門見山：編寫優(yōu)秀的 CSS 代碼是件十分痛苦的事情。很多開發(fā)人員都不想做 CSS 開發(fā)。你讓我干什么都行，但是 CSS 還是算了吧。
在我創(chuàng)建應(yīng)用的時(shí)候，從來(lái)都無(wú)法從 CSS 中享受到樂(lè)趣。但是你也躲不過(guò)去，是不是？我是說(shuō)，我們?nèi)褙炞⒂谟脩趔w驗(yàn)，但是如今設(shè)計(jì)也是不容忽視的部分。
項(xiàng)目剛開始的時(shí)候，一切都很美好。你有一些 CSS 選擇器，諸如 .title、input、#app 等等，非常簡(jiǎn)單。但是隨著應(yīng)用逐漸變大，CSS 也越來(lái)越糟。你對(duì) CSS 選擇器感到困惑。你會(huì)發(fā)現(xiàn)自己寫了一些 div#app .list li.item a 之類的東西。然后你一遍又一遍地寫相同的代碼。最后你把所有代碼都扔到文件末尾，因?yàn)槟愀静辉诤酰珻SS 爛透了。結(jié)果你得到了 500 行根本無(wú)法維護(hù)的 CSS 代碼。
我本人經(jīng)常和 CSS 苦苦糾纏
今天我的目的是：讓你寫出更好的 CSS。我想讓你回顧一下舊項(xiàng)目，然后想一想：天啊，我怎么會(huì)寫這樣的東西？
但是，你可能會(huì)想：好，你說(shuō)的很對(duì)，但是 CSS 框架呢？CSS 框架就是為了幫助我們寫出更好的 CSS 代碼，不是嗎？
當(dāng)然，但是 CSS 框架也有一些缺點(diǎn)：
既然你關(guān)注了這篇文章，那么你一定有自己的原因，對(duì)不對(duì)？好了，廢話不多說(shuō)，讓我們開始學(xué)習(xí)如何寫出更好地 CSS 代碼。
注意：這篇文章不是關(guān)于如何設(shè)計(jì)漂亮的應(yīng)用。本文是關(guān)于如何寫出便于維護(hù)的 CSS 代碼以及如何組織代碼。
SCSS
我將在我的例子中使用 SCSS。
SCSS 是一個(gè) CSS 的預(yù)處理器。從根本上來(lái)說(shuō)，它是一個(gè) CSS 的超集：它增加了一些很酷的功能，例如變量，嵌套，導(dǎo)入和混入（mixins）等。
下面介紹一些我們即將使用的功能。
變量
你可以在 SCSS 中使用變量。主要的好處在于可重用性。我們假設(shè)你的應(yīng)用有一組顏色。主色是藍(lán)色。
那么你處處都用到了藍(lán)色：按鈕的 background-color（背景色），標(biāo)題和鏈接的 color（顏色）。藍(lán)色無(wú)處不在。
突然有一天，你不喜歡藍(lán)色，開始喜歡綠色。
// Declare a variable
$primary-color: #0099ff;
// References a variable
h1 {
color: $primary-color;
}
嵌套
你可以在 SCSS 中使用嵌套。那么如下代碼：
h1 {
font-size: 5rem;
color: blue;
}
h1 span {
color: green;
}
可以寫成：
h1 {
font-size: 5rem;
color: blue;
span {
color: green;
}
}
可讀性更好了，是不是？你可以利用嵌套在更短時(shí)間內(nèi)寫出復(fù)雜的選擇器。
分塊與導(dǎo)入
從可維護(hù)性和可讀性的角度來(lái)說(shuō)，你無(wú)法將所有代碼都保存在一個(gè)大文件中。在實(shí)驗(yàn)或構(gòu)建小型應(yīng)用時(shí)，這種做法尚且可行，但是到了專業(yè)的級(jí)別……想都不要想。很幸運(yùn)的是，有了 SCSS 后，我們依然可以繼續(xù)沿用這種做法。
你可以通過(guò)使用前下劃線給文件命名，來(lái)創(chuàng)建分塊的文件：_animations.scss，_ base.scss，_variables.scss 等。
至于導(dǎo)入，你可以使用 @import 指令。例如，你可以這么做：
// _animations.scss
@keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
// header.scss
@import "animations";
h1 {
animation: appear 0.5s ease-out;
}
哈哈！你可能想，你在這里犯了一個(gè)錯(cuò)誤！應(yīng)該是 _animations.scss，而不是 animations ;)
非也。如果你使用這種命名方式，聰明的 SCSS 知道你指的是分塊文件。
關(guān)于變量、嵌套、分塊和導(dǎo)入，我們需要了解的就這么多。SCSS 還有很多其他功能：比如混入、繼承和其他指令（@for，@if，等等），在此不做一一介紹了。
如果你想了解更多信息，請(qǐng)查看相應(yīng)的文檔（https://sass-lang.com/guide）。文檔寫得很好，且易于理解。
組織 CSS 代碼：BEM 方法論
我記不清曾經(jīng)多少次在CSS類中使用包攬一切的名字了。比如：.button、.page-1、.page-2、.custom-input。
我們常常不知道如何命名。然而命名很重要。假如你正在構(gòu)建某個(gè)應(yīng)用，并且由于某種原因不得不將其擱置數(shù)月，那該怎么辦？還有更糟的，假如有人想把項(xiàng)目拿回去，該怎么辦？如果你的 CSS 代碼沒(méi)有恰當(dāng)?shù)拿敲凑б豢瓷先ズ茈y明白你在說(shuō)什么。
BEM 可以幫助我們解決這個(gè)問(wèn)題。BEM 是一種命名約定，是英文 Block Element Modifier（塊元素修飾符）的縮寫。
這種方法可以使我們的代碼結(jié)構(gòu)化，并提高模塊化和可重用性。現(xiàn)在讓我們說(shuō)一說(shuō)什么是塊、元素和修飾符。
塊
你可以把塊視為組件。還記得你小時(shí)候玩過(guò)樂(lè)高積木嗎？讓我們回憶一下小時(shí)候。
如果需要建造一個(gè)簡(jiǎn)單的房子，你會(huì)怎么做？你需要一個(gè)窗戶，一個(gè)屋頂，一扇門和一些墻壁。這些就是我們的塊。它們有著本身的意義。
元素
接下來(lái)，你應(yīng)該如何用你的樂(lè)高積木建造一個(gè)窗口呢？可能有些積木看起來(lái)像框架，如果你把四個(gè)這樣的積木組裝起來(lái)，就會(huì)得到一個(gè)漂亮的窗戶。這些就是我們的元素。它們是塊的一部分，它們對(duì)于建塊必不可少。但是，在塊外面的時(shí)候，它們便無(wú)用武之地。
修飾符
現(xiàn)在窗戶已經(jīng)建好了，但是你可能想要一個(gè)綠色或一個(gè)小窗戶。這些我們稱之為修飾符。它們是塊或元素上的標(biāo)志，它們用于改變行為，外觀等等。
注意事項(xiàng)
示例
以下是一個(gè)練習(xí)。你可以去你最喜歡或最常用的網(wǎng)站，然后想想看哪些是塊、元素和修飾符。
例如，以下是我想象中的 Google 商店：
現(xiàn)在該你了。認(rèn)真想想哪些地方可以改進(jìn)。與往常一樣，你必須自己搜索、實(shí)驗(yàn)和構(gòu)件，以便更好地滿足你的需求。
融會(huì)貫通
下面的示例演示了 BEM 的功能（https://codepen.io/thomlom/pen/RJvVdQ）。
寫一個(gè)博文組件
寫多個(gè)按鈕
組織 CSS 文件：7-1模式
你還跟得上我的節(jié)奏嗎？很好！現(xiàn)在讓我們來(lái)介紹如何組織 CSS 文件。這個(gè)部分可以真正幫助你提高工作效率，并幫助你立刻找到需要修改的 CSS 代碼。
為此，讓我們了解一下 7-1 模式。
你可能會(huì)想，我從未聽過(guò)這種模式。
相信我，這很簡(jiǎn)單。你必須遵守以下兩條規(guī)則：
7 個(gè)文件夾：
主文件
你需要將以上所有內(nèi)容導(dǎo)入到該文件中。
@import abstracts/variables;
@import abstracts/functions;
@import base/reset;
@import base/typography;
@import base/utilities;
@import components/button;
@import components/form;
@import components/user-navigation;
@import layout/header;
@import layout/footer;
...
我知道你覺得以上內(nèi)容有點(diǎn)太多，一時(shí)難以接受。這個(gè)架構(gòu)適合于大型項(xiàng)目，而非小項(xiàng)目。下面我們介紹一種更適合小項(xiàng)目的做法。
首先，你不需要 vendors 文件夾。可以將所有外部 CSS 代碼放在頭部的link標(biāo)簽內(nèi)。接下來(lái)，如果你的應(yīng)用只有一個(gè)主題的話，可以省略 themes 文件夾。最后，你可能不會(huì)有大量頁(yè)面特定的風(fēng)格，所以也 pages 也沒(méi)必要。好了，現(xiàn)在只剩下 4 個(gè)文件夾了。
然后，你有兩個(gè)選擇：
sass/
_animations.scss
_base.scss
_buttons.scss
_header.scss
...
_variables.scss
main.scss
你可以隨便選。
你可能會(huì)想：你說(shuō)服了我！但是我該如何使用呢？我是說(shuō)，哪些不支持scss文件的瀏覽器該怎么辦呢？
說(shuō)的好！這是我們的最后一步，我們現(xiàn)在就來(lái)學(xué)習(xí)如何將SCSS編譯為CSS。
從 SCSS 到 CSS
首先，你需要 Node.js 和 NPM（或 Yarn）。
我們將使用一個(gè)名為 node-sass 的包，它可以讓我們將 .scss 文件編譯為 .css 文件。
它的 CLI（命令行界面）相當(dāng)容易使用：
node-sass <input> <output> [options]
它有多個(gè)選擇，但我們只使用其中兩個(gè)：
如果你是一個(gè)好奇心很重的人（我希望如此，因?yàn)殚_發(fā)人員應(yīng)該好奇！）那么，請(qǐng)點(diǎn)擊這里查看完整的文檔（https://github.com/sass/node-sass#command-line-interface）。
現(xiàn)在我們知道需要用哪些工具。其余的工作更簡(jiǎn)單。只需按以下步驟操作：
touch index.html
mkdir -p sass/{abstracts,base,components,layout} css
cd sass && touch main.scss
{
...
"scripts": {
"watch": "node-sass sass/main.scss css/style.css -w",
"build": "node-sass sass/main.scss css/style.css --output-style compressed"
},
...
}
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<link rel=”stylesheet” href=”css/style.css”>
<title>My app</title>
</head>
<body>
<h1 class=”heading”>My app</h1>
</body>
</html>
然后就可以了，你準(zhǔn)備好了！你可以在編程的時(shí)候運(yùn)行npm run watch，并在瀏覽器中打開index.html文件。如果你想縮小CSS，只需運(yùn)行npm run build。
補(bǔ)充
添加實(shí)時(shí)重新加載
你可能希望添加實(shí)時(shí)重新加載以提高工作效率，而無(wú)需手動(dòng)重新加載本地index.html文件。
你可以按照以下簡(jiǎn)單的步驟操作：
{
...
"scripts": {
"start": "npm-run-all --parallel liveserver watch",
"liveserver": "live-server",
"watch": "node-sass sass/main.scss css/style.css -w",
},
...
}
現(xiàn)在如果你運(yùn)行 npm run start，就可以立即看到代碼的變更。
添加自動(dòng)前綴
我們?cè)O(shè)置好了開發(fā)工具，太棒了！現(xiàn)在，讓我們來(lái)談?wù)剺?gòu)建工具，特別是：自動(dòng)前綴（Autoprefixer）。
它是一個(gè)工具（尤其是postcss插件），它可以解析CSS，并利用這些值（https://caniuse.com/）將提供商的前綴加入到CSS規(guī)則中。
實(shí)際上，在構(gòu)建網(wǎng)站時(shí)，你可能會(huì)使用一些并非所有瀏覽器都完全支持的新功能。因此，提供商方案可以提供對(duì)這些功能的支持。
以下是一個(gè)示例：
-webkit-animation-name: myAnimation;
-moz-animation-name: myAnimation;
-ms-animation-name: myAnimation;
你可能會(huì)想，這寫起來(lái)太乏味了。這就是為什么我們需要自動(dòng)前綴來(lái)幫助我們的CSS代碼獲得瀏覽器的兼容，而不用增加額外的復(fù)雜性。
那么我們?nèi)绾斡酶斆鞯貥?gòu)建CSS呢？
還有最后幾步，請(qǐng)堅(jiān)持看下去，馬上就結(jié)束了。
{
...
"scripts": {
"start": "npm-run-all --parallel liveserver watch",
"liveserver": "live-server",
"watch": "node-sass sass/main.scss css/style.css -w",
"compile": "node-sass sass/main.scss css/style.css",
"prefix": "postcss css/style.css --use autoprefixer -o css/style.css",
"compress": "node-sass css/style.css css/style.css --output-style compressed",
"build": "npm-run-all compile prefix compress"
...
}
現(xiàn)在當(dāng)你運(yùn)行 npm run build 時(shí)，可以生成經(jīng)過(guò)壓縮的 CSS 代碼，并且添加了提供商前綴！太棒了是不是嗎？
但是你知道更酷的是什么嗎？我為你設(shè)置了一個(gè)代碼倉(cāng)庫(kù)（https://github.com/thomlom/scss-boilerplate），以幫助你迅速開始：）
如果你想知道我是如何在項(xiàng)目中應(yīng)用這些技術(shù)的，請(qǐng)點(diǎn)擊這里查看我的代碼倉(cāng)庫(kù)（https://github.com/thomlom/portfolio）和結(jié)果（https://thomlom.github.io/portfolio/）。我希望你能通過(guò)這些例子更深入理解。
呼～，今天就說(shuō)這么多！現(xiàn)在，你已準(zhǔn)備好可以開始編寫具有可維護(hù)性、模塊化和可重用性的 CSS 代碼了。
我希望你喜歡這篇文章。歡迎在下方留言分享你的想法。
原文：https://medium.freecodecamp.org/how-to-get-better-at-writing-css-a1732c32a72f
作者：homas Lombart，軟件開發(fā)。
譯者：彎月，責(zé)編：屠敏
“征稿啦”
CSDN 公眾號(hào)秉持著「與千萬(wàn)技術(shù)人共成長(zhǎng)」理念，不僅以「極客頭條」、「暢言」欄目在第一時(shí)間以技術(shù)人的獨(dú)特視角描述技術(shù)人關(guān)心的行業(yè)焦點(diǎn)事件，更有「技術(shù)頭條」專欄，深度解讀行業(yè)內(nèi)的熱門技術(shù)與場(chǎng)景應(yīng)用，讓所有的開發(fā)者緊跟技術(shù)潮流，保持警醒的技術(shù)嗅覺，對(duì)行業(yè)趨勢(shì)、技術(shù)有更為全面的認(rèn)知。
如果你有優(yōu)質(zhì)的文章，或是行業(yè)熱點(diǎn)事件、技術(shù)趨勢(shì)的真知灼見，或是深度的應(yīng)用實(shí)踐、場(chǎng)景方案等的新見解，歡迎聯(lián)系 CSDN 投稿，聯(lián)系方式：微信（guorui_1118，請(qǐng)備注投稿+姓名+公司職位），郵箱（guorui@csdn.net）。
eb開發(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核心技法（全彩）》一書。本書主線清晰，講解簡(jiǎn)潔，并提供在線效果演示效果，非常適合小白上手！
1 HTML是骨架
很難想象一個(gè)人在桌前對(duì)著一塊砧板坐一夜，隔一會(huì)兒就噼里啪啦敲幾下，一會(huì)兒哭一會(huì)兒笑，是一種什么景象。事實(shí)上，在貓眼中我們就是這樣的。只不過(guò)我們面對(duì)的是一塊會(huì)發(fā)光的“砧板”而已。但為什么這塊“板子”如此吸引人？“上網(wǎng)”到底是在做什么？
獲取信息。
重點(diǎ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)要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過(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)，見下方的代碼：
代碼
<artcle>
<h1>背影</h1>
<p>
我說(shuō)道：“爸爸，你走吧。”他望車外看了看，說(shuō)：“我買幾個(gè)橘子去。你就在此地，不要走動(dòng)。”我看那邊月臺(tái)的柵欄外有幾個(gè)賣東西的等著顧客。走到那邊月臺(tái)，須穿過(guò)鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過(guò)去自然要費(fèi)事些。我本來(lái)要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過(guò)鐵道，要爬上那邊月臺(tái)，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評(píng)論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>
</div>
<divclass="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認(rèn)他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
一頭霧水沒(méi)關(guān)系，后面我們會(huì)細(xì)說(shuō)每一個(gè)部分。總之這段內(nèi)容給人感覺反而更繁瑣。但繁瑣是代價(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è)面效果，見下方的示例。
代碼
<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>
我說(shuō)道：“爸爸，你走吧。”他望車外看了看，說(shuō)：“我買幾個(gè)橘子去。你就在此地，不要走動(dòng)。”我看那邊月臺(tái)的柵欄外有幾個(gè)賣東西的等著顧客。走到那邊月臺(tái)，須穿過(guò)鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過(guò)去自然要費(fèi)事些。我本來(lái)要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過(guò)鐵道，要爬上那邊月臺(tái)，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評(píng)論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>
</div>
<div class="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認(rèn)他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</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)。比如，讓自己的博客以多欄顯示，以便在視覺上區(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>，見下方的示例。
代碼
<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ù)、削足適履的工作太多，基本上寫一次就再也不想改了。
這個(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 元素聽著
對(duì)齊方式 居中。
字體顏色 黑色。
如果想將所有段落字體放大，則像下面這樣：
所有p 元素聽著
字體大小 150%。
這種方式的確很高效！同時(shí)這個(gè)規(guī)則與HTML語(yǔ)法無(wú)關(guān)，相當(dāng)于另一種語(yǔ)言。這樣結(jié)構(gòu)和樣式就不會(huì)互相影響，結(jié)構(gòu)是結(jié)構(gòu)，樣式是樣式，兩者隔離開了。如果想修改樣式，則完全不需要?jiǎng)贖TML大駕，只需要修改樣式文件即可，更便于管理和維護(hù)。這就是CSS，只不過(guò)其語(yǔ)法更簡(jiǎn)潔。
下面以修改標(biāo)題對(duì)齊方式為例：
h1 { /* 所有h1 元素聽著 */
text-align: center; /* 對(duì)齊方式 居中 */
}
通過(guò)批量選擇和處理，極大地提高了開發(fā)效率，降低了維護(hù)成本，四兩撥千斤。
（完）
圖書推薦
《HTML 5與CSS 3核心技法（全彩）》
表嚴(yán)肅 著
本書能夠為自學(xué)Web開發(fā)初學(xué)者建立一套HTML與CSS的核心知識(shí)框架，同時(shí)借助豐富的示例讓初學(xué)者有一個(gè)愉悅、輕松的學(xué)習(xí)過(guò)程。
想從事前端開發(fā)的，可將本書作為學(xué)習(xí)的起點(diǎn)。正從事前端開發(fā)的，可將本書作為速查的手冊(cè)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
