當(dāng)然這只是一個(gè)比喻，我絕沒(méi)有挑起代碼界圣戰(zhàn)的意思。從 Html 進(jìn)入到 CSS 世界的感覺(jué)就好像從人間一步邁進(jìn)了神國(guó)，一些曾經(jīng)很難做到的事情，現(xiàn)在變得信手拈來(lái)了。宛如我們掌握了神的力量。當(dāng)然這么說(shuō)下去的話后面我們要學(xué)的 JavaScript 就應(yīng)該稱(chēng)作眾神之神了……

玩笑開(kāi)完了，玩代碼的時(shí)間到了，我們先來(lái)簡(jiǎn)單認(rèn)識(shí)一下 CSS。

首先看一下我們前邊寫(xiě)的代碼：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <p>Hello world！</p>
        <p>Code is so easy！</p>
    </body>
</html>

挺簡(jiǎn)單的代碼，效果如下：

Hello world！

Code is so easy！

就是兩段文字，現(xiàn)在我給他添加一點(diǎn)屬性哦：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <p style="color:red;font-size:12px;">Hello world！</p>
        <p>Code is so easy！</p>
    </body>
</html>

大家看到，我就是給第一個(gè)段落加了一個(gè)屬性。來(lái)看看效果：

Hello world！

Code is so easy！

我們來(lái)分析代碼哦，style 是樣式的意思，那么很容易明白，這個(gè)屬性就是給當(dāng)前的元素加上一些樣式。那么我們加了什么樣的樣式呢？color:red; 顏色是紅色，顏色（color）是一個(gè) CSS 屬性，而紅色（red）是這個(gè)屬性的值。哎，著就跟 Html 有區(qū)別了，Html 是屬性=屬性值，而 CSS 是屬性:屬性值。（特別強(qiáng)調(diào)：都是英文標(biāo)點(diǎn)哦）。然后 CSS 的每個(gè)屬性結(jié)束都要用英文的分號(hào)標(biāo)記出來(lái)，所以 font-size 就是第二個(gè)屬性了，意思是字體的尺寸，屬性值是 12px ，于是我們就看到了上邊的效果。

所以看到了，CSS 也不難，不過(guò)是換個(gè)格式去寫(xiě)屬性，屬性值。說(shuō)來(lái)說(shuō)去也就像代數(shù)里的賦值操作，然后就沒(méi)有然后了。

那你說(shuō)這個(gè) CSS 有啥好的啊？方便！來(lái)看哦，現(xiàn)在代碼里有兩個(gè)段落，那么我們假設(shè)我們有一百個(gè)段落（我不寫(xiě)了，就拿這兩個(gè)代表了）要是我想都設(shè)置成剛才那樣，咋弄？把 style 屬性整個(gè)復(fù)制，然后挨個(gè) <p></p> 標(biāo)簽里粘貼？好不容易粘完了，老板告訴你改回第一稿……

來(lái)看我怎么寫(xiě)：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            p {
                color:red;
                font-size:12px;
            }
        </style>
    </head>
    <body>
        <p>Hello world！</p>
        <p>Code is so easy！</p>
    </body>
</html>

效果如下：

Hello world！

Code is so easy！

好了，再來(lái)分析代碼哦～

我們說(shuō)了 <head></head> 標(biāo)簽是用來(lái)聲明東西的，那么我在他里面聲明一下這個(gè)頁(yè)面的樣式他應(yīng)該不會(huì)有什么意見(jiàn)，就是本職工作啊。但是我們要把這些樣式放在一起，不許他們亂跑，所以寫(xiě)上 <style></style> 標(biāo)記一下，這里面的都是樣式，就是都是 CSS 代碼啊，你要按著 CSS 那么處理。于是這個(gè)事情明白了。

再看里邊，p 代表標(biāo)簽 <p></p> 這個(gè)猜都能猜出來(lái)，是吧，后面是他的樣式（color，font-size），我們前邊也都認(rèn)識(shí)過(guò)了。現(xiàn)在的問(wèn)題是大括號(hào)，大括號(hào)就是說(shuō)這部分代碼都是前邊 p 的啊，又是一前一后標(biāo)記一下，這么簡(jiǎn)單的事情我們一想就明白了。

看到啦，我在 CSS 里說(shuō) p {……}，于是頁(yè)面里所有的 <p></p> 標(biāo)簽就都獲得了這個(gè)樣式，很方便是不是？

——“老板，那一百段的文字顏色我都改好了！”

——“這么快！沒(méi)騙我吧，正好我這還有點(diǎn)活，你就能者多勞吧……”

CSS 這么厲害的東西確實(shí)是能者多勞，現(xiàn)在我們一般只用 Html 寫(xiě)網(wǎng)頁(yè)的框架和內(nèi)容，而樣式全部交給 CSS 處理，他清晰明了，便于管理和修改，而且也十分得強(qiáng)大。

但是能者多勞就該出問(wèn)題了，你想啊，CSS 管理了整個(gè)頁(yè)面的樣式，有著很多內(nèi)容，全放在頁(yè)頭，我們想看網(wǎng)頁(yè)的 Html 結(jié)構(gòu)的時(shí)候就要往下找很久。這就好像把檔案管理員跟老板放在一個(gè)辦公室，老板遲早要被堆積成山的檔案埋沒(méi)（為什么說(shuō)到這里我很開(kāi)心呢？）。

然后還有一個(gè)問(wèn)題，你想我寫(xiě)一個(gè)網(wǎng)站，肯定很多樣式是相似或者相同的，那么這部分咋整？每個(gè)頁(yè)面復(fù)制一份？然后老板說(shuō)了，吧所有頁(yè)面的文字都換成藍(lán)色，你又挨個(gè)頁(yè)面復(fù)制粘貼……

所以我們要把 CSS 獨(dú)立出來(lái)，這樣他不會(huì)影響我方便的閱讀 Html，還可以在多個(gè)頁(yè)面里調(diào)用，誰(shuí)用他就叫他，我們共用一個(gè)就好啦。是啊，公司就一個(gè)檔案管理員，不是一個(gè)部門(mén)塞一個(gè)，那樣機(jī)構(gòu)臃腫，職能重疊，效率低下……

所以我們新建一個(gè) css 為后綴的文件，比如叫做 style.css，文件名你隨意啊，然后把這部分代碼粘進(jìn)去保存。

p {
    color:red;
    font-size:12px;
}

這就是獨(dú)立的 CSS 文件了。然后我們把我們的 Html 代碼改成：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link href="mycss/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <p>Hello world！</p>
        <p>Code is so easy！</p>
    </body>
</html>

我們發(fā)現(xiàn)這就是在普通的 Html 文檔上加了一個(gè) link 標(biāo)簽，我們來(lái)分析一下，link 是鏈接的意思，就是我們要把我們的 CSS 文件鏈接到這個(gè)文檔來(lái)，要不然瀏覽器怎么知道你要用哪個(gè) CSS 文件呀。所以這是一個(gè)聲明，放在 head 勢(shì)力范圍內(nèi)沒(méi)錯(cuò)。

現(xiàn)在研究 link 的屬性哦，href 是鏈接到的地址，就是我們要用的 CSS 文件地址，我這里寫(xiě)的是相對(duì)地址，所以你不要光是照著抄，要寫(xiě)你自己那個(gè) CSS 文件的相對(duì)地址哦，否則找不到文件自然就出錯(cuò)了。

rel 屬性是說(shuō)被鏈接文檔和當(dāng)前文檔之間的關(guān)系，就是樣式表（stylesheet）嘍，順便說(shuō)一下 CSS （Cascading Style Sheets）的中文名稱(chēng)是“層疊樣式表”，簡(jiǎn)稱(chēng)“樣式表”。

然后 type 是類(lèi)型，text/css 說(shuō)的是這是一個(gè)文本文件（text），同時(shí)也是一個(gè) css 格式的文件。

當(dāng)然這種格式也不用記，跟我一樣用的時(shí)候抄一下就好了。所以呢，今天我們學(xué)習(xí)了 CSS 在 Html 文件中的三種出場(chǎng)方式和一些 CSS 的優(yōu)點(diǎn)。大家可以看學(xué)習(xí)卡片中的總結(jié)再?gòu)?fù)習(xí)一下主要知識(shí)點(diǎn)哦～

本章學(xué)習(xí)卡片：卡片 13

本書(shū)是收費(fèi)的，不過(guò)交費(fèi)憑自覺(jué)。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書(shū)將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

主站首發(fā)： http://coffee.zji.me/
Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
簡(jiǎn)書(shū)： http://www.jianshu.com/users/d37eaf3de0ff
站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系： dms@zji.me

上一篇：第十九章導(dǎo)航條（四）下一篇：第五十六章一套工具

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

第十三章 神一樣的 CSS

第十三章神一樣的 CSS