wep前端入門03 CSS基礎選擇器

2021-10-01 11:07:55 字數 998 閱讀 7981

cascading style sheets 層疊樣式表

層疊 :多個樣式可以作用在同乙個html的元素上,同時生效

作用 : 用於頁面美化和布局控制

1. 功能強大

2. 將內容展示和樣式控制分離

* 降低耦合度。解耦

* 讓分工協作更容易

* 提高開發效率

css與html結合方式

內聯樣式
在標籤內使用style屬性指定css**

例如:style

="color

:red;

">

hello cssdiv

>

內部樣式
在head標籤內,定義style標籤,style標籤的標籤體內容就是css**
外部樣式
1. 定義css資源檔案。

2. 在head標籤內,定義link標籤,引入外部的資源檔案

總結

1,2,3種方式 css作用範圍越來越大

第1種方式不常用,後期常用2,3

第3種格式可以寫為:

>

@import

"css/a.css"

;style

>

選擇器

篩選具有相似特徵的元素
每一對屬性需要使用;隔開,最後一對屬性可以不加;
基礎選擇器

元素選擇器

類選擇器

擴充套件選擇器

字型、文字 背景

邊框 尺寸

盒子模型

前端基礎 03 CSS屬性

1.瀏覽量預設的字型微軟雅黑 font family adobe arabic 2.字型大小設定 1.px 預設畫素 2.rem 對應瀏覽器預設的字型大小,瀏覽器是1rem 16px google瀏覽器是 16px,最小是12px 3.em 等於父級的字型尺寸 相對父級字型大小而言 4.相對父級的字...

CSS基礎03 CSS字型屬性

css fonts 字型 屬性用於定義字型系列 大小 粗細 文字樣式 如斜體等 css使用font family屬性定義文字的字型系列。pstyle css使用 font size屬性設定字型大小 pstyle css使用 font weight屬性來設定字型粗細,屬性值有normal 正常字型,相...

前端面試 一面03 CSS盒模型

三 實際情況中的例項 四 延伸問題 思考接下來會怎麼延伸追問,做好心理準備 1 盒模型的基本概念 區別 2 怎麼應用2種盒模型 box sizing content box 預設標準模型 box sizing border box ie模型包含border padding 3 js怎麼獲取盒模型 c...