css总结

来源：互联网发布：淘宝差评师曝光台编辑：程序博客网时间：2024/06/05 17:07

-webkit-、-moz-、-o-、-ms-这四个前缀
-ms代表ie内核识别码
-moz代表火狐内核识别码
-webkit代表谷歌内核识别码
-o代表欧朋【opera】内核识别码

设置文字溢出隐藏，超出的用省略号显示p{    text-overflow: ellipsis;    overflow: hidden;    height: .8rem;    white-space: nowrap;}

引用自己的字体@font-face{    font-family: myFirstFont;    src: url('Sansation_Light.ttf'), url('Sansation_Light.woff')
 url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}
.div4 {            /**                多行文本溢出使用了webkit的css扩展属性，只是用于webkit浏览器以及移动端                -webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：                display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。                -webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。            */            display: -webkit-box !important;            overflow: hidden;            text-overflow: ellipsis;            word-break: break-all;            -webkit-box-orient: vertical;            -webkit-line-clamp: 3;            width: 500px;            border: 1px solid red;        }
文本装饰：h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}

文本转换   p {text-transform:uppercase;}   p{text-transform:lowercase;}   p{text-transform:capitalize;}

把段落设置为小型大写字母字体       font-variant:small-caps       font-variant:inherit  继承父元素的font-variant属性值
给段落第一个单词设置样式  p:first-letter{     color:#ff0000;     font-size:xx-large;   }给段落第一行设置样式  p:first-line{     color:#0000ff;     font-variant:small-caps;     }

指定字符间的间距    letter-space:2px;指定行间距    line-height:100px;指定单词间的空白空间    word-spacing:50px;禁止文本换行    white-space:nowarp;给文本添加阴影    text-shadow：2px 2px 2px #ff0000;(水平距离，垂直距离，模糊距离，颜色)
链接样式：必须按顺序    a:link {color:#000000;}      /* 未访问链接*/    a:visited {color:#00FF00;}  /* 已访问链接 */    a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */    a:active {color:#0000FF;}  /* 鼠标点击时 */
关于元素背景    background-color    background-image    background-repeat    background-attachment   背景图片位置 可固定fixed    background-position    background:#ffffff url('img_tree.png') no-repeat right top;     
关于列表标记   ul.a {list-style-type: circle;}  空心圆   ul.b {list-style-type: square;}   实心方形   ol.c {list-style-type: upper-roman;}  罗马   ol.d {list-style-type: lower-alpha;}   a,b,c设置标记为图片   ul{list-style-image: url('sqpurple.gif');}   ul{list-style: square url("sqpurple.gif");}如果使用缩写属性值的顺序是：   list-style-type   list-style-position (有关说明，请参见下面的CSS属性表)   list-style-image设置标记为图片浏览器兼容写法   ul { list-style-type: none; padding: 0px; margin: 0px; }   ul li { background-image: url(sqpurple.gif);           background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }

<body><p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p><span style="cursor:auto">auto</span><br><span style="cursor:crosshair">crosshair</span><br><span style="cursor:default">default</span><br><span style="cursor:e-resize">e-resize</span><br><span style="cursor:help">help</span><br><span style="cursor:move">move</span><br><span style="cursor:n-resize">n-resize</span><br><span style="cursor:ne-resize">ne-resize</span><br><span style="cursor:nw-resize">nw-resize</span><br><span style="cursor:pointer">pointer</span><br><span style="cursor:progress">progress</span><br><span style="cursor:s-resize">s-resize</span><br><span style="cursor:se-resize">se-resize</span><br><span style="cursor:sw-resize">sw-resize</span><br><span style="cursor:text">text</span><br><span style="cursor:w-resize">w-resize</span><br><span style="cursor:wait">wait</span><br></body>
设置图片透明度：     opacity:.4; /后代元素会继承父元素的opacity     filter:alpha(opacity=40)   //适用于IE8及更早版本
将表格标题显示在表格下方 ：caption{caption-side:bottom;}
css3系列
    css盒阴影 div{box-shadow: 10px 10px 5px #888888;}
    边界图片：
 #round{       -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */               -o-border-image:url(border.png) 30 30 round; /* Opera */       border-image:url(border.png) 30 30 round;
              }       #stretch{             -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */     -o-border-image:url(border.png) 30 30 stretch; /* Opera */    border-image:url(border.png) 30 30 stretch;             }
       背景图可以有多个：
#example1 {background-image: url(img_flwr.gif), url(paper.gif);                         background-position: right bottom, left top;
                       background-repeat: no-repeat, repeat; }
      background-clip属性：
           background-clip: padding-box;
   background-clip: content-box;
           background-clip: border-box;
           background-clip: text;
           -webkit-background-clip:text;只显示文字部分，此时还得设置 -webkit-text-fill-color:transparent
     
      css3线性渐变：
 1、从上到下的线性渐变
     #grad {  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */                background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */                    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */                 background: linear-gradient(red, blue); /* 标准的语法 */
                     }
 2、从左到右的渐变
      #grad {  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */         background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */            background: linear-gradient(to right, red , blue); /* 标准的语法 */                   
                      }
      
3、对角线性渐变
#grad {  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */}               
            4、重复的线性渐变
#grad {  /* Safari 5.1 - 6.0 */ 
                   background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);  /* Opera 11.1 - 12.0 */ 
                   background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);  /* Firefox 3.6 - 15 */ 
                  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);  /* 标准的语法 */  
                  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
    css3径向渐变
        1、颜色节点均匀分布
     #grad {  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */   background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */             background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */           background: radial-gradient(red, green, blue); /* 标准的语法 */
              }
 2、颜色节点不均匀分布
        #grad {  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
                     background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */  
                     background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */  
                     background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
              }
3、设置径向渐变的形状（ellipse：椭圆(默认)，circle：圆形）
             #grad {  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */  
                      background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */  
                      background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */  
                      background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */}   
        4、重复的径向渐变
    #grad {  /* Safari 5.1 - 6.0 */  
                     background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);  
                    /* Opera 11.6 - 12.0 */  
                     background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); 
                    /* Firefox 3.6 - 15 */ 
                     background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); 
                    /* 标准的语法 */  
                     background: repeating-radial-gradient(red, yellow 10%, green          15%);}
    
     css3 2D转换
div{transform: rotate(30deg);
            -ms-transform: rotate(30deg); /* IE 9 */
            -webkit-transform: rotate(30deg); /* Safari and Chrome */
           }
    css3 过渡
div{  
width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s
｝
        div:hover{   width: 200px;                     height: 200px;                     -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */                     transform: rotate(180deg);
                 }
    css3动画
1.自定义动画名：
     @keyframes myfirst{    
from {background: red;}  
to {background: yellow;}
      }
      
@-webkit-keyframesmyfirst/* Safari 与 Chrome */{
    from {background: red;}   
 to {background: yellow;}
      }@-moz-keyframes myfirst /* Firefox */
@-o-keyframes myfirst /* Opera */
2.animate属性
    div{
       animation: myfirst 5s linear 2s infinite alternate;    /* Safari 与 Chrome: */    
-webkit-animation: myfirst 5s linear 2s infinite alternate;}/*依次是：动画名、动画持续时间、动画运行速度、动画延迟时间、是否无限循环、是否逆向运动
 
     css3多列
div {
             -webkit-column-count: 3; /* Chrome, Safari, Opera */
             -moz-column-count: 3; /* Firefox */
             column-count: 3; /*将文本分为3列*/
          }
      设置元素是否可让用户调整：  resize:both（宽高均可调整）/none/horizontal(可调整宽度)/vertical(可调整高度)
     设置图片为缩略图：img {border: 1px solid #ddd;border-radius: 4px;padding: 5px;}
     多媒体查询：
 @media screen and (min-width: 480px) {
       body {
                background-color: lightgreen;
          }
 }
      @media screen and (max-width: 1000px) and (min-width: 700px)｛｝

阅读全文

0 0