web前端开发有前途吗，htmlcssjs培训

本文链接：https://blog.csdn.net/m0_60125067/article/details/119055979

CSS中三种最基本的选择器：

标签选择器
类选择器
ID选择器

标签选择器

一个 HTML 页面是通过很多标签组成的，CSS 标签选择器就是用来声明这些标签的，因为每一个 HTML 标签的名称都可以作为相应的标签选择器的名称。

示例：

下面是一段html代码：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3>学习</h3>
        <p>我爱学习，学习使我快乐。</p>
    </body>
</html>

如果我们要为这两个标签定义 CSS 样式，就可以直接在 .css 文件内通过标签选择器来声明样式：

h3{
    color: red ;
}
p{
    color: green;
}

CSS 语法就是由选择器和**声明块 {}**组成，每个声明块中可以包含一个或多个样式声明，并且每条声明后面以分号 ; 结尾。

除了上述例子中的 p、h3 标签可以作为标签选择器，其他的例如html、body、a、img等标签都是可以作为标签选择器的。

类选择器

类选择器用于描述一组标签的样式，一个类选择器可以在多个标签上使用。
语法：

.class_name{

    属性：属性值;
}

类选择器前面必须有一个点 .，这个点必不可少，是类选择器的标志。类选择器的名称 class_name 是自定义的，选择器中的属性和属性值跟标签选择器中一样。

示例：
html代码：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3>动物园</h3>
        <p class="rabbit">小白兔</p>
        <p>小狮子</p>
        <p>小老虎</p>
        <p>小猴子</p>
    </body>
</html>

要给“小兔子” 字体样式设置为粉色加粗，可以自定义一个类选择器：

.rabbit{
    color: pink;
    font-weight: bold;
}

然后在 HTML 标签上通过 class 属性来使用定义好的类样式，格式为：

<标签名 class="类名称">标签内容</标签名>

类选择器有一个好处就是，我们可以在同一个页面中多个 HTML 标签上，使用同一个类选择器。

ID选择器

ID 选择器的是以井号#开头来定义的。而类选择器是以点.来定义的。
ID 选择器在 HTML 中是可以通过id属性来使用。而类选择器是通过class属性来使用的。
同一个页面中一个ID选择器只能在中出现一次，是唯一的。而类选择器可以在多次出现，所以ID选择器的针对性更强。

示例：

通过#来定义一个ID选择器，设置背景颜色为粉色的样式：

#only{
    background-color: pink;
}

然后在 HTML 中通过 id 属性使用这个ID选择器：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3>动物园</h3>
        <p class="rabbit">小白兔</p>
        <p>小狮子</p>
        <p>小老虎</p>
        <p id="only">小猴子</p>
    </body>
</html>