本帖最后由 bestabba 于 2009-5-1 14:27 编辑
/*
Offical Style for SupeSite 7.0 default
(C) 2001-2008 Comsenz Inc.
http://www.SupeSite.com
*/
1------------------------------------------------------------------------------------------
/* reset style */重置样式
* { margin:0; padding:0; word-break:break-all; }
margin外边距
padding内边距
word-break 文本换行
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
body { background:#FFF; color:#333; font:12px/1.5em Verdana,Helvetica,Arial,sans-serif; }
内容：
===============================
背景颜色 background-color || background-image || background-repeat || background-attachment || background-position
===============================
background-color : transparent | color
transparent : 背景色透明
color : 指定颜色。
==========
background-image : none | url (url)
none : 无背景图
url : 使用绝对或相对地址指定背景图像
==========
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
===========
background-attachment : scroll | fixed
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
===========
background-position : length || length
background-position : position || position
length : 百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right
===========
color
div {color: #345456; }
div {color: rgb(100,14,200); }
div {color: menu; }
div {color: red; }
============
font
font : font-style || font-variant || font-weight || font-size || line-height || font-family
------------
font-style : normal | italic | oblique
normal : 正常的字体
italic : 斜体。
oblique : 倾斜的字体
-------------
font-variant
font-variant : normal | small-caps
normal : 正常的字体
small-caps : 小型的大写字母字体
--------------
font-weight : normal | bold | bolder | lighter | number
normal : 正常的字体。相当于number为400。
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder : IE5+ 特粗体
lighter : IE5+ 细体
number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
---------------
font-size : absolute-size | relative-size | length
absolute-size : 根据对象字体进行调节。xx-small | x-small | small | medium | large | x-large | xx-large
relative-size : 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。larger | smaller
length : 百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。请参阅长度单位
----------------
line-height : normal | length
normal : 默认行高
length : 百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。
----------------
font-family : name
font-family : cursive | fantasy | monospace | serif | sans-serif
name : 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格，则应使用引号括起
第二种声明方式使用所列出的字体序列名称。如果使用fantasy序列，将提供默认字体序列
-----------------
font : caption | icon | menu | message-box | small-caption | status-bar
caption : 使用有标题的系统控件的文本字体（如按钮，菜单等）
icon : 使用图标标签的字体
menu : 使用菜单的字体
message-box : 使用信息对话框的文本字体
small-caption : 使用小控件的字体
status-bar : 使用窗口状态栏的字体
p { font: italic small-caps 600 12pts/18pts 宋体; }
p { font: italic small-caps 600 12pts/150% Courier; }
p { font: italic small-caps 600 12pts/1.5 Courier; }
p { font: italic small-caps 600 12pts/18pts Courier; }
p { font: /18pts serif; }
p { font: oblique 100 24pts; }
H1 { font: 15pt/17pt bold "Arial" normal }
================
Verdana,Helvetica,Arial,sans-serif;
--------------
Verdana
Verdana是一套无衬线字体，由于它在小字上仍有结构清晰端整、阅读辨识容易等高品质的表现，因而在1996年推出后即迅速成为许多领域所爱用的标准字型之一。
此字体的设计源起于微软字型设计小组的维吉尼亚·惠烈（Virginia Howlett）希望设计一套具有高辨识性、易读性的新字型以供屏幕显示之用，于是她邀请了世界顶级字型设计师之一的马修·卡特（Matthew Carter）操刀，以Frutiger字体及爱德华·约翰斯顿（Edward Johnston）为伦敦地铁所设计的字体为蓝本，并由Monotype公司的字型微调专家汤姆·瑞克纳（Tom Rickner）担任手工微调，字体结构与Tahoma（同为马修·卡特所设计）很相似，微软将Verdana纳入网页核心字体之一。
“Verdana”一名是由“verdant”和“Ana”两字所组成的。“verdant”意为“苍翠”，象征著“翡翠之城”西雅图及有“常青州”之称的华盛顿州。“Ana”则来自于维吉尼亚·惠烈大女儿的名字。
--------------
Helvetica
Helvetica是一种广泛使用的西文字体，是瑞士图形设计师马克斯・米耶丁格（Max Miedinger）于1957年设计的。
--------------
Arial
Arial是一套随同多套微软应用软件所分发的无衬线体TrueType字型。Monotype设计这套字型是要以其作为一个较便宜的替代品与Linotype的Helvetica竞争。由于Helvetica是支援Adobe PostScript语言的打印机所指定的其中一款字型，用户选用它能确保文件可正确打印，所以是一套流行的字型。微软不希望把Helvetica放到视窗系统里面，就购买了较便宜的Arial的使用许可。
Arial Style
虽然比例及字重（weight）和Helvetica极之相近，但Arial其实是Monotype Grotesque系列的变种。设计Arial时考虑到会在电脑上面使用，在字体及字距上都作了一些细微的调整和变动，以增加它在电脑屏幕上不同分辨率下的可读性。
从微软在Windows 3.1上推出购自苹果电脑的TrueType技术起Arial就一直跟随视窗系统分发。TrueType的推出就是打算取代PostScript语言所使用的Type 1字型。而微软也曾尝试以自行开发的TrueImage打印机描述语言彻底取代PostScript。
最新版本的视窗系统都带有Arial的Unicode版本：Arial Unicode MS。这字型依据Unicode标准包含多国语言文字在内。虽说比如Bitstream Cyberbit和Code2000都比它收录更多字符更完整，不过以跟随操作系统大规模分发的字型来说，Arial Unicode MS就是最完整的一部了。
最新的PostScript语言除了原有的Helvetica也包括了Arial作为标准字型。使用PostScript第三级（level 3）语言的机器都应该支援。
---------------------
什么是Sans Serif 字体，什么是Serif字体？
拜读了 LGJ Font Notes 的 Serif VS. Sans Serif 注1 一文，顿时胸中豁然开朗，终于明白了什么是Sans Serif字体，什么是Serif字体，什么地方应该使用Sans Serif字体，什么地方又应该使用Serif字体。这些问题，不管是对Web Designer还是普通用户，了解它我觉得还是十分必要的，比如在很多浏览器中就涉及相应的设置。
在西方国家罗马字母阵营中，字体分为两大种类：Sans Serif和 Serif，打字机体虽然也属于 Sans Serif，但由于是等宽字体，所以另外独立出 Monospace 这一种类，例如在Web中，表示代码时常常要使用等宽字体。
Serif的意思是，在字的笔画开始及結束的地方有额外的装饰，而且笔画的粗细会因直橫的不同而有不同。相反的，Sans Serif则沒有这些额外的装饰，笔画粗细大致差不多。如下图：
可以看出，我们平时所用的Georgia、Times New Roman等就属于Serif字体，而Arial、Tahoma、Verdana等则属于Sans Serif字体。对中文而言，同样存在这两大种类，很明显，宋体、细明体（繁体中常用）等就属于Serif，而黑体、幼圆等则属于Sans Serif。
Serif 和 Sans Serif 的一般比较Serif的字体容易辨认，因此易读性较高。反之Sans Serif 则较醒目，但在行文阅读的情況下，Sans Serif 容易造成字母辨认的困扰，常会有来回重读及上下行错乱的情形。 Serif 强调了字母笔画的开始及结束，因此较易前后连续性的辨识。 Serif 强调一个word，而非单一的字母，反之Sans Serif则强调个别字母。 在小字体的场合，通常Sans Serif比Serif更清晰。 适用用途：通常文章的內文、正文使用的是易读性较佳的 Serif 字体，这可增加易读性，而且长时间阅读下因为会以word为单位来阅读，较不容易疲倦。而标题、表格內用字则采用较醒目的Sans Serif字体，它需要显著、醒目，但不必长时间盯著这些字来阅读。
像宣传品、海报类，为求醒目，它的短篇的段落也会采用Sans Serif字体。但在书籍、报刊杂志，正文有相当篇幅的情形下，则应采用Serif字体来减轻读者阅读上的负担。在Web设计及浏览器设置中也应遵循此原则为是。
实际应用在Firefox中（目前似乎只有Firefox有此功能），可以分别单独指定Sans Serif、Serif及Monospace的中西文字体，然而这个选项并未设置在工具菜单中，不过可以在Addressbar中键入about:config，然后在Filter中过滤font找到如下Preference Name：
font.name.monospace.x-westernfont.name.monospace.zh-CNfont.name.sans-serif.x-westernfont.name.sans-serif.zh-CNfont.name.serif.x-westernfont.name.serif.zh-CN你可以依照上述Sans Serif、Serif及Monospace的原则来分别指定一种对应字体，按照W3C的CSS规则注2，在font（或者font-family）的最后都要求指定一个Serif这样的Generic-family，避免客户端实在没有指定字体时使用本机上的Serif默认字体。
由于Mozilla系的浏览器的这种特性，我们在CSS的font设定中，可以分别设定中西文字体来丰富版面，例如我们指定一组小字体（类似此文章标题下的日期、作者、类别）：
------------------------------------------------
h1, h2, h3, h4, h5, h6 { font-size:1em; }
===============
a { color:#333; text-decoration:none; }
a:hover { text-decoration:underline; }
===============
a 链接显示
a:hover链接悬停
text-decoration : none || underline || blink || overline || line-through
none : 无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
--------------------
ul, li { list-style:none; }
ul是定义无序列表的样式
li是列表内行的样式
在HTML代码中列表是这样的
<ul>
<li>列表一</li>
<li>列表二</li>
</ul>
list-style :列表样式
list-style-image || list-style-position || list-style-type
list-style-image : none | url (url)
none : 不指定图像
url : 使用绝对或相对地址指定背景图像
-------
list-style-position : outside | inside
outside : 列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside : 列表项目标记放置在文本以内，且环绕文本根据标记对齐
---------
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
disc : CSS1 实心圆
circle : CSS1 空心圆
square : CSS1 实心方块
decimal : CSS1 阿拉伯数字
lower-roman : CSS1 小写罗马数字
upper-roman : CSS1 大写罗马数字
lower-alpha : CSS1 小写英文字母
upper-alpha : CSS1 大写英文字母
none : CSS1 不使用项目符号
armenian : CSS2 传统的亚美尼亚数字
cjk-ideographic : CSS2 浅白的表意数字
georgian : CSS2 传统的乔治数字
lower-greek : CSS2 基本的希腊小写字母
hebrew : CSS2 传统的希伯莱数字
hiragana : CSS2 日文平假名字符
hiragana-iroha : CSS2 日文平假名序号
katakana : CSS2 日文片假名字符
katakana-iroha : CSS2 日文片假名序号
lower-latin : CSS2 小写拉丁字母
upper-latin : CSS2 大写拉丁字母
fieldset, img { border:none; }
fieldset：对表单进行分组，一个表单可以有多个fieldset
fieldset默认是带边框的
图片
border : border-width || border-style || border-color
border-width : medium | thin | thick | length
medium : 默认宽度
thin : 小于默认宽度
thick : 大于默认宽度
length : 由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位
------------------
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge : 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边
-------------------
border-color : color
color : 指定颜色。请参阅颜色单位和附录：颜色表
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width等于0或border-style设置为none，本属性将失去作用。
对应的脚本特性为borderColor。
----------------------
legend { display:none; }
legend：说明每组的内容描述，legend默认一般显示在左上角
-----------------------------
em, strong, cite, th { font-style:normal; font-weight:400; }
em:相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
strong:粗体
cite:用斜体显示标明引文。
th:在网页设计中,th是一个元素标签
HTML <th> 标签
定义和用法
定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体。
--------------------------------
input, textarea, select, button { font:12px Verdana,Helvetica,Arial,sans-serif; }
对input,textarea,select,button这几个样式进行控制，字体12px，字体样式
--------------------------------
table { border-collapse:collapse; }
表格
border-collapse : separate | collapse
separate : 边框独立（标准HTML）
rtl : 相邻边被合并
----------------------------------
html { overflow:-moz-scrollbars-vertical; }
始终让 Firefox 显示滚动条
overflow : visible | auto | hidden | scroll 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
【ingbx】css\common.css学习第二步
https://discuz.dismall.com/thread-1286200-1-1.html |
置顶卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
收藏。