|
想要给HTML元素设置样式，首要必须找到这个元素。在CSS中，执行这个任务的便是选取器。CSS中的基本选取器有标记选取器、类选取器、id选取器、通配符（*）选取器、标签指定选取器（交集选取器）、后代选取器和并集选取器。
1、标记选取器（元素选取器）
标记选取器指的是运用HTML标记名做为选取器，
标记名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
该语法中，所有的HTML标记名都能够做为标记选取器，如body、p、h2等等。
如下代码为标记h2添加样式：
<head>
<style>
h2 {
font-family: Times New Roman; //设置文本的字体系列
color:rgb(184, 201, 87); //设置文本的颜色
font-size: 28px; //设置文本的体积
}
</style>
</head>
<body>
<h2>今天天气好晴朗，处处好风光！</h2>
</body>
2、类选取器
类选取器，首要在元素中设置class属性，class属性的属性值便是类名，同期运用英文点号“.”进行标识，后面紧跟类名：
.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 如下代码展示一个class属性为box的类选取器：<head>
<style>
.box {
width: 100px; //设置盒子宽
height: 100px; //设置盒子高
bac公斤round-color: #bfc; //设置盒子背景颜色
border:1px solid red; //设置盒子边框：宽1像素、实线、颜色为红色
}
</style>
</head>
<body>
<div class="box">
我是一个盒子
</div>
</body>
3、id选取器
id选取器，首要在元素中设置id属性，id属性的属性值便是id名，同期运用“#”进行标识，后面紧跟id名：
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
重视：元素的id名是独一的，只能对应于文档中某一个详细的元素。
<head>
<style>
#btn {
border-radius: 20%;
border-color: greenyellow;
width: 68px;
height:38px;
}
</style>
</head>
<body>
<button id="btn">请点击</button>
</body>
| 
发表于 2024-6-30 04:59:06
