CSS3 基础

【伪元素选择器 】

/* first-line 设置第一行*/
p:first-line
{
color: crimson;
}
/* first-letter 设置第一个字符*/
p:first-letter
{
color: green;
}
/* before 设置列表项以前的样式*/
li:before
{
content: "--";
font-size: 10px;
color: darkgrey;
}
/* after 设置列表项以后的样式*/
li:after
{
content: "注释内容";
font-size: 10px;
color: darkgrey;
}

View Code

 

【结构性伪类选择器】

:root /*设置页面顶级元素的样式*/
{
background-color: Gray;
}
body /*若是同时设置了 root 和 body，那么body只设置内容部分的样式 */
{
background-color: Black;
}
div *:not(h1) /*除了h1标签，其余div下元素都设置蓝色*/
{
color: blue;
}
:empty /* 设置没有内容时的样式*/
{
color: Green;
}
:target /* 设置页内超连接所指向区域的样式*/
{
background-color: Orange;
}

View Code

 

【子元素选择器】

li:first-child /*指定第一个子元素的样式*/
{
   background-color: Yellow;
}
li:last-child /*指定最后一个子元素的样式*/
{
   background-color: Blue;
}
li:nth-child(3) /*指定第（3）个子元素的样式*/
{
    background-color: Red;
}
 li:nth-last-child(2) /*指定倒数第（2）个子元素的样式*/
{
    background-color: Red;
}
li:nth-child(odd){} /* 指定基数的子元素的样式*/ 
li:nth-last-child(odd){} /* 指定倒数是基数的子元素的样式*/ 
li:nth-child(even){} /* 指定偶数的子元素的样式*/ 
li:nth-last-child(even){} /* 指定倒数是偶数的子元素的样式*/
p:nth-of-type(odd){} /*指定同类型基数的子元素的样式，同类型！*/
p:nth-of-type(even){} /*指定同类型偶数的子元素的样式，同类型！*/
li:only-child{} /* 设置只有一个子元素的样式*/

/*设置li的样式每4个循环一次*/
li:nth-child(4n+1){}
li:nth-child(4n+2){}
li:nth-child(4n+3){}
li:nth-child(4n){}

View Code

 

【CSS3盒子相关样式】

/*display: inline / block / inline-block;
inline内联显示；block块显示。
inline-block显示效果上同inline,可是inline设置宽度等样式无效，使用inline-block则能够设置宽度等。*/

/*inline-table 能够设置table的display属性，让table左右能够放置元素。*/

/* list-item 把div元素做为列表显示*/
div
{
    display: list-item;
    list-style-type: circle;
    margin-left: 30px;
}


/* overflow 设置对盒子中容纳不下的内容的显示*/
overflow: scroll;
overflow-x: hidden;
overflow-y: scroll; /*设置只能上下滚动*/


/* box-shadow 对盒子设置阴影*/
box-shadow:0px 0px 10px gray;


/* 指定针对元素的宽度和高度的计算方法*/
box-sizing:border-box; /*当前元素的填充间距包括在盒子中*/
box-sizing:content-box; /*当前元素的填充间距不包括在盒子中*/

View Code

 

【CSS3背景与边框相关样式】

background-clip: border-box; /*包括边框和内边距*/
background-clip: padding-box; /*包括内边距，不包括边框*/
background-clip: content-box; /*不包括边框或内边距*/

background-origin: border-box; /*从边框开始绘制背景图片*/
background-origin: padding-box; /*从内边距开始绘制背景图片*/
background-origin: content-box; /*从内容局域开始绘制背景图片*/

/*在一个元素中设置多个背景图片,以逗号分隔设置属性*/
background-image:url("a.png"),url("b.png");
background-repeat:repeat-x,no-repeat;
background-position:100%,100%,center,center;
width:1000px;
height:800px;

/*圆角边框的绘制*/
border-radius: 20px 30px 10px 50px;

/*使用图像边框*/
-webkit-border-image:url("a.png") 50 50 50 60;
/*九宫格*/
width:200px;

View Code

 

【CSS3字体相关样式】 

/* text-shadow 给文字添加阴影*/
text-shadow: 5px 5px 5px Gray;

/* 使用服务器端字体*/
@font-face 
{
    font-family:MyArial;
    src:local("Arial"),
        url(fontname.ttf)format("truetype");
}

/* 修改文字种类而保持字体尺寸不变 */
font-size-adjust:0.60;
/*计算aspect的值： x-height:58 font-size:100px  aspect:0.58*/
/* c=(a/b) s */

View Code

 

【CSS3中的变形处理】

/* transform 旋转*/
transform:rotate(45deg);/*旋转45°*/
-webkit-transform:rotate(45deg);

/* transform 缩放*/
transform:scale(3.5);/* 放大3.5倍*/

/* transform 倾斜*/
transform:skew(30deg,30deg); /*水平方向倾斜30°，垂直方向倾斜30°*/

/* transform 移动*/
transform:translate(0，250px,);/* 水平方向不动，垂直方向移动250px */

/*指定变形的基准点*/
transform-origin: right bottom;
transform-origin: top right;

View Code

 

【CSS框架】
1.LESS
LESS快速入门：http://less.bootcss.com/

2.SASS
官网：http://sass-lang.com/
入门：http://www.w3cplus.com/sassguide/index.html