css基礎(chǔ)語法


CSS概念

  • css 全稱 cascading style sheets,層疊式樣式表, 是一種用來表現(xiàn) HTML 的文件樣式的計算機(jī)語言。

  • 作用: 靜態(tài)地修飾網(wǎng)頁, 并且可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。

CSS 的出現(xiàn), 實現(xiàn)了網(wǎng)頁的結(jié)構(gòu)和樣式分離。美容師!


CSS的組成

層疊式 樣式
css 中貫穿始終的加載特性 定義如何顯示 HTML 元素
層疊性 文字文本
繼承性 背景
盒模型
浮動
定位
其他

CSS書寫

CSS 規(guī)則由兩個主要的部分構(gòu)成: 選擇器, 以及一條或多條聲明

image-20210905215230100.png

書寫位置

內(nèi)聯(lián)式(不推薦)

  • 行內(nèi)式

  • 書寫位置:在 HTML 標(biāo)簽的 style 屬性中書寫 css 樣式

     <div style="width: 360px;height: 100px;background-color: red;"></div>
    
內(nèi)聯(lián)式缺點(diǎn)
  • 必須寫在標(biāo)簽,沒有脫離HTML標(biāo)簽

  • 讓標(biāo)簽結(jié)構(gòu)繁重,不利于HTML結(jié)構(gòu)的解讀

  • 一個CSS代碼,只能給一個標(biāo)簽使用,如有多個標(biāo)簽使用相同樣式,需要重寫,增加代碼量

內(nèi)嵌式

  • 書寫位置:在HTML文件,<head>標(biāo)簽內(nèi)部的<style>標(biāo)簽中。<style> 標(biāo)簽書寫在< title> 標(biāo)簽后面, 所有 css 代碼書寫在 <style> 標(biāo)簽內(nèi)部

  • 在<style> 標(biāo)簽有一個標(biāo)簽屬性叫做 type, 屬性值是 “ text/css”

    <style type="text/css">
     div {
     width: 360px;
     height: 100px;
     background-color: red;
     }
     </style>
    
內(nèi)嵌式特點(diǎn)
優(yōu)點(diǎn)
  • 實現(xiàn)結(jié)構(gòu)與樣式初步分離

  • 多個標(biāo)簽可用同一段代碼設(shè)置相同樣式

缺點(diǎn)
  • 結(jié)構(gòu)與樣式?jīng)]有完全分離,依舊是寫在HTML文件里面

  • 在HTML中CSS代碼過多,文件不美觀

外聯(lián)式

  • 也稱作外鏈?zhǔn)?CSS、 外部 CSS

  • 書寫位置:在一個單獨(dú)的擴(kuò)展名為.css的文件中

  • 書寫語法:與內(nèi)嵌式類似,直接書寫,單并不需要添加<style>標(biāo)簽

     /* 直接書寫css規(guī)則 */
    div {
     width: 360px;
     height: 100px;
     background-color: red;
    }
    
外聯(lián)式引用
  • 外聯(lián)式樣式表必須引入到 HTML 文件中, 才能正常進(jìn)行加載

  • 引入方式: 在 HTML 中的 <head> 標(biāo)簽內(nèi)部使用 <link> 標(biāo)簽進(jìn)行引入

    <link rel="stylesheet" href="01.css" type="text/css">
    
外聯(lián)式優(yōu)點(diǎn)
  • HTML 和 css 完全分離

  • 多個 HTML 文件可以共用一個 css 文件, 便于提取公共 css, 減少代碼量

  • 一個 css 變化, 多個 HTML 頁面同時變化, 減少工作量

  • 一個 HTML 文件可以引入多個 css 文件, 可以實現(xiàn)同一個頁面中 css 代碼分層

導(dǎo)入式

  • 書寫位置:在內(nèi)嵌式樣式表 <style> 標(biāo)簽內(nèi)部, 或者在外聯(lián)式樣式表的內(nèi)部, 導(dǎo)入其他的外部的.css 文件

  • 導(dǎo)入方式: 利用一條 @import url(路徑) 語句進(jìn)行引入

     <style>
    @import url(01.css);
    h1 {
    color: red;
    }
    </style>
    
導(dǎo)入式問題
  • 與外聯(lián)式樣式表基本相同

  • 但是由于導(dǎo)入式在瀏覽器中加載時, 會在 HTML 結(jié)構(gòu)加載完畢后再進(jìn)行編譯, 如果網(wǎng)速比較慢時, 會導(dǎo)致網(wǎng)頁出現(xiàn)沒有 css 樣式的效果, 體驗不好

  • 實際工作中, 較少使用導(dǎo)入式, 推薦使用外聯(lián)式樣式表

實際應(yīng)用

  • 小型案例: 可以使用內(nèi)嵌式 CSS

  • 實際工作、 大型網(wǎng)站項目: 推薦使用外聯(lián)式 CSS


CSS語法

CSS規(guī)則

CSS 規(guī)則由兩個主要的部分構(gòu)成: 選擇器, 以及一條或多條聲明

image-20210905215230100.png

樣式規(guī)則

以內(nèi)嵌式樣式表為例

  • 所有的 css 代碼都必須書寫在 <head> 標(biāo)簽內(nèi)部的一對 <style> 標(biāo)簽內(nèi)

  • css 在給某個標(biāo)簽設(shè)置樣式前, 必須使用選擇器先選中標(biāo)簽

  • css 樣式的屬性, 屬性名和屬性值的鍵值對寫法為 k:v?

  • 給每個選擇器添加的樣式屬性都必須寫在一對大括號 {} 之內(nèi)

  • 給一個標(biāo)簽添加的所有需要的樣式, 都要在 {} 內(nèi)部一一羅列出來

    <style type="text/css">
     div {
     width: 360px;
     height: 100px;
     background-color: red;
     }
     </style>
    

注意事項

  • 分號必要性: 每條屬性后面的分號必須寫, 如果不寫, 會導(dǎo)致后面所有的代碼加載錯誤。

  • css 中所有屬性與屬性之間對空格、 換行、 縮進(jìn)不敏感。

CSS 注釋語法

vs code快捷鍵: ctrl+/

/*中間部分為注釋內(nèi)容*/

CSS樣式格式

  • 展開格式:開發(fā)過程使用, 代碼可讀性強(qiáng), 便于調(diào)錯

     div {
     width: 360px;
     height: 100px;
     background-color: red;
     }
    
  • 緊湊格式:上傳服務(wù)器時使用, 減少不必要的空白字符, 壓縮文件大小, 利于傳輸

    div {width: 360px; height: 100px; background-color: red;}
    

英文大小寫

CSS的英文可以大寫,也可以小寫

建議全部小寫!

空格規(guī)范

  • 選擇器與大括號 {} 之間保留一個空格

  • 冒號后面, 屬性值前面, 保留一個空格

    div {
      width: 360px;
      height: 100px;
      background-color: red;
    }
    

CSS常用樣式

顏色color

  • 作用: 給文字設(shè)置顏色

  • 屬性名 k : color

  • 屬性值 v : 顏色名、 顏色值

顏色名

顏色名就是使用顏色的英文單詞進(jìn)行表示

紅色 red
橙色 orange
黃色 yellow
綠色 green
青色 cyan
藍(lán)色 blue
紫色 purple
黑色 black
白色 white
金色 gold
粉色 pink
淺黃色 lightyellow
黃綠色 yellowgreen
天藍(lán)色 skyblue

更多的顏色名可以通過查詢手冊得到

顏色值

顏色值指使用具體顏色的數(shù)值表示。 包括: rgb 模式和十六進(jìn)制模式寫法

rgb 模式
  • rgb 模式: 是根據(jù)紅綠藍(lán)三原色進(jìn)行混合而成的顏色模式

  • 每個原色的取值范圍是0-255, 一共256個數(shù)值。 三個原色共能混合成1677多萬種顏色

  • 書寫方法: rgb(紅,綠,藍(lán))

常用顏色的 rgb 色值:

紅色 rgb(255,0,0)
綠色 rgb(0,255,0)
藍(lán)色 rgb(0,0,255)
黑色 rgb(0,0,0)
白色 rgb(255,255,255)
灰色 rgb(128,128,128)
十六進(jìn)制模式
  • 十六進(jìn)制模式: 是 rgb 模式的一種簡化寫法, 使用十六進(jìn)制的數(shù)字字符去替換十進(jìn)制的 0--255 的數(shù)字

  • 十六進(jìn)制: 逢十六進(jìn)一, 每個數(shù)位上只能出現(xiàn) 0-9, a-f 之間的字符

  • 書寫為顏色值時, 紅、 綠、 藍(lán)每個色值都要使用兩位數(shù)的十六進(jìn)制進(jìn)行替換。0→00;255→ff

  • 書寫方式: 使用 # 開頭, 后面連續(xù)書寫紅、 綠、 藍(lán)三個顏色的十六進(jìn)制的兩位數(shù)值

常用顏色的十六進(jìn)制色值:

紅色 #ff0000
綠色 #00ff00
藍(lán)色 #0000ff
黑色 #000000
白色#ffffff
灰色 #808080

注:十六進(jìn)制顏色值簡寫模式: 如果紅、 綠、 藍(lán)三個原色的色值每一個都是由重疊的數(shù)字組成, 可以將重疊的數(shù)字簡化成一個進(jìn)行書寫。 如:紅色 #f00

字體font-family

  • 作用: 定義元素內(nèi)文字的字體

  • 屬性名 k : font-family, 字體屬于 font 綜合屬性的一個單一屬性

  • 屬性值 v : 字體名稱, 必須包裹在一對引號中, 屬性值可以有多個, 值之間用逗號分隔

常用字體

  • 常用的中文字體:

    宋體 SimSun
    微軟雅黑 Microsoft Yahei
  • 常用的英文字體:Arial consolas

如果不設(shè)置字體屬性, 不同的瀏覽器有自己的默認(rèn)字體

注意事項

  • font-family 可以設(shè)置多個字體名稱, 在實際加載時只會選擇一種加載, 選擇的依據(jù)是按書寫順序進(jìn)行, 如果瀏覽器不支持第一個字體, 則會嘗試下一個, 直到找到第一個支持的字體

  • 瀏覽器中加載的字體是用戶機(jī)器中自帶的, 如果用戶的電腦中沒有設(shè)置的字體則加載失敗, 需要查找下一個, 因此,必須在最后設(shè)置一個所有機(jī)器都具備的通用字體作為后路

  • 中文字體中一般帶有英文可以加載的字體效果, 為了避免英文字的字體影響,建議將英文字體寫在屬性值最前面

實際應(yīng)用

首選字體需要根據(jù)設(shè)計圖確定, 最后需要設(shè)置備用字體

字號font-size

  • 作用: 設(shè)置文字的大小。

  • 屬性名 k : font-size, 字號屬于 font 綜合屬性的單一屬性

  • 屬性值 v : 可以使用相對長度單位, 也可以使用絕對長度單位。 推薦使用相對長度單位

單位

相對長度單位 說明
px 像素值,最常使用的單位
em 倍數(shù),繼承自祖先元素設(shè)置的字號的倍數(shù)
% 百分比,繼承自祖先元素設(shè)置的字號的百分比
絕對長度單位 說明
in 英寸
cm 厘米
mm 毫米
pt 點(diǎn)

注意事項

  • 如果 HTML 中不設(shè)置字號, 不同的瀏覽器有自己默認(rèn)的加載字號, 比如 chrome、IE, 默認(rèn)顯示字號為 16px

  • 不同的瀏覽器也有自己最小加載顯示字號, 如果設(shè)置的字號低于最小字號, 都以最小字號加載, 0除外。 chrome 瀏覽器最小加載顯示字號為8px, IE 瀏覽器最小可以支持1px的字號

實際應(yīng)用

  • 最小設(shè)置字號必須是12px, 如果低于12px會出現(xiàn)兼容問題。 現(xiàn)在網(wǎng)頁中普遍使用14px+

  • 盡量使用 14px、 16px等偶數(shù)的數(shù)字字號, ie6 等老式瀏覽器支持奇數(shù)會有bug

  • 實際工作中的字號, 需要以設(shè)計圖為準(zhǔn)

盒子實體化屬性

屬性名 屬性值 說明
width px單位的數(shù)值 定義元素占有的寬度
height px單位的數(shù)值 定義元素占有的高度
background-color 顏色名、顏色值 定義元素的背景顏色
  div {
    width: 360px;
    height: 100px;
    background-color: red;
  }

CSS選擇器

  • 選擇器: 選擇要添加樣式的 HTML 標(biāo)簽的一種方法、 模式

  • 首先學(xué)習(xí) css2.1 版本的七種選擇器:

    • 基礎(chǔ)選擇器: 標(biāo)簽選擇器、 id 選擇器、 類選擇器、 通配符選擇器

    • 高級選擇器: 后代選擇器、 交集選擇器、 并集選擇器

標(biāo)簽選擇器

  • 通過標(biāo)簽名去選擇標(biāo)簽元素

  • 書寫方式: 標(biāo)簽名,如p

  • 選擇范圍: 選中的是HTML文件中所有的同名標(biāo)簽

  • 注意: 標(biāo)簽選擇器可以選擇所有的同名標(biāo)簽, 會忽視 HTML 元素的嵌套關(guān)系, 不管嵌套多深, 都能被選中

標(biāo)簽選擇器特點(diǎn)

  • 優(yōu)點(diǎn): 選中所有的同名標(biāo)簽, 設(shè)置所有同名標(biāo)簽的公共樣式

  • 缺點(diǎn): 只能實現(xiàn)全選, 不能局部

    p {
      color: red;
    }

id 選擇器(少用,不建議)

  • 通過標(biāo)簽上的 id 屬性去選擇標(biāo)簽。

  • 書寫方式:#id 屬性值

  • 選擇范圍: 只能選中一個標(biāo)簽。

  • id 命名規(guī)則: 必須以字母開頭, 后面可以有字母、 數(shù)字、 下劃線、 橫線, 嚴(yán)格區(qū)分大小寫。 每個 id 屬性值必須是唯一的, 不能與其他的 id 同名

  • 注意: 如果希望多個標(biāo)簽設(shè)置相同的樣式, 使用id選擇器的話, 必須給這多個標(biāo)簽取不同的 id 名, 分別選中設(shè)置

    #para1 {
      color: red;
    }
    #para2 {
      color: red;
    }

id 選擇器特點(diǎn)

缺點(diǎn): id 選擇器只能實現(xiàn)單選, 不能幫我們完成多選的功能

類選擇器

  • 通過標(biāo)簽的 class 屬性去選擇標(biāo)簽。

  • 書寫方式:.class屬性值

  • 選擇范圍: 是頁面中所有 class 屬性值相同的標(biāo)簽。

  • class 命名規(guī)則: 必須以字母開頭, 后面可以有字母、 數(shù)字、 下劃線、 橫線, 嚴(yán)格區(qū)分大小寫。 class 屬性值可以與其他的class相同

    .demo {
      color: red;
    }

類選擇器特點(diǎn)

  • 多個不同的標(biāo)簽, 不區(qū)分標(biāo)簽類型, 只要 class 屬性值相同, 都可以被同一個類選擇器選中

  • 一個標(biāo)簽的 class 屬性可以有多個屬性值, 值之間用空格分隔, 每個屬性值組成的選擇器, 都可以選中這一個標(biāo)簽, 每個選擇器后面的樣式都會添加給同一個標(biāo)簽

<p class="demo ddd">段落標(biāo)簽內(nèi)容</p>

類選擇器的特殊應(yīng)用

原子類: 在css中提前設(shè)置一些類名, 每個類選擇器后面只添加一條css樣式屬性, 這些屬性會在頁面中常被使用, 后期可以不需要多次書寫屬性, 只要將對應(yīng)的類名添加給需要的標(biāo)簽即可

類選擇器的優(yōu)點(diǎn)

  • 通過一個類選擇器進(jìn)行多選, 選中多個標(biāo)簽, 添加公共樣式

  • 一個標(biāo)簽可以被多個類選擇器選中, 可以將所有樣式進(jìn)行分離, 分別提取公共樣式和單獨(dú)樣式, 節(jié)省代碼量

實際工作中, 通常我們有一個使用規(guī)律: 類上樣式(CSS), id 上行為(JavaScript)

通配符選擇器

  • 通過一個特殊符號選擇頁面內(nèi)所有的標(biāo)簽。

  • 書寫方式: *

  • 選擇范圍: 包含 <html>標(biāo)簽在內(nèi)的所有標(biāo)簽

    * {
      color: red;
      margin: 0;
      padding: 0;
    }

通配符特點(diǎn)和應(yīng)用

  • 優(yōu)點(diǎn): 實現(xiàn)全選, 簡化書寫

  • 缺點(diǎn): 通配符選擇效率低, 設(shè)置的部分公共樣式不是所有標(biāo)簽都需要添加, 如果使用通配符選擇, 會讓不需要的標(biāo)簽也加載一次樣式, 導(dǎo)致瀏覽器多做無用的工作

  • 注意: 實際上線的網(wǎng)站不允許使用 * 去清除默認(rèn)內(nèi)外邊距

  • 不過普通的案例, 代碼量較少時, 為了節(jié)省書寫, 可以使用通配符

后代選擇器

  • 通過標(biāo)簽之間存的嵌套關(guān)系(族譜關(guān)系) 去選擇元素, 基本組成部分就是基礎(chǔ)選擇器

  • 后代選擇器也叫包含選擇器

  • 書寫方式: 空格表示后代, 基礎(chǔ)選擇器中間使用空格分隔, 空格前面的選擇器選中的標(biāo)簽必須是后面選擇器選中標(biāo)簽的祖先級

  • 選擇范圍: 通過后代選擇器中前面的一系列基礎(chǔ)選擇器縮小選擇范圍, 最終由最后一個選擇器確定選中的標(biāo)簽

  • 注意: 后代選擇器必須滿足所有的后代關(guān)系才能夠被選中, 后代關(guān)系不一定只能是父子關(guān)系

后代選擇器特點(diǎn)

優(yōu)點(diǎn): 減少 class 屬性的使用, 選擇效率更高

    .box1 ul li p {
      color: red;
    }
    .box1 p {
      color: green;      
    }

交集選擇器

  • 通過一個標(biāo)簽之上滿足所有的基礎(chǔ)選擇器的需求去選擇標(biāo)簽

  • 書寫方式: 基礎(chǔ)選擇器進(jìn)行如果有標(biāo)簽選擇器參與交集, 必須書寫在開頭

  • 選擇范圍: 選擇的是滿足所有基礎(chǔ)選擇器需求的標(biāo)簽, 如果一個條件不滿足都不能被選中

  • 比較常見的是標(biāo)簽與類的交集

    .box1 p.demo {
      color: green;
    }

交集選擇器更多寫法

  • 交集選擇器可以進(jìn)行類名的連續(xù)交集, 需要滿足更多的條件才能選中標(biāo)簽。

  • IE6 不支持類名連續(xù)交集寫法。

  • 交集選擇器可以作為其他高級選擇器的組成部分

并集選擇器

  • 不同選擇器選中的元素都要設(shè)置相同的樣式, 多次書寫相同的樣式屬性對代碼造成浪費(fèi), 可以將前面六種選擇器可以進(jìn)行并集書寫, 相當(dāng)于一種簡化寫法
  • 書寫方式: 將多個選擇器中間用逗號進(jìn)行分隔, 最后一個后面不能加逗號

  • 選擇范圍: 是所有的單獨(dú)選擇器選中的標(biāo)簽的并集集合。

    body,h2,div,ul,li,p {
      margin: 0;
      padding: 0;
    }

并集選擇器用途

  • 如果多個標(biāo)簽具有公共樣式, 但是不能用一個選擇器選中, 可以使用并集寫法

  • 可以使用標(biāo)簽選擇器的并集寫法, 進(jìn)行默認(rèn)樣式的清除, 替換通配符的功能


CSS層疊式

繼承性

  • 如果一個標(biāo)簽沒有設(shè)置過一些樣式, 它的某個祖先級曾經(jīng)設(shè)置過, 在瀏覽器中該標(biāo)簽也加載了這些樣式, 這些樣式都是從祖先級繼承而來, 這種現(xiàn)象就是繼承性

  • 能夠被繼承的樣式是所有的文字相關(guān)樣式屬性, 其他的屬性都不能被繼承

    .box1 {
      width: 200px;
      height: 200px;
      background-color: red;  
      color: green;
      font-family: "宋體";
      font-size: 14px;    
    }

繼承性應(yīng)用

繼承性是一個很好的性質(zhì), 可以將頁面中出現(xiàn)最多的文字樣式設(shè)置給一個較大的祖先級標(biāo)簽比如 <body>, 后期所有的后代標(biāo)簽都可以從 <body> 進(jìn)行繼承

    body {
      color: green;
      font-family: "宋體";
      font-size: 14px;
    }
    .box1 {
      width: 200px;
      height: 200px;
      background-color: pink;      
    }

層疊性

  • 思考問題: 同一個標(biāo)簽可以被多個選擇器選中, 如果選擇器后面設(shè)置了相同的樣式屬性, 標(biāo)簽最終該加載哪個? 或者, 在繼承性中, 如果多個祖先都設(shè)置了相同的文字樣式, 后代中該繼承哪個祖先級的?

  • 解決方法: 就是使用層疊性去解決沖突。 多個選擇器在進(jìn)行對比的過程中, 最終只有一個屬性會成功加載, 它會層疊、 覆蓋掉其他的屬性。

  • 判斷最終勝出的屬性是誰, 需要依賴判斷優(yōu)先級

image-20210906003818889.png

選中目標(biāo)標(biāo)簽

  1. 第一步: 比較多個選擇器的權(quán)重, 權(quán)重高的層疊權(quán)重低的。

    • 基礎(chǔ)選擇器的權(quán)重: 根據(jù)選擇范圍, 范圍越大權(quán)重越小, *< 標(biāo)簽選擇器 < 類選擇器 < id 選擇器。

    • 高級選擇器權(quán)重比較方法: 依次比較組成高級選擇器的 id 的個數(shù), 類的個數(shù), 標(biāo)簽的個數(shù), 如果前面能夠比較出大小就不再比較后面, 如果前面相等就往后比較,直到比較出大小。

    • 比較順序: id 個數(shù), 類的個數(shù), 標(biāo)簽的個數(shù)

  2. 第二步: 如果選擇器權(quán)重都相同, 需要比較 CSS 中代碼的書寫順序, 后寫的層疊先寫的

選中目標(biāo)標(biāo)簽的組先級

  • 如果選擇器選中的是祖先元素, 文字的樣式可以被繼承。

    1. 比較就近原則, 比較選擇器選中的祖先級在 HTML 結(jié)構(gòu)中距離目標(biāo)標(biāo)簽的遠(yuǎn)近, 近的層疊遠(yuǎn)的

    2. 如果選中的祖先級距離目標(biāo)一樣近(同一個祖先級) , 比較選擇器權(quán)重,權(quán)重大的層疊小的。

    3. 如果距離一樣近, 權(quán)重也相同, 最后比較 CSS 中的書寫順序, 后面的層疊前面的

! important 關(guān)鍵字

  • 如果在比較選擇器權(quán)重的過程中, 遇見一個 !important 關(guān)鍵字, 可以將某條 CSS樣式屬性的權(quán)重提升到最大。

  • 書寫位置: 在某個css屬性的屬性值后面 空格加 !important

  • 注意:

    • 就近原則中, 不需要比較選擇器權(quán)重, 所有會失效

    • important 不能提升選擇器的權(quán)重, 只能提升某條屬性的權(quán)重到最大

    #box2 {
      color: yellow !important;
    }
    #box2 .box3 {
      color: blue;

行內(nèi)式權(quán)重

  • 行內(nèi)式樣式與內(nèi)嵌式或外鏈?zhǔn)綐邮奖容^權(quán)重時,行內(nèi)式的權(quán)重最高

  • 但是, 與 !important 關(guān)鍵字相比權(quán)重要低

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容