html&css总结

css选择器：
ID选择器 | 类选择器 | 标签选择器 | 群组选择器 | 后代选择器

选择器优先级：

标签内样式(style) > ID选择器（#div）> 类选择器（.div）> 标签选择器（div | span）

1000 100 10 1

三层嵌套

<html>

<!DOCTYPE html>
       <html>
       <head>
       <meta charset="utf-8"/>
      <title> 三层嵌套 </title>
      <meta name="keywords" content=""/>
      <meta name="description" content=""/>
      <style type="text/css">

.outer
       {
       border: 1px red solid;
       height:44px;
       background:url(images/ty-x.png) 0 0 repeat-x; /*最外层重复*/
      overflow:hidden;
       }
       .inner-left
      {
        border:solid 1px black;
        height:44px;
        background:url(images/ty-l.png) left 0 no-repeat;
      }
      .inner-right
      {
      border:solid 1px green;
      height:44px;background:url(images/ty-r.png) right 0 no-repeat;
      }
     </style>
    </head>
    <body>
          <div class="outer">
              <div class="inner-left">
                  <div class="inner-right">hello three layer</div>
             </div>
         </div>
   </body>
</html>

背景图合并

<!DOCTYPE html>
     <html>
    <head>
    <meta charset="utf-8"/>
    <title> 背景图定位 </title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <style type="text/css">
    body,div{margin:0;padding:0;}
   .outer{

height:44px;

background:url(images/ty-bg.png) 0 -44px repeat-x; /*最外层重复，背景起点通过移动y轴设置*/

overflow:hidden;

}

.inner-left{

height:44px;

background:url(images/ty-bg.png) left 0 no-repeat;

}

.inner-right{

height:44px;

background:url(images/ty-bg.png) right -88px no-repeat;

}

   </style>
   </head>
   <body>
       <div class="outer">
           <div class="inner-left">
               <div class="inner-right"> </div>
           </div>
       </div>
</body>
</html>

定位

position:absolute | relative | static | fixed | inhrit

属性的值通过设置四个方向的像素值：

left: num px | right: num px | top: num px | buttom: num px ;

一般应用中，常将absolute 与 relative 搭配使用

若设置了absolute的元素无父元素，则该元素相对于浏览器窗口定位

z-index(设置显示优先级)：num | auto;

半透明

语法：opacity: number( 0-1 之间的数值)

IE下的半透明滤镜

filter: alpha(opacity = number);

css3选择器：

链接：戳这里

边框：
圆角

border-radius: num px /*可设置上下左右四个方向半径值，IE9以上版本支持*/

多色彩边框

border-colors：color
相关属性：[ border-top-colors ] || [ border-right-colors ] || [ border-bottom-colors ] || [ border-left-colors ]

边框图像

border-image：border-image-source || border-image-slice [ / border-image-width? [ / border-image-outset ]? ]? |

| border-image-repeat

border-image-source : none | url 默认值：none 图像来源路径。

border-image-slice : [ number | percentage ]{1,4} && fill? 默认值：100% 边框背景图的分割方式

border-image-width : [ length | percentage | number | auto ]{1,4} 默认值：1 该属性用于指定边框宽度。

border-image-outset : [ length | number ]{1,4} 默认值：0 对边框背景图的扩展

border-image-repeat : [ stretch | repeat | round ]{1,2} 默认值：stretch

指定边框背景图的填充方式。

盒阴影

box-shadow

语法：

box-shadow：x 轴距离, y 轴距离, 模糊值，阴影外延值，color;
默认值：none

文本阴影

text-shadow

语法：

text-shadow:x 轴距离(px), y 轴距离(px), 模糊值(px)，color;

渐变与蒙版

相关页面

自适应与分栏

分栏

语法：

column-width:[<length>|auto] 定义每栏的宽度

column-span : none | all none:只在本栏中显示；all:横跨所有栏目并定位在栏目的Z轴之上。

column-gap : normal | <length> 定义两栏之间的间距距离

column-count : auto | 整数可以定义栏目的数目

column-rule-color:<color> 定义每栏之间边框的颜色

column-rule-width:<length> 定义每栏之间边框的宽度

（无边框(默认)|隐藏边框|点线|虚线|实线边框|双线边框|3D凹槽|3D凸槽|3D凹边|3D凸边）

弹性布局

语法：

display : box；定义子元素内容的呈现形式

box-orient：horizontal | vertical | inline-axis | block-axis | inherit

子元素的排列方式（横向或者竖向）

box-direction：normal | reverse | inherit

子元素的排列顺序

box-flex：子元素如何分配剩余空间

box-align：子元素的垂直对齐方式

box-pack：子元素的水平对齐方式

box-ordinal-group：子元素显示顺序

过渡

语法：

transition: property | duration | transition-timing-function | delay

property（要设置过渡的属性名）

property: all | none | property

duration：过渡的时间

transition-timing-function(过渡时间函数)

transition-timing-function: linear | ease-in | ease-out | ease-in-out

delay(过渡延迟时间)

过渡效果一般可以用伪类hover触发

动画Animation

语法：

animation：name duration transition-timing-function delay;

@keyframes name{

from{ property:value; }

to { property:value }

例：

<!doctype html>
     <html lang="en">
     <head>
    <meta charset="UTF-8">
    <title>cube</title>
    <style type="text/css">
    #d1
    {
        width: 100px;
        height: 100px;
        margin:100px auto;
        /*background-color: black;*/
        position: relative;
        /*-webkit-perspective: 3000;*/
        -webkit-transform-style:preserve-3d;
        -webkit-perspective: center center;
        -webkit-animation:trans-Ani 5s linear 0s infinite;

    }
    @-webkit-keyframes trans-Ani
    {
        from{
            -webkit-transform:rotateY(45deg) rotateX(45deg);
        }
        to{
            -webkit-transform:rotateY(360deg) rotateX(360deg);
        }
    }
    p{
        height: 100px;
        width: 100px;
        position: absolute;
        opacity: 0.6;
    }
    p:nth-child(1)
    {
        background-color: yellow;
        -webkit-transform: translateZ(50px);
    }
    p:nth-child(2)
    {
        -webkit-transform: translateY(-50px) rotateX(90deg);
        background-color: gray;
    }
    p:nth-child(3)
    {
        -webkit-transform: translateZ(-50px);
        background-color: blue;
    }
    p:nth-child(4)
    {
        -webkit-transform: translateY(50px) rotateX(90deg);
        background-color: purple;
    }
    p:nth-child(5)
    {
        -webkit-transform: translateX(-50px) rotateY(90deg);
        background-color: red;
    }
    p:nth-child(6)
    {
        -webkit-transform: translateX(50px) rotateY(90deg);
        background-color: green;
    }


    </style>
</head>
<body>
    <div id="d1">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>

posted @ 2014-04-01 16:26 z-turn 阅读(128) 评论(0) 收藏举报

刷新页面返回顶部

z-turn

html&css总结

公告