Css樣式的html選擇器,類選擇器,id選擇器

<!DOCTYPE html>
<!--
            HTML是標記語言,把屬性這些寫在裏面並不規範,有可能無法顯示
            CSS爲了規範每個標記的樣式,屬性等設置控制能力遠飛HTML所能比的
            CSS分離了內容與表現形式
            CSS語法,由選擇器,屬性,和值三部分組成,簡單明瞭,在頭部的<style type="text/css"></style標籤內
        -->
<html>
    <head>
        <meta charset="UTF-8">
        <title>css1</title>
        <style type="text/css">
            
            h1{
                text-align: center;
                font-size: 18px;
            }
            a{
                text-decoration: none;
            }
            .txt{
                border: 1px;
            }
            .btn{
                color: red;
            }
            #mytale{
                width: 586px;
                height: 586px;
            }
            #mytd{
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <h1>這裏是HTML選擇器</h1>
        <h1>如果使用html選擇器那麼所有的HTML標籤將具有相同的屬性樣式,格式爲標籤名加括號</h1>
        <a href="#">這裏是a標籤</a>
        <a href="#">*{樣式代碼} 表示所有的標籤都具有相同樣式</a>
        <form>
            <input type="text" class="txt" value="這裏是名爲txt的內選擇器" />
            <p>如果具有相同的class屬性值的的都會生效 格式爲 點加上class屬性值</p>
            <input type="button" class="btn" value="這裏是名爲btn的內選擇器" />
            <table id="mytale">
                <tr>
                    <td>單元格</td>
                    <td>每個標籤的id是唯一的所以id選擇器是唯一設定單個標籤的樣式的</td>
                </tr>
                <tr>
                    <td id="mytd">id選擇器用#號加上id值</td>
                    <td>而類選擇器的class值是可以重複的</td>
                </tr>
            </table>
            
        </form>
    </body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章