Home >Web Front-end >Front-end Q&A >How to set label attributes in css

How to set label attributes in css

藏色散人Original: 2021-07-22 11:28:383272browse

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.

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>

We can also pass the 93f0f5c25f18dab9d176bd4f6de5d30e 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>

There are many specific selectors:

1. Copy the style by id

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

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不能写多个（不规范）

2. Copy through class:

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

When using:

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

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

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

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;
        }

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>

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>

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!

html5 css css3 html class 选择器

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement polygons in cssNext article：How to implement polygons in css

See more

How to set label attributes in css

css selector

Related articles