基础选择器

标签选择器

  • 作用

选择页面中对应的标签(找她),方便后续设置样式(改她)

  • 结构

标签名{css属性名:属性值;}

css引用方式

    <style>
        p{
            color: chocolate;
        }
    </style>

css使用方式

 <p>你哈</p>
基础选择器插图

类选择器

  • 结构

.类名{css属性名:属性值;}

  • 作用

通过类名,找到页面中所有带有这个类名的标签,设置样式

css引用方式

```html
    <style>
        .s{
            color: chocolate;
            font-size: 55px;
        }
    </style>
```

css使用方式

    <p class="s">你好</p>
基础选择器插图

id选择器

  • 结构

#id属性值{css属性名:属性值;}

  • 作用

通过id属性值,找到页面中带有这个id属性值的标签,设置样式

css引用方式

    <style>
        #aa{
            font-size: 33px;
            color: aquamarine;
        }
    </style>

css使用方式

<p id="aa">22222</p>
基础选择器插图1

通配符选择器

  • 结构

*{css属性名:属性值;}

  • 作用

找到页面中所有的标签,设置样式

css引用方式

    <style>
        *{
            color: chocolate;
        }
    </style>
基础选择器插图2

派生选择器

  • 作用

给相同标签下的标签单独设置css样式其他标签不会受到影响

  • 格式

标签#或者.属性名{属性值}

 p#sidebar{
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

 p.sidebar{
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }
© 版权声明
THE END
喜欢就支持一下吧
点赞6赞赏 分享
评论 抢沙发

请登录后发表评论