:) 零散的注意事项:
1. 选择器优先级不止之前的情况,子代选择器、后代选择器...它们之间也有优先级。故有时候不一定能判断出来谁的优先级高
2. 当给某元素定位时,定位取值为:position:fixed/absoluted ,相应元素会脱离标准流
媒体查询
:) 作用:为了将一套系统在多个终端使用,故需要媒体查询
媒体查询的两种方法
:) 媒体查询两种方法:
1. 不同情况下用不同的css文件。缺点:css文件过多,丢失会造成严重的后果
2. 不同情况下用不同的选择器。缺点:css样式有冗余
方法一:写成三个不同的css文件
media = "终端设备 and(表达式) and/, (表达式)..."
属性 | 取值 |
---|---|
终端设备 | all/screen/print |
<!--应用-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="one.css" rel="stylesheet" media="all and (min-width:1024px)">
<link href="two.css" rel="stylesheet" media="all and (min-width:780) and (max-width:1023px)">
<link href="three.css" rel="stylesheet" media="all and (max-width:779px)">
</head>
<body>
</body>
</html>
方法二、 将所有情况写在一个css文件中
在@media中写选择器,而不是直接写样式
@media 终端设备 and (表达式) and/, (表达式){
attr{
}
}
扩展属性data-属性名称
若要在css中获取html中的标签中的扩展属性,则需要用:attr(data-属性名称)->暂时只用在::before选择器/::after选择器中给content赋值
<style>
div::before{
content:"("attr(data-test)")" /*可获取到green*/
}
</style>
<div data-test="green" ></div>
动画
1. 不同浏览器对同一动画有不同解析
2. 只要对x/y都可以取值的,都有..x/..y。eg:translateY()/translateX()
一、 transform
属性:
1.移动: translate(水平移动位置,垂直移动距离)
1. 水平位移:值为正值,水平向右。反之
2. 垂直位移:值为正值,竖直向下。反之
3. important!!! 该属性是相对于原位置进行移动的
4. eg:transform:translate(..,..)
<!--在该例中,0%向右平移100px,20%相对于原位置向下移动100px,而不是在0%移动的基础上向下移动100px-->
<style>
div{
animation:test 1s linear 1s 1;
}
@keyframes test{
0%{
transform:translateX(100px)
}
20%{
transform:translateY(100px)
}
}
</style>
<div></div>
2.旋转:rotate(角度)
1. 默认以中心点为参考点旋转。
2. 若要设置旋转中心点,可用transform-origin来改变旋转中心点
3. transform-origin可取left/bottom/right/top/百分比(以具体宽高为参考)/具体像素
4. eg:transform:rotate(10reg)
3. 缩放:scale(值)
1. 值大于1表示放大,值在0-1之间表示缩小
2. 一个值表示水平竖直都缩放,两个值:第一个值代表水平方向缩放,第二个值表示竖直方向缩放
3. transform:scale(0.2)
4. 倾斜:skew(值)
1. 沿x轴和y轴进行倾斜得到效果。正值表示正方向
2. eg:skew(10deg,10deg )
将四个属性放到一起
`transform:translate( ) rotate() scale() skew()`
过渡动画
`transition:等待时间 变化的属性 动画时间 速度`
1. transition-delay
:等待时间
2. 变化的属性
如果变化的属性是宽/高/颜色...,此处取值为width/height/color...;
如果变化的属性是transform,此处取值为transform
3. 速度
取值 | 描述 |
---|---|
linear | 匀速 |
ease | 先慢后快再慢 |
ease-in | 以慢速开始的过渡(从慢到块) |
ease-out | 以慢速结束的过渡(从快到慢) |
ease-in-out | 以慢速开始和结束的过渡 |
动画
animation:动画名字 时间 速度 等待时间 循环次数 方向
@keyframes 动画名字{
0%{}
25%{}
60%{}
...
}
属性 | 取值 |
---|---|
循环次数 | infinite /n :无限次循环/n次循环 |
方向 | normal /alternate :动画正常播放/动画轮流反向播放 |
<style>
div{
animation:test 1s linear .4s infinite
}
@keyframes test{
0%{}
30%{}
70%{}
100%{}
}
</style>
<div></div>
透明度
opacity:透明度数值
:0表示完全透明,1表示完全不透明