CSS(Cascading Style Sheets，层叠样式表) 实现了将样式与内容分离。样式的几种设置方法

  • 浏览器缺省设置
  • 外部样式表 // <link rel=”stylesheet” type=”text/css” href=”style.css” />
  • 内部样式表（位于 <head> 标签内部） // <style type=”text/css”>……</style>
  • 内联样式（在 HTML 元素内部） // style=”color:red; font-size:14px;”

background

background:red url(i/baby.jpg) no-repeat 0 0 fixed;
background-color:red/#ff0000/rgb(255,0,0,.5) ;  //默认值为transparent.

background-image:url(i/baby.jpg);
background-repeat:repeat/repeat-x/repeat-y/no-repeat;       //默认为repeat.
background-position:100px 50px/center/left/right/top/bottom;
background-attachment:fixed/scroll;

background-origin: border-box/padding-box/content-box;
background-clip: border-box/padding-box/content-box;
background-size: auto/100px 100px/100% 100%/cover(覆盖，长比边有部分不显示)/contain(一边缩放至边缘，另一边可能未填满);

background: color url position/size no-repeat ...;
(移动端sprite可以用bgp定位，用bgs缩放)

text

color:red;
text-align:center/left/right;
line-height:30px;
direction:ltr/rtl;
text-indent:5em/20%; 
word-spacing:5px/1em;
letter-spacing:10px/2em;
text-transform:none/uppercase/lowercase/capitalize;
text-decoration:none/underline/overline/line-through;
white-space:normal/pre/nowrap;

font

font: Arial,Calibri 12px/30px italic bold;
font-family
font-size
font-style:normal/italic/oblique;
font-weight:bold/normal/lighter;

list

list-style:url(i/babay.jpg) square inside;
list-style-type:square/circle/disc/none  or decimal/lower-alpha/upper-alpha/lower-roman/upper-roman;
list-style-image:(i/baby.jpg);
list-style-position:inside/outside;

table

border-callapse:callapse/separate;
border-spacing:10px;
empty-cells:show;
caption-side:top/bottom;

other

border:1px solid  red;
outline:2px dotted/dashed greed;    //位于border外围。

position:relative/absolute/fixed;
float:left/right;
clear:both/left/right;

##border-radius

border-radius: 10px;
border-radius: 10px 0 10px 0;(左上开始，顺时针)
border-left-top-radius: 10px;

##box-shadow

box-shadow: x偏移 y偏移 模糊半径 扩展半径 color 投影方式(outset(默认)/inset)

利用 box-shadow 和 animation 的加载动画(见代码下面)：
<div class="loading"></div>
.loading {
    width: .5em;
    height: .5em;
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: 1em 0 0 0 rgba(0,0,0,.1),
        .707em .707em 0 0 rgba(0,0,0,.2),
        0 1em 0 0 rgba(0,0,0,.3),
        -.707em .707em 0 0 rgba(0,0,0,.4),
        -1em 0 0 0 rgba(0,0,0,.5),
        -.707em -.707em 0 0 rgba(0,0,0,.6),
        0 -1em 0 0 rgba(0,0,0,.7),
        .707em -.707em 0 0 rgba(0,0,0,.8);
    animation: loading 1s linear infinite;
}
@keyframes loading {
    0% {transform: rotate(0);}
    12% {transform: rotate(45deg);}
    25% {transform: rotate(90deg);}
    37% {transform: rotate(135deg);}
    50% {transform: rotate(180deg);}
    62% {transform: rotate(225deg);}
    75% {transform: rotate(270deg);}
    87% {transform: rotate(315deg);}
    100% {transform: rotate(360deg);}
}

##transform

transform-origin: x-axis(left/center/right/length/%) y-axis;
transform: rotate(30deg);
transform: skew(30deg, 20deg)/skewX(30deg)/skewY(20deg);
transform: scale(2, 2)/scaleX(2)/scaleY(2);
transform: translate(x, y, z)/translateX(x)/...;

transform: matrix(a, b, c, d, e, f);

##transition

transition-property: width/bgc/transform...;
transition-duration: 1s;
transition-timing-function: ease/ease-in/ease-out/ease-in-out/linear;
transition-delay: .5s;

transition: all 1s ease-in .5s;

##animation

@keyframes animationName {
    0%/from: {...}
    10%: {...}
    .
    .
    100%/to: {...}
}
animation-name: animationName;
animation-duration: 1s;
animation-timing-function: ease/ease-in/ease-out/ease-in-out/linear/cubic-bezier;
animation-delay: .5s;
animation-iteration-count: 5/infinite;
animation-direction: normal/alternate;