css扩展知识1

1.清除浮动的方法

新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“”结束前加此div引入“class=“clear””样式。这样即可清除浮动。

对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

2.用PHP压缩CSS代码

<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>
body { color: red; }

3.翻转图片

img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

4.Clearfix

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

5.隐藏和文本文字缩进 

h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}

6.根据不同的文件类型，展示不同的链接，看下面的代码

/* external links */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}

7.去除textarea在IE当中的滚动条效果

textarea{ 
overflow:auto; 
}

8.CSS文字阴影效果

p { text-shadow: 4px 4px 4px #001; }

9.垂直居中

.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}

10.打印分页符

.page-break{
page-break-before:always;
}

11.文字旋转

.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

12.A链接伪类（按顺序）

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

13.设计梯子型文字

h1 {
font-size: 72px;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

14.使用**@import**导入外部CSS文件

<style type="text/css">
    @import url("外部样式表的文件名称");
</style>

 

标签：right,color,知识,扩展,transform,rotate,CSS,background,css
来源： https://www.cnblogs.com/gaoxinru114/p/16320612.html