选择器
后代选择器 ul li
并集选择器 div,a,p,span
标签制定选择器 p.p1
三种样式表
- 行内式样式表
<p style:'color:red'>写在标签尖括好里面的
- 内嵌式样式表
p {color:red} 就是把样式写到head里,包含在一对style里面的
- 外链式样式表
<link href='stylesheet' src='style.css'>
伪类
a:link 未访问
a:visited 访问后
a:hover 悬浮时
a:active 鼠标一直点击不放的时候
background设置
<!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>
a{
height: 32px;
width: 67px;
background: url(./1.png) no-repeat;
display: block;
}
a:hover{
background: url(./1.png) no-repeat bottom;
cursor:pointer
}
</style>
</head>
<body>
<a>
</a>
</body>
内嵌盒子塌陷问题
<!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>
.box {
height: 200px;
width: 200px;
background-color: pink;
/* 方案一：border 不推荐，会加大盒子的尺寸 */
border: 1px solid white;
/* 方案二：overflow 推荐用法 */
overflow: hidden;
}
.son {
height: 50px;
width: 50px;
background-color: red;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
优先选择标准流，其次选择浮动流，最后选择定位流。
文字三属性
font-size:12px 页面的字号最小12像素
font-famliy:"微软雅黑"
color:pink;
