How to set label attributes in css-Front-end Q&A-php.cn

How to set label attributes in css

藏色散人

Release： 2021-07-22 11:28:38

Original

3228 people have browsed it

How to set tag attributes in css: First create an HTML sample file; then set the attributes for the tag by setting style on the html tag.

How to set label attributes in css

The operating environment of this article: windows7 system, HTML5&&CSS3 version, DELL G3 computer

How to set label attributes in css? css selector sets label style

css selector

Setting style on the html tag can set attributes for the label:

<p style="background-color: #2459a2;height: 48px;">啊啊啊</p>

Copy after login

We can also pass the tag Set the selector so that Each style only needs to be written once

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--在这里写选择器-->
    </style>
</head>

Copy after login

There are many specific selectors:

1. Copy the style by id

#i1{
    background-color: #2459a2;
    height: 48px;
}

Copy after login

The tags in the body are used like this: But you cannot write multiple IDs, so you still can’t use more

    <p id="i1"></p>
    <p id="i1"></p>但id不能写多个（不规范）

Copy after login

2. Copy through class:

/*class选择器：用class=c1来就可以复制这个样式，同时避免了id必须统一的缺陷*/
.c1{
    background-color: #2459a2;
    height: 60px;
}

Copy after login

When using:

    <p class="c1">1251251</p>能写多个
    <p class="c1">1251253</p>能写多个

Copy after login

3. Tag selector: Change a certain tag into this style:

标签选择器：把所有的p标签变成黑底白字
p{
    background-color: black;
    color: white;
}

Copy after login

4. Hierarchical selector: There is a space in the middle

        层级选择器：把span标签里p标签弄成这个样式
        span p{
            background-color: black;
            color: white;
        }
        层级：把c1里c2里的p设置成这个样式
        .c1 .c2 p{
            background-color: black;
            color: white;
        }

Copy after login

5. Combination selector: In the middle It is a comma

    <style>
        组合选择器：#或者.都可以实现组合
        #i1,#i2,#i3{
            background-color: black;
            color: white;
        }
        .c5,.c6,.c7{
            background-color: black;
            color: white;
        }
    </style>

Copy after login

6. Attribute selector:

    <style>        
        /*属性选择器：把type=&#39;text&#39;的设成这个样式*/
        input[type=&#39;text&#39;]{
            width: 100px;
            height: 200px;
        }
        把自定义的n的值为s1的标签设置成这个样式
        input[n=&#39;s1&#39;]{
            width: 100px;
            height: 200px;
        }
    </style>

Copy after login

Recommended learning: "css video tutorial"

The above is the detailed content of How to set label attributes in css. For more information, please follow other related articles on the PHP Chinese website!