CSS之路
css的目的是为了让网页更美观.
CSS规则由两个主要部分构成:选择器,以及一条或多条样式声明.
下面我们来看一下例子,首先我们在head里插入一个style标签,在里面写入一个针对h3标签的CSS规则
<style> h3{ color: blue; font-size: 20px; } </style>
在body中写入一个h3的标签
<h3>标题内容</h3>
这时候我们就可以发现 h3标签的颜色,和字体大小如我们所写的那样发生了变化.
写CSS规则的时候要注意,每条规则要用 ; 号分割开来
关于CSS样式的方法,一共有三种,
第一种 单个样式
<p style="background-color: yellow;font-size: 30px;">这是一个P标签</p> <p style="background-color: yellow;font-size: 30px;">这是一个P标签</p>
我们可以在任何标签上加上style属性,来设置他的css样式,同样是用 ; 号分隔每种样式
这样做的缺点是,针对每个标签都要设置一次,产生了大量的重复代码,所以如果没有特殊需要一般不会这样做
第二种,内部样式
<!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> p{ background-color: red; font-size: 30px; } </style> </head> <body> <h3>标题内容</h3> <p>这是一个P标签</p> <p>这是一个P标签</p> </body> </html>
我们在style标签中写入一个针对p标签的样式,同样设置了背景色和字体大小
随后,body中的所有p标签都会被应用上这个css样式,这样就大大的减少了代码的重复量.
第三种,外部样式
当有多个页面需要应用css样式的时候,我们可以单独写一个css文件,然后在需要应用该CSS样式的页面引用这个CSS文件.,比如我们在根目录创建一个public.css.写入内容
p{ color: red; font-size: 40px; }
然后我们在index.html中写入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./public.css">
</head>
<body>
<h3>标题内容</h3>
<p>这是一个P标签</p>
<p>这是一个P标签</p>
</body>
</html>
可以看到当<link rel="stylesheet" href="./public.css">
引入了CSS文件后,我们的P标签直接有了颜色和大小
外部标签的好处是,我们只需要修改一次,即可让所有页面的样式都随之而改变.
选择器
我们之前看了尝试了对P标签,和h3标签进行CSS样式修改,我们知道p{}代表选择p标签
那么我们现在来着重看看选择器.
首先我们可以用*来代表页面中的所有标签.
<style> *{ font-size: 40px; } </style>
这表示页面中所有标签的字体大小都为40px,不论他是p标签还是ul标签还是h1标签
而如果写上具体标签名,则会选择该页面下所有的该标签,无论此标签隐藏的有多深.
p{ color: red; }
我们可以对所有标签来进行选择.包括div span 等等
但是实际使用中我们可能会遇到一个情况,比如p标签,我并不想对所有p标签都这么操作,而是要对一部分进行操作,那要怎么做呢 .
我们可以用 类选择器 方法为 .号加类class名
比如:
<!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> .one{ color: red; } </style> </head> <body> <h3 class="one">标题内容</h3> <p>这是一个P标签</p> <p class="one">这是一个P标签</p> <p class="one">这是一个P标签</p> <p class="one">这是一个P标签</p> <p>这是一个P标签</p> </body> </html>
我们可以看出,所有class="one"的p标签,都有了颜色,就连h3也有了红色
这是因为 类选择器只针对class来进行选择,而不针对具体哪个标签.
同一个标签,可以应用多个class 用空格隔开.
比如:
<!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> .one{ color: red; } .two{ font-size: 50px; } </style> </head> <body> <h3 class="one">标题内容</h3> <p>这是一个P标签</p> <p class="one two">这是一个P标签</p> <p>这是一个P标签</p> </body> </html>
我们可以看到应用了one和two的p标签 除了颜色变为了红色,大小也变成了50px
除了类选择器,还有ID选择器,需要注意的是,因为html文件中 id被要求是唯一的,所以id选择器其实是只针对某个特定的标签生效.
id选择器通过#ID名 {} 来设置
<!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> #one{ color: red; font-size: 40px; } </style> </head> <body> <h3>标题内容</h3> <p>这是一个P标签</p> <p id="one">这是一个P标签</p> <p>这是一个P标签</p> </body> </html>
标签选择器还可以对多个标签同时选择:
<!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> .one,.two{ color: red; font-size: 50px; } </style> </head> <body> <h3>标题内容</h3> <p class="one">这是一个P标签</p> <p class="two">这是一个P标签</p> </body> </html>
可以看到one和two两个样式的标签都被赋予了样式.
不仅仅是类选择器可以多选,元素选择器一样可以多选,语法一样,用逗号隔开即可
<style> h3,p{ color: red; font-size: 50px; } </style>
那么到这里我们可能会有一个疑问,如果我写了多个样式,比如我p标签有格式,然后有某些p标签还有class类,那么到底以哪个为准呢.
实际上,选择器是有优先级的.权重如下:
元素选择器的权重是1
class选择器的权重为10
ID选择器的权重为100
内联样式的权重为1000
优先级从高到低,内联样式>ID选择器>类选择器>元素选择器
所以说,直接在标签上写 style="xxxx" 这个优先级是最高的.
字体属性 font属性
话不多说,详情看代码中的注释
<!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> p{ color: red; /* 字体颜色 也可以用 #xxxxxx 的形式,也可以用rgb(0,0,0)的形式*/ font-size: 50px; /* 字体大小 */ font-weight: bold; /* 字体粗细 bold--粗体 bolder--更粗 lighter--更细 ,也可以用100-900的数字来定义*/ font-style: normal; /* 字体样式 normal--正常 italic--斜体*/ font-family:'微软雅黑'; /* 字体族 可以用逗号分隔多个字体族,如果第一个字体族不存在,则会使用第二个字体族,以此类推*/; text-align: center; /* 文本对齐方式 */ } </style> </head> <body> <p>字体属性演示</p> </body> </html>
背景色和背景图片设置
也是看代码注释
<!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> .box1{ width: 400px; height: 400px; background-color: red; } .box2{ width: 400px; height: 400px; background-image: url('test.webp'); background-repeat: repeat;/* 背景图片的填充方式 默认repeat是水平和垂直都重复 repeat-x repeat-y no-repeat*/ background-size: 100px 100px;/* 背景图片的大小 默认是auto 可以是具体的像素值 也可以是百分比 也可以用cover--不变形充满全屏 contain--保持横纵比尽可能放大*/ background-position: left center;/* 背景图片的位置 默认是left top*/ } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
表格设置
依然见代码的注释
<!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> table,td{ /* table表示给表格设置样式,加上TD表示单元格也设置这样的样式*/ border: 3px solid #000; /* 表格边框 3像素 边框样式 颜色*/ } table{ border-collapse: collapse; /* 表格边框合并, 合并后边框变成单线而不是双线 */ width: 300px; /* 表格宽度 */ height: 200px; /* 表格高度 */ } td{ text-align: center; /* 文字水平居中 可以有left center right */ vertical-align: top;/* 文字垂直对齐,可以有 top center bottom*/ padding: 10px; /* 内边距,单元格内容和上下左右之间的距离 ,一个值的时候代表上下左右,如果用空格分割两个值,那么第一个值代表上下,第二个值代表左右 */ background-color: aquamarine;/* 背景颜色 */ color: #fff; /* 文字颜色 */ } </style> </head> <body> <table> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </table> </body> </html>
选择器
后代选择器 A空格B
先看如下代码
<!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> ul li{ color: red; } </style> </head> <body> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <div> <ol> <p>haha</p> <li>列表4</li> <li>列表5</li> </ol> </div> </ul> </body> </html>
ul空格li的意思表示 选择ul下面的所有li标签,注意是所有,包括子标签和孙辈标签,只要是li标签,都会应用该CSS规则
子代选择器 A>B
表示只对子标签有效,孙辈以下的标签将不会被应用,看代码
<style> ul>li{ color: red; } </style>
ul>li 表示只应用该ul下的li,再深一层以上则无效.
相邻选择器 A+B
选择一个标签,对他相邻的标签应用css样式
<!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> h3+p{ color: red; } </style> </head> <body> <h3>我是标题</h3> <p>我的内容1</p> <p>我的内容2</p> </body> </html>
可以看到 只有 我的内容1 这个P标签被应用了样式.h3和另一个p标签纹丝不动
通用兄弟选择器 A~B
<!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> h3~p{ color: red; } </style> </head> <body> <h3>我是标题</h3> <p>我的内容1</p> <p>我的内容2</p> <span>啊哈哈啊</span> <p>我的内容3</p> </body> </html>
可以看到 我的内容1,2,3 都能生效,意思是 选择了h3标签,跟随他的后面的所有p标签都被应用了样式
元素的盒子模型
一个元素,从自身内容,周围还有内边距,边框,外边距,宛如一个盒子.
<!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> div{ /* 盒子模型 */ width: 200px; /* 元素自身宽度 */ height: 200px; background-color: red; padding: 20px; /* 元素内边距 当只有一个值时是上下左右,如果用空格分割两个值,第一个是上下,第二个是左右 */ border: 5px solid blue; /* 元素边框 */ margin: 10px; /* 元素外边距 当只有一个值时是上下左右,如果用空格分割两个值,第一个是上下,第二个是左右 */ } </style> </head> <body> <div> <p>我是内容</p> </div> <p>我是p标签</p> </body> </html>
其中 关于内边距和外边距,除了简单的上下左右,上下+左右,还可以单独定义任何一个方向.
<style> div{ /* 盒子模型 */ width: 200px; /* 元素自身宽度 */ height: 200px; background-color: red; border: 5px solid blue; /* 元素边框 */ padding-left: 10px; /* 元素内边距 -左*/ padding-right: 10px; /* 元素内边距 -右*/ padding-top: 10px; /* 元素内边距 -上*/ padding-bottom: 10px; /* 元素内边距 -下*/ margin-left: 10px; /* 元素外边距 -左*/ margin-right: 10px; /* 元素外边距 -右*/ margin-top: 10px; /* 元素外边距 -上*/ margin-bottom: 10px; /* 元素外边距 -下*/ } </style>
弹性盒子 flex
这是一个css3的新特性,首先看代码
<!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> .container{ width: 400px; height: 400px; background-color: black; } .box1{ width: 100px; height:100px; background-color: red; } .box2{ width: 100px; height:100px; background-color: yellow; } .box3{ width: 100px; height:100px; background-color: blue; } </style> </head> <body> <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
如果我们有3个div 放在一个container的div里 那么我们可以看到 这3个div是竖着放在container这个div里的.当我们给container这个div加上一个dispaly:flex 的弹性属性.就会发现 这3个div变成了横向排列
注意:flex的特性是 横向排列
如果我们需要改变排列的方向,可以用flex-direction属性修改,具体方法看代码
<style> .container{ width: 400px; height: 400px; background-color: black; display: flex; flex-direction: column; /* row-水平, column-垂直, row-reverse-水平翻转, column-reverse--垂直翻转 */ } .box1{ width: 100px; height:100px; background-color: red; } .box2{ width: 100px; height:100px; background-color: yellow; } .box3{ width: 100px; height:100px; background-color: blue; } </style>
justify-content属性,将内容对齐在弹性容器,沿主轴线对齐,有三种对齐方式,具体看代码注释
<style> .container{ width: 400px; height: 400px; background-color: black; display: flex; flex-direction: column; /* row-水平, column-垂直, row-reverse-水平翻转, column-reverse--垂直翻转 */ } .box1{ width: 100px; height:100px; background-color: red; } .box2{ width: 100px; height:100px; background-color: yellow; } .box3{ width: 100px; height:100px; background-color: blue; } </style>
align-items 设置元素在弹性盒子里,纵轴方向的对齐方式,有三种方式,看代码注释.
<style> .container{ width: 400px; height: 400px; background-color: black; display: flex; flex-direction: column; justify-content: center; align-items: center;/*flex-start--贴着左边 center---居中 flex-end-----贴着右边 */ } .box1{ width: 100px; height:100px; background-color: red; } .box2{ width: 100px; height:100px; background-color: yellow; } .box3{ width: 100px; height:100px; background-color: blue; } </style>
子元素布局属性 flex
如果我们有3个元素在一个弹性容器div里,我们需要的效果是 box1占宽度的百分之60,另外两个box占百分之20,不管这个弹性容器的具体宽度是多少,我们只需要设置flex属性
给box1设置3 另外两个设置1,即可.看代码
<style> .container{ width: 400px; height: 400px; background-color: black; display: flex; flex-direction: row; justify-content: center; align-items: center; } .box1{ width: 100px; height:100px; background-color: red; flex: 2; } .box2{ width: 100px; height:100px; background-color: yellow; flex: 2; } .box3{ width: 100px; height:100px; background-color: blue; flex: 1; } </style>
元素浮动 float
让元素浮动可以改变元素的排列方式,比如让块级标签变得可以并排排列起来.浮动只有左右浮动,没有上下浮动.
float有两个值,left和right,用来控制浮动的方向.
首先我们看一个例子
<!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{ width: 200px; height: 200px; background-color: red; float: right; } .container{ width: 600px; height: 600px; background-color: green; } </style> </head> <body> <div class="box"></div> <div class="container"></div> </body> </html>
本来box和container两个块级标签应该是上下排列的,但是如果给box加上一个float属性后,他就浮动到了和container一行.
再看下面这段代码
<!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> div{ width: 200px; height: 200px; float: left; } .box1{ background-color: red; } .box2{ background-color: blue; } .box3{ background-color: yellow; } .container{ width: 600px; height: 600px; background-color: green; } </style> </head> <body> <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
可以看到,box1,box2,box3 这三个块级标签div本应垂直排列,变成了并排在container里排列
如果并排的位置无法容纳那会怎么样呢,我们将container的宽度改成500就会发现,排不下的内容就会另起一行,重新排列
但是浮动效果通常会带来一些不良的影响,比如看下面的代码
<!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{ width: 100px; height: 100px; background-color: hotpink; margin: 3px; float: left; } .test{ width: 100px; height: 100px; background-color:brown; } .container{ width: 500px; background-color: #666; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="test"></div> </div> </body> </html>
这段代码中 三个box标签和一个test标签在父级标签container中.通常我们开发的时候,由于并不能确定子标签的大小,所以通常我们是不设置父标签高度的.但是当子标签box被设置了一个浮动属性后.我们发现container标签的高度消失了.
这或许没有什么问题,但是我们再加上一个标签,test.不管这个test在container内还是外.他都不能正常显示.因为container没有高度,无法撑起一行.
针对这种不良的影响,我们有四种方法.
1.给父标签设置一个高度.
<style> .box{ width: 100px; height: 100px; background-color: hotpink; margin: 3px; float: left; } .test{ width: 100px; height: 100px; background-color:brown; margin: 3px; } .container{ height: 500px; width: 500px; background-color: #666; } </style>
2.给受影响的标签加上一个clear属性
clear属性有两个参数.left,right 分别用来清除受左边还是右边浮动标签的不良影响.
我们一般选用both,表示都清除.
<style> .box{ width: 100px; height: 100px; background-color: hotpink; margin: 3px; float: left; } .test{ width: 100px; height: 100px; background-color:brown; margin: 3px; clear:both } .container{ width: 500px; background-color: #666; } </style>
3.伪对象方式 after
<style> .box{ width: 100px; height: 100px; background-color: hotpink; margin: 3px; float: left; } .test{ width: 100px; height: 100px; background-color:brown; margin: 3px; } .container{ width: 500px; background-color: #666; } .container::after{ /*伪元素*/ content: ""; display: block; clear: both; } </style>
4.也就是最常用的方式,overflow:hidden.同时为了消除同一父级元素受到的影响,我们也可以给同级受影响的元素加上clear:both
看下面的代码,我们加了两个test的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> .box{ width: 100px; height: 100px; background-color: hotpink; margin: 3px; float: left; } .test{ width: 100px; height: 100px; background-color:brown; margin: 3px; clear: both; } .container{ width: 500px; background-color: #666; overflow: hidden; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="test"></div> </div> <div class="test"></div> </body> </html>
可以看到不论是同一个父级的,还是同级的.都没有收到浮动元素的不良影响.
定位:position
在css中 我们还可以对元素进行定位,分为相对定位,绝对定位和固定定位
其中,绝对定位和固定定位会脱离文档流,让元素浮动在页面上,而相对定位还是在文档流内
相对定位 position:relative
<!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> div{ width: 200px; height: 200px; background-color: red; position: relative; /* 相对定位 */ left: 200px; /* 针对定位,离左边200px */ top: 200px; /* 针对定位,离上边200px */; } </style> </head> <body> <div></div> </body> </html>
绝对定位position:absolute
绝对定位可以让元素浮动起来,脱离文档流.并且和浮动不同的是,浮动只有一层,所有浮动的元素相当于脱离了文档流,在文档流上面一层排列.所有浮动的元素也会互相干扰和排列
但是绝对定位是 ,你每设置一个positon,他就多一层,不同的绝度定位会互相堆叠,并且按代码的顺序来决定谁在最上面一层.
<!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> .box1{ width: 200px; height: 200px; background-color: red; position: absolute; /* 绝对定位 */ left: 100px; /* 针对定位,离左边200px */ top: 100px; /* 针对定位,离上边200px */; } .box2{ width: 200px; height: 200px; background-color: yellow; position:absolute; left: 150px; top: 150px; } .box3{ width: 400px; height: 400px; background-color: blue; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
可以看到 box1和box2都浮动在box3上 并且box2还盖住了box1
固定定位:position:fixed
固定定位相对于绝对定位,他的区别是 ,固定定位是固定在屏幕的某个位置,当页面有滚动条的时候,他是不会随着滚动条而滚动的.
<!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> .box1{ width: 200px; height: 200px; background-color: red; position: fixed; /* 固定定位 */ right: 100px; /* 针对定位,离右边200px */ bottom: 100px; /* 针对定位,离下边200px */; } .box3{ width: 400px; height: 400px; background-color: blue; } p{ height: 400px; } </style> </head> <body> <div class="box1"></div> <div class="box2"> <p>哈哈</p> <p>哈哈</p> <p>哈哈</p> <p>哈哈</p> <p>哈哈</p> <p>哈哈</p> </div> <div class="box3"></div> </body> </html>
我们设置了几个高度为400的p标签,这样让页面超过屏幕一屏显示.
同时我们设置了一个box1固定在屏幕右下角,可以看到随着我们拖动滚动条,box1始终在页面的右下角固定位置.
关于定位,我们需要注意的是,相对定位和绝对定位.如果他的父级元素是有定位的,那么这两个定位会基于他的父级元素而定位.如果没有,则继续找上一级,如果全部没有定位,则相对于文档而定位.
我们现在创建两个div box1是box3的父级
<!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> .box1{ width: 400px; height: 400px; background-color: red; margin-top: 100px; margin-left: 100px; } .box3{ width: 100px; height: 100px; background-color: blue; position:absolute; left: 50px; top: 50px; } </style> </head> <body> <div class="box1"> <div class="box3"></div> </div> </body> </html>
可以看到box3浮动在页面上,盖在了box1上面.这是因为 box1虽然包裹着box3,但是box3是浮动的.不会随着box1位置的移动而移动
那么我们给box1加上定位属性,不管是相对定位还是绝对定位
<!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> .box1{ width: 400px; height: 400px; background-color: red; margin-top: 100px; margin-left: 100px; position: relative; } .box3{ width: 100px; height: 100px; background-color: blue; position:absolute; left: 50px; top: 50px; } </style> </head> <body> <div class="box1"> <div class="box3"></div> </div> </body> </html>
可以看到box3的定位是基于box1的位置了.而不是基于整个文档流.这就是定位的原则
关于定位最后我们在将一下绝对定位的堆叠顺序,通常默认情况下堆叠的顺序是按代码的顺序来的,写在最后的代码就是在最上层
<!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> .box1{ width: 100px; height: 100px; background-color: aqua; position: absolute; left: 50px; top:50px; } .box2{ width: 100px; height: 100px; background-color: red; position: absolute; left: 70px; top:70px; } .box3{ width: 100px; height: 100px; background-color: yellow; position: absolute; left: 90px; top:90px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
这里我们可以看到box3盖在box2上,box2盖在box1上.
但是如果我们不想按这个顺序而是要自行调整需要怎么办呢 通过z-index属性
<!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> .box1{ width: 100px; height: 100px; background-color: aqua; position: absolute; left: 50px; top:50px; z-index: 30; } .box2{ width: 100px; height: 100px; background-color: red; position: absolute; left: 70px; top:70px; z-index: 20; } .box3{ width: 100px; height: 100px; background-color: yellow; position: absolute; left: 90px; top:90px; z-index: 10; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
z-index值越大的,在最上面.通过设置z-index,我们就将box1改到了最上面.
圆角效果 border-radius
<!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> .box1{ width: 100px; height: 100px; background-color: aqua; position: relative; left: 400px; top: 400px; border-radius: 15px; } </style> </head> <body> <div class="box1"></div> </body> </html>
我们创建一个div 通过定位将这个div移动到文档中间方便观看
我们给这个div加上border-radius属性 让他具有圆角.
注意的是 :border-radius的值不只可以用px 也可以用百分比 通常设置到50以上的百分比, 这个元素就会变成圆形.
border-radius: 50%;
同时 border-radius还可以同时赋多个值
四个值:第一个为左上,第二个右上,第三个右下,第四个左下
三个值:第一个为左上,第二个是右下和左下,第三个为右下
两个值:第一个为左上和右下,第二个为右上和左下,也就是对角
一个值:四边同等
阴影 :立体效果 box-shadow
可以给元素一个阴影让他看起来有立体的效果
box-shadow有4个值
box-shadow:h-shadow v-shadow blur color;
h-shadow:必选,水平阴影的位置
v-shadow:必选,垂直阴影的位置
blur,可选 模糊距离
color:可选 阴影的颜色
<!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> .box1{ width: 100px; height: 100px; background-color: aqua; margin: 100px auto; box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5); } </style> </head> <body> <div class="box1"></div> </body> </html>
这里我们就创建了一个div 他的阴影是灰色 水平和垂直的阴影都是10px 距离也是10px
注意 水平和垂直的阴影位置可以是负数,当他们是正的时候,阴影的位置在右下 而是负的时候,则是左上
这里顺便提一下margin属性
margin可以有两个属性 分别代表上下位置和左右位置 auto则表示居中
这里margin: 100px auto;表示离上边100px 左右自动居中.
动画效果 animation
可以利用css来做一些简单的动画效果
方法如下,首先我们要定义一个动画 语法为 @keyframesmyanime@keyframs 加自定义动画名
通过0% 遮掩的方式来定义渐变的规则 比如我们这里定义了3个规则,分别是0%的时候是什么样的,50%的时候是什么样的,100%又是什么样子的
<!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> @keyframes myanime{ 0%{ background-color: red; } 50%{ background-color: yellow; } 100%{ background-color: red; } } </style> </head> <body> <div class="box1"></div> </body> </html>
定义了动画,我们怎么调用这个动画呢
通过 animation来调用动画 语法如下
animation: name duration timing-function delay iteration-count direction;
name:需要调用的动画名
duraition:动画持续的时间 比如 2s 20ms 之类
timing-function:动画速率 有如下值
ease:逐渐变慢(默认)
linear:匀速(常用)
ease-in:加速
ease-out:减速
ease-in-out:先加速后减速(效果不太明显)
delay:动画开始的时间(也就是延时多久开始执行) 可以设置0ms 也可以设置2s之类
iteration-count:设置动画循环的次数 可以写2或者3或者10 写infinite表示无限循环
direction:设置动画播放的方向,有如下值
normal 表示向前播放
alternate 动画在偶数次向前播放,奇数次往后播放,类似呼吸效果
<!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> @keyframes myanime{ 0%{ background-color: red; } 50%{ background-color: yellow; } 100%{ background-color: red; } } .box1{ width: 200px; height: 200px; background-color: red; animation: myanime 4s infinite; } </style> </head> <body> <div class="box1"></div> </body> </html>
我们也可以通过
.box1{
width: 200px;
height: 200px;
background-color: red;
animation-name: myanime;
animation-duration: 4s;
animation-iteration-count: infinite;
}
这样的方式来调用和设置动画的属性
除了改变背景色等,所有的css属性都可以在动画中渐变
比如我们可以改变一下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> @keyframes myanime{ 0%{ width: 50px; } 50%{ width: 200px; } 100%{ width: 50px; } } .box1{ height: 20px; background-color: red; animation-name: myanime; animation-duration: 4s; animation-iteration-count: infinite; } </style> </head> <body> <div class="box1"></div> </body> </html>
媒体查询 针对不同的分辨率改变css样式
@media screen
具体语法为 @media screen and (最大或最小分辨率条件){
css样式
}
比如我们看下面的代码
<!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> .box1{ width: 200px; height: 200px; background-color: red; } @media screen and (max-width: 768px) { .box1{ width: 100px; height: 100px; background-color: green; } } @media screen and (min-width: 768px) and (max-width: 996px) { .box1{ width: 300px; height: 300px; background-color: blue; } } @media screen and (min-width: 996px) { .box1{ width: 400px; height: 400px; background-color: yellow; } } </style> </head> <body> <div class="box1"></div> </body> </html>
我们设置了三种情况,第一 最大分辨率是768px时 box1的样式
第二 最小分辨率是768px,最大分辨率是996时 box1的样式
第三 最小分辨率是996px时,box1的 样式
随后我们拖动浏览器窗口大小,就可以看到box1的大小和背景色 随着浏览器窗口变成我们设置的条件而变化
css雪碧图/精灵图
这是一种网页处理的方式,允许将零星图片并到一张图片上,一次性加载.随后通过某种方法调用其中的图片
他通过background-image引入图片
然后通过background-position将图片偏移到自己想要显示的零星图片,所在的具体位置
<!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> .icon1{ display: block; width: 40px; height: 40px; border: 1px solid red; background-image: url(test.png); background-position: -17px -12px; } .icon2{ display: block; width: 40px; height: 40px; border: 1px solid red; background-image: url(test.png); background-position: -84px -80px; } </style> </head> <body> <span class="icon1"></span> <span class="icon2"></span> </body> </html>
我们先引入了微信的全部表情包截图 test.png 随后我们通过调整span的位置,让图片显示不同的位置来达到显示不同图片的效果.
这里要注意一点,因为span是一个行内标签,行内标签是没有长度和高度的
所以我们通过来display: block;将行内标签转为块级标签
同理我们也可以通过display:inline;将块级标签转换为行内标签
字体图标
很多情况下我们想加个小图标,但是如果在页面里加入大量的img会导致加载过慢等情况.
所以我们可以选择使用字体图标的方式.
有很多第三方图标网站,我们选择用阿里图标试试
我们首先去阿里图标网将想要的图标文件下载回来,添加到项目中.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> <style> .iconfont{ font-size: 50px; color: red; } </style> </head> <body> <span class="iconfont icon-haocai"></span> </body> </html>
加上<link rel="stylesheet" href="font/iconfont.css">一行代码来引入图标CSS文件
随后我们只要用class样式就可以引用该图标<span class="iconfont icon-haocai"></span>,比如这里我们就引入了一个耗材的图标.
同样,因为这个图标是字体,所以我们也可以用css给他设置大小和颜色.
.iconfont{
font-size: 50px;
color: red;
}