一.css
1.伪元素选择器
html代码:
<div>
吟诗作对!
</div>
css写法
div{
background-color: pink;
height: 100px;
200px;
}
div:after{
content: '?';
color:white;
}
div:before 在标签内部前面添加内容
2.伪类选择器
hover和pointer
html代码
<div class="c1">
</div>
css写法
.c1{
background-color: red;
height: 300px;
300px;
}
.c1:hover{
/*background-color: green;*/
background-image: url("111.png");
cursor: pointer;
}
其他伪类选择器
/* a标签未访问的时候设置效果 */
a:link{
color:yellow;
}
/* 鼠标悬浮上去时设置效果 */
a:hover{
color:black;
}
/* 鼠标左键点击下去的还没有抬起来的时候,设置效果 */
a:active{
color:green;
}
/* 鼠标抬起后,访问过之后设置效果 */
a:visited{
color:purple;
}
3.文字装饰
a{
text-decoration: none; 去除下划线
}
4.定位position
static 静态定位,也就是标签默认
relative: 相对定位,按照自己原来的位置进行移动,原位置会被继续占用
absolute: 绝对定位,按照父级标签或者祖先辈儿标签设置了相对定位的标签位置进行移动,如果没有找到相对定位标签,会找到整个文档的位置进行移动(不占用原位置)
fixed: 固定定位, 按照浏览器窗口的位置进行移动
示例:
html代码
<div class="cc">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
css写法:
body{
margin: 0;
}
.c1{
background-color: red;
height: 100px;
100px;
}
.c2{
background-color: green;
height: 100px;
100px;
/*position: relative; !* 相对定位 *!*/
/*left:100px;*/
/*top:-100px;*/
/*bottom:*/
/*right:*/
position: absolute;
top: 20px;
left: 80px;
}
.c3{
background-color: purple;
height: 100px;
200px;
}
.cc{
margin-top: 200px;
position: relative;
}
固定定位示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.c1{
background-color: red;
height: 1000px;
800px;
}
.c2{
background-color: green;
height: 1000px;
800px;
}
.c3{
background-color: blue;
height: 1000px;
800px;
}
.s1{
position: fixed;
left: 40px;
bottom: 20px;
height: 40px;
60px;
background-color: aqua;
line-height: 40px;
text-align: center;
}
.s1 a{
color:white;
text-decoration: none;
font-size: 12px;
}
</style>
</head>
<body>
<div id="top">这是顶部</div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<span class="s1">
<a href="">返回顶部</a>
</span>
</body>
</html>
5.选择器优先级
html代码:
<div class="c1">
这是c1的直属文本
<div id="d1" class="c2">
<!--<span class="c3" id="d3" style="color:black;">-->
<span class="c3 c4">
这是c1的儿子c2标签的文本
</span>
</div>
</div>
css代码
div{
color:red;
}
/* css属性有继承的概念 权重0*/
/* 标签(元素)选择器 权重1*/
/* 类选择器 权重10*/
/* id选择器 权重100*/
/* 内联样式 权重1000*/
/* color:green!important; 无敌! */
/* 如果优先级相同,按照后面的为准 */
别忘了,class属性的值可以写多个
/*#d3{*/
/*color:yellow;*/
/*}*/
.c3{
color:blue;
}
/*span{*/
/*color:green!important;*/
/*}*/
.c4{
color:yellow;
}
6.margin补充
margin-left:5%; 距离左边的距离为父级标签宽度的5%.
.c2{
height: 60px;
80%;
background-color: pink;
/*margin-left: 10%; !* margin设置百分比的效果：按照父级标签宽度的10%之时作为距离左边的距离 *!*/
margin: 0 auto; /* 就是水平居中的效果，text-align:center,设置的是文本内容居中， */
}
7.圆形头像示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 100px;
100px;
border: 1px solid red;
border-radius: 50%;
overflow: hidden; /* 内容移除 */
}
img{
100%; /* img标签的宽度按照父级标签的宽度来，高度和宽度设置其中一个的百分比，另外一个会自动等比缩放 */
}
</style>
</head>
<body>
<div class="c1">
<img src="1.png" alt="">
</div>
</body>
</html>
overflow:auto //超出部分隐藏起来,出现一个滚动条来查看内容