HTML5使用link引入外部css
創(chuàng)新互聯(lián)-云計(jì)算及IDC服務(wù)提供商,涵蓋公有云、IDC機(jī)房租用、聯(lián)通機(jī)房服務(wù)器托管、等保安全、私有云建設(shè)等企業(yè)級互聯(lián)網(wǎng)基礎(chǔ)服務(wù),溝通電話:13518219792
head
link rel="stylesheet" type="text/css" href="style.css" /
/head
style.css/外部css文件名
html5 css3樣式圖標(biāo)制作方法:
1、html代碼:
div id="boxes"
div id="boxShortcode"border-radius: 40px (shortcode)/div
div id="box1"border-top-right-radius: 40px (same on both axis)/div
div id="box2"border-top-right-radius: 20px 40px (x y) /div
div id="box3"border-top-right-radius: 40px 20px (x y) /div
/div
2、css樣式代碼:
#boxes div { margin-bottom: 20px; height: 50px; padding-left: 20px }
#boxShortcode {
background: cyan;
border-radius: 40px;
}
#box1 {
background: red;
border-top-right-radius: 40px;
}
#box2? {
background: yellow;
border-top-right-radius: 20px 40px;
}
#box3 {
background: lime;
border-top-right-radius: 40px 20px;
}
3、運(yùn)行結(jié)果:
1、html5使用link標(biāo)簽引入外圍的css樣式表。方法是首先打開hbuilder軟件,在一個外部css文件中編寫css代碼,然后可以能過 link 引入到html中,這里設(shè)置了兩個屬性的字體和顏色屬性:
2、在html文件中使用link標(biāo)簽引入剛剛寫好的css樣式表,其中href是相對路徑,即相對于項(xiàng)目所在文件的路徑。然后寫兩個標(biāo)簽,引入上述css文件里的樣式:
3、最后打開瀏覽器,即可看到 上面的代碼效果:
你好,HTML5主要是放網(wǎng)頁代碼和結(jié)構(gòu)的,CSS主要是用來給網(wǎng)頁內(nèi)容(文字、圖片)排版、添加樣式以及制作簡單動畫的,簡單來說就是美化頁面,或者說就是讓用戶覺得更好看,于是運(yùn)用HTML5+CSS 組合起來的技術(shù),就能達(dá)到這種效果。下面我給你舉例說明吧:
未添加樣式:?p我愛中國/p
然后假如我把“我愛中國”變成紅色、字體大小為22px
有3種方法(第二、第三種方法都要使用標(biāo)簽選擇器):
行內(nèi)樣式(直接在標(biāo)簽元素內(nèi)部添加,屬性之間用英文輸入法下的分號隔開):
div
p style="color:red;font-size:22px"我愛中國/p
/div
內(nèi)部樣式(在head標(biāo)簽內(nèi)部添加style標(biāo)簽):
head
style
div p{
color:red;
font-size:22px
}
/style
/head
外部樣式(先新建一個 .css文件,然后在head標(biāo)簽內(nèi)部用link/引入):
先在.css文件寫代碼如下:
div p{
color:red;
font-size:22px
}
再將.css文件引入,假如你的文件你命名為index.css,那么代碼如下:
head
link href="index.css"? ref="stylesheep"? type="text/css"/
/head
這樣,三種方法達(dá)到的是同一種效果,只是第三種比較專業(yè),實(shí)現(xiàn)了HTML代碼和.css文件的完全分離,這樣有幾個好處:1.可以更容易被搜索引擎收錄(這里涉及到SEO優(yōu)化的知識);2.網(wǎng)頁代碼量減少了,網(wǎng)頁打開速度加快了,能提高用戶體驗(yàn);3.便于網(wǎng)頁后期的修改和維護(hù)。
今天先給你講這么多,希望采納,謝謝