css3 css的3種引入方式

2021-10-09 10:02:51 字數 3898 閱讀 8186

你好! 這是你第一次使用css所需要了解的知識點。如果你想學習如何使用css, 可以仔細閱讀這篇文章,了解一下css的基本語法知識。css的引入方式共有三種:行內樣式、內部樣式表、外部樣式表。

使用style屬性引入css樣式。

示例:直接在html標籤中設定的樣式

實際在寫頁面時不提倡使用,在測試的時候可以使用。

>

charset

="utf-8"

/>

>

行內樣式title

>

head

>

>

style

="color

:red;

">

leaping above the waterh1

>

style

="color

:red;

font-size

:30px;

">

我是p標籤p

>

body

>

html

>

在style標籤中書寫css**。style標籤寫在head標籤中。

示例:例如:

>

charset

="utf-8"

/>

>

內部樣式表title

>

type

="text/css"

>

divstyle

>

head

>

>

>

我是divdiv

>

body

>

html

>

例如:

>

charset

="utf-8"

/>

>

外部樣式表title

>

rel=

"stylesheet"

type

="text/css"

href

="css/style.css"

/>

type

="text/css"

>

@import

url("css/style.css");

style

>

head

>

>

>

>

ssli

>

>

sssli

>

ol>

html

>

當然以下的css檔案是要另建的,不是直接寫在html中,也命名和路徑也要和html的一樣,否則就會無法更改樣式。

li

鏈結式和匯入式的區別

1、屬於xhtml 2、優先載入css檔案到頁面 @import 1、屬於css2.1 2、先載入html結構在載入css檔案。 ## 四、css中的優先順序 1、樣式優先順序

行內樣式》內部樣式》外部樣式(後兩者是就近原則)

例如:行內樣式和內部樣式比較優先順序:

>

charset

="utf-8"

/>

>

行內樣式和內部樣式表的優先順序title

>

type

="text/css"

>

pstyle

>

head

>

>

style

="color

: red;

">

我是p段落p

>

html

>

效果結論:行內樣式優先順序高於內部樣式表。

內部樣式表和外部樣式表比較優先順序:

a、內部樣式表在外部樣式表上面

>

charset

="utf-8"

/>

>

內部樣式表和外部樣式表的優先順序title

>

type

="text/css"

>

pstyle

>

rel=

"stylesheet"

type

="text/css"

href

="css/style.css"

/>

head

>

>

>

我是p段落p

>

>

我是divdiv

>

>

>

1111li

>

>

2222li

>

ol>

html

>

瀏覽器執行效果

b、外部樣式表在內部樣式表上面

>

charset

="utf-8"

/>

>

內部樣式表和外部樣式表的優先順序title

>

rel=

"stylesheet"

type

="text/css"

href

="css/style.css"

/>

type

="text/css"

>

pstyle

>

head

>

>

>

我是p段落p

>

>

我是divdiv

>

>

>

1111li

>

>

2222li

>

ol>

html

>

瀏覽器執行效果

2、選擇器優先順序

優先順序:id選擇器》類選擇器》標籤選擇器

>

charset

="utf-8"

/>

>

選擇器的優先順序title

>

type

="text/css"

>

#a.b

h2style

>

head

>

>

>

111h2

>

"a" class

="b"

>

222h2

>

class

="b"

>

333h2

>

html

>

瀏覽器執行效果

可能同學不太懂優先順序是什麼,這裡說一下,就是同等條件下,會執行優先級別高的。就像上面的,假如只有乙個h2,用三種選擇器就會顯示的是綠色,而不是紅色或者黃色。

當然在現在基本上運用的比較常見的也是後兩者,當然如果你是新手可能會用的比較多是第一種,了解了這些知識,css之類你會使用的更加清楚。

CSS基礎語法 一 CSS的3種引入

css可算是網頁設計的乙個突破,它解決了網頁介面排版的難題。可以這麼說,html的tag主要是定義網頁的內容 content 而css決定這些網頁內容如何顯示 layout web早期,html是一種很有限的語言,這種語言不關心外觀,它只是一種簡潔的小型標記機制。隨著mosaic網頁瀏覽器的出現,開...

使用CSS 的3種方式

css cascade style sheet 層疊樣式表憑著著 豐富的樣式 簡單易用 重複使用 縮小檔案 等優勢成為了現代網頁必不可少的一樣技術。需要注意的是,目前我們將css定義為樣式表中的一種,未來可能有其他樣式表被開發出來。直白地說,css就是一系列樣式的集合,它用於定義文件元素的外觀表現形...

使用CSS 的3種方式

css cascade style sheet 層疊樣式表憑著著 豐富的樣式 簡單易用 重複使用 縮小檔案 等優勢成為了現代網頁必不可少的一樣技術。需要注意的是,目前我們將css定義為樣式表中的一種,未來可能有其他樣式表被開發出來。直白地說,css就是一系列樣式的集合,它用於定義文件元素的外觀表現形...