CSS學習之樣式表引入

2021-10-01 16:14:48 字數 2915 閱讀 3783

style

="height

: 100px;

weight

: 50px;

">

***x p

>

注意點:

內聯樣式只能包含乙個宣告塊,不能放樣式表、@import、完整的規則。

type

="text/css"

media

="print, screen"

>

color

: red;

font-size

: 100px;

}-->

style

>

注意點:

1. 可以設定media屬性,常用的media值為all、print、screen;

2. type屬性必須要有;

3. 加的目的在於保證網頁的向後可訪問性。

對於較老的瀏覽器不僅會將style標記忽略,並且還會忽略宣告,因為html的注釋內容不會展示出來;

而對於能理解css的瀏覽器仍能正常地讀採樣式表

rel=

"stylesheet"

type

="text/css"

href

="***.css"

/>

rel=

"stylesheet"

type

="text/css"

href

="***2.css"

/>

ps:如果有多個樣式表,則會合併規則再應用到元素上

# 替換樣式表

rel=

"alternate stylesheet"

type

="text/css"

href

="***.css"

title

="alternate"

/>

ps: 如果瀏覽器支援,使用者可以自行選擇網頁的樣式(火狐的可以)

# 首選樣式表

rel=

"stylesheet"

type

="text/css"

href

="***.css"

title

="default"

/>

有title屬性並且rel為stylesheet的link就是首選樣式表,優先順序高於替換樣式表

ps:如果有多個首選樣式表,那麼只會選擇乙個進行使用,具體哪乙個跟瀏覽器有關。

# 永久樣式表:始終用於頁面的顯示

就是之前寫過的這種,沒有title屬性並且rel為stylesheet

rel=

"stylesheet"

type

="text/css"

href

="***.css"

/>

rel=

"stylesheet"

type

="text/css"

href

="***2.css"

/>

ps:如果有多個樣式表,則會合併規則再應用到元素上

# 小例子:

可以利用title進行樣式表的分組

rel=

"stylesheet"

type

="text/css"

href

="sheet1.css"

title

="default"

media

="screen"

/>

rel=

"stylesheet"

type

="text/css"

href

="sheet2.css"

title

="default"

media

="print"

/>

rel=

"alternate stylesheet"

type

="text/css"

href

="sheet3.css"

title

="big text"

media

="screen"

/>

rel=

"alternate stylesheet"

type

="text/css"

href

="sheet4.css"

title

="big text"

media

="print"

/>

只要為乙個rel為stylesheet的link指定了title,也就是指定了該錶為首選樣式表,也就是優先於候選樣式表使用,

但是一旦使用者選擇了候選樣式表,那麼就不會再使用首選樣式表了。

在螢幕**上應用sheet3.css,在列印**上應用sheet4.css

@import指令

用法:注意點:

1. @import url()必須寫在style標籤中而且也必須寫在在其他宣告之前,分號結束。

2. 常見的用途就是使用在鏈結式link檔案中,因為link檔案中無法使用標籤元素,此時@import就非常有用。

1.標籤屬於xhtml@import是屬於css2.1

2. 使用鏈結的css檔案先載入到網頁中,再進行編譯顯示

3. 使用@import匯入的css檔案,客戶端顯示html結構,再把css檔案載入到網頁中

4.@import是屬於css2.1特有的,對於不相容css2.1的瀏覽器來說就是無效的

css筆記之引入css樣式表

css cascading style sheets css通常稱為css樣式表或層疊樣式表 級聯樣式表 主要用於設定html頁面中的文字內容 字型 大小 對齊方式等 的外形 寬高 邊框樣式 邊距等 以及版面的布局等外觀顯示樣式。css以html為基礎,提供了豐富的功能,如字型 顏色 背景的控制及整...

CSS建立(樣式表引入)

一 如何插入樣式表 1.外部樣式表 2.內部樣式表 3.內聯樣式 二 外部樣式表詳解 每個頁面使用標籤鏈結到樣式表,標籤在 文件的 頭部。瀏覽器會從檔案mystyle.css中讀到樣式宣告,並格式化檔案。外部樣式表mystyle.css注意事項 1 檔案不能包含任何html標籤。2 樣式表應該以.c...

引入CSS樣式表(書寫位置)

內嵌式是將css 集中寫在html文件的head頭部標籤中,並且用style標籤定義,其基本語法格式如下 選擇器 style head 語法中,style標籤一般位於head標籤中title標籤之後,也可以把他放在html文件的任何地方。type text css 在html5中可以省略,寫上也比較...