概述
- c3兼容性很差,需要添加私有前缀
- 渐进增强原则,保证低版本正常运行,高版本效果更好。
工具:
[] 表示全部可选项 padding
|| 表示或者
| 表示多选一
? 表示0个或者1个
* 表示0个或者多个
{} 表示范围
选择器
之前选择器拓展
div+p:选中div后面相邻的第一个p,必须紧挨着div,中间不能有其他的标签
div~p:选中div后边所有的p标签
属性选择器
标志性符号:[]
^:开头 $:结尾 *:包含
div[class^="aa"],div带有class属性,并且值以aa开头
div[class$="aa"],div带有class属性,并且值以aa结尾
div[class*="aa"],div带有class属性,并且值包含aa
E[class] 选中页面的E元素,并且E元素中有class属性
div[class="box"],div带有class属性,并且值为box
结构伪类选择器
通过结构进行筛选
E:first-child/last-child/nth-child()/nth-last-child()
先找父元素,再找里面指定的标签
E:nth-child(1),编号是从1开始的
E:nth-child(n);n>=0,当n小于1时无效,2n/even/偶数,2n+1/odd/奇数,-n+5/选中前5个
所选到的元素类型,必须时指定的类型E否则无效
E:empty
如果E是空的时候会被选中,表示元素是空的状态
E:target
要配合锚点使用,表示被激活的状态
伪元素选择器
标志性符号:双冒号(::)
伪元素
::before/::after
通过css模拟出来html标签的效果
是一个行内元素,需要转换成块元素
创建必须要有content:“”;属性
伪元素选择器
::first-letter
选中第一个字母
首字下沉需要和float一起使用
::first-line
选中第一行
::selection
表示当前选中的区域
通常设置color,background
伪类选择器(css2)
标志性符号:冒号
代表一种状态
:hover :link :active :visited (lvha)
颜色和透明度
css2中的透明度
opacity
可以给盒子设置半透明,但是会影响里面的子盒子,并且里面的子盒子无法改变透明度(继承性)
transparent
可以单独设置透明度,但是无法改变透明度的值,是全透明的
rgba()
hsla()
h:色调 0-360
s:饱和度 0%-100%
l:亮度 0%-100%
a:alpha 透明度 0-1
文字阴影
text-shadow:水平位移 垂直位移 模糊程度 阴影颜色
有多个阴影效果,并列书写,使用逗号隔开
盒子模型
box-sizing:
content-box 外加模式(默认值)
padding-box
border-box 内减模式
浏览器私有化前缀
-webkit-:谷歌 苹果
-moz-:火狐
-ms-:ie
-o-:欧朋
主要用于处理浏览器兼容性问题
边框
边框圆角
border-radius:
写法
单个属性:水平半径 垂直半径
复合写法:水平半径..../垂直半径....
赋值顺序
从左上角开始,顺时针赋值,如果当前角没有值,取对角值
盒子阴影
box-shadow:水平位移 垂直位移 模糊程度 阴影大小 阴影颜色 内外阴影
内阴影(inset),外阴影不用写
边框图片
属性
边框图片的路径
border-image-sourse:url();
边框图片的剪裁
border-image-slice:27 27 27 27;/27;
顺时针剪裁
边框图片的大小
border-image-width:
边框图片的平铺
border-image-repeat:
repeat 正常平铺,但是可能会显示不完整
round 平铺 保持图片完整
stretch 拉伸(默认值)
谷歌高版本可能会不支持
渐变
渐变属于背景图片范围属性,background-image:
线性渐变
linear-gradient(方向,起始颜色 0%,终止颜色 100%)
方向
to left/right/top/bottom
角度:30deg
默认方向是从上向下
可以用百分制控制颜色的范围:red 20%
径向渐变
radial-gradient(辐射半径,中心点位置,起始颜色 0%,终止颜色 100%)
辐射半径
通过控制x,y轴值来控制圆或者椭圆
中心点位置
at center/left/right/top/bottom/数值(x,y)px
背景
背景尺寸
background-size:
数值:水平数值 垂直数值
百分比:水平 垂直
cover 覆盖
会保证完全覆盖盒子,但不能保证完全显示,全背景 自适应
contain 包含
保证背景图片最大化在盒子中等比例显示,但不能保证铺满整个盒子
控制背景大小
背景原点
background-origin:
content-box
padding-box 默认值
border-box
控制背景从什么地方显示
背景剪裁
background-clip:
content-box
padding-box
border-box
表示从什么位置开始剪裁
多背景
按照背景正常的语法格式书写,多个背景中间用逗号隔开
过渡
transiton:过渡属性 持续时间 运动曲线 延迟时间
过渡属性
transition-property:width;
过渡时间
transition-duration:4s;
运动曲线
transition-timing-function:
linear 线性
ease 减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
如果希望所有的属性都发生过渡使用all
过渡必须加给过渡盒子本身,谁过渡加给谁
2D转换
transform:
放缩
scale(水平缩放比例,垂直缩放比例)
如果只写一个值,等比例缩放
不能使用百分比
位移
translate(水平位移,垂直位移)
如果只写一个值 水平移动
百分比是相对于自身的移动,50%
旋转
rotate(角度)
正值是顺时针
倾斜
skew(相对于x轴的偏移,相对于y轴的偏移)
变换中心
translate-origin:水平坐标 垂直坐标
left right center top bottom
变换中心 默认是图片的几何中心
复合写法中间用空格隔开
3D变换
旋转
rotateX()
rotateY()
rotateZ()
所有的3D旋转,对着正方向去看都是顺时针旋转
位移
translateX()
translateY()
translateZ()
Z轴方向必须配合透视来使用
透视
perspective:
设置的是用户的眼睛和屏幕的距离,透视效果只是视觉上的呈现,不是真正的3D
加给变换的父盒子
3D效果呈现
transform-style:
preserve-3d
可以让里面的子盒子保持3D效果 加给父盒子 让子盒子位于3D空间
flat 子盒子被扁平化
backface-visibility:hidden;背面不可见
动画
类似js中的函数,先定义再调用
定义动画
@keyframes 动画名{ 0%{ } 100%{ }或者 from{ }to{ } }
调用
animation:动画名称 持续时间 执行次数 延迟时间 是否反向 运动曲线 结束后状态
动画名称
animation-name:
持续时间
animation-duration:
秒数:2s
执行次数
animation-iteration-count:
数字
infinite 无限次
持续时间
animation-duration:
秒数:2s
延迟时间
animation-delay:
秒数:2s
运动曲线
animation-timing-function:
linear 线性
ease 减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
steps()分步
是否反向
animation-direction:
normal
alternate 反向
结束状态
animation-fill-mode:
forwards 保持动画结束后的状态
backwards 初始状态
动画的前两个属性是必须有的,并且顺序固定
控制动画状态
animation-play-state:
paused 停止
running 播放
多列布局
column-count:3;分几列
column-rule:1px solid red; 分割线
column-gap:60px; 列间距
column-width: ;列宽度
column-span:all;跨列,all表示跨所有的列
注意:兼容性
伸缩布局
display:flex;
主轴方向 flex-direction
row 水平
row-reverse 水平翻转
column 列
column-reverse 列翻转
主轴的对齐方式 justify-content
flex-start 从主轴的开始的方向对齐
flex-end 从主轴结束的方向对齐
center 居中对齐
space-round 平分对齐
space-between 两端对齐
侧轴的对齐方式 align-items
flex-start 从侧轴开始的方向对齐
flex-end 从侧轴结束的方向对齐
center 居中对齐
baseline 基线对齐
stretch 拉伸
伸缩比例 flex:数字
如果盒子不参与划分比例,不写flex属性即可
web字体
步骤
引入字体包
声明字体,告诉浏览器去哪里找这个字体
给盒子添加这个字体
在伪元素中,content:""中使用图标的编码时要删除前面的符号,然后加\,起转义作用
360案例
window.onmousewheel 鼠标滚动事件
jquery全屏滚动事件fullpage.js
兼容性
通过http://caniuse.com/ 可查询CSS3各特性的支持程度,一般兼容性处理的常见方法是为属性添加私有前缀,如不能解决,应避免使用,无需刻意去处理CSS3的兼容性问题