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 选择器的权值为 1003.  Class 类选择器的权值为 104.  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-positionbackground-image:url('img_tree.png');background-repeat:no-repeat;    图片不重复background-position:right top; 图片显示在右上角;(left|right|center加top|center|bottom) /*图片固定 默认scroll卷轴*/background-attachmentbackground-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-decorationtext-decoration:noneunderline定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过文本下的一条线。blink        定义闪烁的文本。inherit        规定应该从父元素继承 text-decoration 属性的值。/*文本改变 大小写 骆驼 默认none*/text-transform:none;  capitalize文本中的每个单词以大写字母开头。uppercase定义仅有大写字母。lowercase定义无大写字母，仅有小写字母。inherit        规定应该从父元素继承 text-transform 属性的值。/*文本缩进*/text-indent:50px; 首行缩进50pxtext-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-alignimg.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-familyfont-family:"Times New Roman",Times,serif;/*字体大小*/font-sizeh2 {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-zero0开头的数字标记。(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;   轮廓样式 小点nonedotteddashedsoliddoublegrooveridgeinsetoutsetinherit/*外边据*/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；absolutefixedrelativestaticinherit/*层叠元素*/img{position:absolute;      --绝对位置 相对HTMLleft: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 urlautocrosshairdefaultpointermovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetextwaithelp/*图片浮动 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                简写属性，用于在一个属性中设置四个过渡属性。3transition-property        规定应用过渡的 CSS 属性的名称。3transition-duration        定义过渡效果花费的时间。默认是 0。3transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3transition-delay        规定过渡效果何时开始。默认是 0。3/**动画**/@keyframes规定动画。3animation所有动画属性的简写属性，除了 animation-play-state 属性。3animation-name规定 @keyframes 动画的名称。3animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3animation-timing-function规定动画的速度曲线。默认是 "ease"。3animation-delay规定动画何时开始。默认是 0。3animation-iteration-count规定动画被播放的次数。默认是 1。3animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3animation-fill-mode规定对象动画时间之外的状态。色值 RGB颜色模式 255，0，0 16进制图片矢量图：计算出来的不失真，但是多颜色不好弄.ai 位图：画点点*.bmp、*.pcx、*.gif、*.jpg、*.tif、photoshop的*.psd等；