0302學習筆記(css)

2021-10-03 10:49:16 字數 2649 閱讀 9668

簡單使用方式

方式1,在html頁面裡的style標籤中新增樣式

<

!doctype html>

"en"

>

"utf-8"

>

title<

/title>

<

!--規範,可以編寫css**,每乙個宣告最好使用分號結尾

語法:選擇器

-->

h1<

/style>

<

/head>

我是標題<

/h1>

<

/body>

<

/html>

style中的h1是選擇器,選擇下方的h1標籤

方式2:css檔案引用

…/ 表示當前檔案所在的目錄的上一級目錄

./ 表示當前檔案所在的目錄(可以省略)

/ 表示當前站點的根目錄(網域名稱對映的硬碟目錄)

html檔案:

<

!doctype html>

"en"

>

"utf-8"

>

title<

/title>

<

!--規範,可以編寫css**,每乙個宣告最好使用分號結尾

語法:選擇器

-->

"stylesheet" href=

"../css/demo01.css"

>

<

/head>

我是標題<

/h1>

<

/body>

<

/html>

css檔案

h1
css的匯入方式

1.行內樣式

<

!--行內樣式:在標籤元素中編寫乙個style屬性--

>

"color:red"

>我是標題<

/h1>

<

/body>

2.內部樣式

<

!--內部樣式--

>

h1<

/style>

<

/body>

↑似乎寫在head還是body裡還是外面都無所謂

3.外部樣式

css檔案

h1
優先順序:就近原則,行內樣式最優先,內部/外部誰離tag的**近誰生效

選擇器

作用:選擇頁面上某乙個或某一類元素

2.1基本選擇器

1.標籤選擇器

2.類 選擇器

3.id選擇器

1.標籤選擇器

可以在網頁裡瞎改然後把改好的格式複製貼上進style標籤

選擇一類標籤

p

2.類選擇器

同樣標籤的可以通過設定類來分別給於樣式

/*類選擇器的格式 .class的名稱 {}*/

.test1

.test2

<

/style>

"test1"

>標題1

<

/h1>

"test2"

>標題2

<

/h1>

"test1"

>標題3

<

/h1>

<

/body>

類選擇器可復用,多個標籤可使用同乙個類

3.id選擇器

id選擇器不可復用,乙個id只能被乙個標籤使用

/* id選擇器:

#id 名稱{}

*/#test1

<

/style>

"test1"

>標題1

<

/h1>

"test2"

>標題2

<

/h1>

標題3<

/h1>

標題2使用test1會報錯。

id和class可以一起使用

/* id選擇器:

#id 名稱{}

*/#test1

.test2

<

/style>

"test1"

>標題1

<

/h1>

"test2"

>標題2

<

/h1>

標題3<

/h1>

優先順序不遵循就近原則,固定id>類》標籤選擇器

"test1" class=

"test2"

>標題1

<

/h1>

"test2"

>標題2

<

/h1>

標題3<

/h1>

標題1生效的是id選擇器

CSS學習 CSS學習筆記

出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...

CSS學習 CSS學習筆記

出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...

CSS 學習筆記

當同乙個html元素被不止乙個樣式定義時,會使用哪個樣式呢?一般而言,所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中,其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此,內聯樣式 在html 元素內部 擁有最...