HTML之CSS选择器（二）

最新推荐文章于 2024-07-18 17:34:14 发布

Smallppf

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量119

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/qq_45915518/article/details/119006285

版权

笔记专栏收录该内容

4 篇文章 1 订阅

订阅专栏

CSS的选择器分为：标签选择器，ID选择器，类选择器

标签选择器：

顾名思义就是标签的选择器：用标签名加大括号就可以了，就是选择给所有的相同标签添加样式。

书写格式：标签{/*这里写样式*/}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器之标签选择器</title>
    <style>
        div{
            color: blue;
        }
        p{
            color: red;
        }
        span{
            color: hotpink;
        }
    </style>
</head>
<body>
    <div>这是一个div1标签</div>
    <div>这是一个div2标签</div>
    <div>这是一个div3标签</div>
    <p>这是一个p1标签</p>
    <p>这是一个p2标签</p>
    <p>这是一个p3标签</p>
    <span>这是一个span1标签</span>
    <span>这是一个span2标签</span>
    <span>这是一个span3标签</span>
    
</body>
</html>

ID选择器：

选择一个id为xx的标签（是唯一的），然后添加样式（一般每个标签的id都不同，如果相同在js代码中遇到的话会有错误），可以给每个单独的标签设置样式效果跟行内样式差不多。

书写格式：#id{/*这里写样式*/}

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS选择器之ID选择器</title>
        <style>
            div {
                color: blue;
            }

            #div1 {
                color: lime;

            }

            #div2 {
                font-size: 200%;
                font-style: italic;

            }

            #div3 {
                font-weight: bold;

            }
        </style>
    </head>

    <body>
        <div id="div1">这是一个div1标签</div>
        <div id="div2">这是一个div2标签</div>
        <div id="div3">这是一个div3标签</div>
        <p>这是一个p1标签</p>
        <p>这是一个p2标签</p>
        <p>这是一个p3标签</p>
        <span>这是一个span1标签</span><span>这是一个span2标签</span><span>这是一个span3标签</span>

    </body>

</html>

类选择器：

类选择器跟ID选择器的功能差不多，但也有跟ID选择器不同的地方，比如ID选择器是唯一的（一个class属性中可以写多个值），类选择器可以不唯一，值也可以相同，所有一般都是用类选择器来写

书写格式：.类名{/*这里写样式*/}

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS选择器类之选择器</title>
        <style>
            div {
                color: blue;
            }

            #div1 {
                color: lime;
            }

            #div2 {
                font-size: 200%;
                font-style: italic;
            }

            #div3 {
                font-weight: bold;
            }
            .c1{
                font-family: "微软雅黑";
                text-decoration: underline;

            }
            .c2{
                font-style: normal;
                font-size: 36px;
            }
        </style>
    </head>

    <body>
        <div id="div1" class="c2">这是一个div1标签</div>
        <div id="div2" class="c2">这是一个div2标签</div>
        <div id="div3" class="c1">这是一个div3标签</div>
        <p class="c1">这是一个p1标签</p>
        <p class="c2">这是一个p2标签</p>
        <p class="c1 c2" > 这是一个p3标签</p>
        <span class="c1">这是一个span1标签</span><span>这是一个span2标签</span><span>这是一个span3标签</span>

    </body>

</html>

效果图：

##图1

##图2

##图3

优先级：在样式属性冲突的情况下

行内样式》 id选择器》 class类选择器》标签选择器

字体css的常见样式如下：

字体CSS：
*{
    color: pink; /*字体颜色*/
    font-size: 24px; /*字体大小，px表示像素*/
    font-weight: 800; /*字体是否加粗，可以写bold、normal，100-800*/
    font-style: italic; /*是否倾斜normal、italic*/
    font-family: "微软雅黑", 'Courier New', Courier, monospace; /*字体，可以用多个字体，逗号隔开，有空格的字体要加双引号，越通用越放后*/
    text-align: right; /*文本对齐：left center right*/
    line-height: 64px; /*行高*/
    letter-spacing: 10px; /*字间距*/
    text-indent: 64px; /*文本缩进*/
    text-decoration: underline; /*文本下横线：underline，none，（line-through、overline）*/
}

以上是我对CSS选择器的理解和看法如有错误还请指出，感谢大家观看！

Smallppf

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML之CSS选择器（二）

CSS的选择器分为：标签选择器，ID选择器，类选择器标签选择器：顾名思义就是标签的选择器：用标签名加大括号就可以了，就是选择给所有的相同标签添加样式。书写格式：标签{/*这里写样式*/}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g
复制链接

扫一扫