选择器:浏览器通过选择器为满足条件的HTML元素添加CSS样式:
1、标签选择器:以标签名作为选择器。
<div style="text-align: center; font-family: '华文彩云'">干得漂亮</div>
<style>
div{
color: red;
font-size: 900px;
}/*选择器标签为div*/
</style>
2.类选择器:class选择器,以class标签属性值作为选择器。
<span class="a">加油,你能行</span>
<style>
.a{
color: wheat;
font-size: 500px;
}
</style>
3、id选择器:以id标签属性值为选择器 匹配标签的id与id选择器相同的标签。
<span id="zzu">郑州大学</span>
<style>
#zzu{
color: blueviolet ;
font-size: 800px;
}
</style>
4、后代选择器:用于为特定的HTML子元素添加CSS样式。
<style>
html body #zzu{
color: blueviolet ;
font-size: 800px;
}
</style>
5、分组选择器:如果HTML文档多个CSS样式表内的部分样式相同,则可以通过定义一个分组选择器以简化CSS样式代码, 该选择器的选择器名由多个选择器组成,使用逗号分隔。
<span id="zzu">郑州大学</span>
<span class="a">加油,你能行</span>
<style>
#zzu,.a{
color: black;
font-size: 100px;
}
</style>
6、通配符选择器:通配符选择器匹配HTML文档中的任何HTML元素。
<style>
*{
margin: 0;
padding: 0;
}
</style>
设计一个jd登录按钮:
<span>登 录</span>
<style>
span{
width: 302px; 框宽设置为302px
height: 31px; 框高设置为31px
border:1px solid #e85356; 设置一个边框
display: inline-block; 因为span是行内元素,无论设置的框宽框高为多少,它也只会显示出包裹所有文字的大小,因此将它设置为行内的块级元素。
text-align: center; 让字体水平居中显示
line-height: 31px; 设置为line-height与框高相同是为了让字体垂直居中
background:#e4393c; 设置背景色
color: #fff; 设置字体色
font-size: 20px; 设置字体大小
font-family: "microsoft yahei"; 设置字体类型
cursor: pointer; 设置出鼠标悬浮可点击效果
}
实现效果图: