css总结

最新推荐文章于 2024-08-30 15:33:13 发布

luckSll

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量345

点赞数

分类专栏：个人总结文章标签： css

本文链接：https://blog.csdn.net/qq_29030071/article/details/75017542

版权

个人总结专栏收录该内容

6 篇文章 0 订阅

订阅专栏

-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)｛｝