2.基本选择器
2.1标签选择器
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 标签选择器 可以实现复用*/
h1{
color: green;
}
</style>
</head>
<body>
<p>
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
</p>
</body>
</html>
2.2class类选择器
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 类选择器可以指定你想使用的 那个样式 可以复用
结构为
。类名{
}
*/
.zhoujie{
color: red;
}
</style>
</head>
<body>
<p>
<h1 class="zhoujie">我是标题</h1>
<p class="zhoujie">哈哈哈哈</p>
</p>
</body>
</html>
2.3 id选择器
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器:指定唯一
结构为:
#id名{
}
*/
#zhoujie{
color: red;
}
</style>
</head>
<body>
<p>
<h1 id="zhoujie"> 我是标题</h1>
<h1 id="zhoujie">我是标题</h1>
<!-- 选择器的调用次序为 : id选择器 > class类选择器 > 标签选择器-->
</p>
</body>
</html>
***** 重点: 选择器的调用次序为 : id选择器 > class类选择器 > 标签选择器*****
3.层次选择器
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 后代选择器 :定义在某个元素后面的样式 祖爷爷 爷爷 爸爸 你*/
body p{
background: red;
}
/* 子选择器 定义当前元素的下一代的样式, 儿子*/
body>p{
background: green;
}
/* 相邻兄弟选择器 同辈 :定义同辈元素的样式*/
.active + p{
background: greenyellow;
}
/* 通用兄弟选择器:定义当前选中元素的向下的所有兄弟元素的样式*/
.active~p{
background: wheat;
}
</style>
</head>
<body>
<li>
<ul>标题1</ul>
<ul>标题2</ul>
<ul class="active">标题3</ul>
<ul>
<p class="active">标题4</p>
<p>标题5</p>
<p>标题6</p>
</ul>
</li>
</body>
</html>
4.结构伪类选择器
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: #e30ce3;
}
/*ul的最后一子元素*/
ul li:last-child{
background: green;
}
/*选中p1:定位到父元素,选择当前第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效!
*/
p:nth-child(1){
background: greenyellow;
}
/*选中父元素 ,下的p元素的第二个 ,类型*/
p:nth-of-type(2){
background: aqua;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
5.属性选择器(常用)
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*属性名 , 属性名= 属性值(正则)
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素 a[]{}*/
a[id]{
background: #e30ce3;
}
/* id=first 的元素*/
a[id=first]{
background: aqua;
}
/* class 中有links的元素 */
a[class*="links"]{
background: green;
}
/* 选中href中以http开头的元素*/
a[href^=http]{
background: greenyellow;
}
/* 选中href中以jpg结尾的元素*/
a[href$=jpg]{
background: red;
}
</style>
</head>
<body>
<p>
<a href="http:www.baidu.com"></a>
<a href="" id="first"></a>
<a href="" class="links action"></a>
<a href="hhh.jpg"></a>
<a href="" id="hhh"></a>
</p>
</body>
</html>
/*属性名 , 属性名= 属性值(正则)
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素 a[]{}*/
6.文体样式
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<!--
font-family: 字体
font-size: 字体大小
font-weight: 字体粗细
color :字体颜色
-->
<style>
body{
font-family: "Arial Black" , 楷体;
color: #e30ce3;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bolder;
}
</style>
</head>
<body>
</body>
</html>
7.文本样式
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>就可以上下居中
<style>
/*
颜色:
单词
rgb 0~F #000000
rgba A: 0~1 透明程度
text align:排版,居中;
text-indent:2em; 段落首行缩进
height:300px;
line-height:300px;
行高,和块的高度一致,
*/
</style>
</head>
<body>
</body>
</html>
8.hover active 阴影
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认颜色*/
a{
text-decoration: none;
color: aqua;
}
/*鼠标悬浮的状态(只需要记住:hover)*/
a:hover{
color: red;
font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
color: green;
}
/*未点击的状态*/
a:visited{
color: greenyellow;
}
/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow: aqua 10px 0px 2px;
}
</style>
</head>
<body>
</body>
</html>
/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/**
#price{
text-shadow: aqua 10px 0px 2px;
}**
阴影坐标
9.列表
``
<title>列表</title>
<style>
/*ul li*/
/*
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background: #e30ce3;
}
ul li{
height: 30px;
list-style:none;
text-indent: 1em;
}
</style>
10.背景
``
<title>背景</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("../5.背景");
/*默认是全部是平铺的 repeat*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
11.渐变
12.盒子模型及边框使用
13.盒子的内外边距
14.display与浮动
14.1display
block 块元素
inline 行元素
inline-block 是块元素,当时可以内联,在一行
none 取消
14.3浮动
左右浮动float
15.父级边框塌陷的问题
clear
clear:right; 右侧不允许有浮动元素
clear:left; 左侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
clear:none;
解决方案:
- 增加父级元素高度~(固定父级元素的高度 height=…)
#father{
border:1px #000 solid;
height:800px;}
- 增加一个空的div标签,清除浮动(在HTML中写)
<div class="clear"> <div .clear{ clear:both; margin:0; padding:0; }
- overflow
在父级元素中增加一个 overflow:hidden;
- 在父类元素中添加一个伪类:after
#father:after{
content:'';
display:block;
clear:both;
}
小结:
1.浮动元素后面增加空div(简单,但代码中应避免重写空div ,所以不建议使用)
2.将父元素的高度固定(简单,但元素设有了固定的高度,就会被限制)
3.overflow(简单,但当有一些下拉场景避免使用)
4.父类添加一个伪类:after(推荐) 没有副作用,推荐使用
16.定位
相对定位:position:relative;(可以理解为设置后,漂浮在原来的位置上等待,指定位置的漂移)
相对于原来的位置,进行指定的漂移,相对定位的话,它依然在标准文档流中,原来的位置会被保留,只是相对于原来自己位置发生了偏移.
top: -20px;向上漂移20 (注意这里的漂移都是相对于原来位置的漂移,故漂移的方向与你所想的方向相反)
left: 20px; 为向右偏移,相对原来的位置为20px
bottom: -10px;
right: 20px;
16.1相对定位练习
``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
*{
width: 0;
height: 0;
}
#father{
width: 500px;
height: 500px;
background-color: #B5FFFC;
}
#box1{
width: 100px;
height: 100px;
display: block;
background-color: #1663d7;
}
#box1:hover{
width: 100px;
height:100px;
display: block;
background-color: #e30ce3;
}
#box2{
width: 100px;
height: 100px;
display: block;
background-color: #1663d7;
position: relative;
top: -100px;
right: -400px;
}
#box2:hover{
width: 100px;
height: 100px;
display: block;
background-color: #e30ce3;
} #box3{
width: 100px;
height: 100px;
display: block;
background-color: #1663d7;
position: relative;
right: -200px;
}
#box3:hover{
width: 100px;
height: 100px;
display: block;
background-color: #e30ce3;
} #box4{
width: 100px;
height: 100px;
display: block;
background-color: #1663d7;
position: relative;
top: 100px;
right: -400px;
}
#box4:hover{
width: 100px;
height: 100px;
display: block;
background-color: #e30ce3;
} #box5{
width: 100px;
height: 100px;
display: block;
background-color: #1663d7;
}
#box5:hover{
width: 100px;
height: 100px;
display: block;
background-color: #e30ce3;
}
</style>
</head>
<body>
<div id="father">
<a href="" id="box1">1</a>
<a href="" id="box2">2</a>
<a href="" id="box3">3</a>
<a href="" id="box4">4</a>
<a href="" id="box5">5</a>
</div>
</body>
</html>
16.2绝对定位(通常在使用时,使用 父相子绝)
即父用relative
子用absolute
定位:基于xxx定位,上下左右~
1、没有父级元素定位的前提下,相对于浏览器定位
2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移~3、在父级元素范围内移动
相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在在标准文档流中,原来的位置不会被保留
16.3 固定定位
fixed固定定位
16.4z-index透明度
z-index 可以理解为浮动的层级