HTML的标签与选择器

最新推荐文章于 2024-05-01 13:08:14 发布

「清茶苦酒」

最新推荐文章于 2024-05-01 13:08:14 发布

阅读量1.5k

点赞数 1

分类专栏：基础知识文章标签： html5

本文链接：https://blog.csdn.net/weixin_49689284/article/details/107942826

版权

基础知识专栏收录该内容

32 篇文章 0 订阅

订阅专栏

div和span标签

语法：

<div>.....</div>
效果：换行
<span>....</span>
效果：无

注意：
1，div由于只有换行效果所以无需修改默认样式就能将内容块级化（独占一行）。所以div又称为块级标签/块级元素。其他块级标签有：h1~h6，p，blockquote…【它们都能独占一行】
2，span没有效果，所以内容没有块级化（不会独占一行），所以span又称为行内标签/行内元素/内联元素。其他行内标签：font，a…
3,一般div标签用于页面布局，span标签用于修饰页面元素。
4，行内标签能嵌套块级标签，但块级标签不能嵌套行内标签。

	<div><h1></h1><p></p></div>     正确
　　<a href="#"><span></span></a>    正确
　　<span><div></div></span>         错误

style标签：

语法：

<style>......</style>

注意：
1，style标签放置在head标签中。
2，style标签中存放CSS选择器。
3，type=“text/css” 是style标签属性，告诉浏览器其内容是css样式文本。

选择器：

注释：

/*........*/    选择器中的注释
<!--注释内容-->	选择器外的注释

标签选择器：

语法：

标签吗{
	样式名：样式;
}

作用：
对页面中的所有相同标签都使用一样的样式效果。

注意点：
1，标签选择器可以多次使用。
2，如果标签选择器相同，后面的样式会覆盖在前面的样式上方。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo</title>
    <style type="text/css">
        p{
            color:red;
        }
    </style>
</head>
<body>
    <h2>相思</h2>
    <p>红豆生南国，</p>
    <p>春来发几枝。</p>
    <p>愿君多采撷，</p>
    <p>此物最相思。</p>
</body>
</html>

效果图：
在这里插入图片描述

类选择器：

语法：

类名{
	样式名：样式值
	..............
}

注意点：
1，自定义类名，需要见名思意。
2，定义类选择器后，需要通过 class=“类名” 进行调用。
3，定义类选择器时，类名前需要加 “ . ”（句号）。调用时 class=“类名” 不需要加 “ . ”

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo</title>
    <style type="text/css">
        .red{
            color:red;
        }
    </style>
</head>
<body>
    <h2>相思</h2>
    <p>红豆生南国，</p>
    <p>春来发几枝。</p>
    <p class="red">愿君多采撷，</p>
    <p>此物最相思。</p>
</body>
</html>

效果图：
在这里插入图片描述

id选择器：

语法：

#id名{
	样式名：样式值;
	......................
}

注意点：
1，自定义id名，需要见名思意。
2，定义id选择器后，需要通过id=“id名” 进行调用。
3，定义id选择器时，id名前需要加“#”，调用时id=“id名”不需要加“#”。
4，id选择器只能在一个标签中使用一次。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo</title>
    <style type="text/css">
        #last{
            color: orange;
        }
    </style>
</head>
<body>
    <h2>相思</h2>
    <p>红豆生南国，</p>
    <p>春来发几枝。</p>
    <p>愿君多采撷，</p>
    <p id="last">此物最相思。</p>
</body>
</html>

效果图：
在这里插入图片描述

并集选择器：

语法：

选择器名1,选择器名2,....{
	样式名：样式值;
	..........
}

作用：
并集中的所有选择器都使用相同的样式效果。

注意点：
可以是任意选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo</title>
    <style type="text/css">
        .blue{
            color: blue;
        }
        #last{
            color: orange;
        }
        .blue,#last{//并集选择器
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h2>相思</h2>
    <p>红豆生南国，</p>
    <p class="blue">春来发几枝。</p>
    <p>愿君多采撷，</p>
    <p id="last">此物最相思。</p>
</body>
</html>

效果图：
在这里插入图片描述

交集选择器：

语法：

标签选择器.类选择器{
	样式名：样式值;
	........
}

注意点：
1，第一个选择器必须是标签选择器，第二个选择器必须是类选择器。
2，选择器之间不能有间隔，必须连续书写。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo</title>
    <style type="text/css">
        .blue{
            color: blue;
        }
        span{
            font-size: 20px;
        }
        span.blue{//交集选择器
            font-weight: bolder;
        }

    </style>
</head>
<body>
    <h2>相思</h2>
    <p>红豆生南国，</p>
    <p><span class="blue">春来发几枝。</span></p>
    <p>愿君多采撷，</p>
    <p>此物最相思。</p>
</body>
</html>

在标签选择器和类选择器的基础上添加交集选择器的内容

效果图：
在这里插入图片描述

后代选择器：

语法：

选择器1 选择器2{
	样式名：样式值;
	......
}

作用：
先定位选择器1，再定位其内部的选择器2，对选择器2的内容添加样式效果。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo</title>
    <style type="text/css">
        p font{
            font-size: 30px;
            color: pink;
        }

    </style>
</head>
<body>
    <h2>相思</h2>
    <p>红豆生南国，</p>
    <p>春来发几枝。</p>
    <p>愿君多采撷，</p>
    <p>此物最<font>相思</font>。</p>
</body>
</html>

效果图：
在这里插入图片描述

伪选择器：

**概念：**超链接标签中不同状态的样式选择器。

：link
向未被访问的超级链接添加样式，正常状态。

：visited
向已经被访问的超级链接添加样式，访问过后状态。

：hover
当鼠标悬浮在超级链接上方时，向超级链接添加样式，鼠标放上状态。

：active
鼠标放在超级链接上并且点击的一瞬间，向超级链接添加样式，激活状态。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>伪选择器</title>
    <style type="text/css">
        a:link{
            color:orange;
            text-decoration: none;//没有下划线
        }
        a:visited{
            color: greenyellow;
        }
        a:hover{
          color: red;
        }
        a:active{
            font-size: 60px;
            color: aqua;
        }
    </style>
</head>
<body>
<a href="#">link未访问前</a>
<a href="#">visited访问后</a>
<a href="#">hover鼠标经过的状态</a>
<a href="#">active激活时状态</a>
</body>
</html>

效果图：
正常状态：
在这里插入图片描述
鼠标放上状态：

访问后：

激活状态（鼠标点着不放）：

注意点：

1，a标签需要设置四种状态选择器，该状态选择器必须按照顺序:link>>visited>>hover>>active设置，否则不起作用。
2，在真实开发中一般设置a标签选择器的样式以及a:hover伪选择器的样式即可。

「清茶苦酒」

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML的标签与选择器

div和span标签语法：<div>.....</div>效果：换行<span>....</span>效果：无注意：1，div由于只有换行效果所以无需修改默认样式就能将内容块级化（独占一行）。所以div又称为块级标签/块级元素。其他块级标签有：h1~h6，p，blockquote…【它们都能独占一行】2，span没有效果，所以内容没有块级化（不会独占一行），所以span又称为行内标签/行内元素/内联元素。其他行内标签：font，a…3,一般
复制链接

扫一扫