成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css引入頁面的三種方法

浠ラ箍 / 3501人閱讀

摘要：內(nèi)聯(lián)式直接在標(biāo)簽上寫樣式頁面引入方法頁面引入方法如上面的代碼所示，在標(biāo)簽內(nèi)直接通過屬性直接寫樣式。然后通過標(biāo)簽將樣式文件引入到頁面。這種方法才是開發(fā)中最常用的辦法。

1.內(nèi)聯(lián)式：直接在標(biāo)簽上寫樣式

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css頁面引入方法title>
 6 head>
 7 <body>
 8     <div style="color: red ;font-size:50px">css頁面引入方法div>
 9 body>
10 html>

　　如上面的代碼所示，在div標(biāo)簽內(nèi)直接通過styl屬性直接寫樣式。那么這里我們設(shè)置了字體的顏色為紅色，字體大小為50px。

看一下顯示出來的效果。

　　　　這種方法在開發(fā)中是最不常用的一種，因?yàn)樵跇?biāo)簽內(nèi)寫方法會(huì)讓代碼看起來很亂，而且也不利于管理和查找，所以只有在某些情況下才會(huì)使用這種方式來寫樣式。

2.嵌入式：通過style標(biāo)簽來寫樣式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css頁面引入方法title>
    <style type="text/css">
        div{
            color: green;
            font-size: 50px;
        }
    style>
head>
<body>
    <div>css頁面引入方法div>
body>
html>

　　可以看到我在head中用style標(biāo)簽寫了一個(gè)樣式出來，通過選擇器選擇器來將樣式加入到頁面中?？匆幌滦Ч?。

　　　這種方法是比較常用的一種，一般在寫首頁的時(shí)候通常會(huì)用到這種方式，因?yàn)榫W(wǎng)站首頁加載快慢會(huì)直接影響用戶的體驗(yàn)，所以網(wǎng)頁的加載速度就要快。那么這種方式不會(huì)影響加載速度，又將樣式整合到了標(biāo)簽中，所以是比較適用的。但是也不會(huì)大量的使用。最后一種才是我們經(jīng)常用的方式。

3.外聯(lián)式：通過link標(biāo)簽將樣式添加到頁面上

main.css

1 div{
2     font-size: 50px;
3     color: blue;
4 }

code.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css頁面引入方法title>
    <link rel="stylesheet" href="css/main.css">
head>
<body>
    <div>css頁面引入方法div>
body>
html>

　　我們可以看到這次用了兩個(gè)文件，一個(gè)是css文件，一個(gè)是html文件。css文件里寫的東西和style標(biāo)簽中的寫法是一模一樣的。只是多帶帶寫在一個(gè)文件中。然后通過link標(biāo)簽將css樣式文件引入到頁面。rel里面的東西我們不用管，herf中的路徑就是css文件的邏輯路徑。我們看一下效果。

　　這種方法才是開發(fā)中最常用的辦法。好處顯而易見，比如，低耦合，整潔，條理清晰。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1420.html

相關(guān)文章

  • CSS的三種引入方式

    摘要：內(nèi)聯(lián)在元素中添加屬性添加樣式，只能作用于當(dāng)前元素，不能復(fù)用。內(nèi)部在里面添加標(biāo)簽可以當(dāng)前頁面復(fù)用不能多頁面復(fù)用外部寫在單獨(dú)的文件里面通過標(biāo)簽引入，可以多頁面復(fù)用內(nèi)聯(lián)優(yōu)先級最高內(nèi)部和外部優(yōu)先級一樣，后執(zhí)行的覆蓋前面執(zhí)行的內(nèi)聯(lián)： 在元素中添加style屬性添加樣式，只能作用于當(dāng)前元素，不能復(fù)用。內(nèi)部：在head里面添加style標(biāo)簽 可以當(dāng)前頁面復(fù)用 不能多頁面復(fù)用 外部：寫在單獨(dú)的css文件里面...

    mrcode 評論0 收藏0

  • 圍住浮動(dòng)元素的三種方法

    摘要：由于包含元素一定會(huì)包圍非浮動(dòng)的子元素而且清除會(huì)讓這個(gè)子元素位于清除一側(cè)浮動(dòng)元素的下方因此包含元素一定會(huì)包含這個(gè)子元素以及前面的浮動(dòng)元素。 浮動(dòng)元素脫離了文檔流,其父元素也看不到它了,因而也不會(huì)包圍它。這種情況有 時(shí)候并非我們想要的,下面向大家傳授三種圍住浮動(dòng)子元素的方法。記住,這三種 方法你都得掌握,這樣才能審時(shí)度勢,選擇最合適的一種。 為了演示浮動(dòng)元素的行為,這種行為對布局會(huì)產(chǎn)生...

    Bowman_han 評論0 收藏0

  • 前端（二）之 CSS

    摘要：前端之前端之前言前言昨天學(xué)習(xí)了標(biāo)記式語言，也就是無邏輯語言。今天學(xué)習(xí)，被稱之為網(wǎng)頁的化妝師。為前端頁面的樣式，由選擇器作用域與樣式塊組成。年初，組織負(fù)責(zé)的工作組開始討論第一版中沒有涉及到的問題。其討論結(jié)果組成了年月出版的規(guī)范第二版。前端之 CSS 前言 昨天學(xué)習(xí)了標(biāo)記式語言，也就是無邏輯語言。了解了網(wǎng)頁的骨架是什么構(gòu)成的，了解了常用標(biāo)簽，兩個(gè)指令以及轉(zhuǎn)義字符；其中標(biāo)簽可以分為兩大類： 一類...

    張率功 評論0 收藏0

  • 網(wǎng)站footer沉底效果的三種解決方案

    摘要：沉底效果重點(diǎn)代碼總結(jié)以上三種方法都屬于沒什么副作用的，其實(shí)實(shí)現(xiàn)這種沉底效果還有別的實(shí)現(xiàn)方式，但是對其他布局有影響，這里不贅述，之后有了更好的解決方案，再來更新。 問題背景 很多網(wǎng)站設(shè)計(jì)一般是兩個(gè)部分，content + footer，content里面裝的是網(wǎng)站主體內(nèi)容，footer里面展示網(wǎng)站的注冊信息等等，因?yàn)榫W(wǎng)站內(nèi)容高度不定的原因，會(huì)出現(xiàn)下面兩種情況：1.內(nèi)容較少時(shí)，這個(gè)foot...

    chanjarster 評論0 收藏0

  • 網(wǎng)站footer沉底效果的三種解決方案

    摘要：沉底效果重點(diǎn)代碼總結(jié)以上三種方法都屬于沒什么副作用的，其實(shí)實(shí)現(xiàn)這種沉底效果還有別的實(shí)現(xiàn)方式，但是對其他布局有影響，這里不贅述，之后有了更好的解決方案，再來更新。 問題背景 很多網(wǎng)站設(shè)計(jì)一般是兩個(gè)部分，content + footer，content里面裝的是網(wǎng)站主體內(nèi)容，footer里面展示網(wǎng)站的注冊信息等等，因?yàn)榫W(wǎng)站內(nèi)容高度不定的原因，會(huì)出現(xiàn)下面兩種情況：1.內(nèi)容較少時(shí)，這個(gè)foot...

    ?xiaoxiao, 評論0 收藏0

發(fā)表評論

0條評論

浠ラ箍

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<