2015-05-21

CSS速查笔记

CSS排序
.class{
content;
display;
position;
top; right; bottom; left;
margin;
padding;
width; height;
line-height;
text-align;
}

选择器

元素选择

#home HTML页面中中唯一id为home选择器
.box HTML页面中所有class为box元素
div:nth-of-type(1) 其父级的第一个DIV
div:nth-last-of-type(1) 其父级的最后一个DIV
‘div:nth-child(odd)’偶数
‘div:nth-child(even)’奇数
‘div:nth-child(3n+0)’3的倍数，从0开始

元素状态选择

:link 常用于a元素，没有被访问过的href值
:visited 常用于a元素，已经被访问过的href值
:hover 常用于a元素，鼠标停留的a或其他元素时
:active 常用于a元素，a或其他元素鼠标按下时
:focus 常用于input元素，选择时（输入时）input元素

元素内容选择

div:first-letter DIV的第一个字
div:first-line DIV的首行内容

选择元素插入内容

div:before DIV之前插入内容
sdiv:after DIV之后插入内容

其他

文字

文本线
text-decoration:
none 无
underline 下划线
overline 上划线
line-through 中划线（删除线）
blink 闪烁（大部分浏览器不支持）

边框、轮廓线
border: #000 solid 1px;
outline: #000 solid 1px;
color:
style:
width:

文字换行

word-break: break-word;
word-wrap: break-word;

文字投影

盒子投影

box-show: 1px 2px 10px 1px #000;
X轴位置
Y轴位置
投影阈值
投影大小

input button ios 去除内置样式

-webkit-appearance: none;

多行溢出

1
2

.oh1{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.oh2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;}/*多行只支持webkit内核浏览器*/

第二参考

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

p{
position:relative;
line-height:1.4em;
 /* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}

p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

css3 旋转动画

li.loading i, div.loading i { position: relative; width: 24px; height: 24px; background: url(../images/loading.png); background-size: 24px auto; margin: 0 5px -5px 0; -webkit-animation: guangyun 1s infinite linear; animation: guangyun 1s infinite linear; } 

@keyframes guangyun { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
} 

@-webkit-keyframes guangyun { 
    from { -webkit-transform: rotate(0deg); } 
    to { -webkit-transform: rotate(360deg); } 
}

鼠标悬浮图片框内放大

.home .partner li a span{display: block; overflow: hidden;width: 164px;height: 92px;}
.home .partner li img{width: 164px;height: 92px;}
.home .partner li img{
opacity:0.7;
transform:scale(1,1);
transition: all 0.2s ease-in;}
.home .partner li a:hover img {
opacity:1;
transform:scale(1.35,1.35);}

选择器