HTML中如何使用CSS層疊樣式表，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

十多年的碑林網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整碑林建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“碑林網(wǎng)站設(shè)計(jì)”,“碑林網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

CSS層疊樣式表

1.結(jié)構(gòu),樣式,行為的分離

    p{
        background-color:green;
        height:100px;
        width:400px;
        border:1px solid red;
    }
    h3{
        background-color:#aaa;
        height:100px;
        width:400px;
        border:1px solid red;
    }
    
    .yellow{
        background-color:yellow;
        height:300px;
        width:600px;
        border:1px solid red;
    }




    
    window.onload()=function(){
        
        h3Node=document.getElementById("tt");
        
        h3Node.onmouseover=function(){
            this.className="yellow";
        }
        
        h3Node.onmouseout=function(){
            this.className="";
        }
    }



    靜夜思
    
床前明月光

2.css的分類
(1)id選擇器
(2)標(biāo)簽選擇器
(3)類選擇器
(4)分組選擇器
(5)通配符選擇器
(6)偽類選擇器(對超鏈接的操作)
(7)派生選擇器,也稱復(fù)合選擇器
選擇器的優(yōu)先級:就近原則,范圍越小,優(yōu)先級越高
可以使用!important改變優(yōu)先級

    

        
無序列表選項(xiàng)1
        
無序列表選項(xiàng)2
        
無序列表選項(xiàng)3
        
無序列表選項(xiàng)4
    
    靜夜思
    床前明月光
    
疑是地上霜
    
舉頭望明月
    低頭思故鄉(xiāng)

偽類選擇器
支持css的瀏覽器中,鏈接的不同狀態(tài)都可以不同的方式顯示,這些狀態(tài)包括:活動狀態(tài),已被訪問狀態(tài),未被訪問狀態(tài),和鼠標(biāo)懸停狀態(tài)
偽類的順序:link,visited,hover,active

    a:link{ /*未被訪問狀態(tài)*/
        color:#000000;
        text-decoration:none;
    }
    a:visited{ /*已訪問過的*/
        color:#FF6633;
    }
    a:hover{ /*鼠標(biāo)懸停*/
        color:#00FF66;
        rext-decoration:underline;
    }
    a:active{
        color:#CCFF6;
    }


    構(gòu)造css規(guī)則

focus偽類
在元素獲得焦點(diǎn)時向元素添加特殊樣式

3.css的使用方式
(1)內(nèi)嵌式

    

        
無序列表選項(xiàng)1
        
無序列表選項(xiàng)2
        
無序列表選項(xiàng)3
        
無序列表選項(xiàng)4
    

(2)行內(nèi)式

    
我能抽象出整個世界

(3)導(dǎo)入式

    @import "文件路徑";


    

        
無序列表選項(xiàng)1
        
無序列表選項(xiàng)2
        
無序列表選項(xiàng)3
        
無序列表選項(xiàng)4
    
    靜夜思
    床前明月光
    
疑是地上霜
    
舉頭望明月
    低頭思故鄉(xiāng)

創(chuàng)建.css文件

    #a01{
        color:red;
    }
    p{
        color:blue;
    }

(4) 鏈接式

    

        
無序列表選項(xiàng)1
        
無序列表選項(xiàng)2
        
無序列表選項(xiàng)3
        
無序列表選項(xiàng)4
    
    靜夜思
    床前明月光
    
疑是地上霜
    
舉頭望明月
    低頭思故鄉(xiāng)

創(chuàng)建 .css文件

    #a01{
        color:red;
    }
    p{
        color:blue;
    }

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。