CSS入門基礎

2021-09-27 03:16:00 字數 1181 閱讀 7640

內聯樣式

可以將css樣式編寫到元素的style屬性中

將樣式直接編寫到style屬性中,這種樣式我們稱為內聯樣式

內聯樣式只對當前元素中的內容起作用,內聯樣式不方便復用

內聯樣式屬於結構與表現耦合,不方便後期的維護,不推薦使用的

例:鋤禾日當午,汗滴禾下土

誰知盤中餐,粒粒皆辛苦

內部樣式表

也可以將css樣式編寫到head中的style標籤裡

將樣式表編寫到style標籤中,然後通過css選擇器選中指定元素

然後可以同時為這些元素一起設定樣式,這樣可以使樣式進一步的復用

將樣式表編寫到style標籤中,也可以使表現和結構進一步分離它,也是我們推薦使用的方式

例:

外部css樣式表

還可以將樣式表編寫到外部的css檔案中,然後通過link標籤將外部的css檔案引入到當前頁面中,

這樣外部檔案中的css樣式表將會應用到當前頁面中

將css樣式統一編寫到外部的樣式表中,完全使結構和表現分離,可以使樣式表在不同的頁面中使用

最大限度的使樣式可以進行復用,將樣式統一寫在樣式表中,然後通過link標籤引入,可以利用瀏覽器的快取

加快使用者訪問的速度,提高了使用者體驗,所以在開發中,我們最推薦使用的方式就是外部的css檔案

例:

css的注釋

css的注釋,作用和html注釋類似,只不過它必須編寫在style標籤中,或者是css檔案中

例:/**/

css的語法

css的語法:

選擇器 宣告塊

選擇器:

- 通過選擇器可以選中頁面中指定的元素,

並且將宣告塊中的樣式應用到選擇器對應的元素上

宣告塊:

- 宣告塊緊跟在選擇器的後邊,使用一對{}括起來,

宣告塊中實際上就是一組一組的名值對結構,

這一組一組的名值對我們稱為宣告

在乙個宣告塊中可以寫多個宣告,多個宣告之間使用;隔開,

宣告的樣式名和樣式值之間使用:來連線

例:p

CSS入門基礎

一 選擇器詳解 下 符合選擇器部分 標籤指定式選擇器 交集選擇器 語法 標籤名 其他選擇器 示例 段落文字1 段落文字2 效果 段落文字1顯示紅色 結論 標籤指定式選擇器中的兩個選擇器是既 又的關係,如示例中,既是p標籤,又必須class屬性為content的元素被選中。後代選擇器 語法 選擇器1 ...

CSS基礎入門

css是w3c協會 全球資訊網聯盟 為了彌補html在顯示屬性設定上面的不足而制定的一套擴充套件樣式標準。css的基本規則是 選擇符。css選擇器常用的是標記選擇器 類別選擇器和id選擇器,使用選擇器可對不同的html標籤進行控制,從而實現各種效果。標記選擇器是直接對標籤名稱進行選擇,選擇符為標籤名...

CSS基礎入門

css基礎語法 派生選擇器 上下文選擇器 contextual selectors id選擇器 類選擇器 屬性選擇器 選擇器裡的特殊符號 插入css 樣式定義html元素的展示 結構html 行為js 樣式css相分離 優先順序從高至低 內聯樣式 html 元素中的 style 屬性 內部樣式表 標...