• css3_note


    css3基础

    css3选择器

    1. 属性选择器

      属性选择器基本上IE7+都支持,可以放心的使用,参见caniuse

      • [attr]
      • [attr=val]
      • [attr*=val]
      • [attr^=val]
      • [attr$=val]
      • [attr~=val] //[title~=bar]匹配 <a title="foo bar baz">
      • [attr|=val] //[lang|=us]匹配 <div lang="en-us">
    2. 伪类选择器(结构伪类 和 状态伪类)
      结构伪类选择器:

      • :root //根元素
      • :empty //空元素(不包含文本或子元素)
      • :targt //锚点目标
      • :not() //不包含子元素如: #floor :not(.nav), 不包含.nav的#floor
      • :first-child //.nav li:first-child 选择作为第一个子元素的li
      • :last-child //.nav li:last-child 选择作为最后一个子元素的li
      • :nth-child(n) :nth-child(odd)奇 :nth-child(even)偶 :nth-child(2n+1)
      • :nth-last-child(n) // child->last-child表示反方向
      • :nth-of-type(n) :nth-of-type(odd) :nth-of-type(even) //child->of-type表示同类型的子元素范围
      • :nth-last-of-type(n) //of-type->last-of-type 反方向
      • :only-child //唯一子元素 ul li:only-child ul只有一个li,无其他元素

      状态伪类选择器:

      • :link
      • :visited
      • :hover
      • :active
      • :focus //获得焦点
      • :enable //可用
      • :disable //禁用
      • :read-only //input 只读
      • :read-write //读写
      • :default //单选 复选 用户未交互
      • :checked //单选 复选 选中
      • :selected //select下拉框
    3. 伪元素
      常用伪元素 ::after, ::before::selection , css3为了区分伪元素和伪类选择器,伪元素改为用 双冒号作为前缀 如 ::after, 其实 :after 兼容性更好一点.

      • ::selection //代表选中的内容

      • ::before //代表元素开始标签后的位置 如:p::before

      • ::after //代表元素结束标签前的位置 如:p::after

          **伪元素通常都要设置 content 样式属性,指定其包含内容**
          content:string/url()/none/attr()/counter()
          content属性可以直接指定字符串,加载url的内容,读取标签属性值,读取计数器值
          如:
          p:after{content:'...'}
          p:after{content:none, background:url(..); position:absolute; 100px; height:100px;}
          p:after{content:url('../images/tuijian.jpg');}
          img:after{content:attr('alt');} //将图片alt属性作为after的内容
          
          h1{counter-increment:titleNum;}//为h1定义计数器titleNum, 每遇到一个h1, titleNum自增1
          h1:before{content:counter(titleNum);} //在before中输出计数器的值
          h1:before{content:"第"counter(titleNum)"个标题";}
          h1:before{content:"第"conter(titleNum, upper-alpha)"个标题";} //大写字母形式的计数器
        

    css3常用样式属性

    • border-radius:tl tr br bl (左上角顺时针 同border)

    • box-shadow: offsetX offsetY blurPx color
      blurPx是以投影开始位置为中心,向内向外虚化的像素值,如box-shadow:10px 10px 3px #000其实7 8 9, 11 12 13都是虚化的像素,10是虚化中心

    • text-shadow:offsetX offsetY blurPx color
      属性值参考 box-shadow, text-shadow据说是很早就支持的属性

    css3渐变

    css3的渐变分线性渐变和径向渐变,常用来做渐变背景,效果非常赞,节约n多字节
    可视化生成渐变的网站

    语法1: background:-webkit-gradient(linear, pos1, pos2, colorBlock1, colorBlock2, colorBlock3..);
    .main{background:-webkit-gradient(linear, 10% 10%, 100% 100%, color-stop(0.2,#aa0022), color-stop(0.5, #22aa00), color-stop(1, #0022aa) ); } //多种颜色渐变
    
    语法2:background:-webkit-gradient(linear, pos1, pos2, from(color1), to(color2));
    .main{background:-webkit-gradient(linear, 0 0, 100% 100%, from(#00aa22), to(#aa0011)); }
    
    //firefox的渐变语法
    background:-moz-linear-gradient(pos deg, colorBlock1, colorBlock2..);
    .main{ background:-moz-linear-gradient(10 10 90deg, #00aa33 20%, #aa0012 50%, #3300aa 100%); }
    background:-moz-linear-gradient(direction, color1, color2);
    .main{ background:-moz-linear-gradient(top, #aa0023, #0022aa); }
    
    //IE渐变用滤镜实现
    filter:progid:DXImageTransform.Microsoft.gradient(...);
    .main{filter:progid:DXImageTransform.Microsoft.gradent(startColor=#aa0033, endColor=#33aa00, gradientType=1);
    

    css3变形属性 transform

    • transform:scale(n); //缩放变形 scaleX(n) scaleY(n)
    • transform:skew(xdeg, ydeg); //斜切变形 应用的不是很多 skewX(ndeg) skewY(ndeg)
    • transform:rotate(ndeg);//旋转 顺时针角度增大, 转盘抽奖的场景较常用 rotateX(ndeg) rotateY(ndeg) rotateZ(ndeg)
    • transform:translate(x,y);//位移 百分比值是相对元素自身大小的,常用实现水平垂直都居中
      可分开设置 transform:translateX(npx), transform:translateY(npx) transform:translateZ(npx);
      transform:translate3d(x,y,z)同时设置3个维度的translate;
      transform:translate(x,y)同时设置xy方向的translate.
      css3的transfroam属性和PS的变形工具(ctrl+T)实现同样的效果,可参考来理解

    css3动画属性

    • transition: prop1 duration timing-fun delay, prop2 duration timing-fun delay,..

        起始值和终值之间的过渡动画, 如:
        //指定当高度变化时的过渡动画
        .nav{-webkit-transition:height 1s linear; cursor:pointer}
        //鼠标悬停时改变高度,触发过渡动画
        .nav:hover{height:300px;}
      
    • animation: animateName duration timing-fun delay iteration-count, fill-mode;

        //定义动画
        @-webkit-keyframes bgAni{
        	0% {background:#0f0;}
        	50% {background:#f00;}
        	100% {background:#00f;}
        }
        
        //调用动画
        .nav:hover{-webkit-animate:bgAni 2s linear;}
      

    animation 和 transtion 之间的区别:
    使用transtion只能指定属性的开始值和结束值,然后在两值之间平滑过渡来实现动画; animation可以定义动画过程的多个值,实现更复杂的动画。

    timing-function包括:

    • linear:线性过渡,等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);
    • ease:平滑过渡,等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);
    • ease-in:由慢到快,等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);
    • ease-out:由快到慢,等同于贝塞尔曲线(0, 0, 0.58, 1.0);
    • ease-in-out:由慢到快再到慢,等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);
    • cubic-bezier(n,n,n,n):自定义贝塞尔曲线类型,4个数值需在[0, 1]区间内;

    css3媒体查询

    针对不同的媒体类型(screen, tv, print),或不同媒体尺寸,定义对应的样式,这样我们就可以轻松地实现响应式布局

    其实媒体查询一直都支持,只是功能有限,仅支持查询媒体类型

    媒体查询的使用

    • link标签media属性 <link rel="stylesheet" type="text/css" href="style.css" media="print" />
    • 样式表中@media定义 @media screen{ .nav{ color:blue;} }
    • @import导入 @import url("css/reset.css") screen;

    媒体查询的条件

    query condition

    常用的媒体查询条件有 width, height, device-width, device-heightorientation

    //媒体类型
    all //所有设备  
    screen //电脑显示器  
    handheld //便携设备  
    print //打印用纸或者打印预览图  
    projection //各种摄影设备  
    tv //电视类型的设备  
      
    常用设备特性:  	  
    width | min-width | max-width |  //浏览器窗口的宽度
      
    height | min-height | max-height |  //浏览器窗口的高度
    
    device-width | min-device-width | max-device-width |  //设备屏幕分辨率的宽度值
    
    device-height | min-device-height | max-device-height |  //设备屏幕分辨率的高度值
    
    orientation有两个值 portrait|landscape。  //浏览器窗口的方向是纵向还是横向。当窗口的高度大于等于宽度时,是portrait,否则为landscape
    .  
      
    媒体查询示例:
    1、link标签使用媒体查询  
    <link href='css/480.css' media='only screen and (max- 480px)' rel='stylesheet' type='text/css'>  
      
    2、样式表中使用  
    @media only screen and (max- 768px) { }  
    @media only screen and (min- 480px) { }  
      
    //多条件媒体查询 and表示与 ,表示或
    @media handheld and (max- 480px), screen and (max-device- 480px), screen and (max- 600px){}
    @media all and (max-800px) and (min- 500px) {
    	.nav{
    		 100%;
    		background: pink;
    	}
    }
    
    3、Orientation 
    @media (orientation: portrait) { }  
    @media (orientation: landscape) { }
  • 相关阅读:
    hadoop使用FAQ
    kerberos在rehl6和7不兼容问题
    zookeeper使用场景
    临时记录
    SecureCRT远程工具
    jdk 环境安装
    等效
    lnmp安装及nagios
    svn的安装使用
    用户在乎的事
  • 原文地址:https://www.cnblogs.com/stephenykk/p/5171488.html
Copyright © 2020-2023  润新知