本文总结了HTML5中关于选择器的使用、子代选择器的概念、如何处理空白的块元素标签、实现鼠标移入效果的方法、设置边框的技巧以及背景图片的应用。通过对这些知识点的探讨，旨在提升HTML5页面的样式设计能力。
一、选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*选择器{
样式属性:属性值;
}
选择器:
1.通用选择器
* 可以选择到所有元素
项目中比较普遍的样式都可以在此内部写出
不常用的样式尽量不要在此使用
2.元素选择器
直接以标签的名字作为选择器使用
3.类选择器 class
a.在标签 内使用class属性，给标签命名一个名字className
b.使用 .className的方式，作为选择器，选中该标签
注意：class 是可以重复命名的
元素名.className 限定所有使用此className的标签，只有此类标签可以使用
一个标签可以使用多个class 使用空格隔开即可
优先级：类选择器>元素选择器>通用选择器
4.id选择器
主要在js中使用id
a.在标签内使用id属性，命名idName
b.在样式中使用#idName的方式，作为选择器
id不能重复命名，主要在js中使用，但是如果只是在css中，是可以重复显示效果
优先级：id>class>元素>*
**/
*{
color: goldenrod;
/*字体大小*/
font-size: 20px;
}
span{
color: red;
}
/*没空格*/
span.font{
color: aqua;
}
.size{
font-size: 50px;
}
.font{
color: yellow;
}
#fontId{
color: #0000FF;
}
</style>
</head>
<body>
<span style="color: green;">空白文字标签</span> <br />
<span class="font">空白文字标签</span> <br />
<span class="size">空白文字标签</span> <br />
<span class="font size
最低0.47元/天 解锁文章
扫一扫
1626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
