1.伪类选择器
hover伪类选择器 - 当鼠标悬停到标签上的时候产生的样式变化
链接伪类选择器:
<style>
/* 点击之前的样式 */
a:link{
color: green;
}
/* 点击之后的样式 */
a:visited{
color: orange;
}
/* 鼠标悬停的样式 */
a:hover{
color: aqua;
}
/* 激活瞬间的样式 */
a:active{
color: pink;
}
</style>
2.字体相关样式
<style>
p{
/* 字体大小 */
/* font-size: 30px; */
/* 设置是否加粗 */
/* 加粗 - 单词 */
/* font-weight: bold; */
/* font-weight: bolder; */
/* 加粗 - 数值(100-900之间的整百数) */
/* font-weight: 700; */
/* 设置是否倾斜 */
/* font-style: italic; */
/* font-style: oblique;更具强制性的倾斜 */
/* 设置字体类型 */
/*
字体类型一般设置多个,执行顺序从左到右执行,有相对的字体,就执行,后面的忽略
常见字体类型: windows - 微软雅黑 mac - 苹方
*/
/* font-family: '手札体-简','黑体-简','宋体','隶体',sans-serif; */
/* 字体的连写 */
/* 加粗 倾斜可以省略 类型必须有,可是放置一个空引号 */
/* 当连写碰到单独的属性,连写一定放在单独属性的前面,避免样式被层叠 */
font: bold 30px '';
font-style: italic;
}
strong,b{
/* 取消加粗 - 单词 */
font-weight: normal;
/* 取消加粗 - 数值 */
font-weight: 400;
}
i,em{
/* 取消倾斜 */
font-style: normal;
}
</style>
3.首行缩进
<style>
/* 首行缩进 */
p{
font-size: 18px;
/* 明确表示开头空出某某距离 */
/* text-indent:50px; */
/* 明确表示开头空出某某个字的时候使用 */
/* 1em = 当前标签的font-size的取值 */
text-indent: 2em;
}
</style>
4.文本水平对齐方式
取值:
1.left - 水平左对齐
2.center - 水平中间对齐
3.right - 水平右对齐
4.justify - 水平两端对齐
5.文本修饰线
<style>
div{
/* 下划线 */
/* text-decoration: underline; */
/* 删除线 */
/* text-decoration: line-through; */
/* 上划线 */
/* text-decoration: overline; */
/* text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy; */
/* 连写不分先后顺序 - 颜色可以省略,默认是黑色 */
text-decoration: underline wavy green;
text-decoration: underline dotted green;
text-decoration: underline dashed green;
text-decoration: underline solid red;
text-decoration: underline double red;
}
u,
ins,
s,
del,
a{
/* 取消修饰线 */
text-decoration: none;
/* color: black; */
}
</style>
6.颜色表示方式
1. /* 三原色 - 取值范围0-255 */
background-color: rgb(255,0,0);
background-color: rgb(0,255,0);
background-color: rgb(0,0,255);
background-color: rgb(0,0,0);
background-color: rgb(255,255,255);
background-color: rgb(0,255,255);
background-color: rgb(20, 216, 75);
2. /* rgba a:透明度 (0-1,0代表完全透明,1代表完全不透明) */
background-color: rgba(20, 216, 75, 0.5);
background-color: rgba(20, 216, 75, 0);
background-color: rgba(20, 216, 75, 1);
background-color: rgba(20, 216, 75, .7);
3. /* 十六进制 - 取值范围: 0-9 a-f */
background-color: #aabbcc;
background-color: #003456;
background-color: #1f9a3c;
background-color: #aaddff;
7.平衡车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #f5f5f5;
}
.box{
width: 234px;
height: 300px;
background-color: #fff;
margin: auto;
text-align: center;
}
img{
width: 160px;
}
p{
line-height: 25px;
font-size: 14px;
}
.box>div{
line-height: 30px;
font-size: 12px;
color: #ccc;
}
span{
color: #ffa500;
font-size: 14px;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/car.jpg" alt="">
<p>
九号平衡车
</p>
<div>
成年人的玩具
</div>
<span>
1999元
</span>
</div>
</body>
</html>
结果展示: