网站地图
发新话题
打印

CSS样式表中文手册

CSS样式表中文手册

Introduction To CSS2样式表简介
什么是样式表:
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
如何将样式表加入您的网页:
你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅 !important 声明。
链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:

<head>
<title>文档标题</title>
<link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css" type="text/css">
</head>

而在XML中,你应该如下例所示在声明区中加入:

<? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>

定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。 定义方式请参阅样式表语法。示例如下:

<html>
<head>
<title>文档标题</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body>

请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。
内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:

<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>

样式表语法 (CSS Syntax)
Selector { property: value }

参数说明:
Selector -- 选择符
property : value -- 样式表定义。属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开

继承的值 (The ' Inherit ' Value)
每个属性都有一个指定的值: Inherit 。它的意思是:将父对象的值等同为计算机值得到。这个值通常仅仅是备用的。显式的声明它可用来强调。
手册说明:
  本手册是 Rainer's DHTML Library 产品的一部分。

  本手册针对的是已有一定网页设计制作经验的读者。其目的是提供完整清晰的样式表内容的快速索引及进阶帮助。所以对于网页制作和样式表的基础知识,仅简单介绍,恕不赘述。
  手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,以及 Internet Explorer 和 Netscape 各自的私有内容。出于种种众所周知的原因考虑,本手册以浏览器的事实标准—— Internet Explorer 为主。
  手册中为几乎所有的已被支持的属性、伪类、单位等,除了基本的语法示范外,都度身制作了可以对照源代码即时察看运行演示的实例。
  本手册的升级信息与版权声明请参阅关于本书页面。
  限于篇幅,对于一些过于繁杂的相关内容,如动态样式属性(Dynamic Properties),滤镜(Filters),行为(Behaviors)请参阅我的其它相关著作。
  本书中涉及到的所有HTML对象(Object,Element),HTML属性(Attributes)和特性(Properties)请参阅我的相关著作。
文本属性  Text Properties
text-indenttext-overflowvertical-aligntext-alignlayout-flowwriting-modedirectionunicode-bidiword-breakline-breakwhite-spaceword-wraptext-autospacetext-kashida-spacetext-justifyruby-alignruby-positionruby-overhangime-modelayout-gridlayout-grid-charlayout-grid-char-spacinglayout-grid-linelayout-grid-modelayout-grid-type表格属性  Table Properties
border-collapseborder-spacingcaption-sideempty-cellstable-layoutspeak-header滚动条属性  Scrollbar Properties
scrollbar-3dlight-colorscrollbar-highlight-colorscrollbar-face-colorscrollbar-arrow-colorscrollbar-shadow-colorscrollbar-darkshadow-colorscrollbar-base-colorscrollbar-track-color打印属性  Printing Properties
page-break-afterpage-break-beforepage-break-insidemarksorphanssizewidows定位属性  Positioning Properties
positionz-indextoprightbottomleft内补丁属性  Paddings Properties
paddingpadding-toppadding-rightpadding-bottompadding-left轮廓属性  Outlines Properties
outlineoutline-coloroutline-styleoutline-width外补丁属性  Margins Properties
marginmargin-topmargin-rightmargin-bottommargin-left列表属性  Lists Properties
list-stylelist-style-imagelist-style-positionlist-style-typemarker-offset布局属性  Layout Properties
clearfloatclipoverflowoverflow-xoverflow-ydisplayvisibility字体属性  Font Properties
fontcolorfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-weighttext-decorationtext-underline-positiontext-shadowfont-varianttext-transformline-heightletter-spacingword-spacing尺寸属性  Dimensions Properties
heightmax-heightmin-heightwidthmax-widthmin-width内容属性  Generated Content Properties
include-sourcequotescounter-incrementcounter-reset边框属性  Borders Properties
borderborder-colorborder-styleborder-widthborder-topborder-top-colorborder-top-styleborder-top-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-leftborder-left-colorborder-left-styleborder-left-width背景属性  Background Properties
backgroundbackground-attachmentbackground-colorbackground-imagebackground-positionbackground-position-xbackground-position-ybackground-repeatlayer-background-colorlayer-background-image声音属性  Aural Properties
voice-familyvolumeazimuthstressrichnessspeech-ratecuecue-aftercue-beforepausepause-afterpause-beforepitchpitch-rangeplay-duringspeakspeak-numeralspeak-punctuation

[ 本帖最后由 茉莉花茶 于 2008-6-17 21:00 编辑 ]
Font Properties
fontcolorfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-weighttext-decorationtext-underline-positiontext-shadowfont-varianttext-transformline-heightletter-spacing
font版本:CSS1/CSS2   继承性:有
语法:
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
取值:
font-style  : CSS1  请参阅 font-style 属性
font-variant  : CSS1  请参阅 font-variant 属性
font-weight  : CSS1  请参阅 font-weight 属性
font-size  : CSS1  请参阅 font-size 属性
line-height  : CSS1  请参阅 line-height 属性
font-family  : CSS1  请参阅 font-family 属性
caption  : CSS2  使用有标题的系统控件的文本字体(如按钮,菜单等)
icon  : CSS2  使用图标标签的字体
menu  : CSS2  使用菜单的字体
message-box  : CSS2  使用信息对话框的文本字体
small-caption  : CSS2  使用小控件的字体
status-bar  : CSS2  使用窗口状态栏的字体

说明:
设置或检索对象中的文本特性。该属性是复合属性。
默认值为: normal normal normal medium normal "Times New Roman" 。
第一种声明方式参数必须按照如上的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
对于如何使用用户端系统可能没有的字体,可以参阅 @font-face 规则。
对应的脚本特性为 font 。
示例:
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 }
应用于:
IE4.0+ AADDRESSBBIGBLOCKQUOTEBODYBUTTONCAPTIONCENTERCITECODECOLCOLGROUPDDDFNDIRDIVDLDTEMFIELDSETFORMHnHTMLIIMGINPUT type=buttonINPUT type=checkboxINPUT type=fileINPUT type=imageINPUT type=passwordINPUT type=radioINPUT type=resetINPUT type=submitINPUT type=textISINDEXKBDLABELLEGENDLILISTINGMARQUEEMENUOLPPLAINTEXTPRESSAMPSELECTSMALLSPANSTRIKESTRONGstyleSUBSUPTABLETBODYTDTEXTAREATFOOTTHTHEADTRTTUULVARXMP
IE5.0+ CUSTOMruntimeStyle
IE5.5+ defaults
color版本:CSS1  兼容性:IE4+ NS4+ 继承性:有
语法:
color : color
取值:
color  : 指定颜色。请参阅 颜色单位 和 附录:颜色表  

说明:
检索或设置对象的文本颜色。无默认值。
注意,用颜色名称指定 color 不被一些浏览器接受。但使用 RGB 值指定颜色能被所有里浏览器识别并正确显示。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 color 。
示例:
div {color: #345456; }
div { color: rgb(100,14,200); }
div {color: menu; }
div {color: red; }
应用于:
IE4.0+ AADDRESSAPPLETBBIGBLOCKQUOTEBODYBUTTONCAPTIONCENTERCITECODECOLCOLGROUPDDDFNDIRDIVDLDTEMFIELDSETFORMHnHTMLIINPUT type=buttonINPUT type=checkboxINPUT type=fileINPUT type=imageINPUT type=passwordINPUT type=radioINPUT type=resetINPUT type=submitINPUT type=textISINDEXKBDLABELLEGENDLILISTINGMARQUEEMENUOLOPTIONPPLAINTEXTPRESSAMPSELECTSMALLSPANSTRIKESTRONGstyleSUBSUPTABLETBODYTDTEXTAREATFOOTTHTHEADTRTTUULVARXMP
IE5.0+ runtimeStylecurrentStyleCUSTOM
IE5.5+ defaults
font-family版本:CSS1  兼容性:IE4+ NS4+ 继承性:有
语法:
font-family : name
font-family :ncursive | fantasy | monospace | serif | sans-serif
取值:
name  : 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格,则应使用引号括起
第二种声明方式使用所列出的字体序列名称。如果使用fantasy序列,将提供默认字体序列

说明:
设置或检索用于对象中文本的字体名称序列。默认值为 "Times New Roman" 。
序列可包含嵌入字体字体。请参阅 @font-face 规则。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 fontFamily 。
示例:
div.fixedwidth { font-family: Courier, "Courier New", monospace }
应用于:
IE4.0+ AADDRESSBBASEFONTBIGBLOCKQUOTEBODYBUTTONCAPTIONCENTERCITECODECOLCOLGROUPDDDFNDIRDIVDLDTEMFIELDSETFORMHnHTMLIIMGINPUT type=buttonINPUT type=checkboxINPUT type=fileINPUT type=imageINPUT type=passwordINPUT type=radioINPUT type=resetINPUT type=submitINPUT type=textISINDEXKBDLABELLEGENDLILISTINGMARQUEEMENUOLPPLAINTEXTPRESSAMPSELECTSMALLSPANSTRIKESTRONGstyleSUBSUPTABLETBODYTDTEXTAREATFOOTTHTHEADTRTTUULVARXMP
IE5.0+ currentStyleCUSTOMruntimeStyle
IE5.5+ defaults
font-size版本:CSS1  兼容性:IE4+ NS4+ 继承性:有
语法:
font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length
取值:
xx-small  : 绝对字体尺寸。根据对象字体进行调整。最小
x-small  : 绝对字体尺寸。根据对象字体进行调整。较小
small  : 绝对字体尺寸。根据对象字体进行调整。小
medium  : 默认值。绝对字体尺寸。根据对象字体进行调整。正常
large  : 绝对字体尺寸。根据对象字体进行调整。大
x-large  : 绝对字体尺寸。根据对象字体进行调整。较大
xx-large  : 绝对字体尺寸。根据对象字体进行调整。最大
larger  : 相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的 em 单位计算
smaller  : 相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算
length  : 百分数 | 由浮点数字和单位标识符组成的长度值,不可为负值。其百分比取值是基于父对象中字体的尺寸。请参阅 长度单位  

说明:
设置或检索对象中的字体尺寸。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 fontSize 。
示例:
p { font-style: normal; }
p { font-size: 12px; }
p { font-size: 20%; }
应用于:
IE4.0+ AADDRESSAPPLETBBIGBLOCKQUOTEBODYBUTTONCAPTIONCENTERCITECODECOLCOLGROUPDDDFNDIRDIVDLDTEMFIELDSETFORMHnHTMLIINPUT type=buttonINPUT type=checkboxINPUT type=fileINPUT type=imageINPUT type=passwordINPUT type=radioINPUT type=resetINPUT type=submitINPUT type=textISINDEXKBDLABELLEGENDLILISTINGMARQUEEMENUOLPPLAINTEXTPRESSAMPSELECTSMALLSPANSTRIKESTRONGstyleSUBSUPTABLETBODYTDTEXTAREATFOOTTHTHEADTRTTUULVARXMP
IE5.0+ currentStyleCUSTOMruntimeStyle
IE5.5+ defaults
font-size-adjust版本:CSS2  兼容性:无 继承性:有
语法:
font-size-adjust : none | number
取值:
none  : 默认值。允许字体序列中每一字体遵守它的自己的尺寸
number  : 为字体序列中所有字体强迫指定同一尺寸

说明:
设置或检索用于对象中文本的字体名称序列是否强制使用同一尺寸。
对应的脚本特性为 fontSizeAdjust 。
示例:
p { font-family: arial, courier; font-size-adjust: none; }
p { font-family: verdana, courier; font-size-adjust: .56; }










端起杯谈技术;放下杯讲艺术。
发新话题