前端基础-CSS样式
1. CSS样式常用的三种引用方式:
1.行内样式:
<div style="width: 300px;height: 300px;background: green">
</div>
2.内嵌样式
head中间添加样式:
<style>
div{
width: 200px;
height: 200px;
background: green;
}
</style>
3.外部样式
lesson.css样式文件:
div {
width: 200px;
height: 200px;
background: green;
}
<link rel="stylesheet" href="lesson.css">
扩展:修改页面页签的图标:
<link rel="shortcut icon" href="image/test1.ico">
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
2.选择器
* {
margin: 0;
}
div {
width: 100px;
height: 100px;
background: red;
}
.box {
background: blue;
}
background: gray;
}
div + p+p {
background: blue;
}
div, p {
width: 100px;
height: 100px;
background: red;
}
div ~ p {
background: green;
}
div > p {
background: blue;
}
div li {
width: 50px;
height: 50px;
background: red;
}
a:link { /*未被点击的链接*/
color: red;
}
a:visited { /*已被点击的链接*/
color: green;
}
a:hover { /*鼠标悬浮的颜色*/
color: aqua;
}
a:active { /*鼠标按下的颜色*/
color: black;
}
div {
width: 100px;
height: 100px;
background: red;
}
div:hover { /*改变元素本身*/
/*
default 默认箭头
pointer 手指
wait 显示正忙
help 显示帮助
*/
cursor: pointer;
background: blue;
}
div:hover p { /*改变元素下面的p标签*/
width: 100px;
height: 20px;
background: green;
}
选择器优先级:
(*)<tagName<(.)class类选择器<(#)id选择器
级别相同的选择器,后面的样式会覆盖前面的
复杂后代选择器:
1.先比id 再比class 再比tagName
2.id选择器个数不相等,id越多,优先级越高
3.id选择器相同,则比class,在比tagName
# 快捷键:
ul>li*5 + TABL 快捷输出5个li标签