鏈接外部樣式文件
創(chuàng)新互聯(lián)建站致力于網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè),成都網(wǎng)站設(shè)計(jì),集團(tuán)網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過(guò)標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進(jìn)行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。 選擇創(chuàng)新互聯(lián)建站，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！
外部引入CSS樣式文件是通過(guò)link標(biāo)簽實(shí)現(xiàn)的，它只能位于HTML文檔的head標(biāo)簽內(nèi)，且必須有href屬性，該屬性用于指定需要引入的CSS文件的路徑。
寫(xiě)法：link rel="stylesheet" href="CSS樣式文件的絕對(duì)地址"
link元素中type用于規(guī)定鏈接文檔的MIME類(lèi)型，rel屬性用于規(guī)定被鏈接文檔與當(dāng)前文檔之間的關(guān)系，如alternate用于定義交替出現(xiàn)的鏈接，appendix定義文檔的附加信息等，此外還有一些可選屬性，用于做一些除加載CSS文件的其他事情。link元素是XHMTL中的標(biāo)簽，當(dāng)HTML頁(yè)面被渲染時(shí)，link引用的CSS文件會(huì)被同時(shí)加載，我們也可以通過(guò)JavaScript控制DOM去改變link元素的CSS內(nèi)容。
導(dǎo)入外部樣式
導(dǎo)入外部樣式單的功能與鏈接外部樣式的功能差不多，都能實(shí)現(xiàn)一樣的功能，但是它們之間還是存在一定的差別的，導(dǎo)入外部樣式主要通過(guò)@import方式導(dǎo)入CSS文件。
寫(xiě)法：
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識(shí)別@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不識(shí)別@import url(style.css) //Windows NS4, Macintosh NS4不識(shí)別@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識(shí)別@import url("style.css") //Windows NS4, Macintosh NS4不識(shí)別
由上分析知道，@import url(style.css) 和@import url("style.css")是最優(yōu)的選擇，兼容的瀏覽器最多。從字節(jié)優(yōu)化的角度來(lái)看@import url(style.css)最值得推薦。
本段摘自：
添加css的方式：link與@import區(qū)別 - Wayne-Zhu - 博客園
@import是css2里面提出來(lái)的，低版本的瀏覽器不支持，注意它是css中屬性，如果要使用它，可以在style標(biāo)簽中書(shū)寫(xiě)。但在CSS文件中再導(dǎo)入CSS文件，會(huì)給服務(wù)器造成太大的文件請(qǐng)求壓力，最好不要這樣做。
style
@import url(css/style.css);
/style
@import是由CSS提供的一種導(dǎo)入樣式的方式，當(dāng)頁(yè)面被加載時(shí)，@import會(huì)等到頁(yè)面全部被加載完成時(shí)再加載CSS樣式，所以在頁(yè)面還未加載完成期間，頁(yè)面還沒(méi)有CSS樣式效果，會(huì)導(dǎo)致“屏閃”，通過(guò)@import導(dǎo)入的CSS樣式是無(wú)法用DOM去控制的。
外部CSS樣式是一個(gè)獨(dú)立的CSS文件，當(dāng)在網(wǎng)頁(yè)中直接創(chuàng)建外部CSS樣式時(shí)，該樣式自動(dòng)應(yīng)用到網(wǎng)頁(yè)中；當(dāng)在創(chuàng)建空白網(wǎng)頁(yè)時(shí)，通?？梢愿郊右呀?jīng)存在的外部樣式表。如果CSS樣式文件已經(jīng)存在，制作網(wǎng)頁(yè)時(shí)可以通過(guò)【CSS樣式】面板中的【附加樣式表】按鈕來(lái)鏈接，具體操作如下：
（1）單擊【附加樣式表】按鈕，在打開(kāi)【鏈接外部樣式表】對(duì)話框（見(jiàn)圖1）中選擇外部CSS文件后，可以通過(guò)連接或?qū)敕绞綄⑵鋺?yīng)用到當(dāng)前網(wǎng)頁(yè)中。圖1
（2）在【添加為】中選擇其中的一個(gè)選項(xiàng)：
◇若要?jiǎng)?chuàng)建當(dāng)前文檔和外部樣式表之間的鏈接，請(qǐng)選擇【鏈接】單擊按鈕。該選項(xiàng)在HTML代碼中創(chuàng)建一個(gè)link標(biāo)記，并引用已發(fā)布的樣式表所在的URL。link標(biāo)記必須放在頁(yè)面的head區(qū)域。Internet Explorer和Netscape Navigator都支持此方法。
◇如果希望導(dǎo)入而不是鏈接到外部樣式表，請(qǐng)選擇【導(dǎo)入】單擊按鈕。導(dǎo)入外部樣式表是指在內(nèi)部樣式表的style里導(dǎo)入一個(gè)外部樣式表，導(dǎo)入時(shí)用@import。
注意：不能使用【鏈接】標(biāo)記添加從一個(gè)外部樣式表到另外一個(gè)外部樣式表的引用。如果要嵌套樣式表，必須使用【導(dǎo)入】指令。大多數(shù)瀏覽器還能識(shí)別頁(yè)面中（而不僅僅是樣式表中）的導(dǎo)入指令。當(dāng)在鏈接到頁(yè)面與導(dǎo)入到頁(yè)面的外部樣式表中存在重疊的規(guī)則時(shí)，不同瀏覽器解決沖突屬性的方式具有細(xì)微的差別。
鏈接是從一個(gè)網(wǎng)頁(yè)到另一個(gè)網(wǎng)頁(yè)的連接，CSS可通過(guò)不同屬性以各種不同方式來(lái)設(shè)置鏈接的樣式。下面本篇文章就來(lái)給大家介紹一下CSS設(shè)置鏈接的樣式的方法，希望對(duì)大家有所幫助。
在討論CSS屬性之前，先了解鏈接的狀態(tài)是非常重要的。鏈接可以存在于不同的狀態(tài)，并且可以使用偽類(lèi)進(jìn)行樣式設(shè)置。
下面給出了四種鏈接狀態(tài)：
● a：link =這是一個(gè)正常的，未訪問(wèn)過(guò)的鏈接。
● a：visited =這是用戶至少訪問(wèn)過(guò)一次的鏈接
● a：hover =當(dāng)鼠標(biāo)懸停在它上面時(shí)，這是一個(gè)鏈接
● a：active =這是一個(gè)剛剛點(diǎn)擊的鏈接。
語(yǔ)法：
color_name可以采用任何格式，如顏色名稱(chēng)（green）、十六進(jìn)制值（#5570f0）或RGB值-rgb(25, 255, 2)。還有另一個(gè)狀態(tài)“a:focus”，用于在用戶使用Tab鍵瀏覽鏈接時(shí)進(jìn)行聚焦。
鏈接的默認(rèn)值：
● 默認(rèn)情況下，創(chuàng)建的鏈接帶有下劃線。
● 當(dāng)鼠標(biāo)懸停在鏈接上方時(shí)，它會(huì)變?yōu)槭中螆D標(biāo)。
● 正常/未訪問(wèn)的鏈接為藍(lán)色。
● 訪問(wèn)過(guò)的鏈接有紫色。
● 活動(dòng)鏈接為紅色。
● 鏈接聚焦時(shí)，它周?chē)幸粋€(gè)輪廓。
例：
效果圖：
CSS如何設(shè)置鏈接的樣式？
下面是鏈接的一些基本CSS屬性：
● color屬性
● font-family屬性
● text-decoration屬性
● background-color屬性
1、color屬性： 此CSS屬性用于更改鏈接文本的顏色。
語(yǔ)法：
例：
效果圖：
2、font-family屬性 ：此屬性用于使用font-family屬性更改鏈接的字體類(lèi)型。
語(yǔ)法：
3、text-decoration屬性： 此屬性主要用于向鏈接刪除或添加下劃線等修飾。
語(yǔ)法：
例：
效果圖：
4、background-color屬性 ：此屬性用于設(shè)置鏈接的背景顏色。
語(yǔ)法：
例：使用以下css屬性
效果圖：
更多 web前端 知識(shí)，請(qǐng)查閱 HTML中文網(wǎng) ！！
a:link { text-decoration: none;}
a:visited { text-decoration: none;}
a:hover { text-decoration: underline;}
a:active { text-decoration: underline;}
注意：在 CSS 定義中，a:hover 必須位于 a:link 和 a:visited 之后才能生效，a:active 必須位于 a:hover 之后才能生效。
重慶分公司
重慶分公司
