HTML&CSS选择器的使用

coder_kids

已于 2024-03-13 14:03:24 修改

阅读量280

点赞数 9

文章标签： html css 前端

于 2024-03-13 13:37:54 首次发布

本文链接：https://blog.csdn.net/wanlexuan/article/details/136677088

版权

本文介绍了CSS语法的基本结构，包括全局选择器（如*）和元素选择器（如p、span等），展示了如何通过不同选择器设置字体颜色、大小，并解释了标签选择器的使用。同时，提到了HTML元素的选择和CSS优先级的概念。

摘要由CSDN通过智能技术生成

在CSS语法规则由两个部分组成：选择器，以及一条或者多条声明（样式）

全局选择器

可以与任何元素匹配包括（h1,h2这种已经规定好的标签样式，当然后面可以修改），优先级低，一般做样式初始化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        color: green;/*外边距设置为0*/
        font-size: 20px;/*内边距设置为0*/
     }
</style>
<body>
    <p>hahahah</p>
</body>
</html>

元素选择器

在HTML中有多个元素：p(passage 段落)，b(bold 粗体)，a(anchor 锚)，img(image 图片)，body(身体)

标签选择器，选择的是页面上所有名为这种类型的标签，常常描述“共性”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p{
        color: blue;/*将段落的字体颜色设置为蓝色*/
        font-size: 20px;/*将段落的字体大小设置为20像素*/
    }
</style>
<body>
    <p>hahahah</p>
</body>
</html>

如果希望在一句话中突出强调某个字体，可以利用span标签来设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p{
        font-size: 30px;
        color: blueviolet;
    }
    span{
        color: red;/*外边距设置为0*/
        font-size: 20px;/*内边距设置为0*/
     }
</style>
<body>
    <p>hahahah</p>
    <p>ha<span>hahahahah</span></p>
    <p>haha<span>hahahahah</span>hah</p>
    <p>hahahah</p>
</body>
</html>

实验结果：