css笔记

16px=1em
（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em


）


p {text-indent: 5em;}
文本首行缩进5em


  p.uppercase {text-transform: uppercase}
  p.lowercase {text-transform: lowercase}
  p.capitalize {text-transform: capitalize}
控制字符大小写


h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
控制字母间距


p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
控制字词间距


p {white-space: normal;}
空白符、制表符删除


p {white-space: pre;}
不会删除空白符和制表符


p.small {font-variant: small-caps}
设置字体变形


p.thick {font-weight: bold}
p.thicker {font-weight: 900}
字体变粗
{
white-space: nowrap
}
不会换行


p {white-space: pre-wrap;}
保留空白符并保留换行符，还允许自动换行。


p {white-space: pre-line;}
保留换行符，并允许自动换行，但是会合并空白符


font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。


a:link {color:#FF0000;}    /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}  /* 正在被点击的链接 */


为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！
为了使定义生效，a:active 必须位于 a:hover 之后！！


list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。


outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。


position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。


p:first-child {font-weight: bold;}
选择器，第一个


:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。


height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。


h1.visible {visibility:visible}可见
h1.invisible {visibility:hidden}不可见


<span style="cursor:auto">//改变光标
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>


img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}//设置透明度


transparent隐藏


/**
*css3
*/
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
设置旋转


div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
设置圆角


-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #000000;
设置阴影


#round
{
-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round; /* Opera */
border-image:url(/i/border.png) 30 30 round;
}//ie不支持
设置图片边框


background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。


background-image:url(bg_flower.gif),url(bg_flower_2.gif);
设置多重图片


text-shadow: 5px 5px 5px #FF0000;
您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色


p {word-wrap:break-word;}
对长词进行自动换行


matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。 
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。 
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。 
scaleY(n) 定义 2D 缩放转换，改变元素的高度。 
rotate(angle) 定义 2D 旋转，在参数中规定角度。 
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。 
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。 
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。 




transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
过度效果


@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。
动画效果


-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
分列