引入CSS樣式的方法是什麼呢

大家知道引入CSS樣式的方法嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

1.link

<link rel=”stylesheet” type=”text/css” href=”a.css”>

rel 關系

type 數據類型,有多種

href 路徑

部分浏覽器支持候選樣式,關鍵字:alternate:

<link rel=”stylesheet” type=”text/css” href=”a.css”>

<link rel=”alternate stylesheet” type=”text/css” href=”b.css”>

<link rel=”alternate stylesheet” type=”text/css” href=”c.css”>

2.內部樣式塊

<style>

<!&ndash;

h1{color:red;}

&ndash;>

</style>

3.@import

@import url{a.css}

注意:此指令必須放在<style>容器中,並且在所有樣式之前

建議放在一個html注釋中,<!&ndash; &ndash;>浏覽器會不顯示注釋內的內容,而import等css代碼能正常工作

4.內聯樣式

<p style=”color:red;”>

選擇器是css的一個基本概念，基本規則如下：

1.規則結構：

h1 {color:red;}

選擇器 {屬性:值;}

這類是元素選擇器，基本可以包括所有html的元素

屬性值可以包括多個元素，如：border：1px solid red;

常用語法

1)分組：

選擇器和聲明都可以分組:

h1,h2,h3{color:red;background:#fff;} ,選擇器用“,”分割開,屬性用”;”分割

2)類選擇器,即通過class=”stylename”應用的聲明

定義:

.stylename{color:red;}

注意:

在html中可以使用多類選擇:如class=”cn1 cn2 cn3&Prime;

3)ID選擇器,即與id屬性對應的樣式

定義:

#a{color:red;} ->這個定義對用id=”a”的元素

2.這部分都是我們常見的css語法，下面談一下我們不常見的選擇器語法

1)父子結構,跟文檔結構圖對應

如p span{border:1px solid red;}對應的是<p>下面的<li>標簽,這個很用用途,可以准確定位.

一些特殊應用(IE7支持):

(1) p > span{},匹配所有p下所有的span

(2) p + span{} ,匹配緊接著p元素後出現的第一個span標簽,2者要有相同的父標簽

2)屬性選擇器:(注意:屬性選擇器ie7才開始支持,以下版本並不支持,其他的浏覽器基本可以)

語法:img[alt]{border:1px solid;}

表示對應有alt屬性的img標簽,當然可以支持多個屬性對應,如img[alt][title]{};表示這個2個屬性都有的img標簽,也可以與具體值對應:如:img[alt=”攝影”]{};

屬性選擇器中的高級應用,特殊匹配:

(1)img[class~=”b”],    ~= : 與屬性中的一個值對應的,即與<img class=”a b c”>對應

(2)[class^=”a”],以a開頭的

(3)[class$=”a”],以a結束的

(4)[class*=”a”],包含a的

(5)[class|=”a”],等於a或以a開頭的

3)偽類和偽元素

日常使用中主要是<a>標簽的幾個偽類:link:hover:active:visited

以及:first-child:first:before:left:right:lang:focus:fist-line等等

注意:動態偽類可以應用到任何元素,如,input:focus{background:red;}當input標簽獲得焦點時背景變紅

以上語法組合使用,就能實現定位准確、簡單間接的樣式了。

相信大家已經學會引入CSS樣式的方法了吧!感謝大家對我們網站的支持!

相關推薦：

Div+Css實現屏蔽效果的方法是什麼