CSS常用标签.doc

css_wcj外部连接:1. 2. 内部连接:=字体属性=符合属性font字体：font-family:宋体;字号：font-size:12px; 相对大小：smaller|larger斜体显示：font-style:italic;粗体：font-weight: normal(正常)|bolder(特粗);小型的大写：font-variant:small-caps;字体颜色：color:#000000;=背景属性=符合属性background背景颜色：background-color:#FF0000;背景图片：background-image:url(images/index_03.jpg);背景重复：background-repeat:no-repeat|repeat|repeat-x|repeat-y; no-repeat不重复|repeat重复|repeat-x x轴重复|repeat-y y轴重复背景附件：background-attachment:fixed|scroll; fixed固定在页面上静止不动|scroll随背景滚动背景位置：background-position:right|left|center|bottom|top;=文本属性=单词间隔：word-spacing:normal;字符间隔：letter-spacing:normal;文字修饰：text-decoration: none|underline|overline|line-through|blink; none不修饰|underline添加下划线|overline添加上划线|line-through添加删除线|blink文字闪烁效果（有限制）纵向排列：vertical-align: text-bottom|bottom|middle|text-top|top|super|sub|baseline; text-bottom元素和上级元素的字体对齐|bottom使元素和行中最低的元素向下对齐|middle纵向对齐元素基线加上上级元素的x高度的一半的中点，其中x高度是字母“X”的高度|text-top使元素和上级元素的字体向上对齐|top使元素和行中最高的元素向上对齐|super为上标|sub作为下标|baseline使元素和上级元素的基线对齐文本转换：text-transform:none|capitalize|uppercase|lowercase; none表示使用原始值|capitalize第一个字母大写|uppercase每个单词的所有字母大写|lowercase每个字的所有字母小写文本排列：text-align: left|right|center|justify; justify为两端对齐文本缩进：text-indent:18px;文本行高：line-height:18px;处理空白：white-space:pre|nowrap; pre换行和空白都显示|nowrap不显示换行和空白文本反排：unicode-bidi|directionunicode-bidi:normal|bidi-override|embed; bidi-override表示严格按照direction属性的值重排序，忽略隐式双向运算规则|embed表示对象打开附加的嵌入direction属性的值重排序，忽略隐式双向运算规则指定给嵌入层，在对象内部进行隐式重排序。direction: rtl|ltr|inherit; ltr表示从左到右的阅读顺序|rtl表示从右到左的阅读顺序|inherit表示文本流的值不可继承=边距与填充属性=边距：margin复合属性margin-top:12px;margin-bottom:12px;margin-left:12px;margin-right:12px;衬距,填充：padding复合属性padding-bottom:12px;padding-left:12px;padding-right:12px;padding-top:12px;=边框属性=设置的颜色：border-bottom-color:#000000;border-top-color:#000000;border-right-color:#000000;border-left-color:#000000;设置边框宽度：border-bottom-width:12px;border-right-width:12px;border-top-width:12px;border-left-width:12px;设置边框高度：border-bottom-style:outset|inset|ridge|groove|double|solid|dashed|dotted|none;border-top-style:outset|inset|ridge|groove|double|solid|dashed|dotted|none;border-right-style:outset|inset|ridge|groove|double|solid|dashed|dotted|none;border-left-style:outset|inset|ridge|groove|double|solid|dashed|dotted|none; outset整个方框凸陷，即在边框内嵌入一个立体边框|inset整个方框凹陷，即在边框内嵌入一个立体边框|ridge边框成脊形|groove边框带有立体感的沟槽|double双实线|solid实线|dashed虚线，短线|dotted点线|none不显示边框=定位及尺寸属性=定位方式：position:static|absolute|fixed|relative; static无特殊定位|absol|fixed|relative相对定义，对象不可层叠，但将依据top|right|left|bottom元素定位：top|right|left|bottom对象与附近对象定位层叠顺序：z-index:1;值高的覆盖值低的浮动属性：float: none|right|left; left浮在对象左侧|right浮在对象右侧清除属性：clear:right|left|both; right不允许右边有浮动对象|left不允许左边有浮动对象|both完全没有浮动可视区域：clip: rect(auto, auto, auto, auto)|rect(top, right, bottom, left); auto对象不剪切|rect(数值)设定大小：height:12px;|width:12px;超出范围：overflow:visible|auto|hidden|scroll; visible表示不剪切内容也不添加滚动条|auto是和对象的默认值，它在需要时剪切内容并添加滚动条|hidden表示不显示超过对象尺寸的内容|scroll表示显示滚动条可见属性：visibility: inherit|visible|hidden; inherit表示继承上一个父对象的可见性，如果父对象可见，则该对象也可见，则该对象也可见，反之则可见|visible可见|hidden隐藏图像符号：list-style-image:none|url(images/index_08.jpg); url则使用绝对或相对地址指定作为符号的图像|none不指定图像列表缩进：list-style-position:inside|outside; inside列表默认属性，列表项目标记放置在文本以内，且环绕文本根据标记对齐|outside表示列表项目标记放置在文本以外，且环绕文本不根据标记对齐列表符号：list-style-type:复合属性：列表list-style=光标属性=光标属性：cursor:url(images/wcj.ico);=连接属性=a:link text-decoration: none|underline|overline|line-through|blink;a:visited text-decoration: none|underline|overline|line-through|blink;a:hover text-decoration: none|underline|overline|line-through|blink;a:active text-decoration: none|underline|overline|line-through|blink;none没有任何修饰|underline给文本增加下划线|overline给文本增加上划线|line-through给文本增加删除线|blink给文本增加闪烁线link没有访问过的超链接内容|visited含有超链接访问后的内容|hover含有超链接的内容在鼠标悬停状态的显示效果|active被激活后的显示效果=滚动条样式=1overflow内容溢出时的设置overflow-x水平方向内容溢出时的设置overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll有滚动条、hidden没有滚动条、auto。2scrollbar-arrow-color: #f4ae21; 三角箭头的颜色*/scrollbar-face-color: #333; 立体滚动条的颜色 */scrollbar-3dlight-color: #666; 立体滚动条亮边的颜色*/scrollbar-highlight- color: #666; 滚动条空白部分的颜色*/scrollbar-shadow-color: #999; 立体滚动条阴影的颜色*/scrollbar-darkshadow-color: #666; 立体滚动条强阴影的颜色*/scrollbar-track-color: #666; 立体滚动条背景颜色*/scrollbar-base- color:#f8f8f8; 滚动条的基本颜色*/=静态滤镜样式=静态滤镜样式 （filter）（只有IE4.0以上支持）filter: chroma(COLOR=#000000);chroma 对所选择的颜色进行透明处理 color (常用在透明滚动条的颜色)alpha 设置图片或文字的不透明度 opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength blur 在指定的方向和位置上产生动感模糊效果 add、direction、strength chroma 对所选择的颜色进行透明处理 color dropShadow 在指定的方向和位置上产生阴影 color、offX、offY、positive flipH 沿水平方向翻转对象 flipV 沿垂直方向翻转对象 glow 在对象周围上发光 color、strength gray 将对象以灰度处理 invert 逆转对象颜色 light 对对象进行模拟光照 mask 对对象生成掩膜 color shadow 沿对象边缘产生阴影 color、direction wave 在垂直方向产生正弦波形 add、freq、lightStrength、phase、strength xray 改变对象颜色深度，并绘制黑白图象=CSS滤镜filter详解=语法：STYLE=filter:filtername(fparameter1, fparameter2.)（Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数） 滤镜说明：alpha：设置透明层次blur：创建高速度移动效果，即模糊效果chroma：制作专用颜色透明DropShadow：创建对象的固定影子FlipH：创建水平镜像图片FlipV：创建垂直镜像图片glow：加光辉在附近对象的边外gray：把图片灰度化invert：反色light：创建光源在对象上mask：创建透明掩膜在对象上shadow：创建偏移固定影子wave：波纹效果Xray：使对象变得像被x光照射一样1、滤镜：Alpha语 法：STYLE=filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity，Style= style,StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY) 说明：Opacity：起始值，取值为0100, 0为透明，100为原图。FinishOpacity：目标值。Style：1或2或3StartX：任意值StartY：任意值例子：filter:Alpha(Opacity=0,FinishOpacity=75,Style=2) 2、滤镜：blur语法：STYLE=filter:Blur(Add = add, Direction = direction, Strength = strength)说明：Add：一般为1，或0。Direction：角度，0315度，步长为45度。Strength：效果增长的数值，一般5即可。例子：filter:Blur(Add=1,Direction=45,Strength=5)3、滤镜：Chroma语法：STYLE=filter:Chroma(Color = color)说明：color：#rrggbb格式，任意。例子：filter:Chroma(Color=#FFFFFF)4、滤镜：DropShadow语法：STYLE=filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)说明：Color:#rrggbb格式，任意。Offx：X轴偏离值。Offy：Y轴偏离值。Positive：1或0。例子：filter:DropShadow(Color=#6699CC,OffX=5,OffY=5,Positive=1)5、滤镜：FlipH语法：STYLE=filter:FlipH 例子：filter:FlipH 6、滤镜：FlipV语法：STYLE=filter:FlipV例子：filter:FlipV 7、滤镜：glow语法：STYLE=filter:Glow(Color=color, Strength=strength)说明：Color：发光颜色。Strength：强度(0100)例子：filter:Glow(Color=#6699CC,Strength=5)8、滤镜：gray语法：STYLE=filter:Gray例子：filter:Gray9、滤镜：invert语法：STYLE=filter:Invert例子：filter:Invert10、滤镜：mask语法：STYLE=filter:Mask(Color=color)例子：filter:Mask (Color=#FFFFE0)11、滤镜：shadow语法：filter:Shadow(Color=color, Direction=direction)说明：Color：#rrggbb格式。Direction：角度，0315度，步长为45度。例子：filter:Shadow (Color=#6699CC, Direction=135)12、滤镜：wave语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase， Strength=strength)说明：Add：一般为1，或0。Freq：变形值。LightStrength：变形百分比。Phase：角度变形百分比。Strength：变形强度。例子：filter: wave(Add=0, Phase=4, Freq=5, LightStrength=5, Strength=2)13、滤镜：Xray语法：STYLE=filter:Xray 例子：filter:Xray 、/用了一段CSS 布局设计网页,发现自己的命名有点混乱,完全按照自己的想法命名,虽然没什么影响,有不给别人看源文件,但是工作室有时候和团队合作完成项目的时候,就遇到麻烦了,要修改一个地方相当的费事.所以还是有个标准比较好啊!在网上看到的一个相关的参考,再加上平时也研究别人的代码,发现这样的命名使用很广泛!我再加上自己的经验,希望对看到这篇文章的人能有用!命名规范常用的CSS命名规则： 头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center 命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如user-list常用代码结构：div：主要用于布局，分割页面的结构ul/ol：用于无序/有序列表span：没有特殊的意义，可以用作排版的辅助，例如 Example Source Code (4.23)天幻网六周年天幻网六周年天幻网六周年天幻网六然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果h1-h6：标题h1-h6 根据重要性依次递减h1位最重要的标题label：为了使你的表单更有