CSS：前端基礎(chǔ) & CSS 初始

學(xué)習(xí)目標(biāo)

理解
- css 的目的作用
- css 的三種引入方式
應(yīng)用
- css 三種引用方式的書寫
- 通過(guò)樣式規(guī)則給標(biāo)簽添加簡(jiǎn)單的樣式

1. HTML 的局限性

說(shuō)起 HTML堤魁，這其實(shí)是個(gè)非常單純的家伙，他只關(guān)注內(nèi)容的語(yǔ)義痪伦。

比如 <h1> 表明這是一個(gè)大標(biāo)題荣回，用 <p> 表明這是一個(gè)段落遭贸，用 <img> 表明這兒有一個(gè)圖片，用 <a> 表示此處有鏈接心软。

很早的時(shí)候壕吹，世界上的網(wǎng)站雖然很多，但是他們都有一個(gè)共同的特點(diǎn)：丑糯累。

這個(gè)是一個(gè)外國(guó)比較早的購(gòu)物網(wǎng)站

有些人就忍受不了了算利，你就不能把自己打扮得漂亮一點(diǎn)嗎？

HTML 說(shuō)泳姐，我試試...

如果要改變下高度或者變一個(gè)顏色效拭，就需要大量重復(fù)操作

總結(jié)：

HTML 滿足不了設(shè)計(jì)者的需求
操作 HTML 屬性不方便
HTML 里面添加樣式帶來(lái)的是無(wú)盡的臃腫和繁瑣

2. CSS 網(wǎng)頁(yè)的美容師

讓我們的網(wǎng)頁(yè)更加豐富多彩，布局更加靈活自如胖秒。
CSS 的最大貢獻(xiàn)就是：讓 HTML 從樣式中脫離缎患，實(shí)現(xiàn)了 HTML 專注去做結(jié)構(gòu)呈現(xiàn)，樣式交給 CSS

我們理想中的結(jié)果：結(jié)構(gòu) HTML 與樣式 CSS 相分離 這句話要記住

而且阎肝。挤渔。。CSS 做的很出色风题，如果 JavaScript 是網(wǎng)頁(yè)的魔法師判导，那么 CSS 它是我們網(wǎng)頁(yè)的美容師，不信沛硅，你看：

3. CSS 初識(shí)

概念：

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

4. 引入 CSS 樣式表（書寫位置）

要書寫 css 樣式，那 css 樣式書寫的位置在哪呢？

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

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

概念：

? 稱內(nèi)嵌式

? 是將 CSS 代碼集中寫在 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>

展示

思考：

如何實(shí)現(xiàn)結(jié)構(gòu)與樣式完全分離猖任？

如何實(shí)現(xiàn) css 樣式共享你稚？

4.3 外部樣式表（外鏈?zhǔn)剑?/h2>

概念：

稱鏈入式

是將所有的樣式放在一個(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ì)路徑谁尸。

css外鏈?zhǔn)?/div>

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

樣式表	優(yōu)點(diǎn)	缺點(diǎn)	使用情況	控制范圍
行內(nèi)樣式表	書寫方便舅踪，權(quán)重高	沒(méi)有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離	較少	控制一個(gè)標(biāo)簽（少）
內(nèi)部樣式表	部分結(jié)構(gòu)和樣式相分離	沒(méi)有徹底分離	較多	控制一個(gè)頁(yè)面（中）
外部樣式表	完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離	需要引入	最多，強(qiáng)烈推薦	控制整個(gè)站點(diǎn)（多）

團(tuán)隊(duì)約定-代碼風(fēng)格

樣式書寫一般有兩種：

一種是緊湊格式（Compact）

h3 { color: deeppink; font-size: 20px; }

一種是展開格式（推薦）

h3 {
    color: deeppink;
    font-size: 20px;    
}

團(tuán)隊(duì)約定-代碼大小寫

樣式選擇器症汹，屬性名硫朦，屬性值關(guān)鍵字全部使用小寫字母書寫，屬性字符串允許使用大小寫背镇。

/* 推薦 */
h3{
    color: pink;
}
    
/* 不推薦 */
H3{
    COLOR: PINK;
}

5. 總結(jié) CSS 樣式規(guī)則

使用 HTML 時(shí)咬展，需要遵從一定的規(guī)范。CSS 亦如此瞒斩，要想熟練地使用 CSS 對(duì)網(wǎng)頁(yè)進(jìn)行修飾破婆，首先需要了解 CSS 樣式規(guī)則，

具體格式如下：