學(xué)會(huì)怎樣給html標(biāo)簽定義css樣式

H5edu教育html5開(kāi)發(fā)為您解答：

創(chuàng)新互聯(lián)成立于2013年，先為郎溪等服務(wù)建站，郎溪等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為郎溪企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

在HTML中常用以下3種方式定義CSS：Embedding（嵌入式）、Linking（引用式）、Inline（內(nèi)聯(lián)式）

一、嵌入式：使用HTML的style元素，在文檔中定義CSS樣式

head

style type="text/css"

h1{color:red}

p{color:blue}

/style

head

二、內(nèi)聯(lián)式 ：每一個(gè)HTML元素都包含一個(gè)style屬性，可以直接定義樣式。該樣式僅能用于該元素的內(nèi)容，對(duì)于另一個(gè)同名的元素則不起作用。

p style="color:#FFF;font-weight:bold;"內(nèi)聯(lián)樣式/p

三、外部引用式：外部引用指HTML文檔本身不含有CSS樣式，而是動(dòng)態(tài)引用外部的CSS文件定義文檔的表現(xiàn)形式。

1、使用樣式表的處理指令語(yǔ)句-在HTML文檔的開(kāi)頭部分寫(xiě)一個(gè)關(guān)于樣式表的指令處理語(yǔ)句

?xml-stylesheet type="text/css" href="mystyle.css" ?

html

指令語(yǔ)句

/html

不過(guò)只有使用xml語(yǔ)法格式編寫(xiě)的html文檔才支持使用該指令，大多數(shù)瀏覽器僅當(dāng)被保存為xhtml或xml格式才有效，且JS不能處理這種CSS，所以不建議使用。

2、使用@import命令 -在style元素之間使用@import命令導(dǎo)入外部的css文件

head

style type="text/css"

!--下面兩行代碼效果一樣

@import "mystyle.css";

@import url("mystyle.css");

--

/style

/head

任何@import規(guī)則必須出現(xiàn)在所有規(guī)則之前。參數(shù)是一個(gè)css文件的URL地址。在一個(gè)css文件中也可以用@import指令將另一個(gè)css文件導(dǎo)入。

3、使用link元素

head

link rel="stylesheet" href="css的url" type="text/css"

/head

這也是最常用的方式。

4、使用HTTP消息報(bào)頭鏈接到樣式表 -可以使用HTTP消息報(bào)頭的link字段鏈接一個(gè)外部樣式表。 link:mystyle.css;rel=stylesheet;

//等同于link rel="stylesheet" href="css的url" type="text/css"

HTTP報(bào)頭中可以使用多個(gè)link，從而鏈接多個(gè)樣式表，且HTTP報(bào)頭中的link比HTML文檔中的link（head元素中）具有優(yōu)先級(jí)。

怎么定義css？

定義css分三類(lèi)：

第一類(lèi)：標(biāo)簽元素

body,ul,li等，直接定義 ，格式：標(biāo)簽名{屬性：樣式}

body{font-size:12px;}

第二類(lèi)：類(lèi)定義 在前面都是要加點(diǎn)

.top{margin-top:20px;}

第三類(lèi)：id定義，id定義是樣式里做高的，一般不建議用。id定義用#

#footer{ margin-top:20px;}

怎樣設(shè)定自定義CSS

自定義CSS的三中方方式：

一、行間樣式表

行間樣式表是指將CSS樣式編碼寫(xiě)在HTML標(biāo)簽中，格式如下

h1?style="font-size:12px;color:#000FFF"

我的CSS樣式。

/h1

行間樣式表由HTML元素的HTML元素的style支持，只需將CSS代碼用分號(hào)隔開(kāi)寫(xiě)在style=""之中。這是最基本的形式，但是它沒(méi)有實(shí)現(xiàn)表現(xiàn)與內(nèi)容分離且不能靈活的控制多個(gè)頁(yè)面所以我們只是在調(diào)試CSS代碼的時(shí)候使用。

二、內(nèi)部樣式表

內(nèi)部樣式表與行間樣式表相似都是把CSS代碼寫(xiě)在HTML頁(yè)面中，稍微不同的是前者可以將樣式表放在一個(gè)固定的位置，格式如下

html

head

title內(nèi)部樣式表/title

style?type="text/css"

h1{font-size:12px;

color:#000FFF

}

/style

/head

body

h1我的CSS樣式。/h1

/body

/html

內(nèi)部樣式表編碼是初級(jí)的應(yīng)用形式，不能達(dá)到跨頁(yè)面使用所以不適合使用。

三、外部樣式表

外部樣式表是CSS應(yīng)用中最好的一中形式，它將CSS樣式代碼單獨(dú)放在一個(gè)外部文件中，再由網(wǎng)頁(yè)進(jìn)行調(diào)用。多個(gè)網(wǎng)頁(yè)可以調(diào)用一個(gè)樣式文件表，這樣能夠?qū)崿F(xiàn)代碼的最大限度的重用及網(wǎng)站文件的最優(yōu)化配置，格式如下

html

head

title外部樣式表/title

link?rel="stylesheet"?rev="stylesheet"?href="style.css"

/head

body

h1我的CSS樣式。/h1

/body

/html

在style.css中的代碼為

h1{font-size:12px;

color:#000FFF

}

我們?cè)趆ead中使用了link標(biāo)簽來(lái)調(diào)用外部樣式表文件。將link指定為stylesheet方式，并使用了href="style.css"指明樣式表文件的路徑便可將該頁(yè)面應(yīng)用到在style.css中定義的樣式。