css3参考

http://www.w3school.com.cn/cssref/index.asp

</pre><pre code_snippet_id="611265" snippet_file_name="blog_20150303_1_6773404" name="code" class="css"></pre><pre code_snippet_id="611265" snippet_file_name="blog_20150303_1_6773404" name="code" class="css"><pre name="code" class="css">CSS3 模块:
选择器
框模型
背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面




选择器:
http://www.w3school.com.cn/cssref/css_selectors.asp

/*ID选择器 调用:id="para1"*/		
#para1{
 /*边框靠左N像素*/
 margin-left:50px;
 /*字体居中*/
 text-align:center;
}


/*类选择器 调用:class="center"*/
.center {
 text-aling:center; 
}

/*所有元素:所有元素背景设置*/
*{
  background-color:red;
}



元素选择:

/*修改html标签 element body背景设置*/
body{
 background-color:red;
}

/*所有h1 和p设置*/
h1,p{
 background-color:yellow;
}

/*选择 <div> 元素内部的所有 <p> 元素。*/
div p{
 background-color:yellow;
}

/*选择父元素为 <div> 元素的所有 <p> 元素;和空格的区别的这个必须是紧挨着div的P标签才被选择*/
div>p{
 background-color:yellow;
}

/*紧挨着div标签后的p元素，不属于div*/
div+p{
   background-color:yellow;
}



属性选择:

/* [attribute]  所有带有target属性的元素*/
[target]
{ 
background-color:yellow;
}

[src^="https"] 属性表达式以开头
[src$=".pdf"]  属性表达式以结尾
[src*="abc"]   属性表达式包含


/*a标签 选择 target="_blank" 的所有元素。*/
a[target=_blank]
{ 
background-color:yellow;
}

/*所有title属性等于flower的元素 */
[title~=flower]
{ 
background-color:yellow;
}

/*选择 lang 属性值以 "en" 开头的所有元素。*/
[lang|=en]
{ 
background-color:yellow;
}


:开头状态首行等特殊


鼠标一些状态选择:
a:link	    {background-color:yellow;}        选择所有未被访问的链接。
a:visited   {background-color:yellow;}        选择所有已被访问的链接。	
a:active    {background-color:yellow;}        选择活动链接。	鼠标点击后
a:hover	    {background-color:yellow;}        选择鼠标指针位于其上的链接。
input:focus{ }                                获得焦点


p:first-letter{}      p标签首行第一个字母
p:first-line{}        p标签第一行
p:first-child         选择属于父元素的第一个子元素的每个 <p> 元素。（同一个段落div下第一个P元素的所有子元素）


p:before{content:"台词：";}               在每个 <p> 元素的内容之前插入内容。
p:after{content:"--台词";}                 在每个 <p> 元素的内容之后插入内容。content: " :" attr(href) ;超链接后加入它自己的超链接地址

p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。
p~ul{background:#ff0000;}  element1~element2 选择前面有 <p> 元素的每个 <ul> 元素。(同父窗体下P后的每一个ul)

:root	        选择文档的根元素。	 
p:empty	        选择没有子元素的每个 <p> 元素（包括文本节点）。	 
#news:target	选择当前活动的 #news 元素。锚标签


input:enabled	选择每个启用的 <input> 元素。	 
input:disabled	选择每个禁用的 <input> 元素	 
input:checked	选择每个被选中的 <input> 元素。 
 
:not(p)        所有非P元素的元素:not(selector) 可以用其它选择器

::selection	选择被用户选取的元素部分。鼠标选中


counter-reset	        创建或重置一个或多个计数器。
counter-increment	递增或递减一个或多个计数器。
content                 :before 以及 :after 伪元素配合使用，来插入生成内容。

/*body初始化一个计数器,h2自增计数器 content输出*/
body {counter-reset:TestDing; } 
h2:before{
  counter-increment:TestDing;
  content:"HH" counter(TestDing) "--";
}













外链
<link rel="stylesheet" type="text/css" href="mystyle.css">

内部 
<style type="text/css">
body {background-image:url("images/back40.gif");}
</style>

内联 内嵌
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

!important
<div class="demo2" id="demo2" style="background: yellow !important"></div>



优先级: !important>内嵌>内部(ID选择器>类选择器) >元素选择器

1.  内联样式表的权值最高 1000；
2.  ID 选择器的权值为 100
3.  Class 类选择器的权值为 10
4.  HTML 标签选择器的权值为 1
具体浏览器具体分析:


颜色三种表达方式
color:red;
color:#00ff00;     16进
color:rgb(0,0,255);RGB



背景：
/*背景颜色*/
background-color   background-color:#6495ed;
/*背景图片*/
background-image   background-image:url('paper.gif');
/*背景重复，默认垂直和水平方向重复*/
background-repeat  
background-image:url('gradient2.png');
background-repeat:repeat-x;X轴重复,左右重复,铺满图片大小X轴
background-repeat:repeat-y;Y轴重复,上下重复,铺满图片大小Y轴
background-repeat:no-repeat;不重复 ;inherit继承父类
/*图片位置 仅指定一个关键字，其他值将会是"center"*/
background-position
background-image:url('img_tree.png');
background-repeat:no-repeat;    图片不重复
background-position:right top; 图片显示在右上角;(left|right|center加top|center|bottom) 

/*图片固定 默认scroll卷轴*/
background-attachment
background-image:url('img_tree.png');
background-repeat:no-repeat;    图片不重复
background-attachment:fixed;    图片固定，上下拖动，图片不动。默认scroll跟随文章往上走。inherit集成父元素。

http://www.w3school.com.cn/cssref/index.asp#background



文本：
/*元素文本水平对齐方式*/
text-align:left;
right|center|justify(两端对齐)|inherit(继承父元素)



/*文本修饰  默认none 定义标准文本，可给超链接去下划线*/
text-decoration
text-decoration:none
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	        定义闪烁的文本。
inherit	        规定应该从父元素继承 text-decoration 属性的值。


/*文本改变 大小写 骆驼 默认none*/
text-transform:none;  
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	        规定应该从父元素继承 text-transform 属性的值。


/*文本缩进*/
text-indent:50px; 首行缩进50px
text-indent:50%;  首行缩进50%

/*文本阅读方向 默认从左往右读ltr*/
direction:ltr; 
direction:rtl;  从右往左读


/*文字阴影*/
text-shadow: 2px 2px 2px red;
text-shadow: h-shadow v-shadow blur color;
text-shadow: 水平拉伸 垂直拉伸 模糊的距离 颜色


/*水平对齐方式 */
vertical-align
img.top {vertical-align:text-top;} 顶端对齐
baseline	默认。元素放置在父元素的基线上。
sub	        垂直对齐文本的下标。
super	        垂直对齐文本的上标
top	        把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle          把此元素放置在父元素的中部。
bottom	        把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。 
%	        使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	        规定应该从父元素继承 vertical-align 属性的值。
length


/*空白处理方式  不换行*/
white-space:nowrap; 
normal  	默认。空白会被浏览器忽略。
pre	        空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	        文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	        规定应该从父元素继承 white-space 属性的值。

/*单次之间固定间距*/
word-spacing:30px;

http://www.w3school.com.cn/cssref/index.asp#text





字体：



/*设置字体系列 ，不支持第一个字体，则会尝试下一个*/
font-family
font-family:"Times New Roman",Times,serif;


/*字体大小*/
font-size
h2 {font-size:200%}   正常字体的2倍
h2 {font-size:45px;}


/*字体斜体*/
font-style:objlique;
normal 默认值。浏览器显示一个标准的字体样式。 
italic 浏览器会显示一个斜体的字体样式。 
oblique 浏览器会显示一个倾斜的字体样式。 
inherit 规定应该从父元素继承字体样式。 


/*设置粗体*/
font-weight
{font-weight:900;}
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。



/*超链接*/
a:link {color:#FF0000;}    /*正常，未访问过的链接 */
a:visited {color:#00FF00;} /* 用户已访问过的链接 */
a:hover {color:#FF00FF;}   /* 当用户鼠标放在链接上时 */
a:active {color:#0000FF;}  /*  链接被点击的那一刻 */

http://www.w3school.com.cn/cssref/index.asp#font



/*列表 空心圆开头*/

<ul  style="list-style:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
none	                无标记。
disc	                默认。标记是实心圆。
circle	                标记是空心圆。
square	                标记是实心方块。
decimal	                标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	        小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	        大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	        小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	        大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	        小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	        小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	        大写拉丁字母(A, B, C, D, E, 等。)
hebrew	                传统的希伯来编号方式
armenian	        传统的亚美尼亚编号方式
georgian	        传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	         简单的表意数字
hiragana	         标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	         标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	         标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	         标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）


/*表格*/
table, th, td
{
border: 1px solid black;    黑色实体边框
border-collapse: collapse;  重叠的边框折叠
width:100%;                 宽度
height:150px;               高度 
text-align:right;           水平字体右对齐
vertical-align:bottom;      字体垂直下底
padding:15px;               字体距离边框填充，这里是右下距离
}



/*边框样式*/
border-style:solid;
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

/*边框宽度*/
border-width:1px;
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。


/*边框颜色*/
border-color 红，绿，蓝,粉红色;    上右下左颜色


/*    边框底部操作   所有bottom  可以换成 left|right|top*/
/*边框底部左边圆半径*/
border-bottom-left-radius:33px;
/*边框底部左边圆半径*/
border-bottom-right-radius:2em;

/* 边框底部样式 */
border-bottom-style:dotted;
none	指定无边框
hidden	与"none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	指定点状边框
dashed	指定虚线边框
solid	指定实线边框
double	指定一个双边框
groove	定义双线。双线的宽度等于 border-width 的值
ridge	定义三维菱形边框。其效果取决于 border-color 的值
inset	定义三维凹边框。其效果取决于 border-color 的值
outset	定义三维凸边框。其效果取决于 border-color 的值
inherit	指定应该从父元素继承边框样式

/*结束 边框底部操作   所有bottom  可以换成 left|right|top*/





/*轮廓 类似边框*/
outline-color:red;      轮廓颜色
outline-width:45px;     轮廓宽度
outline-style:dotted;   轮廓样式 小点
none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit


/*外边据*/
margin-bottom:45px	设置元素的下外边距。
margin-left:45px	设置元素的左外边距。
margin-right:45px	设置元素的右外边距。
margin-top:20%  	设置元素的上外边距。



/*内边距属性 填充定义元素边框与元素内容之间的空间。*/
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;




/*元素高度*/
height:100%;
height:100px;
max-height:50px;      --段落的最大高度
min-height:100px;    --段落的最小高度
line-height:200%      --设置行高



/*元素宽度*/
width:100%;
width:100px;
max-width:20%;     --段落的最大宽度
min-width:150px; --段落的最小宽度




/*是否可见  占位置*/
visibility:hidden;       --不可见但是，占位置

display:none;               --不展现   不显示不占位置
none                     此元素不会被显示。 
block                    此元素将显示为块级元素，此元素前后会带有换行符。 
inline                   默认。此元素会被显示为内联元素，元素前后没有换行符。 
inline-block             行内块元素。（CSS2.1 新增的值） 
list-item                此元素会作为列表显示。 
run-in                   此元素会根据上下文作为块级元素或内联元素显示。 
compact                  CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 
marker                   CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 
table                    此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 
inline-table             此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 
table-row-group          此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 
table-header-group       此元素会作为一个或多个行的分组来显示（类似 <thead>）。 
table-footer-group       此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 
table-row                此元素会作为一个表格行显示（类似 <tr>）。 
table-column-group       此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 
table-column             此元素会作为一个单元格列显示（类似 <col>） 
table-cell               此元素会作为一个表格单元格显示（类似 <td> 和 <th>） 
table-caption            此元素会作为一个表格标题显示（类似 <caption>） 
inherit                  规定应该从父元素继承 display 属性的值。 



/*元素在固定位置显示，拖动网页位置不变*/
position:fixed;


/*相对正常位置左边少20px*/
position:relative;     
left:-20px;

/*相对正常位置向上50px*/
position:relative;
top:-50px;

/*绝对位置 对齐父元素 或者整个HTML*/
position:absolute；

absolute
fixed
relative
static
inherit











/*层叠元素*/
img
{
position:absolute;      --绝对位置 相对HTML
left:0px;               --靠左
top:0px;                --靠上
z-index:-1;             --在当前层的下一层
}



/*元素剪切 图像剪切*/
img{
position:absolute;
clip:rect(0px,60px,200px,0px);    上右下左剪切

}

/*元素溢出处理overflow*/
width:100px;
height:100px;
overflow:scroll;    --元素内容超过限制时 显示滚动条 
overflow:hidden;     --元素内容超过限制时 隐藏


/*更改光标*/
 cursor:wait 
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help



/*图片浮动 Float(浮动)*/
img
{
float:right;
}
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：






/*transition过渡属性*/
设置时间2s
从width100>width300  不同浏览器不一样

div
{
width:100px;
background:yellow;
transition-property:width;
transition-duration:2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover{width:300px;}

transition	                简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	        规定应用过渡的 CSS 属性的名称。	3
transition-duration	        定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	        规定过渡效果何时开始。默认是 0。	3



/**动画**/

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





色值 RGB颜色模式 255，0，0 16进制

图片

矢量图：计算出来的不失真，但是多颜色不好弄
.ai
 
位图：画点点
*.bmp、*.pcx、*.gif、*.jpg、*.tif、photoshop的*.psd等；