css 9
一、复杂选择器web
一、兄弟选择器浏览器
一、相邻兄弟函数
选择器1+选择器2优化
二、通用兄弟动画
选择器1~选择器2url
二、属性选择器3d
语法：[]orm
[attr]:匹配附带attr属性的元素rem
elem[attr]:... ...字符串
elem[attr1][attr2]:
[attr=value]:
[class~=value]:
[attr^=value]:
[attr$=value]:
[attr*=value]:
三、伪类选择器
一、目标伪类
:target
二、元素状态伪类
:enabled,匹配被激活元素(表单控件)
:disabled,匹配被禁用元素(表单控件)
:checked,匹配被选中元素(radio，checkbox)
三、结构伪类
一、:first-child
二、:last-child
三、:nth-child(n)
四、:empty
五、:only-child
四、否认伪类
:not(选择器)
四、伪元素选择器
一、做用
匹配元素中的内容
二、语法
:first-letter,匹配元素的首字符
:first-line,匹配元素的首行
::selection,匹配用户选中的部分
注意： :与::的区别
二、内容生成
一、语法
一、伪元素选择器
一、:before,匹配元素内容区域以前
二、:after,匹配元素内容区域以后
二、属性
属性：content
取值：
一、字符串 ：普通文本,""
二、url() , 生成一副图像
三、计数器
三、解决问题
一、浮动元素的父元素高度问题
div:after{
content:"";
display:block;
clear:both;
}
二、外边距溢出
div:before/div:after{
content:"";
display:table;
}
四、计数器
一、声明或复位一个计数器
属性：
counter-reset:名 值 名 值;
值，能够省略，默认为0
注意：
一、不能将计数器声明在使用的元素中
二、设置计数器增量
属性：counter-increment:名 值;
值，能够省略，默认为1
注意：
一、哪一个元素使用，就在哪一个元素上声明增量
三、使用计数器
属性：content
取值：counter(名);
注意：
配合着:before或:after一块儿使用
三、多列
一、属性
一、分隔列
属性：column-count
二、列间隔
属性：column-gap
三、列规则
属性：column-rule:width style color;
二、兼容性
添加浏览器前缀
四、CSS Hack
一、CSS Hack方式
一、CSS 类内部hack
经过 属性前缀或值后缀的方式来编写指定浏览器可以识别的样式
hack 写法
* *color IE6,IE7
+ +color IE6,IE7
# #color IE6,IE7
- -color IE6
_ _color IE6
\0 color:red\0; IE8,IE9,IE10
\9\0 color:red\9\0; IE9,IE10
注意：
顺序问题
IE8,IE9,IE10(\0)
IE9,IE10(\9\0)
IE6,IE7(+)
IE6(-)
二、选择器Hack
在选择器前加上浏览器可以识别的前缀
* : IE6
*body{
/*IE6中body的样式*/
}
*+ : IE7
*+body{
/*IE7中body的样式*/
}
三、HTML都不引用Hack
经过HTML的条件注释
条件注释语法：
<!--[if 条件 IE 版本]>
内容
<![endif]-->
条件：
一、gt ：大于指定版本
二、gte ：大于等于
三、lt ：小于
四、lte ：小于等于
五、!不是指定版本
******************************
一、转换
二、过渡
三、动画
四、CSS 优化
******************************
一、转换
一、转换简介
一、什么是转换
改变元素在页面中的大小，位置，角度和形状的一种方式
二、转换分类
一、2D转换
使元素在x轴和y轴上发生变化效果
二、3D转换
在2D转换基础上，增长 z轴的变化效果
三、转换属性
属性：transform
取值：
一、none
默认值，不进行任何转换
二、转换函数
表示一个或者多个转换函数，若是是多个函数的话，中间以空格分开
四、转换原点
属性：transform-origin
默认状况下，原点是在整个元素的中心位置处
取值：数值/百分比/关键字
两个值：表示 x轴 和 y轴的位置
三个值：表示 x轴 ，y轴 ，z轴的位置
二、2D转换
一、2D位移
一、属性 和 函数
属性:transform
函数:
translate(x) :元素在x轴上的位移距离，取值为正，向右移动，取值为负，向左移动
translate(x,y) :
x表示x轴位移距离
y表示y轴位移距离，取值为正，向下移动，取值为负，向上移动
translateX(x) :只改变元素在x轴上的位置
translateY(y) :只改变元素在y轴上的位置
取值：
一、数值
二、百分比
二、2D缩放
一、做用
改变元素在页面中的大小
二、属性和函数
属性：transform
函数：
scale(value),若是只给一个值，那么x轴和y轴将等比缩放
scale(x,y):改变 x轴和y轴的缩放比例
scaleX(x):只改变x轴的缩放比例
scaleY(y):只改变y轴的缩放比例
取值：
默认值 为1
缩小：0~1 之间的数值
放大：大于1的数值
三、2D旋转
一、做用
改变元素在页面中的角度
二、属性 和 函数
属性：transform
函数：rotate(ndeg)
n取值为正，则顺时针旋转
n取值为负，则逆时针旋转
三、注意
一、转换时，坐标轴会一块儿进行转换
二、转换原点能够影响转换效果
四、2D倾斜
一、做用
改变元素在页面上的形状
二、属性 和 函数
属性：transform
函数：
skew(xdeg) : x轴倾斜指定角度
实际上时改变 y轴的倾斜角度
取值为正：逆时针
取值为负：顺时针
skewX(xdeg) : 效果同上
skewY(ydeg) : y轴倾斜指定角度
其实是改变 x轴的倾斜角度
取值为正：顺时针
取值为负：逆时针
三、3D转换
一、3D转换
增长 z轴 转换效果
二、属性
属性：perspective
做用：模拟 人眼睛到 3D投射元素的距离
注意：该属性 须要加在 3D转换元素的父元素上
兼容性：
火狐：-moz-perspective:
Chrome，Safari:-webkit-perspective
Opera:-o-perspective
三、3D旋转
容许元素在 x轴，y轴，z轴上进行旋转操做
属性 和 函数
属性:transform
函数：
rotateX(xdeg):以x轴为中心轴进行元素的旋转
rotateY(ydeg)
rotateZ(zdeg)
rotate3D(x,y,z,ndeg)
x,y,z,若是取值为 0的话，说明该轴不参与旋转
x,y,z,若是取值为 1的话，说明该轴是参与旋转的
rotate3d(0,0,1,45deg)-- rotatez(45deg)
rotate3d(1,1,0,45deg)
四、3D位移
一、做用
改变元素在z轴上的位置
二、属性 和 函数
属性：transform
函数：
translateZ();
translate3D(x,y,z)
三、属性 : transform-style
做用：规范当前元素的子元素如何去排列3D位置
取值：
一、flat
默认值，不保留子元素的3D位置
二、preserve-3d
保留子元素3d位置
二、过渡
一、什么是过渡
使得CSS的属性值在一段时间内平滑过渡
二、过渡的 4个要素(属性)
一、指定过渡属性
属性：transition-property
做用：规定应用过渡效果的CSS属性名称
取值：
一、none
二、all
三、property-name : 具体使用过渡效果的属性名称
能够设置过渡的属性：
一、颜色属性
二、取值为数值的属性
三、转换属性
transform
四、渐变属性
五、visibility 属性
六、阴影属性
ex:
div{
transition-property:background;
}
二、指定过渡时间
属性：transition-duration
取值：以秒(s) 或 毫秒(ms) 做为单位的
默认值为0，即没有过渡效果
ex:
div{
transition-property:background;
transition-duration:300ms;
}
三、指定速度时间曲线函数
属性：transition-timing-function
取值：
一、ease : 默认值，慢速开始，快速变快，慢速结束
二、linear : 匀速
三、ease-in : 慢速开始，加速结束
四、ease-out: 快速开始，减速结束
五、ease-in-out:慢速开始和结束，中间先加后减
ex:
div{
transition-property:background;
transition-duration:300ms;
transition-timing-function:linear;
}
四、指定过渡延迟时间
属性：transition-delay
取值：ms 或 s 做为单位的数值
三、触发过渡效果
通常都是由用户行为触发
五、过渡属性-过渡子属性的简写模式
transition:property duration timing-function delay;
三、动画
一、什么是动画
使元素从一种样式逐渐变化为另外一种样式
其原理是经过 关键帧 控制动画的每一步
注意：浏览器兼容性
经过了浏览器前缀解决兼容性
-moz-
-webkit-
-o-
二、使用动画的步骤
一、声明动画
声明动画的名称，而且指定关键帧的信息
关键帧：
一、时间点
二、该时间点上的状态(样式)
二、使用动画
经过动画属性，将动画效果绑定到某个元素上
三、声明动画
语法
@keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
... ...(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}
兼容 Chrome Safari
@-webkit-keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
... ...(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}
兼容 Firefox
@-moz-keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
... ...(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}
时间点：
0%(from) : 动画开始的时候
50% : 动画运行到一半的时候
100%(to) : 动画结束的时候
四、动画的调用
一、animation-name
要调用的动画名称
二、aniamtion-duration
动画完成一个周期须要用的时间
以s 或 ms 为单位
三、animation-timing-function
动画的 速度时间 曲线函数
ease
linear
ease-in
ease-out
ease-in-out
四、animation-delay
动画执行延迟时间
s|ms为单位
五、animation-iteration-count
动画播放次数
取值：
一、具体数值
二、infinite
无限次播放
六、animation-direction
动画播放方向
取值：
一、normal
默认值，正向播放，即从 0%~100%
二、reverse
逆向播放，即从100% ~ 0%
三、alternate
轮流播放，动画在奇数次数播放时，从 0% ~ 100%,动画在偶数次数播放时，从100% ~ 0%
七、animation属性
animation:name duration timing-function delay iteration-count direction;
八、animation-fill-mode
动画播放先后的填充方式
取值：
一、none
默认值，不改变默认行为
二、forwards
动画完成后，将保持在最后一个关键帧的状态上
三、backwards
动画播放前(在延迟时间内)，将元素保持在第一个帧的状态上
四、both
动画播放先后的填充模式都应用
九、animation-play-state
动画的播放状态
取值：
一、paused
暂停
二、running
播放
- 1. CSS笔记9
- 2. 9.Css——定位
- 3. HTML&CSS实验(9)
- 4. 重拾css(9)——float
- 5. 2017-9-19-css（二）
- 6. html 9 css居中
- 7. 【CSS】【9】CSS盒子的浮动
- 8. CSS自学笔记（9）:CSS拓展（二）
- 9. 第9天：CSS精灵图
- 10. CSS基础（9.position深入）
- 更多相关文章...
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • CSS 指南 - 网站建设指南
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • 适用于PHP初学者的学习线路和建议
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS笔记9
- 2. 9.Css——定位
- 3. HTML&CSS实验(9)
- 4. 重拾css(9)——float
- 5. 2017-9-19-css（二）
- 6. html 9 css居中
- 7. 【CSS】【9】CSS盒子的浮动
- 8. CSS自学笔记（9）:CSS拓展（二）
- 9. 第9天：CSS精灵图
- 10. CSS基础（9.position深入）