很長(zhǎng)的一段時(shí)間中，Vue 官方都以簡(jiǎn)單上手作為其推廣的重點(diǎn)。這確實(shí)給 Vue 帶來(lái)了非常大的用戶量，尤其是最追求需求開(kāi)發(fā)效率， 往往不那么在意工程代碼質(zhì)量的國(guó)內(nèi)中小企業(yè)中，Vue 占據(jù)的份額極速增長(zhǎng)。但是作為開(kāi)發(fā)者自身，我們必須要認(rèn)清一個(gè)重點(diǎn)，簡(jiǎn)單易用從來(lái)不應(yīng)該在技術(shù)選型中占據(jù)很大的份額，可維護(hù)性才是。

以防萬(wàn)一有的同學(xué)實(shí)在不看官方文檔，我先提一嘴，SFC 就是寫(xiě) Vue 組件的時(shí)候?qū)懙?vue文件，這一個(gè)文件就是一個(gè) SFC，全稱 Single File Component，也即單文件組件。

在開(kāi)始說(shuō)我個(gè)人的觀點(diǎn)之前，我們先來(lái)看幾個(gè)事實(shí)：

一是：Vue3 的定義原生支持 JSX，并且 Vue3 源碼中有jsx.d.ts來(lái)便于使用 JSX。 不知道同學(xué)們看到這里會(huì)想到什么， 我的第一反應(yīng)是：社區(qū)對(duì)于 JSX 的需求聲音是不小的，所以會(huì)反向推動(dòng) Vue3 官方對(duì)于 JSX 的支持。

二是：AntDesign 的 vue3 版本，基本全部都是用 JSX 開(kāi)發(fā)的，而且 Vue3 現(xiàn)在官方的 babel-jsx 插件就是阿里的人一開(kāi)始維護(hù)的， 雖然我向來(lái)不喜歡阿里系的 KPI 推動(dòng)技術(shù)方式，而且現(xiàn)在的 JSX 語(yǔ)法支持也不是很符合我的期望，但至少在使用 JSX 開(kāi)發(fā)是更優(yōu)秀的選擇這點(diǎn)上，我還是很認(rèn)可 AntDesign 團(tuán)隊(duì)的。

OK，說(shuō)這些呢，主要是先擺出一些事實(shí)作為依據(jù)，讓有些同學(xué)可以不需要拿什么：

• 啊，這都是你空想的，你太自以為是了
• 你再怎么想都沒(méi)用，咱們 Vue 就是應(yīng)該用 SFC 開(kāi)發(fā)

這些觀點(diǎn)來(lái)批斗我，首先我都會(huì)從客觀的角度來(lái)分析為什么，至少是我是能講出優(yōu)劣勢(shì)的理由的。

OK，前言差不多到這里，接下來(lái)咱給您分析分析，為什么你應(yīng)該選擇 JSX 來(lái)開(kāi)發(fā) Vue。

TypeScript 支持

其實(shí)第一點(diǎn)就已經(jīng)是殺手了，對(duì)于想要使用 TypeScript 來(lái)開(kāi)發(fā) Vue3 應(yīng)用的同學(xué)來(lái)說(shuō)，這簡(jiǎn)直就是 SFC 無(wú)法克服的世界難題。

一句話概括：TypeScript 原生支持 JSX 語(yǔ)法，而基本無(wú)望 TS 官方能支持 SFC 的 template 語(yǔ)法。

TS 毫無(wú)疑問(wèn)在前端社區(qū)的重要性越來(lái)越大，但凡未來(lái)對(duì)于代碼質(zhì)量有一定要求的前端團(tuán)隊(duì)，都應(yīng)該會(huì)選擇使用 TS 來(lái)進(jìn)行開(kāi)發(fā)。 而且現(xiàn)在基本上在 NPM 上都能看到包你都能找到對(duì)應(yīng)的 TS 定義，現(xiàn)在使用 TS 開(kāi)發(fā)成本已經(jīng)只剩下你是不是會(huì) TS 語(yǔ)法了，在這種情況下是否支持 TS 則是開(kāi)發(fā)模式在未來(lái)走不走的遠(yuǎn)的重要原因。

目前 SFC 只能通過(guò)shim讓 TS 可以引入.vue文件，但是對(duì)于所有 SFC 的組件的定義都是一樣的：

declare module '*.vue' {
    import { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, {}, any>
    export default component
}

也就是說(shuō)你引入的 SFC 組件，TS 是不知道這個(gè)組件的 Props 應(yīng)該接收什么的。所以你無(wú)法享受到這些 TS 的優(yōu)勢(shì)：

• 開(kāi)發(fā)時(shí)的自動(dòng)提示
• 編譯時(shí)的 TS 校驗(yàn)，讓你盡早發(fā)現(xiàn)問(wèn)題
• 編譯組件生成你的組件定義（對(duì)于類庫(kù)開(kāi)發(fā)尤其重要）

當(dāng)然你會(huì)說(shuō)既然 Vue 官方能開(kāi)發(fā)處 SFC 的語(yǔ)法，自然會(huì)支持這些特性。我表示這當(dāng)然有可能，但是這個(gè)難度是非常大的，需要很多方面的支持，甚至可能需要 TS 官方團(tuán)隊(duì)愿意協(xié)助， 但是我想不到 TS 官方有什么理由來(lái)支持 SFC，因?yàn)檫@只是 Vue 自己創(chuàng)建的方言，在其他場(chǎng)景下是沒(méi)有使用的，TS 是面向全社區(qū)的，我覺(jué)得他們不會(huì)考慮主動(dòng)來(lái)支持 SFC。

那么有同學(xué)要問(wèn)了，JSX 不也是非原生的 JS 語(yǔ)法么，他怎么就能讓 TS 官方支持了呢，是不是 FB 和微硬之間有什么 PY 交易？

這就涉及第二點(diǎn)了，JSX 和靜態(tài)模板的靈活性區(qū)別。

JSX 其實(shí)并不是方言

很多人弄錯(cuò)了一個(gè)問(wèn)題，就是覺(jué)得 SFC 的模板語(yǔ)法和 JSX 是一樣的，都是一種別人發(fā)明的語(yǔ)法，并不是 JS 原生的。這是事實(shí)，但又有一些區(qū)別，這個(gè)區(qū)別主要是體現(xiàn)在對(duì)于 JSX 的認(rèn)知上。

一句話概括：JSX 并沒(méi)有擴(kuò)展 JS 的語(yǔ)法，他只是縮略了 JS 的寫(xiě)法！其本質(zhì)就是 JS 的語(yǔ)法糖

就像 es6 給增加的語(yǔ)法糖，比如

const a = 1
const b = 2

const obj = { a, b }

// 其實(shí)就等價(jià)于
const obj = { a: a, b: b }

這種寫(xiě)法并沒(méi)有擴(kuò)展 JS 的能力，只是簡(jiǎn)便了寫(xiě)法，JSX 也是一樣的。

JSX 其實(shí)就是方法調(diào)用，他和 JS 是有一對(duì)一對(duì)應(yīng)關(guān)系的，我們來(lái)看一個(gè)例子：

const element = <div id="root">Hello World</div>

這里的 JSX 語(yǔ)法編譯之后其實(shí)就是：

const element = createElement('div', { id: 'root' }, 'Hello World')

而 JSX 就是這些了，沒(méi)有什么更多的內(nèi)容，所以說(shuō) JSX 只是方便我們寫(xiě)嵌套的函數(shù)調(diào)用的語(yǔ)法糖，而其本身沒(méi)有擴(kuò)展任何其他的內(nèi)容。

但是 SFC 就不一樣了。

SFC 定義的不僅是語(yǔ)法，更是文件。

SFC 的具體定義是單文件組件，它本身就是把一個(gè)文件看作一個(gè)單位，所以他的約束性是要大很多的，你必須具有固定的文件結(jié)構(gòu)才能使用 SFC，這做了很多的限制：

• 一個(gè)文件只能寫(xiě)一個(gè)組件
• 節(jié)點(diǎn)片段只能寫(xiě)在 template 里面，非常不靈活
• 變量綁定只能獲取this上面的內(nèi)容，不能使用全局變量（很多時(shí)候我們都要把全局變量先掛載到this上）

我們一點(diǎn)點(diǎn)來(lái)講

一個(gè)文件只能寫(xiě)一個(gè)組件

這個(gè)說(shuō)實(shí)話非常非常不方便，很多時(shí)候我們寫(xiě)一個(gè)頁(yè)面的時(shí)候其實(shí)經(jīng)常會(huì)需要把一些小的節(jié)點(diǎn)片段拆分到小組件里面進(jìn)行復(fù)用（如果你現(xiàn)在沒(méi)有這個(gè)習(xí)慣可能就是因?yàn)?SFC 的限制讓你習(xí)慣了全部寫(xiě)在一個(gè)文件內(nèi)）。

React 生態(tài)中豐富的 css-in-js 方案就是很好的例子，我們可以通過(guò)：

const StyledButton = styled('button', {
    color: 'red',
})

如果我們這個(gè)頁(yè)面需要使用特定樣式的按鈕，通過(guò)這種方式在頁(yè)面文件里面封裝一下是非常常見(jiàn)的。因?yàn)闆](méi)必要把這個(gè)組件拆分出去，他也不是一個(gè)可復(fù)用的組件，拆分出去了還要多一次import。

Vue 生態(tài)基本沒(méi)有 css-in-js 的成熟方案其實(shí)跟這個(gè)限制也很有關(guān)系。

再來(lái)一個(gè)例子，比如我們封裝了一個(gè) Input 組件，我們希望同時(shí)導(dǎo)出 Password 組件和 Textarea 組件來(lái)方便用戶根據(jù)實(shí)際需求使用，而這兩個(gè)組件本身內(nèi)部就是用的 Input 組件，只是定制了一些 props：

const Input = { ... }

export default Input

export const Textarea = (props) => <Input multiline={true} {...props} />

export const Password = (props) => <Input type="password" {...props} />

在 JSX 中可以非常簡(jiǎn)單地實(shí)現(xiàn)，但是如果通過(guò) SFC，你可能就要強(qiáng)行拆成三個(gè)文件，另外為了方便，你可能還要增加一個(gè)index.js來(lái)導(dǎo)出這三個(gè)組件，你能想象這多了多少工作量么。

節(jié)點(diǎn)片段只能寫(xiě)在 template 里面，非常不靈活

我不知道有多少同學(xué)看過(guò) Vue 的 template 編譯出來(lái)之后的代碼，以我的經(jīng)驗(yàn)來(lái)說(shuō)看過(guò)的可能不會(huì)超過(guò) 50%（樂(lè)觀估計(jì)），建議同學(xué)們?nèi)绻€不了解的，可以去嘗試看一下。

為什么要看這個(gè)呢？因?yàn)槟憧戳酥竽銜?huì)發(fā)現(xiàn)，你在 template 里面寫(xiě)的類似 HTMl 的內(nèi)容，其實(shí)跟 HTML 根本沒(méi)啥關(guān)系，他們也會(huì)被編譯成類似 JSX 編譯出來(lái)的結(jié)果。

{
    render(h) {
        return h('div', {on: {}, props: {}}, h('span'))
    }
}

類似這樣的結(jié)果，而這里面h函數(shù)調(diào)用的結(jié)果就是一個(gè) VNode，是 Vue 中的節(jié)點(diǎn)的基礎(chǔ)單元。那么既然這些單元就是一個(gè)對(duì)象，其實(shí)理所當(dāng)然的，他們是可以作為參數(shù)傳遞的。 也就是說(shuō)，理論上他們是可以通過(guò)props把節(jié)點(diǎn)當(dāng)作參數(shù)傳遞給其他組件的。

這個(gè)做法在 React 中非常常見(jiàn)，叫做renderProps，并且其非常靈活：

const Comp = () => <Layout header={<MyHeader />} footer={<MyFooter />} />

但是因?yàn)?SFC 模板的限制，我們很難在 SFC 里面的 props 上寫(xiě)節(jié)點(diǎn)：

<template>
    <Layout :header="<MyHeader/>"></Layout>
</template>

這樣寫(xiě)是不行的，因?yàn)?SFC 定義了:header綁定接受的只能是 js 表達(dá)式，而<MyHeader/>顯然不是。

因?yàn)橥ㄟ^(guò) props 傳遞不行，所以 Vue 才發(fā)明了 slot 插槽的概念

雖然我們一直再說(shuō) Vue 簡(jiǎn)單，但是事實(shí)上ScopedSlots一度成為新手理解 Vue 的噩夢(mèng)，很多同學(xué)都被這個(gè)繞來(lái)繞去的作用域整的死去活來(lái)。

我們看一個(gè)ScopedSlots的例子：

<template>
    <Comp>
        <template v-slot:scope="ctx">
            <div>{{ctx.name}}</div>
        </template>
    </Comp>
</template>

這里ctx是Comp里面的屬性，通過(guò)這種方式傳遞出來(lái)，讓我們?cè)诋?dāng)前組件可以調(diào)用父組件里面的屬性。這簡(jiǎn)直就是理解的噩夢(mèng)，但是如果用 JSX 實(shí)現(xiàn)類似功能就非常簡(jiǎn)單：

<Comp scope={name => <div>{name}</div>} />

我們只是給一個(gè)叫做scope的 props 傳遞來(lái)一個(gè)函數(shù)，這個(gè)函數(shù)接受一個(gè)name屬性，在Comp里面會(huì)調(diào)用這個(gè)函數(shù)并傳入name。 簡(jiǎn)單來(lái)說(shuō)我們傳入的就是一個(gè)構(gòu)建節(jié)點(diǎn)片段的函數(shù)，就是這么簡(jiǎn)單。

這就是因?yàn)?SFC 的模板的限制，導(dǎo)致靈活性不足，Vue 需要去創(chuàng)造概念，創(chuàng)造關(guān)鍵字來(lái)抹平這些能力的不足，而創(chuàng)造的概念自然就引入了學(xué)習(xí)成本。

所以其實(shí)我一直不認(rèn)可 Vue 比 React 好學(xué)的說(shuō)法的，如果你真的認(rèn)真研究所有用法，并且總是嘗試用最合理的方式實(shí)現(xiàn)功能，那么 Vue 絕對(duì)不會(huì)比 React 簡(jiǎn)單。

變量綁定只能獲取this上面的內(nèi)容，不能使用全局變量

這個(gè)體現(xiàn)在兩個(gè)方面，一個(gè)是我們定義在全局的一些固定數(shù)據(jù)如果要在組件內(nèi)使用的話，就要通過(guò)this掛載到組件上。

比如我們緩存了一份城市數(shù)據(jù)，這種數(shù)據(jù)基本上是不會(huì)改的，所以也沒(méi)必要掛載到組件上讓其能夠響應(yīng)式。但是在 SFC 里面這是做不到的， 因?yàn)槟０宓膱?zhí)行上下文是在編譯時(shí)綁定。你在模板里面訪問(wèn)的變量，都會(huì)在編譯時(shí)自動(dòng)綁定到this上，因?yàn)槟０逍枰幾g，其本身也是字符串不具有作用域的概念。

而這在 JSX 中則不復(fù)存在：

const citys = []

const Comp = () => {
    return citys.map(c => <div>{c}</div>)
}

另外一個(gè)方面則是在組件使用上，在 SFC 中，組件必須事先注冊(cè)，因?yàn)槲覀冊(cè)谀０謇锩鎸?xiě)的只能是字符串而不能是具體某個(gè)組件變量。 那么模板中的組件和真實(shí)的組件對(duì)象只能通過(guò)字符串匹配來(lái)實(shí)現(xiàn)綁定。這帶來(lái)了以下問(wèn)題：

• 多了注冊(cè)組件這個(gè)步驟，增加代碼量
• 通過(guò)字符串名注冊(cè)自然就會(huì)出現(xiàn)可能的沖突問(wèn)題
• 模板解析組件支持不同的樣式，比如<MyComp>和<my-comp>，容易導(dǎo)致風(fēng)格不一的問(wèn)題

在 JSX 中則沒(méi)有這些問(wèn)題，因?yàn)?JSX 里面直接使用組件引用作為參數(shù)：

const Comp = {...}

const App = () => <Comp />

需要通過(guò)directive來(lái)擴(kuò)展能力

其實(shí)上面能看出來(lái)，除了 SFC 本身的問(wèn)題之外，Vue 使用字符串模板也會(huì)帶來(lái)很多的靈活性問(wèn)題。 最直接的證據(jù)，就是 Vue 使用了directive來(lái)擴(kuò)展功能（當(dāng)然這不是 Vue 發(fā)明的，老早的模板引擎就有類似問(wèn)題）。

為什么說(shuō)directive是不得已的選擇呢？因?yàn)殪o態(tài)模板缺失邏輯處理的能力。我們拿列表循環(huán)舉例，在 JS 中我們可以非常方便地通過(guò)map函數(shù)來(lái)創(chuàng)建列表：

const list = arr.map(name => <span key={name}>{name}</span>)

而因?yàn)?JSX 本身就是函數(shù)調(diào)用，所以上面的代碼和 JSX 結(jié)合起來(lái)也非常自然：

const App = () => (
    <div>
        <Header />
        {arr.map(name => (
            <span key={name}>{name}</span>
        ))}
    </div>
)

上面的例子對(duì)應(yīng)到 JS 如下：

const App = () =>
    createElement('div', {}, [
        <Header />,
        arr.map(name => createElement('span', { key: name }, name)),
    ])

這仍然是因?yàn)?JSX 只是 JS 的語(yǔ)法糖的原因，所有能在 JS 中實(shí)現(xiàn)的在 JSX 里面都能實(shí)現(xiàn)。

而 SFC 的模板是基于字符串編譯的，其本身就是一段字符串，我們不能直接在模板里面寫(xiě)map來(lái)循環(huán)節(jié)點(diǎn)，（當(dāng)然我們可以在可以接收表達(dá)式的地方寫(xiě)，比如v-on里面）。

那么我們不能循環(huán)節(jié)點(diǎn)，有需要這樣的功能來(lái)渲染列表，怎么辦呢？就是發(fā)明一個(gè)標(biāo)志來(lái)告訴編譯器這里需要循環(huán)，在 Vue 中的體現(xiàn)就是v-for指令。

同學(xué)們可能要問(wèn)了，既然 Vue 能實(shí)現(xiàn)v-for，為什么不直接實(shí)現(xiàn)表達(dá)式循環(huán)列表呢？他當(dāng)然也可以實(shí)現(xiàn)，但是他肯定不會(huì)這么選，因?yàn)槌杀咎吡恕?他要這么做就相當(dāng)于他要實(shí)現(xiàn)一個(gè) JS 引擎，而其實(shí)里面很多內(nèi)容又是不必須的，一個(gè)v-for其實(shí)就能夠適用大部分情況了。

但有了v-for就需要v-if，那么后面還會(huì)需要其他各種能力，這就是一種方言的產(chǎn)生和發(fā)展的過(guò)程。

當(dāng)然指令也不僅僅是 JS 表達(dá)式的代替品，其本身也是增加了一些其他能力的，比如它能夠讓我們更方便地訪問(wèn) DOM 節(jié)點(diǎn)， 但是嘛，我們用框架的理由不就是為了能夠盡可能的屏蔽 DOM 操作嘛～

總結(jié)

以上就是我對(duì)應(yīng)該選擇使用 JSX 還是 SFC 進(jìn)行開(kāi)發(fā)的分析，其實(shí)歸根到底 SFC 的問(wèn)題在于其沒(méi)有擁抱 JS， 他的語(yǔ)法是自己發(fā)明的，他需要有一個(gè) JS 實(shí)現(xiàn)的 compiler 來(lái)讓其最終能在 JS 環(huán)境中運(yùn)行，這本質(zhì)上就是一種發(fā)明， 我們不能否認(rèn)發(fā)明確實(shí)有優(yōu)點(diǎn)，但我們也不能只看有點(diǎn)不看問(wèn)題，沒(méi)能擁抱 JS 自然就很難完全復(fù)用 JS 社區(qū)的優(yōu)勢(shì) 而 JS 社區(qū)一直在蓬勃發(fā)展，好用的工具一直在涌現(xiàn)，而 SFC 想要使用 JS 社區(qū)的這些工具還要自己再實(shí)現(xiàn)一份，我們可以細(xì)數(shù)以下 SFC 做了哪些兼容

• vue-loader 之于 webpack
• eslint-plugin-vue 之于 eslint
• rollup-plugin-vue 之于 rollup
• vue-jest 之于 jest
• Vetur 用來(lái)做代碼提醒

基本上常用的工具我們都需要等待 Vue 社區(qū)或者官方開(kāi)發(fā)了插件之后才能運(yùn)行。而 JSX 因?yàn)橛?babel 和 typescript 的官方支持， 基本上所有新的 JS 生態(tài)工具原生都是支持的。

在這 Vue3 開(kāi)始預(yù)備發(fā)力的階段，我們還是希望 Vue 社區(qū)能夠使用更優(yōu)秀更規(guī)范的方式來(lái)進(jìn)行開(kāi)發(fā)， 其實(shí)如果我們直接使用 JSX 開(kāi)發(fā) Vue3，我們會(huì)發(fā)現(xiàn)很多時(shí)候我們都不需要用到emit、attrs這些概念， 甚至如果 Vue3 的 JSX 插件支持，我們甚至能夠拋棄slots。

但是因?yàn)?Vue3 一定要考慮兼容 Vue2，導(dǎo)致本身潛力很好的 Vue3 總是顯得縮手縮腳，這不得不說(shuō)是一種遺憾。

人熟悉前端(html,css,js,vue等)，后端(python)，小程序，老板有需求聯(lián)系我。

1.CSS初識(shí)

• 概念： CSS(Cascading Style Sheets) ，通常稱為CSS樣式表或?qū)盈B樣式表（級(jí)聯(lián)樣式表）
• 作用：主要用于設(shè)置 HTML頁(yè)面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。CSS以HTML為基礎(chǔ)，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式。

2. 引入CSS樣式表（書(shū)寫(xiě)位置）

2.1 行內(nèi)式（內(nèi)聯(lián)樣式）

• 概念： 稱行內(nèi)樣式、行間樣式. 是通過(guò)標(biāo)簽的style屬性來(lái)設(shè)置元素的樣式

• 其基本語(yǔ)法格式如下：

<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標(biāo)簽名>

實(shí)際上任何HTML標(biāo)簽都擁有style屬性，用來(lái)設(shè)置行內(nèi)式。

• 案例：

<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛(ài)</div>

• 注意：style其實(shí)就是標(biāo)簽的屬性樣式屬性和值中間是:多組屬性值之間用;隔開(kāi)。只能控制當(dāng)前的標(biāo)簽和以及嵌套在其中的字標(biāo)簽，造成代碼冗余
• 缺點(diǎn)：沒(méi)有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離

2.2 內(nèi)部樣式表（內(nèi)嵌樣式表）

• 概念： 稱內(nèi)嵌式 是將CSS代碼集中寫(xiě)在HTML文檔的head頭部標(biāo)簽中，并且用style標(biāo)簽定義
• 其基本語(yǔ)法格式如下：

<head>
<style type="text/CSS">
    選擇器（選擇的標(biāo)簽） { 
      屬性1: 屬性值1;
      屬性2: 屬性值2; 
      屬性3: 屬性值3;
    }
</style>
</head>

<style>
     div {
        color: red;
        font-size: 12px;
     }
</style>

• 注意：style標(biāo)簽一般位于head標(biāo)簽中，當(dāng)然理論上他可以放在HTML文檔的任何地方。type="text/css" 在html5中可以省略。只能控制當(dāng)前的頁(yè)面
• 缺點(diǎn)：沒(méi)有徹底分離

綜合案例

<style>
   /*選擇器{屬性:值；}*/
   p {
      color:#06C; 
      font-size:14px;  
    }  /*文字的顏色是 藍(lán)色*/
   h4 {
     color:#900;
   }
   h1 {
     color:#090; 
     font-size:16px; 
    }
   body { 
     background:url(bg2.jpg);
   }
</style>

2.3 外部樣式表（外鏈?zhǔn)剑?/h1>

• 概念： 稱鏈入式 是將所有的樣式放在一個(gè)或多個(gè)以.CSS為擴(kuò)展名的外部樣式表文件中， 通過(guò)link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中
• 其基本語(yǔ)法格式如下：

<head>
  <link rel="stylesheet" type="text/css" href="css文件路徑">
</head>

• 注意： link 是個(gè)單標(biāo)簽link標(biāo)簽需要放在head頭部標(biāo)簽中，并且指定link標(biāo)簽的三個(gè)屬性

屬性	作用
rel	定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件。
type	定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。我們都可以省略
href	定義所鏈接外部樣式表文件的URL，可以是相對(duì)路徑，也可以是絕對(duì)路徑。

2.4 三種樣式表總結(jié)（位置）

CSS選擇器（重點(diǎn)）

2. CSS基礎(chǔ)選擇器

2.1 標(biāo)簽選擇器

• 概念：標(biāo)簽選擇器（元素選擇器）是指用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁(yè)面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式。
• 語(yǔ)法：

標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 

• 作用：標(biāo)簽選擇器 可以把某一類標(biāo)簽全部選擇出來(lái) 比如所有的div標(biāo)簽 和 所有的 span標(biāo)簽
• 優(yōu)點(diǎn)：是能快速為頁(yè)面中同類型的標(biāo)簽統(tǒng)一樣式
• 缺點(diǎn)：不能設(shè)計(jì)差異化樣式。

2.2 類選擇器

類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名.

• 語(yǔ)法：類名選擇器.類名 {
  屬性1:屬性值1;
  屬性2:屬性值2;
  屬性3:屬性值3;
  }標(biāo)簽<p class='類名'></p>
• 優(yōu)點(diǎn)：可以為元素對(duì)象定義單獨(dú)或相同的樣式。 可以選擇一個(gè)或者多個(gè)標(biāo)簽
• 注意類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名(自定義，我們自己命名的)長(zhǎng)名稱或詞組可以使用中橫線來(lái)為選擇器命名。不要純數(shù)字、中文等命名， 盡量使用英文字母來(lái)表示。

命名規(guī)范： 見(jiàn)附件（Web前端開(kāi)發(fā)規(guī)范手冊(cè).doc）

命名是我們通俗約定的，但是沒(méi)有規(guī)定必須用這些常用的命名。

課堂案例：

<head>
        <meta charset="utf-8">
        <style>
    
        .blue {
            color: blue;
            font-size: 100px;
        }
        .red {
            color: red;
            font-size: 100px;
        }
        .orange {
            color: orange;
            font-size: 100px;
        }
        .green {
            color: green;
            font-size: 100px;
        }
        </style>
    </head>
    <body>
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </body>

2.3 類選擇器特殊用法- 多類名

我們可以給標(biāo)簽指定多個(gè)類名，從而達(dá)到更多的選擇目的。

注意：

• 各個(gè)類名中間用空格隔開(kāi)。
• 多類名選擇器在后期布局比較復(fù)雜的情況下，還是較多使用的。

<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>

2.4 id選擇器

id選擇器使用#進(jìn)行標(biāo)識(shí)，后面緊跟id名

• 其基本語(yǔ)法格式如下：id選擇器#id名 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }標(biāo)簽<p id="id名"></p>
• 元素的id值是唯一的，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。
• 用法基本和類選擇器相同。

id選擇器和類選擇器區(qū)別

• W3C標(biāo)準(zhǔn)規(guī)定，在同一個(gè)頁(yè)面內(nèi)，不允許有相同名字的id對(duì)象出現(xiàn)，但是允許相同名字的class。

id選擇器和類選擇器最大的不同在于 使用次數(shù)上。

總結(jié)他們**

• 類選擇器我們?cè)谛薷臉邮街校玫淖疃唷?/span>
• id選擇器一般用于頁(yè)面唯一性的元素身上，經(jīng)常和我們后面學(xué)習(xí)的javascript 搭配使用。

2.6 通配符選擇器

• 概念通配符選擇器用*號(hào)表示， * 就是 選擇所有的標(biāo)簽 他是所有選擇器中作用范圍最廣的，能匹配頁(yè)面中所有的元素。
• 其基本語(yǔ)法格式如下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標(biāo)記的默認(rèn)邊距。

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內(nèi)邊距*/
}

• 注意：會(huì)匹配頁(yè)面所有的元素，降低頁(yè)面響應(yīng)速度，不建議隨便使用

2.7 基礎(chǔ)選擇器總結(jié)

2.8 團(tuán)隊(duì)約定

選擇器

• 盡量少用通用選擇器 *
• 盡量少用 ID 選擇器
• 不使用無(wú)具體語(yǔ)義定義的標(biāo)簽選擇器 div span

CSS字體樣式屬性調(diào)試工具

1.font字體

1.1 font-size:大小

• 作用：font-size屬性用于設(shè)置字號(hào)

p {  
    font-size:20px; 
}

• 單位：可以使用相對(duì)長(zhǎng)度單位，也可以使用絕對(duì)長(zhǎng)度單位。相對(duì)長(zhǎng)度單位比較常用，推薦使用像素單位px，絕對(duì)長(zhǎng)度單位使用較少。

注意：

• 我們文字大小以后，基本就用px了，其他單位很少使用
• 谷歌瀏覽器默認(rèn)的文字大小為16px
• 但是不同瀏覽器可能默認(rèn)顯示的字號(hào)大小不一致，我們盡量給一個(gè)明確值大小，不要默認(rèn)大小。一般給body指定整個(gè)頁(yè)面文字的大小

1.2 font-family:字體

• 作用：font-family屬性用于設(shè)置哪一種字體。

p{ font-family:"微軟雅黑";}

• 網(wǎng)頁(yè)中常用的字體有宋體、微軟雅黑、黑體等，例如將網(wǎng)頁(yè)中所有段落文本的字體設(shè)置為微軟雅黑
• 可以同時(shí)指定多個(gè)字體，中間以逗號(hào)隔開(kāi)，表示如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)，直到找到合適的字體， 如果都沒(méi)有，則以我們電腦默認(rèn)的字體為準(zhǔn)。

p{font-family: Arial,"Microsoft Yahei", "微軟雅黑";}

常用技巧：

1. 各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開(kāi)。
2. 中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。
3. 如果字體名中包含空格、#、$等符號(hào)，則該字體必須加英文狀態(tài)下的單引號(hào)或雙引號(hào)，例如font-family: "Times New Roman";。
4. 盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示。

CSS Unicode字體

• 為什么使用 Unicode字體在 CSS 中設(shè)置字體名稱，直接寫(xiě)中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時(shí)會(huì)產(chǎn)生亂碼的錯(cuò)誤。xp 系統(tǒng)不支持 類似微軟雅黑的中文。
• 解決：方案一： 你可以使用英文來(lái)替代。 比如font-family:"Microsoft Yahei"。方案二： 在 CSS 直接使用 Unicode 編碼來(lái)寫(xiě)字體名稱可以避免這些錯(cuò)誤。使用 Unicode 寫(xiě)中文字體名稱，瀏覽器是可以正確的解析的。font-family: "FAEF6FC5ED1"; 表示設(shè)置字體為“微軟雅黑”。

1.3 font-weight:字體粗細(xì)

• 在html中如何將字體加粗我們可以用標(biāo)簽來(lái)實(shí)現(xiàn)使用 b 和 strong 標(biāo)簽是文本加粗。
• 可以使用CSS 來(lái)實(shí)現(xiàn)，但是CSS 是沒(méi)有語(yǔ)義的。

提倡：

我們平時(shí)更喜歡用數(shù)字來(lái)表示加粗和不加粗。

1.4 font-style:字體風(fēng)格

• 在html中如何將字體傾斜我們可以用標(biāo)簽來(lái)實(shí)現(xiàn)字體傾斜除了用 i 和 em 標(biāo)簽，
• 可以使用CSS 來(lái)實(shí)現(xiàn)，但是CSS 是沒(méi)有語(yǔ)義的

font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下：

小技巧：

平時(shí)我們很少給文字加斜體，反而喜歡給斜體標(biāo)簽（em，i）改為普通模式。

1.5 font:綜合設(shè)置字體樣式 (重點(diǎn))

font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置

• 基本語(yǔ)法格式如下：

選擇器 { font: font-style  font-weight  font-size/line-height  font-family;}

• 注意：使用font屬性時(shí)，必須按上面語(yǔ)法格式中的順序書(shū)寫(xiě)，不能更換順序，各個(gè)屬性以空格隔開(kāi)。其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

1.6 font總結(jié)

2. CSS外觀屬性

2.1 color:文本顏色

• 作用：color屬性用于定義文本的顏色，
• 其取值方式有如下3種：

• 注意我們實(shí)際工作中， 用 16進(jìn)制的寫(xiě)法是最多的，而且我們更喜歡簡(jiǎn)寫(xiě)方式比如 #f00 代表紅色

2.2 text-align:文本水平對(duì)齊方式

• 作用：text-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊，相當(dāng)于html中的align對(duì)齊屬性
• 其可用屬性值如下：

• 注意：是讓盒子里面的內(nèi)容水平居中， 而不是讓盒子居中對(duì)齊

2.3 line-height:行間距

• 作用：line-height屬性用于設(shè)置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。
• 單位：line-height常用的屬性值單位有三種，分別為像素px，相對(duì)值em和百分比%，實(shí)際工作中使用最多的是像素px
• 技巧：

一般情況下，行距比字號(hào)大7.8像素左右就可以了。
line-height: 24px;

2.4 text-indent:首行縮進(jìn)

• 作用：text-indent屬性用于設(shè)置首行文本的縮進(jìn)，
• 屬性值其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值,建議使用em作為設(shè)置單位。

1em 就是一個(gè)字的寬度 如果是漢字的段落， 1em 就是一個(gè)漢字的寬度

p {
      /*行間距*/
      line-height: 25px;
      /*首行縮進(jìn)2個(gè)字  em  1個(gè)em 就是1個(gè)字的大小*/
      text-indent: 2em;  
 }

2.5 text-decoration 文本的裝飾

text-decoration 通常我們用于給鏈接修改裝飾效果

2.6 CSS外觀屬性總結(jié)

3. sublime快捷操作emmet語(yǔ)法

Emmet的前身是Zen coding,它使用縮寫(xiě),來(lái)提高h(yuǎn)tml/css的編寫(xiě)速度。

1. 生成標(biāo)簽 直接輸入標(biāo)簽名 按tab鍵即可 比如 div 然后tab 鍵， 就可以生成 <div></div>
2. 如果想要生成多個(gè)相同標(biāo)簽 加上 * 就可以了 比如 div*3 就可以快速生成3個(gè)div
3. 如果有父子級(jí)關(guān)系的標(biāo)簽，可以用 > 比如 ul > li就可以了
4. 如果有兄弟關(guān)系的標(biāo)簽，用 + 就可以了 比如 div+p
5. 如果生成帶有類名或者id名字的， 直接寫(xiě) .demo 或者 #two tab 鍵就可以了
6. 如果生成的div 類名是有順序的， 可以用 自增符號(hào) $ .demo$*3
   <div class="demo1"></div>
   <div class="demo2"></div>
   <div class="demo3"></div>

4. 拓展閱讀@

emment語(yǔ)法

件引用規(guī)范

先說(shuō)加載的規(guī)范，這個(gè)規(guī)范主要是為了提高頁(yè)面加載速度或者是首屏的速度。

1 CSS 文件或樣式在 head 標(biāo)簽中引用。頁(yè)面的渲染需要 CSS，所以盡量早的讓 CSS 文件加載出來(lái)。

2 JS 文件要放在 body 標(biāo)簽尾部。頁(yè)面里加載和運(yùn)行 JS 都會(huì)阻塞頁(yè)面的渲染過(guò)程，所以把 JS 放在尾部可以加快首屏顯示的速度，但對(duì)整個(gè)頁(yè)面完成加載的時(shí)間沒(méi)什么影響。

3 使用壓縮后的文件。線上使用的靜態(tài)文件，盡量都是壓縮好的，CSS 使用 .min.css 形式，JS 使用 .min.js 形式，這樣可以減少文件的體積，從而減少下載的時(shí)間。

4 減少 import 方式引用 css 文件。import 方式引入的 CSS 文件要等原 CSS 文件加載并解析后才會(huì)去請(qǐng)求, 會(huì)拖慢 CSS 文件的加載速度。

屬性的書(shū)寫(xiě)規(guī)范

一、使用縮寫(xiě)

在 CSS 中有很多屬性或?qū)傩灾悼梢钥s寫(xiě), 在能用縮寫(xiě)的地方盡量使用縮寫(xiě)。

1、屬性的縮寫(xiě)。CSS 中有些屬性是可以合并的, 如:

margin-top: 10px;
margin-bottom: 0;
margin-left: 5px;
margin-right: 5px;

上面這幾組 margin 相關(guān)的屬性占了四條樣式, 我們可以使用一條 margin 屬性代替這四個(gè)方向的 margin：

margin: 10px 5px 0 5px;

一般帶有方向的屬性, 縮寫(xiě)的時(shí)候各個(gè)方向的值都是按著"上 右 下 左"的順序?qū)懙摹Ａ硗馊绻膫€(gè)方向值一樣，可以直接用一個(gè)值代替四個(gè)方向；如果左右方向的值一樣，則可以省略最后一個(gè)左側(cè)的值。

上面這條縮寫(xiě)也可以寫(xiě)成：

margin: 10px 5px 0;

2、顏色的縮寫(xiě)。在使用十六進(jìn)制顏色的時(shí)候, 如果 rgb 三個(gè)顏色位置中, 每?jī)晌坏念伾迪嗤? 可以把六位的顏色寫(xiě)成三位。

如：color: #22ffcc;

就可以寫(xiě)成：

color: #2fc;

這兩種寫(xiě)法是等效的, 但要注意的是如果需要兼容低版本 IE 瀏覽器, 還是要用六位的顏色值。

3、數(shù)字的縮寫(xiě)。在 CSS 中如果整數(shù)部分是 0 的小數(shù), 可以忽略小數(shù)點(diǎn)前面的 0; 如果屬性值是 0, 則可以忽略屬性值的單位。

如: font-size: 0.8rem; padding: 0px;

這兩條屬性就可以做簡(jiǎn)寫(xiě)：

font-size: .8rem; padding: 0;

二、屬性順序的規(guī)范

理論上, CSS 的屬性是一條一條解析執(zhí)行的。這種情況下, 就要把能確定大小和位置的屬性寫(xiě)在前面, 把對(duì)布局沒(méi)什么影響的屬性寫(xiě)在后面, 避免返工。

一般說(shuō)的使用順序如下:

1. 位置屬性 (position, top, right, z-index, display, float等)　　

2. 大小 (width, height, padding, margin)　　

3. 文字系列 (font, line-height, letter-spacing, color- text-align等)　　

4. 背景 (background, border等) 5. 其他 (animation, transition等)

注釋規(guī)范

一 文件頭注釋

/*
* @Author: zhangsan
* @Date: 2023-04-18 20:09:21
* @Last Modified by: zhangsan
* @Last Modified time: 2023-05-05 10:21:21
*/

二 普通注釋

/* 頭部導(dǎo)航 */
.nav-top{
background: #ccc;
}

CSS-Reset