HTML外部樣式表如何引入CSS樣式

鏈入式是把所有的 樣式 放在一個(gè)或多個(gè) 外部樣式表文件 中,這個(gè)文件是以 css 為擴(kuò)展名的,通過(guò) link 標(biāo)簽,將外部樣式表(css命名的外部樣式文件)鏈接到html文檔中,這樣可以把結(jié)構(gòu)和樣式分割成2個(gè)文件,更能清晰的編輯樣式或者結(jié)構(gòu)。
基本語(yǔ)法為:
<link rel="stylesheet" href="text.css" />
tips: 快捷鍵為 link+tab鍵
具體步驟
①分別建立HTML和css文件,文件名分別以 .html 和 .css 為后綴。
其中 HTML 中只寫(xiě) 結(jié)構(gòu) 和 需要改變樣式的 內(nèi)容;
css文件中只寫(xiě)樣式。
例如:
HTML文件寫(xiě):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> <div class="demo">跟張汪汪一起學(xué)會(huì)外部樣式表</div> <div>跟張汪汪一起學(xué)會(huì)外部樣式表</div> <div>跟張汪汪一起學(xué)會(huì)外部樣式表</div> <div>跟張汪汪一起學(xué)會(huì)外部樣式表</div> </body> </html>
css文件寫(xiě):
.demo{ color: blue; }
此時(shí),瀏覽器中顯示:
由上面的代碼可見(jiàn),我們?yōu)榈谝恍械?“跟張汪汪一起學(xué)會(huì)外部樣式表” 做了顏色為 藍(lán)色 樣式,但是由于沒(méi)有將.html和.css 這2個(gè)文件建立連接,瀏覽器中的第一行字并不顯示所編輯的顏色。
②在HTML中的 < head > 中插入
<link rel="stylesheet" href="css文件的路徑" />
后,Ctrl+S后 刷新瀏覽器顯示如下:
可以看到這里第一行字已經(jīng)變成藍(lán)色啦~
注意
小白在練習(xí)過(guò)程中,最好把 .css 文件和 .html 文件放在同一目錄文件夾下,且寫(xiě)完 樣式 或 結(jié)構(gòu) 后記得先 Ctrl+S 先保存哦,這樣才能更好更快捷的把結(jié)果顯示出來(lái)。
link標(biāo)簽的作用是 把外邊的css樣式引入到當(dāng)前的HTML頁(yè)面中,是HTML和css文件的橋梁。
到此這篇關(guān)于HTML外部樣式表如何引入CSS樣式的文章就介紹到這了,更多相關(guān)HTML引入CSS樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
HTML基礎(chǔ)知識(shí)——css樣式表,樣式屬性,格式與布局詳解
下面小編就為大家?guī)?lái)一篇HTML基礎(chǔ)知識(shí)——css樣式表,樣式屬性,格式與布局詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-11- 下面小編就為大家?guī)?lái)一篇HTML基礎(chǔ)必看——全面了解css樣式表。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-11
- 下面小編就為大家?guī)?lái)一篇HTML (css樣式規(guī)范)必看篇。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-27
html動(dòng)態(tài)加載css樣式和js腳本示例
這篇文章主要介紹了html動(dòng)態(tài)加載css樣式和js腳本示例,需要的朋友可以參考下2014-04-16- 在布局過(guò)程中為了某些需求,將html標(biāo)簽在瀏覽器居中顯示是很常見(jiàn)的做法,下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-04-15
通過(guò)CSS樣式實(shí)現(xiàn)的html背景色漸變效果
在html中可以輕松實(shí)現(xiàn)背景色漸變的下面是一個(gè)通過(guò)CSS實(shí)現(xiàn)的示例,大家若感興趣,可以參考下2014-03-24html 隱藏div HTML里隱藏表格TABLE或者DIV內(nèi)容的css樣式
突然想起幾年前用過(guò)的一個(gè)隱藏樣式代碼,有些時(shí)候用它非常方便,比如想讓某塊表格TABLE或者DIV里的內(nèi)容完全看不到,那就加上他,嘿嘿,就隱身了,需要的朋友可以了解下2012-12-21- html,address, blockquote, body,dd,div, dl,dt,fieldset,form, frame,frameset, h1,h2,h3,h4, h5,h6,noframes, ol,p,ul,center, dir,hr,menu,pre { display:block} li {2008-10-17
- CSS 樣式既可以作為單獨(dú)的文件(.css類(lèi)型的文件)引入到 HTML 文檔中,本文主要介紹了HTML嵌入CSS樣式的四種實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-03