1、創(chuàng)建使用css樣式表有三種，分別是外部樣式表，內(nèi)部樣式表和內(nèi)聯(lián)樣式。下面通過一個(gè)小demo演示它們的用法，首先新建一個(gè)html文件，放入3個(gè)button按鈕，給前兩個(gè)按鈕分別設(shè)置class屬性為btn1和btn2：
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊、虛擬主機(jī)、營銷軟件、網(wǎng)站建設(shè)、稱多網(wǎng)站維護(hù)、網(wǎng)站推廣。
2、接著準(zhǔn)備一個(gè)css文件，命名為demo.css，在文件內(nèi)寫入按鈕A的樣式，保存css文件：
3、回到剛才的html文件，在style標(biāo)簽中用link標(biāo)簽引入上一步創(chuàng)建的css文件，這就是外聯(lián)樣式的用法，總結(jié)就是創(chuàng)建好的css文件內(nèi)寫好樣式，然后在html文件中用link標(biāo)簽引入即可，這也是大部分網(wǎng)站使用的方法，因?yàn)槠湟敕奖悖芾砥饋硪脖容^方便：
4、接著是內(nèi)部樣式表的使用，這里直接在head標(biāo)簽里創(chuàng)建style標(biāo)簽，在里面加入btn2的樣式。對于內(nèi)部樣式表簡單的html文件，內(nèi)部樣式是很方便的，但是結(jié)構(gòu)復(fù)雜的html文件使用它就會讓文件顯得很混亂：
5、最后是內(nèi)聯(lián)樣式的使用，直接在第三個(gè)標(biāo)簽內(nèi)使用style屬性加入樣式就可以了：
6、最后保存html文件，打開瀏覽器可以看到三個(gè)按鈕的樣式都出現(xiàn)了。以上就是css樣式表的制作方法：
1、先啟動DW軟件，新建文檔，文檔類型選擇【/HTML】-【XHTML1.0】，然后點(diǎn)擊【創(chuàng)建】。
2、點(diǎn)擊創(chuàng)建后，DW會為之創(chuàng)建一個(gè)HTML文件，我們在body標(biāo)簽中加入一個(gè)div標(biāo)簽組。
3、然后在div標(biāo)簽中輸入下圖中的代碼，style代表了這個(gè)div直接添加了CSS樣式，這樣就成功了。樣式要在英文的引號中，否則是不起作用的。
在HTML中插入CSS的方法主要有三種，它們分別是內(nèi)聯(lián)樣式、內(nèi)部樣式、鏈接式和外部樣式。
1.內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式是在標(biāo)記的style屬性中設(shè)定CSS樣式。如下面的例子將h1的內(nèi)容標(biāo)記為黑底白字。
2.內(nèi)部樣式表
內(nèi)部樣式是將CSS樣式集中寫在網(wǎng)頁的head/head標(biāo)簽對的style/style標(biāo)簽對中。如對本網(wǎng)頁所有的h1標(biāo)記都設(shè)置為黑底白字：
3.外部樣式表
當(dāng)樣式需要應(yīng)用于很多頁面時(shí)，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。CSS樣式定義在.css文件中，可以通過一定的規(guī)則在HTML頁面中進(jìn)行引用，這種又分為兩種方式：
導(dǎo)入式
導(dǎo)入式使用CSS規(guī)則引入外部.css文件，語法如下：
4.
鏈接式
鏈接式使用HTML規(guī)則引入外部CSS文件，它在網(wǎng)頁的head/head標(biāo)簽對中使用link標(biāo)記來引入.css文件，使用語法如下：
1.首先打開EditPlus軟件，新建一個(gè)樣式表文件，寫入一些樣式，如下圖所示。
2.接下來我們在建立一個(gè)樣式表文件，在這個(gè)樣式表文件中通過import屬性導(dǎo)入上一個(gè)樣式表，如下圖所示。
3.然后在html中我們用link標(biāo)簽導(dǎo)入上面聲明的樣式文件，如下圖所示。
4.接下來我們運(yùn)行HTML文件，我們可以看到雖然只導(dǎo)入了一個(gè)樣式文件，但是兩個(gè)樣式表的樣式都加載進(jìn)來了，如下圖所示。
5.另外在運(yùn)用import的時(shí)候一定不要放在樣式下面，如下圖所示，這樣是不生效的。
6.最后運(yùn)用import導(dǎo)入樣式也不要忘了分號，如下圖所示，忘了分號也是不生效的。
在網(wǎng)頁中插入CSS樣式表有四種方法
鏈入外部樣式表
鏈入外部樣式表是把樣式表保存為一個(gè)樣式表文件，然后在頁面中用link標(biāo)記鏈接到這個(gè)樣式表文件，這個(gè)link標(biāo)記必須放到頁面的head區(qū)內(nèi)，如下：
head?
……?
link?href="mystyle.css"?rel="stylesheet"?type="text/css"?media="all"?
……?
/head
內(nèi)部樣式表
內(nèi)部樣式表是把樣式表放到頁面的head區(qū)里，這些定義的樣式就應(yīng)用到頁面中了，樣式表是用style標(biāo)記插入的，從下例中可以看出style標(biāo)記的用法：
head?
……?
style?type="text/css"?
hr?{color:?sienna}?
p?{margin-left:?20px}?
body?{background-image:?url("images/back40.gif")}?
/style?
……?
/head
導(dǎo)入外部樣式表
導(dǎo)入外部樣式表是指在內(nèi)部樣式表的style里導(dǎo)入一個(gè)外部樣式表，導(dǎo)入時(shí)用@import，看下面這個(gè)實(shí)例：
head?
……?
style?type=”text/css”?
!--?
@import?“mystyle.css”?
其他樣式表的聲明?
--?
/style?
……?
/head
內(nèi)嵌樣式
內(nèi)嵌樣式的使用是直接將在HTML標(biāo)記里加入style參數(shù)。
p?style="color:?sienna;margin-left:?20px;"?
這是一個(gè)段落?
/p
html引用css方法如下：
1、直接在div中使用css樣式制作div+css網(wǎng)頁
2、html中使用style自帶式
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件 推薦此方法
解html引用css方法的例子
1、直接在html標(biāo)簽元素內(nèi)嵌入css樣式，如div style="font-size:14px; color:#FF0000;"我是div css測試內(nèi)容-支持/div 效果如下圖
2、在html頭部head部分內(nèi)style聲明插入代碼如下：
style?type="text/css"?
!--?
.ceshi?{font-size:14px;?color:#FF0000;}/*這里是設(shè)置CSS的樣式內(nèi)容*/?
--?
/style
具體方法如下圖：
3、使用@import引用外部CSS文件方法
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"
"
html?xmlns="
head?
meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/?
titlecss引用方法實(shí)例-測試實(shí)例/title?
style?type="text/css"?
!--?
@import?url(wcss.css);/*這里是通過@import引用CSS的樣式內(nèi)容*/?
--?
/style?
/head?
body?
div?class="ceshi"我是div?css測試內(nèi)容支持/div?
/body?
/html
Wcss.css文件內(nèi)代碼.ceshi {font-size:14px; color:#FF0000;}
效果如下圖：
可以看出使用此方法和使用自帶式引用css樣式表方法有相同處，都是需要在html的head內(nèi)使用style標(biāo)簽引用外部css。
4、使用link來調(diào)用外部的css文件
在head放置link rel="stylesheet" href="wcss.css" type="text/css" /來調(diào)用外部的wcss.css文件來實(shí)現(xiàn)html引用css文件
詳細(xì)如下圖
此方法就不需要style標(biāo)簽，而是直接通過link一個(gè)樣式來引用外部樣式
一般推薦使用link來引用外部的css樣式方法。
重慶分公司
重慶分公司
