中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

HTML中如何使用CSS層疊樣式表

發布時間:2021-07-27 18:20:09 來源:億速云 閱讀:143 作者:Leah 欄目:web開發

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

CSS層疊樣式表

1.結構,樣式,行為的分離

<!--樣式-->
<style type="text/css">
    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;
    }
</style>

<!--行為-->
<script type="text/javascript">
    <!--當頁面加載完畢,我們就執行一個函數,來完成對h3的操作-->
    window.onload()=function(){
        <!--獲取要操作的h3標簽-->
        h3Node=document.getElementById("tt");
        <!--當鼠標經過,我們就改變h3的外觀-->
        h3Node.onmouseover=function(){
            this.className="yellow";
        }
        <!--鼠標離開,就恢復h3的外觀和大小-->
        h3Node.onmouseout=function(){
            this.className="";
        }
    }

</script>
<body>
    <h3 id="tt">靜夜思</h3>
    <p>床前明月光</p>
</body>

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

<style>
    /*id選擇器*/
    #a01{
        color:red;
    }
    /*標簽選擇器*/
    p{
        color:blue;
    }
    /*類選擇器*/
    .c01{
        background:green;
    }
    /*分組選擇器*/
    h2,h3,h4{
        color:yellow
    }
    /*通配符選擇器*/
    *{
        background:#aaa
    }
    /*派生選擇器*/
    li strong{
        color:orange;
    }
</style>
<body>
    <ul>
        <li><strong>無序列表選項1</strong></li>
        <li>無序列表選項2</li>
        <li>無序列表選項3</li>
        <li>無序列表選項4</li>
    </ul>
    <h2 id="a01">靜夜思</h2>
    <h3 class="c01">床前明月光</h3>
    <h4>疑是地上霜</h4>
    <p>舉頭望明月</p>
    <strong>低頭思故鄉</strong>
</body>

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

<style type="text/css">
    a:link{ /*未被訪問狀態*/
        color:#000000;
        text-decoration:none;
    }
    a:visited{ /*已訪問過的*/
        color:#FF6633;
    }
    a:hover{ /*鼠標懸停*/
        color:#00FF66;
        rext-decoration:underline;
    }
    a:active{
        color:#CCFF6;
    }
</style>
<body>
    <a href="#">構造css規則</a>
</body>

focus偽類
在元素獲得焦點時向元素添加特殊樣式

<style>
    input:focus{
        background-color:#FF0066
    }
</style>
<body>
    <p>
        <input type="text" size="20"/>
    </p>
</body>

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

<style>
    li{
        color:red
    }
</style>
<body>
    <ul>
        <li><strong>無序列表選項1</strong></li>
        <li>無序列表選項2</li>
        <li>無序列表選項3</li>
        <li>無序列表選項4</li>
    </ul>

</body>

(2)行內式

<body>
    <p><span style="color:blue;font-size:20px">我<span>能抽象出整個世界</p>
</body>

(3)導入式

<style type="text/css">
    @import "文件路徑";
</style>
<body>
    <ul>
        <li><strong>無序列表選項1</strong></li>
        <li>無序列表選項2</li>
        <li>無序列表選項3</li>
        <li>無序列表選項4</li>
    </ul>
    <h2 id="a01">靜夜思</h2>
    <h3 class="c01">床前明月光</h3>
    <h4>疑是地上霜</h4>
    <p>舉頭望明月</p>
    <strong>低頭思故鄉</strong>
</body>

創建.css文件

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

(4) 鏈接式

<link href="文件路徑" rel="stylesheet" type="text/css">
<body>
    <ul>
        <li><strong>無序列表選項1</strong></li>
        <li>無序列表選項2</li>
        <li>無序列表選項3</li>
        <li>無序列表選項4</li>
    </ul>
    <h2 id="a01">靜夜思</h2>
    <h3 class="c01">床前明月光</h3>
    <h4>疑是地上霜</h4>
    <p>舉頭望明月</p>
    <strong>低頭思故鄉</strong>
</body>

創建 .css文件

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

看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

五原县| 察雅县| 万荣县| 朔州市| 洪泽县| 天津市| 靖边县| 乐安县| 印江| 巴塘县| 金湖县| 广安市| 江源县| 贵阳市| 肃宁县| 大关县| 汾西县| 牡丹江市| 汤阴县| 周口市| 临高县| 游戏| 通州区| 满洲里市| 新乐市| 永宁县| 启东市| 永和县| 明星| 仪陇县| 临湘市| 从化市| 仙游县| 个旧市| 宜州市| 高安市| 德格县| 宁化县| 岑溪市| 伊吾县| 葫芦岛市|