CSS常用属整理.doc

CSS学习备忘一、CSS的基本语法1、语句基本结构HTML选择器 属性1：值1；属性2：值2；属性n；值n2、类和ID及其他类：HTML选择器.classname （不唯一）class=“classname”ID：HTML选择器#Idname （唯一）id=“Idname”关联：HTML选择器1 选择器2 组合：HTML选择器1，选择器2， 伪类和伪元素：HTML选择器：pseudoname 不能用class/id调用二、在网页中加入样式1、加入外部链接rel：取值stylesheet（固定样式）或alternamte stylesheet（交互样式）type：取值text/css或text/javascripttitle：用于合成样式表media：指定媒体介质，不常用，取值screen, print, projection, aural, Braille, tty, tv, all。默认screen。2、植入CSS样式表 *最好加注释标记于样式表前后。3、导入CSS样式表 *比外部链接优先，总是读取。4、行内CSS样式*Head部分最好加5、脚本引用CSS属性名称删掉连字符，并将其后第一个字母大写，例如font-familyfontFamily以上可混合使用。6、SPAN与DIV标记SPAN无结构意义，纯粹为样式服务DIV是块元素，会引入行分隔。7、可以使用Style属性的HTML选择器 三、控制文字与段落1、CSS的长度值单位长度：em，ex，pc（1/6寸），px（像素），pt（1/72寸），mm，cm，in。百分比长度：xxx% 均可取正负，但某些情况非负2、文字控制font-family: 字体名或族名族名：sans-serif, serif, monospace, fantasy, cursive等font-style: normal/italic/obliquefont-variant: normal/small-capsfont-weight: normal/bold/bolder/lighter或100/200/300/900font-size: 长度或百分比（非负）/xx-large/x-large/large/medium/small/x-small/xx-small/larger/smallerfont: 风格 变形 加粗 大小/行高 族科3、文本控制text-align: left/right/center/justifytext-indent: 长度或百分比（非负）letter-spacing: 长度vertical-align: 百分比/baseline/sub/super/top/text-top/middle/bottom/text-bottomline-height: 数值或百分比/normaltext-transform: none/captalize/uppercase/lowercasetext-decoration: underline/overline/line-through/blink/none四、控制颜色和背景1、颜色表示系统关键字：140种RGB：RGB(r,g,b) 可以为数值或百分比十六进制：#rrggbb（某些可简化为#rgb）2、控制颜色color: 颜色background-color: 背景颜色3、控制背景background-image: url(.)/nonebackground-repeat: repeat/repeat-x/repeat-y/no-repeatbackground-attachment: scroll/fixedbackground-position: 数值或百分比/top/bottom/center/left/right （取两个值）background: 背景色/背景图/平铺/固定/位置五、对网页元素格式化1、边界设置margin-top: 数值或百分比/automargin-right, margin-bottom, margin-left同上margin: 上 右 下 左 （缺省取对边）2、边框设置border-top-width: 数值（非负）/none/thin/medium/thickborder-right-width, border-bottom-width, border-left-width 同上border-width: 上 右 下 左 （缺省取对边）border-color: 上 右 下 左 （缺省取对边）border-style: none/dotted/solid/double/groove/ridge/inset/outset 取四个值上 右 下 左 （缺省取对边）border-top: 宽度 样式 颜色border-right, border-bottom, border-left 同上border: 宽度 样式 颜色 （不能分开定义）3、填充距设置padding-top: 数值（非负）padding-right, padding-bottom, padding-left 同上padding: 上 右 下 左 （缺省取对边）4、宽度和高度width: 数值或百分比（非负）/autoheight: 数值（非负）/auto5、图文混排float: none/left/rightclear: none/left/right6、鼠标样式cursor: auto/crosshair/default/hand/move/e-resize/ne-resize/nw-resize/n-resize/se-resize/sw-resize/s-resize/ w-resize/text/wait/help7、超级链接a:link 普通a:visited 已访问a:active 活动a:hover 悬停六、定位网页元素position: absolute/relative/staticleft: 数值或百分比/autotop: 数值或百分比/autowidth: 数值或百分比/auto *height: 数值或百分比/auto *clip: rect (上 右 下 左) *visibility: visible/hidden/inheritoverflow: visible/hidden/scroll/auto *z-index: 整数/auto*仅当position: absolute七、建立项目列表display: none/block/list-item/inlinewhite-space: normal/pre/nowraplist-style-type: disk/circle/squre/decimal/lower-roman/upper-roman/lower-alpha/upper-alpha/nonelist-style-image: url()list-style-position: outside/insidelist-style: 选type image position任意填入，顺序无所谓八、滤镜1、Alpha 透明filter: alpha(opacity=x1, finishopacity=x2, style=x3, startx=x4, starty=x5, finishx=x6, finishy=x7)x1, x2: 透明度（0-100）同时使用则渐进x3: 0-无渐进，1-直线渐进，2-圆形渐进，3-矩形辐射2、Blur 模糊filter: blur(add=x1, direction=x2, strength=x3)x1: 叠加原对象，非0/True是，0/False否x2: 方向，0/45/90/135/180/225/270/315x3: 模糊半径（px），缺省53、Chroma 滤色镜filter: chroma(color=颜色)4、Dropshadow 阴影filter: dropshadow(color=颜色, offx=x1, offy=x2, positive=x3)x1: 水平偏移，正右负左x2: 垂直偏移，正下负上x3: 阴影效果，非0/True有，0/False无5、FlipX，FlipY 翻转filter: flipx()filter: flipy()6、Glow 光晕filter: glow(color=颜色, strength=x)x: 晕圈强度范围7、Invert 反色filter: invert()8、Gray 黑白filter: gray()9、Mask 遮罩filter: mask(color=颜色)10、Shadow 渐进阴影filter: shadow(color=颜色, direction=x)x: 投影方向，0/45/90/135/180/225/270/31511、水波纹filter: wave(add=x1, freq=x2, lightstrength=x3, phase=x4, strength=x5)x1: 叠加原对象，非0/True是，0/False否x2: 波动个数（频率）x3: 光照强度（0-100）x4: 初相（0-100）x5: 振幅12、Xray X光filter: xray()13、Light 投射filter: light(enabled=1)脚本方法：addambient, addcone, addpoint, changcolor, changstrength, clear, movelight14、混合过渡filter: blendtrans(duration=时间)filter: revealtrans(duration=时间, transition=效果)效果取值0-23九、CSS延伸功能（CSS2）1、打印page规则page 全部页；page: left 左页；page: right 右页打印属性size: 宽 高/auto/landscape/portrait *mark: crop/cross/nonemargin-top: 长度或百分比 *margin-right, margin-bottom, margin-left 同上margin: 上 右 下 左 *page-break-before: auto/always/avoid/left/rightpage-break-after: auto/always/avoid/left/rightpage-break-inside: auto/avoidorphans: 行数（默认2）widows: 行数（默认2）page: auto/page标识符*不能用em或ex作长度单位2、声音时间单位：ms，s频率单位：Hz，KHz角度单位：deg，rad，grad 可以为负pause-before: 时间pause-after: 时间pause: 前 后 （省略同前）cue-before: url()cue-after: url()cue: 前 后 （省略同前）volume: 百分比/silent/x-soft/soft/medium/loud/x-loudplay-during: url() auto/none/mix/repeatazimuth: center/center-left/left/far-left/left-side/center-right/right/far-right/right-side/leftwards/rightwards/ behind/角度elevation: 角度（-90-90）/lower/higher/below/above/levelpitch: 频率/x-low/low/medium/high/x-h