总体的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="1.css">
<title>Title</title>
</head>
<body>
<span>G</span>
<span>o</span>
<span>o</span>
<span>g</span>
<span>l</span>
<span>e</span>
<!--选择器-->
<p>白展堂</p>
<p>白展堂</p>
<p>白展堂</p>
<div>辅助</div>
<div>辅助</div>
<div>辅助</div>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<!--字间距 行间距 -->
<!--站在环境的稳定性 能不用margin就不用margin-->
</body>
</html>
CSS样式
span{
font-size: 50px;
color: rgba(255,245,27,0.97);
}
p{
color: pink;
}
/*通配符选择器 * 代表所有的选择器 所有的都变成红色*/
/*margin代表着外边距 padding代表着内边距*/
/* 链接伪类选择器 */
/*链接选择器
：link未访问
：visited 已经访问过
：hover 鼠标点击上去
：active 选定的上去
*/
a:link{
}
a:visited{
}
a:hover{
color: red;
}
a:active{
color: #000;
}
li:nth-child(even){
color: #007aff;
}
li:nth-child(odd){
color: #007aff;
}
li:nth-child(3n){
color: skyblue;
}
/*red green blue*/
.red{
color: red;
}
.blue{
color: blue;
}
/*目标伪类选择器*/
/*文字可以是半透明*/
/*文字阴影text-shadow*/
/*word-spaceing */