CSS基礎筆記

2021-08-09 05:07:59 字數 1491 閱讀 4860

1、常見css屬性

1.1. background-color:設定元素背景顏色

1.2. border:設定圍繞元素的邊框

1.3. color:設定元素的前置顏色

1.4. font-size:設定元素文字的字型大小

1.5. height:設定元素的高度

1.6. padding:設定元素與邊框的間距

1.7. text-decoration:設定元素文字的裝飾效果,例如下劃線

1.8. width:設定元素的寬度

2、使用元素內嵌樣式
baidu.com
效果:

3、使用文件內嵌樣式

如圖:

a span

4、使用外部樣式表

如新建styles.css

a 

span

呼叫方式

在樣式表中匯入另乙個樣式,遵從後匯入原則 如:combined.css

import styles.css;

span

然後用到的時候直接引用combied.css

注:可能需要宣告樣式編碼格式,如

@charset 「utf-8」;

1、預設樣式(瀏覽器自帶的樣式)

在我們沒有定義樣式的時候,瀏覽器預設顯示的樣式

2、使用者樣式(瀏覽器管理的樣式)

瀏覽器一般有管理使用者樣式的方式,拿chrome來說,他會在使用者的個人配置資訊目錄中生成乙個名為default/user stylesheets\custom.css的檔案

3、樣式層疊方式

3.1 樣層疊順序如下:

(1)元素內嵌樣式

(2)文件內嵌樣式

(3)外部樣式

(4)使用者樣式

(5)瀏覽器樣式

3.2 同級樣式衝突

利用偽類、偽元素,給元素定義class或者id,正對這些class或者id去配置css屬性.

this is a
4、繼承

如果瀏覽器在直接相關的元素裡面找不到某個屬性的值,就會使用父元素的這個屬性.如下面,span使用p的css屬性

1、絕對長度

單位表示符

說明in

英吋cm

厘公尺mm

公釐pt

英鎊(1/12in)

pcpica(12pt)

2、相對長度

單位表示符

說明em

與元素字型大小掛鉤

ex與元素字型的「x高度」掛鉤

rem與根元素的字型大小掛鉤

pxcss畫素(針對96dpi而言)

%另一屬性的值的百分比

css 基礎筆記

css 樣式的兩種引用方式 1.body h1,h22.attention用粗體顯示所有class屬性為 attention 的標記。3.聯合使用 p.attention 表示在p中有class attention 屬性時除了用粗體顯示以外,還應該用紅色顯示。4.除了class以外還用應用在指定id...

CSS 基礎筆記

css cascading style sheets 層疊樣式表 主要是用於定義html內容在瀏覽器內的顯示樣式,如文字大小 顏色 字型加粗等。示例 頂過枯燥無味的學習!css樣式 內聯式 直接把css 寫在html標籤裡 超酷的網際網路 嵌入式 把css 寫在標籤之間。外部式 外聯式 把css 寫...

CSS基礎筆記

css基礎語法 css中的方向 順時針方向 自定義元素屬性之前很重要的一點是清楚系統預設的屬性,比如清楚系統預設的內邊距和外邊距。繼承關係 子區域繼承父區域的樣式,同時,子區域也可以對父區域的樣式進行重寫,或者說覆蓋。選擇器 不同的選擇器修飾於同一元素,按照優先順序,選擇器依次是id選擇器,類選擇器...