想要给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>
|