css 常用标签
■外部连接■:1. <link rel="stylesheet" href="css.css" type="text/css" />
2. <style type="text/css">
<!--
@import url(screen.css) screen;
@import url(print.css) print;
-->
</style>
■内部连接■:<STYLE type=text/css></STYLE>
==========================★字体属性★=================================
符合属性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|direction
unicode-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是<body>和<textarea>对象的默认值，它在需要时剪切内
容并添加滚动条|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被激活后的显示效果
==========================★滚动条样式★=================================
1．
overflow内容溢出时的设置
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll有滚动条、hidden没有滚动条、auto。
2．
scrollbar-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：起始值，取值为0～100, 0为透明，100为原图。
FinishOpacity：目标值。
Style：1或2或3
StartX：任意值
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
2、滤镜：blur
语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
说明：
Add：一般为1，或0。
Direction：角度，0～315度，步长为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：强度(0－100)
例子：filter:Glow(Color="#6699CC",Strength="5")
8、滤镜：gray
语法：STYLE="filter:Gray"
例子：filter:Gray
9、滤镜：invert
语法：STYLE="filter:Invert"
例子：filter:Invert
10、滤镜：mask
语法：STYLE="filter:Mask(Color=color)"
例子：filter:Mask (Color="#FFFFE0")
11、滤镜：shadow
语法：filter:Shadow(Color=color, Direction=direction)
说明：
Color：#rrggbb格式。
Direction：角度，0－315度，步长为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 [www.52css.com]
<li><span>(4.23)</span>天幻网六周年天幻网六周年天幻网六周年天幻网六</li>
然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果
h1-h6：标题
h1-h6 根据重要性依次递减
h1位最重要的标题
label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西，例如：
Example Source Code [www.52css.com]
<label for="user-password">密 码</label>
<input type="password" name="password" id="user-password" />
fieldset & legend：fildset套在表单外，legend用于描述表单内容。例如：
Example Source Code [www.52css.com]
<form>
<fieldset>
<legend>title</legend>
<label for="user-password">密 码</label>
<input type="password" name="password" id="user-password" />
</fieldset>
</form>
dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签，例如
Example Source Code [www.52css.com]
<dl>
<dt>什么是CSS?</dt>
<dd>CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。<dd>
<dt>什么是XHTML？</dt>
<dd>XHTML
是一个基于XML的置标语言，看起来与HTML有些想像，只有一些小的但重要的区别。可以这样看，XHTML就是一个扮演着类似HTML的角色的XML。
本质上说，XHTML是一个桥接（过渡）技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。</dd>
</dl>
Example Source Code [www.52css.com]
C #content
S #subcol
M #maincol
X #xcol
这是纵向布局的XHTML结构，c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。
其中在三纵栏的布局需要分为两层 第一层是#subcol与#main第二层是#main中的#maincol与#xcol。
自定义命名：
根据w3c网站上给出的,最好是用意义命名
比如：是重要的新闻高亮显示（像红色）
有两种
Example Source Code [www.52css.com]
.red{color:red}
.important-news{color:red}
很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字。
