CSS大全

HTML
<pre>预格式文本。它保留了空格和换行。
<del>二十</del> <ins>十二</ins>删除文本和下划线文本
<abbr>定义缩写或首字母缩略语。
<address>定义文档作者或拥有者的联系信息。
<bdo>定义文本方向。<bdo dir="rtl">abc</bdo> 从右往左
<blockquote>定义从其他来源引用的节。使用<blockquote>元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
<dfn>定义项目或缩略词的定义。
<q>定义短的行内引用。
<cite>定义著作的标题。
<a href="#lunbo">锚点定位lunbo</a> <div id="lunbo"> 可以定位任何ID;<a name="a1">可以定name
<img align="middle"> 文字和图片居中
<img align ="right"> 图像将浮动到文本的右侧
<img alt="向左转" /> 如果无法显示图像，将显示 "alt" 属性中的文本：
------------------------------------------------------------------------------
带有可点击区域的图像映射：
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
------------------------------------------------------------------------------
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />您将在 5 秒内被重定向到新的地址。


------------------------------------------------------------------------------
HTML5
播放音频 多个source文件更好的支持更多的浏览器
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
您的浏览器不支持HTML5音频。
</audio>
播放视频 多个source文件更好的支持更多的浏览器
<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
您的浏览器不支持HTML5视频。
</video>
autoplay视频在就绪后马上播放
controls向用户显示控件，比如播放按钮
loop 循环播放
preload 预加载
src 视频的URL
width 宽度
height 高度
------------------------------------------------------------------------------
CSS选择器
*{}所有标签，统一样式
p{}标签选择器：（所有标签统一样式）
.c1{} class样式选择器：（所有名为c1的样式统一样式）
#id1{} id选择器：（id名为id1的样式，只有一个）
<p class="c1 c2"> 多重选择器：（可以从多个样式中组合选择样式，如果样式相同后面的样式会替换前面的样式）
body .c1 （body‘空格’.cr 表示 body下面的c1的样式，可以有多个空格）
.c1+p{} （+号：紧跟c1的村签的同级元素）
.c1+p{} （~号：后面所有c1后面的同级元素）
div>p{} （>：表示所有div下面的p标签）
a[title]{} （设置了title属性的a标签）
a[href='http://www.baidu.com']{} （设置了href属性='www.baidu.com'的a标签）
a[href^='http']{} （设置了href属性以'http'的开头的a标签）
a[href$='com']{} （设置了href属性以'com'的结尾的a标签）
a[href*='com']{} （设置了href属性包括'com'的a标签）
------------------------------------------------------------------------------
选择器权重
选择器优先级：（id>class>标签>*）
内联权重 A
id选择器 B
class    C
标签     D
* 选择器 F
------------------------------------------------------------------------------
字体样式(字体相关css可以继承 * body div p)
字体相关属性：(font)
CSS文字属性：
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/  
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
------------------------------------------------------------------------------
CSS边框空白
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
------------------------------------------------------------------------------
边框属性： (Border)
border-style: solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/
border-radius:20px 像素圆角
border-width:; 边框宽度
border-color:#;颜色
简写方法border：style px color; /*简写*/
border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/  
border-right : 1px solid #6699cc; /*右框线*/
------------------------------------------------------------------------------
列表属性： (List-style)
list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*缩进*/
------------------------------------------------------------------------------
定位属性： (Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切)
z-index:1 数字越大越在上面
------------------------------------------------------------------------------
CSS背景样式：
background-color:#F5E2EC; /*背景颜色*/
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
------------------------------------------------------------------------------
a标签属性：
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
text-decoration:none /*去掉下划线*/
------------------------------------------------------------------------------
鼠标光标样式：
链接手指 cursor: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
------------------------------------------------------------------------------
CSS边界样式：
margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/
------------------------------------------------------------------------------
opacity 透明度0.0-1.0
text-shadow 文本加阴影 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; 
text-shadow: 5px 5px 5px #FF0000;
box-shadow 块元素加阴影 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;  
box-shadow: 5px 5px 5px  5px #888888; 外阴影
box-shadow:inset 10px 10px 5px #888888;内阴影
4边不同的阴影
box-shadow:-10px 0 10px red, /*左边阴影*/  
10px 0 10px yellow, /*右边阴影*/  
0 -10px 10px blue, /*顶部阴影*/  
0 10px 10px green; /*底边阴影*/