zoukankan      html  css  js  c++  java
  • css3-2

    1、复杂选择器
    1、兄弟选择器
    1、相邻兄弟
    选择器1+选择器2
    2、通用兄弟
    选择器1~选择器2
    2、属性选择器
    语法:[]
    [attr]:匹配附带attr属性的元素
    elem[attr]:... ...
    elem[attr1][attr2]:
    [attr=value]:
    [class~=value]:
    [attr^=value]:
    [attr$=value]:
    [attr*=value]:
    3、伪类选择器
    1、目标伪类
    :target
    2、元素状态伪类
    :enabled,匹配被激活元素(表单控件)
    :disabled,匹配被禁用元素(表单控件)
    :checked,匹配被选中元素(radio,checkbox)
    3、结构伪类
    1、:first-child
    2、:last-child
    3、:nth-child(n)
    4、:empty
    5、:only-child
    4、否定伪类
    :not(选择器)
    4、伪元素选择器
    1、作用
    匹配元素中的内容
    2、语法
    :first-letter,匹配元素的首字符
    :first-line,匹配元素的首行
    ::selection,匹配用户选中的部分

    注意: :与::的区别
    2、内容生成
    1、语法
    1、伪元素选择器
    1、:before,匹配元素内容区域之前
    2、:after,匹配元素内容区域之后
    2、属性
    属性:content
    取值:
    1、字符串 :普通文本,""
    2、url() , 生成一副图像
    3、计数器
    3、解决问题
    1、浮动元素的父元素高度问题
    div:after{
    content:"";
    display:block;
    clear:both;
    }
    2、外边距溢出
    div:before/div:after{
    content:"";
    display:table;
    }
    4、计数器
    1、声明或复位一个计数器
    属性:
    counter-reset:名 值 名 值;
    值,可以省略,默认为0

    注意:
    1、不能将计数器声明在使用的元素中

    2、设置计数器增量
    属性:counter-increment:名 值;
    值,可以省略,默认为1
    注意:
    1、哪个元素使用,就在哪个元素上声明增量
    3、使用计数器
    属性:content
    取值:counter(名);
    注意:
    配合着:before或:after一起使用
    3、多列
    1、属性
    1、分隔列
    属性:column-count
    2、列间隔
    属性:column-gap
    3、列规则
    属性:column-rule:width style color;
    2、兼容性
    添加浏览器前缀
    4、CSS Hack
    1、CSS Hack方式
    1、CSS 类内部hack
    通过 属性前缀或值后缀的方式来编写指定浏览器能够识别的样式

    hack 写法
    * *color IE6,IE7
    + +color IE6,IE7
    # #color IE6,IE7
    - -color IE6
    _ _color IE6
    color:red; IE8,IE9,IE10
    9 color:red9; IE9,IE10

    注意:
    顺序问题
    IE8,IE9,IE10()
    IE9,IE10(9)
    IE6,IE7(+)
    IE6(-)
    2、选择器Hack
    在选择器前加上浏览器能够识别的前缀
    * : IE6
    *body{
    /*IE6中body的样式*/
    }
    *+ : IE7
    *+body{
    /*IE7中body的样式*/
    }
    3、HTML都不引用Hack
    通过HTML的条件注释
    条件注释语法:
    <!--[if 条件 IE 版本]>
    内容
    <![endif]-->
    条件:
    1、gt :大于指定版本
    2、gte :大于等于
    3、lt :小于
    4、lte :小于等于
    5、!不是指定版本

    ******************************
    1、转换
    2、过渡
    3、动画
    4、CSS 优化
    ******************************
    1、转换
    1、转换简介
    1、什么是转换
    改变元素在页面中的大小,位置,角度和形状的一种方式

    2、转换分类
    1、2D转换
    使元素在x轴和y轴上发生变化效果
    2、3D转换
    在2D转换基础上,增加 z轴的变化效果
    3、转换属性
    属性:transform
    取值:
    1、none
    默认值,不进行任何转换
    2、转换函数
    表示一个或者多个转换函数,如果是多个函数的话,中间以空格分开
    4、转换原点
    属性:transform-origin
    默认情况下,原点是在整个元素的中心位置处
    取值:数值/百分比/关键字
    两个值:表示 x轴 和 y轴的位置
    三个值:表示 x轴 ,y轴 ,z轴的位置
    2、2D转换
    1、2D位移
    1、属性 和 函数
    属性:transform
    函数:
    translate(x) :元素在x轴上的位移距离,取值为正,向右移动,取值为负,向左移动
    translate(x,y) :
    x表示x轴位移距离
    y表示y轴位移距离,取值为正,向下移动,取值为负,向上移动
    translateX(x) :只改变元素在x轴上的位置
    translateY(y) :只改变元素在y轴上的位置
    取值:
    1、数值
    2、百分比
    2、2D缩放
    1、作用
    改变元素在页面中的大小
    2、属性和函数
    属性:transform
    函数:
    scale(value),如果只给一个值,那么x轴和y轴将等比缩放
    scale(x,y):改变 x轴和y轴的缩放比例
    scaleX(x):只改变x轴的缩放比例
    scaleY(y):只改变y轴的缩放比例
    取值:
    默认值 为1
    缩小:0~1 之间的数值
    放大:大于1的数值
    3、2D旋转
    1、作用
    改变元素在页面中的角度
    2、属性 和 函数
    属性:transform
    函数:rotate(ndeg)
    n取值为正,则顺时针旋转
    n取值为负,则逆时针旋转
    3、注意
    1、转换时,坐标轴会一起进行转换
    2、转换原点可以影响转换效果
    4、2D倾斜
    1、作用
    改变元素在页面上的形状
    2、属性 和 函数
    属性:transform
    函数:
    skew(xdeg) : x轴倾斜指定角度
    实际上时改变 y轴的倾斜角度
    取值为正:逆时针
    取值为负:顺时针
    skewX(xdeg) : 效果同上
    skewY(ydeg) : y轴倾斜指定角度
    实际上是改变 x轴的倾斜角度
    取值为正:顺时针
    取值为负:逆时针
    3、3D转换
    1、3D转换
    增加 z轴 转换效果
    2、属性
    属性:perspective
    作用:模拟 人眼睛到 3D投射元素的距离
    注意:该属性 需要加在 3D转换元素的父元素上
    兼容性:
    火狐:-moz-perspective:
    Chrome,Safari:-webkit-perspective
    Opera:-o-perspective
    3、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)

    transform:ratate3D(1,1,1,45deg); 同时旋转
    transform:ratatex(45deg) ratatey(45deg) ratatey(45deg); 旋转有先后顺序
    4、3D位移
    1、作用
    改变元素在z轴上的位置
    2、属性 和 函数
    属性:transform
    函数:
    translateZ();
    translate3D(x,y,z)
    3、属性 : transform-style
    作用:规范当前元素的子元素如何去排列3D位置
    取值:
    1、flat
    默认值,不保留子元素的3D位置
    2、preserve-3d
    保留子元素3d位置
    2、过渡
    1、什么是过渡
    使得CSS的属性值在一段时间内平滑过渡
    2、过渡的 4个要素(属性)
    1、指定过渡属性
    属性:transition-property
    作用:规定应用过渡效果的CSS属性名称
    取值:
    1、none
    2、all
    3、property-name : 具体使用过渡效果的属性名称
    可以设置过渡的属性:
    1、颜色属性
    color
    background-color
    border-color
    2、取值为数值的属性
    3、转换属性
    transform
    transition-property:transform;正确
    transition-property:rotatex();错误
    4、渐变属性
    background-image:linear-gradi...
    background:
    5、visibility 属性
    6、阴影属性

    注意:如果想一次性定义多个属性使用过度效果的话,那么多个属性名称之间,用,区分即可
    1、元素宽度发生变化时,使用过度
    transition-property:width;
    2、宽度和高度发生变化时使用过度效果
    teansition-property:width,height;

    ex:
    div{
    transition-property:background;
    }
    2、指定过渡时间
    属性:transition-duration
    取值:以秒(s) 或 毫秒(ms) 作为单位的
    默认值为0,即没有过渡效果
    在设置过度效果中,该属性必须设置,而且要>0
    ex:
    div{
    transition-property:background;
    transition-duration:300ms;
    }
    3、指定速度时间曲线函数
    规定了过度效果的速度曲线
    属性:transition-timing-function
    取值:预定义的值或贝塞尔曲线
    1、ease : 默认值,慢速开始,快速变快,慢速结束
    2、linear : 匀速
    3、ease-in : 慢速开始,加速结束
    4、ease-out: 快速开始,减速结束
    5、ease-in-out:慢速开始和结束,中间先加后减
    ex:
    div{
    transition-property:background;
    transition-duration:300ms;
    transition-timing-function:linear;
    }
    4、指定过渡延迟时间
    规定了,激发操作后,等待多长时间再显示过度效果
    属性:transition-delay
    取值:ms 或 s 作为单位的数值
    3、触发过渡效果
    一般都是由用户行为触发
    5、过渡属性-过渡子属性的简写模式
    transition:property duration timing-function delay;
    3、动画
    1、什么是动画
    使元素从一种样式逐渐变化为另一种样式
    其原理是通过 关键帧 控制动画的每一步

    css中实现动画,会存在兼容性问题,与动画的相关的操作尽量加上 浏览器前缀

    注意:浏览器兼容性
    通过了浏览器前缀解决兼容性
    -moz-
    -webkit-
    -o-
    2、使用动画的步骤
    1、声明动画
    声明动画的名称,并且指定关键帧的信息
    关键帧:
    1、时间点
    2、该时间点上的状态(样式)
    2、使用动画
    通过动画属性,将动画效果绑定到某个元素上
    3、声明动画
    语法
    @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) : 动画结束的时候
    4、动画的调用
    1、animation-name
    要调用的动画名称
    2、aniamtion-duration
    动画完成一个周期需要用的时间
    以s 或 ms 为单位
    3、animation-timing-function
    动画的 速度时间 曲线函数
    ease
    linear
    ease-in
    ease-out
    ease-in-out
    4、animation-delay
    动画执行延迟时间
    s|ms为单位
    5、animation-iteration-count
    动画播放次数
    取值:
    1、具体数值
    2、infinite
    无限次播放
    6、animation-direction
    动画播放方向
    取值:
    1、normal
    默认值,正向播放,即从 0%~100%
    2、reverse
    逆向播放,即从100% ~ 0%
    3、alternate
    轮流播放,动画在奇数次数播放时,从 0% ~ 100%,动画在偶数次数播放时,从100% ~ 0%
    7、animation属性
    animation:name duration timing-function delay iteration-count direction;
    8、animation-fill-mode
    动画播放前后的填充方式
    取值:
    1、none
    默认值,不改变默认行为
    2、forwards
    动画完成后,将保持在最后一个关键帧的状态上
    3、backwards
    动画播放前(在延迟时间内),将元素保持在第一个帧的状态上
    4、both
    动画播放前后的填充模式都应用
    9、animation-play-state
    动画的播放状态
    取值:
    1、paused
    暂停
    2、running
    播放

  • 相关阅读:
    Using Resource File on DotNet
    C++/CLI VS CSharp
    JIT VS NGen
    [Tip: disable vc intellisense]VS2008 VC Intelisense issue
    UVa 10891 Game of Sum(经典博弈区间DP)
    UVa 10723 Cyborg Genes(LCS变种)
    UVa 607 Scheduling Lectures(简单DP)
    UVa 10401 Injured Queen Problem(简单DP)
    UVa 10313 Pay the Price(类似数字分解DP)
    UVa 10635 Prince and Princess(LCS N*logN)
  • 原文地址:https://www.cnblogs.com/skorzeny/p/6986572.html
Copyright © 2011-2022 走看看