鏈接外部樣式文件
創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供科爾沁右翼中網(wǎng)站建設(shè)、科爾沁右翼中做網(wǎng)站、科爾沁右翼中網(wǎng)站設(shè)計、科爾沁右翼中網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、科爾沁右翼中企業(yè)網(wǎng)站模板建站服務(wù),十多年科爾沁右翼中做網(wǎng)站經(jīng)驗,不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
外部引入CSS樣式文件是通過link標簽實現(xiàn)的,它只能位于HTML文檔的head標簽內(nèi),且必須有href屬性,該屬性用于指定需要引入的CSS文件的路徑。
寫法:link rel="stylesheet" href="CSS樣式文件的絕對地址"
link元素中type用于規(guī)定鏈接文檔的MIME類型,rel屬性用于規(guī)定被鏈接文檔與當前文檔之間的關(guān)系,如alternate用于定義交替出現(xiàn)的鏈接,appendix定義文檔的附加信息等,此外還有一些可選屬性,用于做一些除加載CSS文件的其他事情。link元素是XHMTL中的標簽,當HTML頁面被渲染時,link引用的CSS文件會被同時加載,我們也可以通過JavaScript控制DOM去改變link元素的CSS內(nèi)容。
導(dǎo)入外部樣式
導(dǎo)入外部樣式單的功能與鏈接外部樣式的功能差不多,都能實現(xiàn)一樣的功能,但是它們之間還是存在一定的差別的,導(dǎo)入外部樣式主要通過@import方式導(dǎo)入CSS文件。
寫法:
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不識別@import url(style.css) //Windows NS4, Macintosh NS4不識別@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別@import url("style.css") //Windows NS4, Macintosh NS4不識別
由上分析知道,@import url(style.css) 和@import url("style.css")是最優(yōu)的選擇,兼容的瀏覽器最多。從字節(jié)優(yōu)化的角度來看@import url(style.css)最值得推薦。
本段摘自:
添加css的方式:link與@import區(qū)別 - Wayne-Zhu - 博客園
@import是css2里面提出來的,低版本的瀏覽器不支持,注意它是css中屬性,如果要使用它,可以在style標簽中書寫。但在CSS文件中再導(dǎo)入CSS文件,會給服務(wù)器造成太大的文件請求壓力,最好不要這樣做。
style
@import url(css/style.css);
/style
@import是由CSS提供的一種導(dǎo)入樣式的方式,當頁面被加載時,@import會等到頁面全部被加載完成時再加載CSS樣式,所以在頁面還未加載完成期間,頁面還沒有CSS樣式效果,會導(dǎo)致“屏閃”,通過@import導(dǎo)入的CSS樣式是無法用DOM去控制的。
html超鏈接樣式包括:正在連接、訪問過、鼠標盤旋,各個文本字體樣式設(shè)置如下
style type="text/css"
!-- 超鏈接文本字體設(shè)置--
A {
FONT-SIZE: 16px; FONT-FAMILY: 宋體
}
!-- 超鏈接正在連接的文本字體設(shè)置--
A:link {
COLOR: #0055bb; TEXT-DECORATION: none
}
!-- 超鏈接訪問過的文本字體設(shè)置--
A:visited {
COLOR: #0077bb; TEXT-DECORATION: none
}
!-- 超鏈接鼠標盤旋的文本字體設(shè)置--
A:hover {
COLOR: #ff0000; TEXT-DECORATION: none
}
/style
css可以使用下面的幾種偽類來設(shè)置鏈接樣式:
鏈接的四種狀態(tài):
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標指針位于鏈接的上方
a:active - 鏈接被點擊的時刻
當為鏈接的不同狀態(tài)設(shè)置樣式時,要按照如下規(guī)則:
a:hover 必須位于 a:link 和 a:visited 之后
a:active 必須位于 a:hover 之后
鏈接是從一個網(wǎng)頁到另一個網(wǎng)頁的連接,CSS可通過不同屬性以各種不同方式來設(shè)置鏈接的樣式。下面本篇文章就來給大家介紹一下CSS設(shè)置鏈接的樣式的方法,希望對大家有所幫助。
在討論CSS屬性之前,先了解鏈接的狀態(tài)是非常重要的。鏈接可以存在于不同的狀態(tài),并且可以使用偽類進行樣式設(shè)置。
下面給出了四種鏈接狀態(tài):
● a:link =這是一個正常的,未訪問過的鏈接。
● a:visited =這是用戶至少訪問過一次的鏈接
● a:hover =當鼠標懸停在它上面時,這是一個鏈接
● a:active =這是一個剛剛點擊的鏈接。
語法:
color_name可以采用任何格式,如顏色名稱(green)、十六進制值(#5570f0)或RGB值-rgb(25, 255, 2)。還有另一個狀態(tài)“a:focus”,用于在用戶使用Tab鍵瀏覽鏈接時進行聚焦。
鏈接的默認值:
● 默認情況下,創(chuàng)建的鏈接帶有下劃線。
● 當鼠標懸停在鏈接上方時,它會變?yōu)槭中螆D標。
● 正常/未訪問的鏈接為藍色。
● 訪問過的鏈接有紫色。
● 活動鏈接為紅色。
● 鏈接聚焦時,它周圍有一個輪廓。
例:
效果圖:
CSS如何設(shè)置鏈接的樣式?
下面是鏈接的一些基本CSS屬性:
● color屬性
● font-family屬性
● text-decoration屬性
● background-color屬性
1、color屬性: 此CSS屬性用于更改鏈接文本的顏色。
語法:
例:
效果圖:
2、font-family屬性 :此屬性用于使用font-family屬性更改鏈接的字體類型。
語法:
3、text-decoration屬性: 此屬性主要用于向鏈接刪除或添加下劃線等修飾。
語法:
例:
效果圖:
4、background-color屬性 :此屬性用于設(shè)置鏈接的背景顏色。
語法:
例:使用以下css屬性
效果圖:
更多 web前端 知識,請查閱 HTML中文網(wǎng) ?。?/p>
HTML文檔使用link .../元素來引入外部樣式文件,?link .../要放在head元素里
href="文件地址"
結(jié)合題目: style/css.css? 就是表示在html所在目錄里有個文件夾style. 該文件夾里有一個css文檔,? 該css文檔名字叫css
type="文件類型"
常見的有text/css表示層疊樣式表
text/javascript 表示 javascript腳本
rel="外部文件和HTML文檔的關(guān)系"
stylesheet: 表示外部文件是該HTML的樣式表
參考代碼 HTML文件
!DOCTYPE?html
html
head
link?href="style/css.css"?type="text/css"?rel="stylesheet"/
meta?charset="utf-8"
titleTest/title
/head
body
h3?id="title"標題/h3
p?class="myp"風(fēng)云/p
p?class="myp"雷電/p
/body
/html
參考CSS文件(注意該文件,在html所在目錄的style文件夾里, 詳細看前面的圖)
#title{
color:#f00;
}
.myp{
background:#999;
}
效果圖