CSS的基本信息
1、css表示层叠样式表,通常起到美化HTML的作用
2、css有三种导入HTML中的方式
2.1、内嵌式、行内式 :直接在标签内添加style=" "
2.2、内部样式 :在head中使用<style></style>
2.3、外部样式 :在head中使用<link rel="stylesheet" herf=" ">
3、css代码的语法:
样式名称:样式值1 样式值2 样式值3
例如:border: 1px solid red;
4、css的内容注释
css代码的注释和html的注释不一样,它是通过/**/
来注释信息的。
5、css的选择器
5.1、标签选择器:直接写标签名,那么所有该标签都会受到影响。例如:div
5.2、类选择器:.类的名称,那么所有的class=该类的名称的标签都会受到影响。例如:class="i1"
5.3、id选择器:#id的名称,那么id=该名称会受到影响。例如:id="i1"
5.4、通配选择器:页面所有标签都会受到影响。*{ }
5.5、子代选择器:只有该子代的标签会受到影响。例如:div>p
,标签只有在div下的子代所有p标签会受到影响,而后代的p不会受到影响。
5.6、后代选择器:表示该标签下的所有的后代的某个标签受到影响。例如:div p{ }
,div标签下的所有的后代中的p标签受到影响。
关于文本限制复制
1、user-select
:用户是否可以选择,如果使用了user-select=none;
表示该设置中的文本信息无法复制。
.check_label{
user-select: none;
}
<input type="checkbox" name="checkCode"> <label class="check_label">下次自动登录</label>
关于相同标签的设置不同的属性
在列表中,需要对于不同的li设置不同的属性,可以通过:nth-of-type()设置。
<ul id="menu">
<li>123456</li>
<li>456789</li>
<li>789456</li>
<li>456123</li>
<li>321654</li>
<li>654321</li>
<li>159753</li>
<li>852456</li>
</ul>
#menu>li:nth-of-type(n+2){
background-color: linen;
}
以上是关于nth-of-type的简单介绍实例,下面详细来介绍关于这个nth-of-type:
1、关于对第一个li设置不同的属性:
1.1、first-of-type
#menu>li:first-of-type{
background-color: linen;
}
1.2、nth-of-type
#menu>li:nth-of-type(1){
background-color: linen;
}
效果:
2、关于对最后一个li设置不同的属性
2.1、last-of-type
#menu>li:last-of-type{
background-color:greenyellow;
}
2.2、nth-of-type
#menu>li:nth-of-type(8){
background-color: linen;
}
效果:
3、关于该所有的li设置属性
nth-of-type
#menu>li:nth-of-type(n+1){
background-color: linen;
}
4、关于单个的li设置属性
nth-of-type(n),n表示需要改变属性的li的位置
#menu>li:nth-of-type(4){
background-color: linen;
}
5、奇数的li的属性的设置
nth-of–type(odd); odd表示奇数
#menu>li:nth-of-type(odd){
background-color:yellow;
}
效果图
6、关于偶数的li的属性的设置
nth-of-type(even):even表示偶数
#menu>li:nth-of-type(even){
background-color: lawngreen;
}
7、not()
除了该标签之外,它用于取消某一个标签和其他标签具有相同的属性。
<!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>
.i2{
border: 1px solid blue;
width: 100px;
height: 80px;
}
.i1{
border: 1px solid green;
width: 100px;
height: 80px;
}
div:not(.i1):not(.i2){
border: 1px solid red;
width: 100px;
height: 80px;
}
</style>
</head>
<body>
<div></div>
<div class="i1"></div>
<div class="i2"></div>
</body>
</html>
关于input设置属性
在css中设置input的属性,可以使用一种标签选择器来实现,input[type=text]
,它可以对于所有<input type="text">
受到影响。
input[type=text],input[type=password]{
width:50px;
}
<input type="text" name="" id="">
<input type="text" name="" id="">
<input type="password" name="" id="">
效果图:
关于定位postion
1、相对定位 relative:相对于原来的位置进行偏移,但是保留原先原始的在浏览器中占用的空间。
.i1{
border: 1px solid red;
position: relative;
top:50px;
left: 20px;
}
<div class="i1">755555</div>
2、固定定位 fixed:固定在浏览器上,滚动条不能影响该定位的位置,同时不会保存原先的位置空间
.i2{
border: 1px solid red;
position: fixed;
bottom:50px;
right: 20px;
}
<div class="i2">456</div>
3、绝对定位 absolute:当父节点和祖先节点没有定位的时候,绝对定位会根据坐标定位在网页的坐标位置上。如果父节点和祖先节点有定位,那么会根据顺序,优先原则,会根据优先找到的那个父节点或者祖先节点来定位。
3.1、祖先节点或者父节点没有设置定位,根据网页的坐标位置定位。
.i1{
width: 150px;
height: 150px;
background-color: lawngreen;
position: absolute;
top: 100px;
left: 200px;
}
<div>
<div class="i1">123456</div>
</div>
效果
3.2、父节点或者祖先节点有定位,根据父节点或者祖先结点来定位。
.i1{
width: 150px;
height: 150px;
background-color: lawngreen;
position: absolute;
top: 100px;
left: 200px;
}
.i2{
border: solid green 1px;
height: 300px;
position: relative;
top: 100px;
left: 100px;
}
<div class="i2">
<div class="i1">456789</div>
</div>
4、static 表示定位和原先没有设置相同。
.i1{
width: 150px;
height: 150px;
background-color: lawngreen;
position: static;
top: 100px;
left: 200px;
}
.i2{
border: solid green 1px;
height: 300px;
position: relative;
top: 100px;
left: 100px;
}
<div class="i2">
<div class="i1">456789</div>
</div>
5、粘性定位 sticky:当DOM节点没有超越滚动条以外的区域时,它为相对定位,超越后,它为固定定位。
5.1、设置top,当没有滚动条时,并它的距离在top的范围内,就不会产生影响,当有滚动条时,它的定位方式变为固定定位。
.i3{
border:solid 1px black;
position: sticky; /*粘性定位*/
top: 0px;
}
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i3">123</div>
效果:
5.2、当产生滚动条时,移动滚动条,当该div到达了固定的位置时就会产生效果。
bottom底部设置,当到达底部,进入范围内后,div会自动变为固定定位。
.i3{
border:solid 1px black;
position: sticky; /*粘性定位*/
bottom:100px;
right: 0px;
/* left: 100px; */
}
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div>
<div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div>
<div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i2">456</div><div class="i1">789</div>
<div class="i3">123</div>
效果:
关于层级的设计
1、z-index
用户设计标签模块之间的层级定位,它使用范围在该标签使用了定位:position。如果没有使用定位,则该标签不起作用。
<div style="position: relative;width: 500px;height: 500px;z-index: 1; background-color: black;"></div>
<div style="position: absolute;top:100px; left:100px ;width: 100px;height: 100px;z-index: 2; background-color: blue;"></div>
关于浮动的介绍
浮动有左浮动 float:left;
和右浮动float:right
,清理浮动效果有两种,一种是clear:both;
另一种是overflow:hidden;
1、clear:both;取消左浮动和右浮动。在不需要受影响的div中设置。
<!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>
.left{
float:left;
}
.right{
float:right
}
.i1{
width: 100px;
height: 100px;
background-color: lime;
}
.i2{
width: 100px;
height: 100px;
background-color: magenta;
}
.i3{
width: 150px;
height: 100px;
background-color: rgb(64, 61, 80);
clear:both;
}
</style>
</head>
<body>
<div class="left i1"></div>
<div class="right i2"></div>
<div class="i3"></div>
</body>
</html>
效果图:
2、overflow:hidden;取消浮动,它用于取消子类的浮动。
<!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>
.left{
float:left;
}
.right{
float:right
}
.i1{
width: 100px;
height: 100px;
background-color: lime;
}
.i2{
width: 100px;
height: 100px;
background-color: magenta;
}
.i3{
width: 150px;
height: 100px;
background-color: rgb(64, 61, 80);
/* clear:both; */
}
.i4{
overflow: hidden;
}
</style>
</head>
<body>
<div class="i4">
<div class="left i1"></div>
<div class="right i2"></div>
</div>
<div class="i3"></div>
</body>
</html>
效果图:
内边距和外边距
1、margin表示外边距,两个标签之间的外部间距,
1.1、设置两个div的上下的外边距,两个div设置的外边距不会叠加。
1.2、当标签内部使用外边距时,如果外标签没有设置边框,就是有边框坍塌的危险,可以使用overflow:hidden;实现解除边框坍塌。一般不建议在内部使用外边距。
<!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>
.m{
margin-bottom:50px;
border: 1px solid red;
width:100px;
height: 100px;
}
.m1{
margin-top: 50px;
border:1px solid green;
width: 100px;
height:100px;
}
</style>
</head>
<body>
<div class="m"></div>
<div class="m1"></div>
</body>
</html>
效果图:
1.1、设置两个div的左右的外边距,两个div设置的外边距会叠加。
<!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>
.m{
margin-right:50px;
border: 1px solid red;
width:100px;
height: 100px;
float: left;
}
.m1{
margin-left: 50px;
border:1px solid green;
width: 100px;
height:100px;
float: left;
}
</style>
</head>
<body>
<div class="m"></div>
<div class="m1"></div>
</body>
</html>
2、内边距padding:内间距指盒子和内部内容之间的内部的距离
使用padding, 会增大盒子的大小.使用box-sizing: border-box;取消增大.
2.1、直接使用padding,不设置box-sizing:border-box。
<!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>
.m{
padding:50px;
border: 1px solid red;
width:100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="m"></div>
</body>
</html>
效果图:
padding中设置box-sizing:border-box;这可以取消增大。
<!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>
.m{
padding:50px;
border: 1px solid red;
width:100px;
height: 100px;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="m"></div>
</body>
</html>