CSS|类选择器

最新推荐文章于 2024-08-21 11:50:22 发布

Alan_Lowe

最新推荐文章于 2024-08-21 11:50:22 发布

阅读量761

点赞数 1

分类专栏： # CSS 文章标签： css3 html class

本文链接：https://blog.csdn.net/qq_45985728/article/details/119081838

版权

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

CSS|类选择器

1.简介

类选择器的声明是一个’.'加上类名，大括号内写上样式，如：

.style1{
    color: red;
    background-color: aquamarine;
    border-radius: 15px;
    text-align: center;
}

这样的话，style1这个类就把字体颜色改为了red，背景颜色改为了aquamarine……

使用的时候只需要在标签中添加上class属性即可：

<h1 class="style1">标题1</h1>

好处： 类选择器可以多个标签归类，实现复用。

2.实例

CSS文件声明了三个类选择器：

/*
类选择器
.加上类名，括号内写上样式
可以多个标签归类，实现复用
*/
.style1{
    color: red;
    background-color: aquamarine;
    border-radius: 15px;
    text-align: center;
}
.style2{
    color: blue;
    background-color: red;
    text-align: center;
}
.style3{
    color: blueviolet;
    background-color: red;
}

HTML文件中三个标题分别引用了三个类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
  <link rel="stylesheet" href="Style-demo04.css">
</head>
<body>

<h1 class="style1">标题1</h1>
<h1 class="style2">标题2</h1>
<h1 class="style3">标题3</h1>

</body>
</html>