CSS选择器

LGelo

已于 2023-02-13 21:32:21 修改

阅读量135

点赞数

文章标签： css

于 2023-02-13 21:28:37 首次发布

本文链接：https://blog.csdn.net/qq_64438318/article/details/129007165

版权

文章目录

CSS
一、CSS基本语法
二、CSS常见选择器和使用方法
总结

CSS

CSS（Cascading Style Sheets）是指层叠样式表，通过CSS能够控制网页中的所有元素，定义如何显示元素样式。CSS样式包括文字样式、字体样式、背景样式、表格样式。

一、CSS基本语法

css的定义是由两个部分构成选择器 +声明块

选择器：通过选择器来选定页面的指定元素

声明块：在选择器后面，用{}括起来，给指定元素设置样式（样式名：样式值；）基本格式：选择器{样式名：样式值；}

例如：h1{ color: red; font-size: 14px;}

二、CSS常见选择器和使用方法

1.标签选择器

标签选择器又叫元素选择器，使用标签的名称作为选择器，标签选择器定义的样式作用于HTML文档中所有与此选择器同名的标签元素

代码如下（示例）：

    <head>
        <style type="text/css">
            h1{
            font-size:24px;
            color:red;
        }
        </style>
    </head>
    <body>
        <h1>hello</h1>
    </body>

使用了选择器之后，我们在HTML代码中使用的h1标签就会拥有选择器配置的属性。

2.类别选择器

类别选择器是和HTML文档中标签的class属性配合使用的，即对想要增加样式的标签设置class属性，在CSS中就可以使用类选择器为所有具有相同class属性元素增加样式

代码如下（示例）：

    <head>
        <style type="text/css">
            h1{
            font-size:24px;
            color:red;
        }
        .my{
            color:blue;
            font-size: 35px;
        }
        </style>
    </head>
    <body>
        <h1>hello</h1>
        <p class="my">
            这是类选择器
        </p>
    </body>

下面是运行结果

3.ID选择器

ID选择器和类选择器的用法类似，对HTML中需要增加样式的标签设置一个ID属性，然后再CSS中使用ID选择器对具有此ID属性的元素增加样式。ID属性在HTML文档主张必须是唯一的，即一个元素设置了ID属性后，其他的元素就不能设置相同的ID属性。

代码如下（示例）：

    <head>
        <style type="text/css">
        #N{
            color:blue;
            font-size: 35px;   
        }
        </style>
    </head>
    <body>
        <p id="N">
            这是ID选择器
        </p>
    </body>

使用了 ID选择器后，如果有元素id设置为对应的选择器，就可以拥有这个ID选择器的属性值。