· ©2002 Rainer Su . All rights reserved . Introduction To CSS2
CSS Cascading Style Sheet ()
(Linking to a Style Sheet)
.cssHTMLlink
XML
(Embedding a Style Block)
HTML
styletype"text/css"
(Inline Styles) style
(CSS Syntax)
Selector { property: value }
Selector -- property : value -- (:)(;)
(The ' Inherit ' Value)
Inherit Introduction To This Book
Rainer's DHTML Library
CSS2.0 ( Properties)( At-Rules)( Pseudo-Classes)( Pseudo-Elements)( Declarations)( Units)( Selectors C CSS2.0 Internet Explorer Netscape —— Internet Explorer
(Dynamic Properties)(Filters)(Behaviors) HTML(ObjectElement)HTML(Attributes)(Properties)
http://www.rainersu.com [email protected] End User License Agreement
""""""""
http://www.rainersu.com [email protected] www.rainersu.com
(Rainer Su)
1996.07-2000.03 (CAOSC) 2000.03-2000.08 (www.chineseall.com) 2000.09-2001.05 (www.rongshu.com) UI 2001.05-2002.04 (Erry) 2002.04-? (Bertelsmann)
()
[email protected] www.rainersu.com ------© (Rainer Su)2002 | [email protected] ------fontCSS1/CSS2 IE4+ NS4+ 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 font-variant :� CSS1 font-weight font-weight :� CSS1 font-size :� CSS1 font-size line-height :� CSS1 line-height font-family font-family :� CSS1 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 } colorCSS1 IE4+ NS4+ color : color
color :�
color RGB currentStyle color div {color: #345456; } div { color: rgb(100,14,200); } div {color: menu; } div {color: red; } font-familyCSS1 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 } font-sizeCSS1 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%; } font-size-adjustCSS2 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; } font-stretchCSS2 font-stretch : normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded normal :� narrower :� wider :�
fontStretch p { font-stretch: wider; } p { font-stretch: ultra-expanded; } font-styleCSS1 IE4+ NS4+ font-style : normal | italic | oblique normal :� italic :� oblique oblique :�
IE Internet currentStyle fontStyle p { font-style: normal; } p { font-style: italic; } p { font-style: oblique; } font-weightCSS1 IE4+ NS4+ font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal :� 400 bold :� 700 b bolder :� normal > lighter :� normal > 100 :� 200 100 300 200 :� 200 400 300 :� 400 :� normal 400 600 500 :� 500 700 600 :� 700 :� bold 700 900 800 :� 900 :� 800
IE4.0 normal bold currentStyle fontWeight span { font-weight:800; } text-decorationCSS1 IE4+ NS4+ text-decoration : none || underline || blink || overline || line-through none :� blink :� underline :� line-through :� overline :�
href a u ins underline strike s del line-through none text-decoration: underline overline blink none text- decoration: none ( img )() body none a a
IE4+ overline blink blink currentStyle textDecoration div { text-decoration : underline; } div { text-decoration : underline overline; } text-underline-positionIE5.5+ text-underline-position : below | above below :� above :�
text-decoration currentStyle textUnderlinePosition p { text-underline-position: above; text-decoration: underline; } text-shadowCSS2 text-shadow : color || length || length || opacity color :� length :� length :� length 0 opacity :�
:first-letter :first-line textShadow p { text-shadow: 0px 0px 20px yellow, 0px 0px 10px orange, red 5px -5px; } p:first-letter { font-size: 36px; color: red; text-shadow: red 0px 0px 5px;} font-variantCSS1 IE4+ NS6+ font-variant : normal | small-caps normal :� small-caps :�
IE4.0 small-caps currentStyle fontVariant span { font-variant: small-caps; } text-transformCSS1 IE4+ NS4+ text-transform : none | capitalize | uppercase | lowercase none :� capitalize :� uppercase :� lowercase :�
currentStyle textTransform div { text-transform : uppercase; } line-heightCSS1 IE4+ NS4+ line-height : normal | length normal :� | length :�
currentStyle lineHeight div {line-height:6px; } div {line-height:10.5; } letter-spacingCSS1 IE4+ NS6+ letter-spacing : normal | length normal :� length :�
currentStyle letterSpacing div {letter-spacing:6px; } div {letter-spacing:0.5pt; } word-spacingCSS1 IE6+ NS6+ word-spacing : normal | length normal :� length :�
IE4+MACIE6
currentStyle wordSpacing div { word-spacing : 10; } div { word-spacing : 10px; } text-indentCSS1 IE4+ NS4+ text-indent : length
| length :�
0 ( br ) currentStyle textIndent
DIV { text-indent:2cm } .click1 { text-indent:50% } .click2 { text-indent: } text-overflowIE6+ text-overflow : clip | ellipsis clip :� (...) ellipsis :� (...)
(...)
ellipsis white-space nowrap () ellipsis overflow hidden overflow scroll auto
DHTML currentStyle textOverflow div { overflow: hidden; text-overflow:ellipsis; } vertical-alignCSS1/CSS2 IE4+ NS4+ vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length auto :� CSS1 layout-flow baseline :� CSS1 valign sub :� CSS1 super :� CSS1 top :� CSS1 valign text-top :� CSS1 valign middle :� CSS1 valign bottom :� CSS1 valign text-bottom :� CSS1 valign | 00% length :� CSS2 IE
currentStyle auto baseline currentStyle verticalAlign td { vertical-align : middle; } text-alignCSS1 IE4+ text-align : left | right | center | justify left :� right :� center :� justify :�
(block elements) div null currentStyle textAlign div { text-align : center; } layout-flowIE5.5+ layout-flow : horizontal | vertical-ideographic horizontal :� vertical-ideographic :�
text-align vertical-align writing-mode currentStyle layoutFlow div { layout-flow : horizontal; } writing-modeIE5.5+ writing-mode : lr-tb | tb-rl lr-tb :� tb-rl :� --90
---- text-align vertical-align
BUTTON CAPTION INPUT INPUT type=button INPUT type=file INPUT type=password INPUT type=reset INPUT type=submit INPUT type=text ISINDEX OPTION TEXTAREA
tb-rl tb-rl writing-mode writing-mode currentStyle writingMode div { writing-mode: tb-rl; } directionCSS2 IE5+ direction : ltr | rtl | inherit ltr :� rtl :� inherit :�
dir ltr unicode-bidi embed bidi-override currentStyle direction div { direction: rtl; unicode-bidi: bidi-override; } unicode-bidiCSS2 IE5+ unicode-bidi : normal | bidi-override | embed normal :� bidi-override :� direction embed :� direction
direction direction embed bidi-override Unicode -- currentStyle unicodeBidi div { direction: rtl; unicode-bidi: bidi-override; } word-breakIE5+ word-break : normal | break-all | keep-all normal :� break-all :� normal keep-all :� normal
break-all currentStyle wordBreak div {word-break : break-all; } line-breakIE5+ line-break : normal | strict normal :� strict :�
currentStyle lineBreak div { line-break : strict; } white-spaceCSS1 IE5.5+ NS4+ white-space : normal | pre | nowrap normal :� IE6+ !DOCTYPE standards-compliant mode pre :� !DOCTYPE standards-compliant mode normal pre nowrap :� br noWrap
TABHTML normal (DOM)IE
currentStyle whiteSpace p { white-space: nowrap; } word-wrapIE5.5+ word-wrap : normal | break-word normal :� break-word :� ( word-break )
height currentStyle wordWrap div { word-wrap: break-word; word-break: break-all; } text-autospaceIE5+ text-autospace : none | ideograph-alpha|ideograph-numeric | ideograph- parenthesis | ideograph-space none :� (Latin-basedGreekCyrillicArabicHebrew ideograph-alpha :� ) ideograph-numeric :� ideograph-parenthesis :� () ideograph-space :�
currentStyle textAutospace div {text-autospace: ideograph-alpha; } text-kashida-spaceIE5.5+ text-kashida-space : length | inherit length :� kashida100%kashida0% inherit :�
0% Kashida Kashida text-justify auto distribute kashida
currentStyle textKashidaSpace div { text-kashida-space : 50%;text-justify: kashida; } text-justifyIE5+ text-justify : auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper auto :� distribute :� newspaper distribute-all-lines :� distribute distribute-center-last :� inter-cluster :� inter-ideograph :� inter-word :� kashida :� IE5.5+ newspaper :�
text-align justify
currentStyle textJustify div {text-justify : auto; text-align:justify; } ruby-alignIE5+ ruby-align : auto | left | center | right | distribute-letter | distribute-space | line-edge
ideographic() distribute-space Latin center auto :� left :� center :� ruby ruby right :� distribute-letter :� ruby ruby ruby distribute-space :� ruby ruby ruby ruby line-edge :� ruby ruby
rt ( ruby ) currentStyle rubyAlign ruby { ruby-align: right; } ruby-overhangIE5+ ruby-overhang : auto | whitespace | none
ruby auto :� whitespace :� ruby none :� ruby
rt ( ruby ) currentStyle rubyOverhang ruby { ruby-overhang: auto; } ruby-positionIE5+ ruby-position : above | inline
ruby above :� inline :� ruby
rt ( ruby ) currentStyle rubyPosition ruby { ruby-position: above; } ime-modeIE5+ ime-mode : auto | active | inactive | disabled
IME ime-mode auto :� active :� IMEIME inactive :� IMEIME disabled :� IME()IME
(IME) currentStyle imeMode input {ime-mode: auto; } layout-gridIE5+ layout-grid : layout-grid-mode || layout-grid-type || layout-grid-line || layout- grid-char
both loose none none
() layoutGrid div { layout-grid:both loose none none; } layout-grid-charIE5+ layout-grid-char : none | auto | length none :� auto :� | length :�
line-height () layout-grid ( div ) layout-grid-mode line both currentStyle layoutGridChar div { layout-grid-char: auto; } layout-grid-lineIE5+ layout-grid-line : none | auto | length none :� auto :� | length :�
line-height () layout-grid ( div ) layout-grid-mode line both currentStyle layoutGridLine div { layout-grid-line: auto; } layout-grid-modeIE5+ layout-grid-mode : both | line | char | none both :� char line line :� ( span ) char :� ( div ) none :�
currentStyle layoutGridMode div { layout-grid-mode: char; } layout-grid-typeIE5+ layout-grid-type : loose | strict | fixed loose :� layout-grid-mode none line strict :� () fixed :�
line-height () layout-grid ( div ) currentStyle layoutGridType div { layout-grid-type: strict; } backgroundCSS1 IE4+ NS4+ background : background-color || background-image || background-repeat || background-attachment || background-position
transparent none repeat scroll 0% 0%
background : white background : white none repeat scroll 0% 0% background-image background-image none ( padding )( border )( margin ) background div { background: red no-repeat scroll 5% 60%; } body { background: url("images/aardvark.gif") repeat-y; } pre { background: url("images/aardvark.gif") top; } caption { background: fuchsia; } background-attachmentCSS1 IE4+ NS6+ background-attachment : scroll | fixed scroll :� fixed :�
currentStyle bgProperties () backgroundAttachment html { background-image: url("anasazi.tif"); background-attachment: fixed; } body { background-attachment: scroll; } background-colorCSS1 IE4+ NS4+ background-color : transparent | color transparent :� color :�
( background-image ) currentStyle backgroundColor p { background-color: silver } div { background-color: rgb(223,71,177) } body { background-color: #98AB6F } pre { background-color: transparent; } background-imageCSS1 IE4+ NS4+ background-image : none | url ( url ) none :� url url ( url ) :�
( background-color ) currentStyle backgroundImage code { background-image: url("comet.jpg"); } blockquote { background-image: url("c:\InetPub\MyPixs\comet.jpg"); } br { background-image: url(http://Fred.com/ImageFile/Q.gif); } body { background-image: none; } background-positionCSS1 IE4+ NS6+ background-position : length || length background-position : position || position length :� | position :� top | center | bottom | left | center | right
background-image ( padding ) 0% 0% ( padding ) 50% right center right backgroundPosition div { background: url("images/aardvark.gif"); background-position: 35% 80%; } menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; } a { background: url("images/aardvark.gif"); background-position: 3.25in; } body { background: url("images/aardvark.gif"); background-position: top right; } background-position-xIE4+ background-position-x : length | left | center | right
| length :� left :� center :� right :�
background-image ( padding ) 0% currentStyle backgroundPositionX p { background-image: url("images/aardvark.gif"); background-position-x: 35%; background-repeat:no-repeat; } background-repeatCSS1 IE4+ NS4+ background-repeat : repeat | no-repeat | repeat-x | repeat-y repeat :� no-repeat :� repeat-x :� repeat-y :�
( background-image currentStyle backgroundRepeat menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; } p { background: url("images/aardvark.gif"); background-repeat: no-repeat; } layer-background-colorNS4+ layer-background-color : transparent | color transparent :� color :�
div { layer-background-color: transparent; } layer-background-imageNS4+ layer-background-image : none | url ( url ) none :� url url ( url ) :�
code { position: absolute; top: 100px; left: 300px; width: 200px; border: thin solid black; background-image: url("comet.jpg"); layer-background-image: url("bb_comet.jpg"); } positionCSS2 IE4+ NS4+ position : static | absolute | fixed | relative static :� HTML left right top bottom body z-index absolute :� fixed :� (absolute) relative :� left right top bottom
absolute z-index ( margin )( padding )( border ) ( absolute) left right top bottom absolute auto HTML relative HTML( relative)( absolute)( absolute)(
div height position div ( width currentStyle position div { position:relative; top:-3px } z-indexCSS2 IE4+ NS6+ z-index : auto | number auto :� number :�
number number number HTML number number null
position relative absolute select IE5.5+ iframe iframe currentStyle zIndex div { position:absolute; z-index:3; width:6px; } topCSS2 IE4+ NS4+ top : auto | length auto :� HTML | position absolute relative length :�
( position ) currentStyle top (Scripts) style posTop pixelTop offsetTop div { position: absolute; top: 1in; } div { position:relative; top:-3px; left:6px; } rightCSS2 IE4+ right : auto | length auto :� HTML | position absolute relative length :�
( position ) currentStyle right (Scripts) style posRight pixelRight div { position: absolute; right: 1in; } div { position:relative; top:-3px; right:6px; } bottomCSS2 IE4+ bottom : auto | length auto :� HTML | position absolute relative length :�
( position ) currentStyle bottom (Scripts) style posBottom pixelBottom div { position: absolute; bottom: 1in; } div { position:relative; bottom:6px; } leftCSS2 IE4+ NS4+ left : auto | length auto :� HTML | position absolute relative length :�
( position ) currentStyle left (Scripts) style posLeft pixelLeft offsetLeft div { position: absolute; left: 1in; } div { position:relative; top:-3px; left:6px; } heightCSS1 IE4+ NS6+ height : auto | length auto :� HTML | length :�
img width margin-top + border-top + padding-top + height + padding-bottom + border- bottom + margin-bottom IE6 !DOCTYPE standards-compliant mode IE6 !DOCTYPE standards-compliant margin-top + height+ margin-bottom currentStyle height (Scripts) style posHeight pixelHeight offsetHeight div { height: 1in; } div { position:absolute; top:-3px; height:6px; } max-heightCSS2 max-height : none | length auto :� | length :�
min-height min-height
maxHeight p { max-height: 200%; } min-heightCSS2 IE6+ min-height : none | length auto :� | length :�
max-height max-height IE6 td th tr table-layout currentStyle
minHeight p { min-height: 200px; } widthCSS1 IE4+ NS6+ width : auto | length auto :� HTML | length :�
img height margin-left + border-left + padding-left + width + padding-right + border-right + margin-right IE6 !DOCTYPE standards-compliant IE6 !DOCTYPE standards-compliant mode margin-left + width + margin-right currentStyle width (Scripts) style posWidth pixelWidth offsetWidth div { width: 1in; } div { position:absolute; top:-3px; width:6px; } max-widthCSS2 max-width : none | length auto :� | length :�
minwidth minwidth
maxWidth p { min-width: 200px; } min-widthCSS2 min-width : none | length auto :� | length :�
max-width max-width
minWidth p { min-width: 200px; } clearCSS1 IE4+ NS4+ clear : none | left | right | both none :� left :� right :� both :�
float currentStyle clear div { clear : left } img { float: right } floatCSS1 IE4+ NS4+ float : none | left | right none :� left :� right :�
clear none ( block-level ) display block display ( border IE5+ div span currentStyle styleFloat div { clear : left } img { float: right } clipCSS2 IE4+ NS6+ clip : auto | rect ( number number number number ) auto :� rect ( number number number number ) :� ---(0,0) auto
(absolute) position absolute IE5MAC clip div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); } div { position:absolute; width:60px; height:60px; clip:rect(1cm auto 50px 10cm); } overflowCSS2 IE4+ NS6+ overflow : visible | auto | hidden | scroll
window frame "> clip visible :� auto :� hidden :� scroll :�
visible textarea body auto textarea hidden table table-layout fixed td hidden overflow scroll auto td visible direction IE5MAC IE6 !DOCTYPE standards-compliant html overflow body { overflow: hidden; } div { overflow: scroll; height: 100px; width: 100px; } overflow-xIE4+ overflow-x : visible | auto | hidden | scroll
window frame "> clip visible :� auto :� hidden :� scroll :�
visible textarea body auto textarea hidden table table-layout fixed td hidden overflow scroll auto td visible direction IE5MAC IE6 !DOCTYPE standards-compliant html currentStyle overflowX body { overflow-x: hidden; } div { overflow-x: scroll; height: 100px; width: 100px; } overflow-yIE4+ overflow-y : visible | auto | hidden | scroll
window frame "> clip visible :� auto :� hidden :� scroll :�
visible textarea body auto textarea hidden table table-layout fixed td hidden overflow scroll auto td visible direction IE5MAC IE6 !DOCTYPE standards-compliant html currentStyle overflowY body { : hidden; } div { overflow-y: scroll; height: 100px; width: 100px; } displayCSS1/CSS2 IE4+ NS4+ display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group block :� CSS1 none :� CSS1 visibility hidden inline :� CSS1 inline-block :� IE5.5 compact :� CSS2 marker :� CSS2 :after :before inline-table :� CSS2 list-item :� CSS2 run-in :� CSS2 table :� CSS2 table-caption :� CSS2 table-cell :� CSS2 table-column :� CSS2 table-column-group :� CSS2 table-header-group :� CSS2 table-footer-group :� CSS2 table-row :� CSS2 table-row-group :� CSS2
block ADDRESS QUOTE BODY XMP CENTER COL COLGROUP DD DIR DIV DL DT FIELDSET FORM Hn HR IFRAME LEGEND LISTING MARQUEE MENU OL P PLAINTEXT PRE TABLE TD TH TR UL
none BR FRAME nextID TBODY TFOOT THEAD
list-item LI
inline IE6.0 LI block IE4.0 block inline list-item IE5.0 block inline IE5.5 inline-block inline-block ( height )( width ) IE6.0 list-item (block element)(inline element) div
block inline none table-header-group table-footer-group ( table ) tHead tFoot currentStyle display img { disply: block; float: right; } visibilityCSS2 IE4+ NS6+ visibility : inherit | visible | collapse | hidden inherit :� visible :� collapse :� hidden hidden :�
display IE5.0+ currentStyle visibility img { visibility: inherit; float: right; } marginCSS1 IE4+ NS4+ margin : auto | length auto :� | length :�
0 0
IE4.0+ em ex IE4.0+ td th div p IE5.5+ ( ( transparent ) currentStyle margin body { margin: 36pt 24pt 36pt; } body { margin: 11.5%; } body { margin: 10% 10% 10% 10%; } margin-topCSS1 IE4+ NS4+ margin-top : auto | length auto :� | length :�
IE4.0+ em ex IE4.0+ td th div p IE5.5+ ( ( transparent ) currentStyle marginTop body { margin: 36pt 24pt 36pt; } body { margin-top: 11.5%; } body { margin: 10% 10% 10% 10%; } margin-rightCSS1 IE4+ NS4+ margin-right : auto | length auto :� | length :�
IE4.0+ em ex IE4.0+ td th div p IE5.5+ ( transparent ) currentStyle marginBottom body { margin: 36pt 24pt 36pt; } body { margin: 11.5%; } body { margin: 10% 10% 10% 10%; } margin-bottomCSS1 IE4+ NS4+ margin-bottom : auto | length auto :� | length :�
IE4.0+ em ex IE4.0+ td th div p IE5.5+ ( ( transparent ) currentStyle marginBottom body { margin: 36pt 24pt 36pt; } body { margin: 11.5%; } body { margin: 10% 10% 10% 10%; } margin-leftCSS1 IE4+ NS4+ margin-left : auto | length auto :� | length :�
IE4.0+ em ex IE4.0+ td th div p IE5.5+ ( transparent ) currentStyle marginBottom body { margin: 36pt 24pt 36pt; } body { margin: 11.5%; } body { margin: 10% 10% 10% 10%; } outlineCSS2 outline : outline-color || outline-style || outline-width
( outline )( border ) outline img { outline: red } p { outline: double 5px } button { outline: #E9E9E9 double thin } outline-colorCSS2 outline-color : color | invert
color :� invert :�
( outline ) outlineColor img { outline-color: red } p { outline-color: #E9E9E9 } outline-styleCSS2 outline-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset
outline-width none :� dotted :� dashed :� solid :� oueline-width double :� groove :� outline-color 3D ridge :� outline-color 3D inset :� outline-color 3D outset :� outline-color 3D
( outline ) outlineStyle img { outline-color: orange; outline-style: solid ; outline-width: medium ; } outline-widthCSS2 outline-width : medium | thin | thick | length medium :� thin :� thick :� length :�
( outline ) outlineWidth img { outline-color: orange; outline-style: solid ; outline-width: medium ; } borderCSS1 IE4+ NS4+ border : border-width || border-style || border-color
medium none border-color
( border-color )( border-width )( border-style )
border : thin border : thin none border-color border-color border- width IE5.5+ border p { border: thick double yellow; } blockquote { border: dotted gray; } p { border: 25px; } border-colorCSS1 IE4+ NS6+ border-color : color
color :�
currentStyle IE5.5+ border-style none borderColor ody { border-color: silver ;red; } body { border-color: silver red RGB(223, 94, 77); } body { border-color: silver red RGB(223, 94, 77) black; } border-styleCSS1 IE4+ NS4+ border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none :� border-width hidden :� IE dotted :� MACIE4+WINDOWSUNIXIE5.5+ dashed :� MACIE4+WINDOWSUNIXIE5.5+ solid :� double :� border-width groove :� border-color 3D ridge :� border-color 3D inset :� border-color 3D outset :� border-color 3D
currentStyle IE5.5+ borderStyle body { border-style: double groove; } body { border-style: double groove dashed; } border-widthCSS1 IE4+ NS4+ border-width : medium | thin | thick | length medium :� thin :� thick :� length :�
currentStyle IE5.5+ border-style none borderWidth div { border-style: solid; border-width: thin; } span { display: block; border-style: solid; border-width: 1px thin; } p { border-color: #000000; border-width: 1px 1px 2px 3px; } border-topCSS1 IE4+ NS6+ border-top : border-width || border-style || border-color
medium none border-color
( border-top-color )( border-top-width )( border-top-style )
border-top : thin border-top : thin none border-top-color border- top-color border-top-width IE5.5+ borderTop div { border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green; } border-top-colorCSS2 IE4+ NS6+ border-top-color : color
color :�
currentStyle IE5.5+ border-top-style none border-top-width 0 borderTopColor div { border-top-color: red; border-bottom-color: RGB(223, 94, 77); border- right-color: red; border-left-color: black;} border-top-styleCSS2 IE4+ NS6+ border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none :� border-width hidden :� IE dotted :� MACIE4+WINDOWSUNIXIE5.5+ dashed :� MACIE4+WINDOWSUNIXIE5.5+ solid :� double :� border-width groove :� border-color 3D ridge :� border-color inset :� border-color 3D outset :� border-color 3D
currentStyle IE5.5+ border-top-width 0 borderTopStyle body { border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; } border-top-widthCSS1 IE4+ NS4+ border-top-width : medium | thin | thick | length medium :� thin :� thick :� length :�
currentStyle IE5.5+ borderTopWidth span { border-top-width: thin; border-top-style: solid; } span { border-bottom-width: thin; border-bottom-style: solid; } span { border-left-width: thin; border-left-style: solid; } span { border-right-width: thin; border-right-style: solid; } border-rightCSS1 IE4+ NS6+ border-right : border-width || border-style || border-color
medium none border-color
( border-right-color )( border-right-width )( border-right-style
border-right : thin border-right : thin none border-right-color border-right-color border-right-width IE5.5+ borderRight div { border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green; } border-right-colorCSS2 IE4+ NS6+ border-right-color : color
color :�
currentStyle IE5.5+ border-right-style none border-right-width 0 borderRightColor div { border-top-color: red; border-bottom-color: RGB(223, 94, 77); border- right-color: red; border-left-color: black;} border-right-styleCSS2 IE4+ NS6+ border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none :� border-width hidden :� IE dotted :� MACIE4+WINDOWSUNIXIE5.5+ dashed :� MACIE4+WINDOWSUNIXIE5.5+ solid :� double :� border-width groove :� border-color 3D ridge :� border-color inset :� border-color 3D outset :� border-color 3D
currentStyle IE5.5+ border-right-width 0 borderRightStyle body { border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; } border-right-widthCSS1 IE4+ NS4+ border-right-width : medium | thin | thick | length medium :� thin :� thick :� length :�
currentStyle IE5.5+ borderRightWidth span { border-top-width: thin; border-top-style: solid; } span { border-bottom-width: thin; border-bottom-style: solid; } span { border-left-width: thin; border-left-style: solid; } span { border-right-width: thin; border-right-style: solid; } border-bottomCSS1 IE4+ NS6+ border-bottom : border-width || border-style || border-color
medium none border-color
( border-bottom-color )( border-bottom-width )( border-bottom-style
border-bottom : thin border-bottom : thin none border-bottom-color border-bottom-color border-bottom-width IE5.5+ borderBottom div { border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green; } border-bottom-colorCSS2 IE4+ NS6+ border-bottom-color : color
color :�
currentStyle IE5.5+ border-bottom-style none border-bottom-width 0 borderBottomColor div { border-top-color: red; border-bottom-color: RGB(223, 94, 77); border- right-color: red; border-left-color: black;} border-bottom-styleCSS2 IE4+ NS6+ border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none :� border-width hidden :� IE dotted :� MACIE4+WINDOWSUNIXIE5.5+ dashed :� MACIE4+WINDOWSUNIXIE5.5+ solid :� double :� border-width groove :� border-color 3D ridge :� border-color inset :� border-color 3D outset :� border-color 3D
currentStyle IE5.5+ border-bottom-width 0 borderBottomStyle body { border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; } border-bottom-widthCSS1 IE4+ NS4+ border-bottom-width : medium | thin | thick | length medium :� thin :� thick :� length :�
currentStyle IE5.5+ borderBottomWidth span { border-top-width: thin; border-top-style: solid; } span { border-bottom-width: thin; border-bottom-style: solid; } span { border-left-width: thin; border-left-style: solid; } span { border-right-width: thin; border-right-style: solid; } border-leftCSS1 IE4+ NS6+ border-left : border-width || border-style || border-color
medium none border-color
( border-left-color )( border-left-width )( border-left-style )
border-left : thin border-left : thin none border-left-color border- left-color border-left-width IE5.5+ borderLeft div { border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green; } border-left-colorCSS2 IE4+ NS6+ border-left-color : color
color :�
currentStyle IE5.5+ border-left-style none border-left-width 0 borderLeftColor div { border-top-color: red; border-bottom-color: RGB(223, 94, 77); border- right-color: red; border-left-color: black;} border-left-styleCSS2 IE4+ NS6+ border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none :� border-width hidden :� IE dotted :� MACIE4+WINDOWSUNIXIE5.5+ dashed :� MACIE4+WINDOWSUNIXIE5.5+ solid :� double :� border-width groove :� border-color 3D ridge :� border-color inset :� border-color 3D outset :� border-color 3D
currentStyle IE5.5+ border-left-width 0 borderLeftStyle body { border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; } border-left-widthCSS1 IE4+ NS4+ border-left-width : medium | thin | thick | length medium :� thin :� thick :� length :�
currentStyle IE5.5+ borderLeftWidth span { border-top-width: thin; border-top-style: solid; } span { border-bottom-width: thin; border-bottom-style: solid; } span { border-left-width: thin; border-left-style: solid; } span { border-right-width: thin; border-right-style: solid; } include-sourceCSS2 include-source : url ( url ) url ( url ) :� url
includeSource div { position: absolute; top: 100px; left: 300px; width: 200px; height: 200px; border: thin solid black; include-source: url("http://www.dhtmlet.com/dream.html"); } quotesCSS2 quotes : none | string none :� content open-quote close-quote string :� string "<" string ">"
quotes blockquote[lang-=fr] { quotes: "\201C" "\201D" } blockquote[lang-=en] { quotes: "\00AB" "\00BB" } blockquote:before { content: open-quote } blockquote:after { content: close-quote } q { quotes: """ """ "'" "'"; }
This is an
emedded
quote.
"This is an 'embedded' quote." contentCSS2 content : attr(alt) | counter(name) | counter(name , list-style-type) | counters(name , string) | counters(name , string , list-style-type) | no-close- quote | no-open-quote | close-quote | open-quote | string | url(url) attr(alt) :� alt counter(name) :� list-style-type counter(name, list-style-type) :� counters(name, string) :� list-style-type counters(name, string, list-style-type) :� no-close-quote :� quotes no-open-quote :� quotes close-quote :� quotes open-quote :� quotes string :� url(url) :� url
:after :before content p:after { content: url("http:www.devguru.com"); text-decoration: none; } p:before { content: url("beep.wav") } counter-incrementCSS2 counter-increment : none | identifier number none :� identifier number :� identifier (selector)idclass number 1
(selector) counterIncrement p:before { content: "paragraph" counter(paragraph); counter-increment: paragraph; } counter-resetCSS2 counter-reset : none | identifier number none :� identifier number :� identifier (selector)idclass number 0
(selector) counterReset h1:before { counter-increment: main-heading; counter-reset: sub-heading; content: "Section " counter(main-heading) ":" } paddingCSS1 IE4+ NS4+ padding : length
| length :�
td th 1 0
IE5.5+ currentStyle padding body { padding: 36pt 24pt 36pt; } body { padding: 11.5%; } body { padding: 10% 10% 10% 10%; } padding-TopCSS1 IE4+ NS4+ padding-top : length
| length :�
td th 1 0 IE5.5+ currentStyle paddingTop body { padding: 36pt 24pt 36pt; } body { padding-top: 11.5%; } body { padding: 10% 10% 10% 10%; } padding-rightCSS1 IE4+ NS4+ padding-right : length
| length :�
td th 1 0 IE5.5+ currentStyle paddingRight body { padding: 36pt 24pt 36pt; } body { padding-right: 11.5%; } body { padding: 10% 10% 10% 10%; } padding-BottomCSS1 IE4+ NS4+ padding-bottom : length
| length :�
td th 1 0 IE5.5+ currentStyle paddingBottom body { padding: 36pt 24pt 36pt; } body { padding-bottom: 11.5%; } body { padding: 10% 10% 10% 10%; } padding-leftCSS1 IE4+ NS4+ padding-left : length
| length :�
td th 1 0 IE5.5+ currentStyle paddingLeft body { padding: 36pt 24pt 36pt; } body { padding-left: 11.5%; } body { padding: 10% 10% 10% 10%; } list-styleCSS1 IE4+ NS4+ list-style : list-style-image || list-style-position || list-style-type
disc outside none
list-style-image list-style-type list-style-image list-style-image none url listStyle li { list-style: url("http://www.dhtmlet.com/devgurupix.gif") inside circle; } ul { list-style: outside upper-roman; } ol { list-style: square; } list-style-imageCSS1 IE4+ NS6+ list-style-image : none | url ( url ) none :� url url ( url ) :�
none url list-style-type currentStyle listStyleImage ul.out { list-style-position: outside; list-style-image: url("images/ie.gif"); } list-style-positionCSS1 IE4+ NS6+ list-style-position : outside | inside outside :� inside :�
( margin-left ) 0 ( margin-left ) 30 display list-item li ol ul type ( li ) currentStyle listStylePosition ul.in { display: list-item; list-style-position: inside; } list-style-typeCSS1/CSS2 IE4+ NS6+ 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 armenianl :� 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
list-style-image none url ( margin-left ) 0 ( margin-left ) 30 display list-item li ol ul type ( li ) currentStyle listStyleType ul.in { display: list-item; list-style-position: inside; } marker-offsetCSS2 marker-offset : auto | length auto :� length :�
display marker markerOffset li:before { display: marker; marker-offset: 5px; } border-collapseCSS2 IE5+ border-collapse : separate | collapse separate :� HTML collapse :�
HTML currentStyle borderCollapse table { border-collapse: separate; } border-spacingCSS2 border-spacing : length
length :�
( border-collapse separate ) length length borderSpacing table { border-collapse: separate; border-spacing: 10px; } caption-sideCSS2 caption-side : top | right | bottom | left
caption top :� right :� caption bottom :� caption left :� caption
( table ) caption caption captionSide table caption { caption-side: top; width: auto; text-align: left; } empty-cellsCSS2 empty-cells : show | hide show :� hide :�
border-collapse separate emptyCells table { caption-side: top; width: auto; border-collapse: separate; empty-cells: hide; } table-layoutCSS2 IE5+ table-layout : auto | fixed auto :� col ( width ) 100% fixed :�
IE
1. col colGroup ( width ) 2. ( width ) 3.
fixed
currentStyle tableLayout table { table-layout: fixed; } speak-headerCSS2 speak-header : once | always once :� always :�
( table )( td )
speakHeader table { speak-header: once } scrollbar-3dlight-colorIE5.5+ scrollbar-3dlight-color : color
color :�
overflow scrollbar3dLightColor div {scrollbar-3dlight-color :threedhighlight; } scrollbar-highlight-colorIE5.5+ scrollbar-highlight-color : color
color :�
3D(ThreedHighlight) overflow scrollbarHighlightColor div {scrollbar-highlight-color :threedhighlight; } scrollbar-face-colorIE5.5+ scrollbar-face-color : color
color :�
3D(ThreedFace) overflow scrollbarFaceColor div {scrollbar-face-color : threedface; } scrollbar-arrow-colorIE5.5+ scrollbar-arrow-color : color
color :�
overflow scrollbarArrowColor div {scrollbar-arrow-color : buttontext; } scrollbar-shadow-colorIE5.5+ scrollbar-shadow-color : color
color :�
3D(ThreedShadow) overflow scrollbarShadowColor div {scrollbar-shadow-color :ThreedDarkShadow; } scrollbar-darkshadow-color IE5.5+ scrollbar-darkshadow-color : color
color :�
(ThreedDarkShadow) overflow scrollbarDarkShadowColor div {scrollbar-darkshadow-color :threeddarkshadow; } scrollbar-base-colorIE5.5+ scrollbar-base-color : color
color :�
overflow scrollbarBaseColor div {scrollbar-base-color : buttonface; } scrollbar-track-colorIE5.5+ scrollbar-track-color : color
color :�
(TrackBar) overflow scrollbarTrackColor div {scrollbar-track-color :ThreedDarkShadow; } pageCSS2 page : auto | pagetype auto :� pagetype :� @page ( pagetype )
( pagetype ) @page page
@page doublepage { size: 8.5in 11in; page-break-after: left } body { page: doublepage; page-break-after: right } page-break-afterCSS2 IE4+ page-break-after : auto | always | avoid | left | right | null auto :� always :� avoid :� left :� right :� null :�
BR HR page-break-before
IE6 left right always currentStyle pageBreakAfter p { page-break-after: always;} page-break-beforeCSS2 IE4+ page-break-before : auto | always | avoid | left | right | null auto :� always :� avoid :� left :� right :� null :�
BR HR page-break-after
IE6 left right always currentStyle pageBreakBefore p { page-break-before: always;} page-break-insideCSS2 page-break-inside : auto | avoid auto :� avoid :�
pageBreakInside p { page-break-inside: auto } marksCSS2 marks : none | crop || cross none :� crop :� lcross :�
marks body { marks: crop cross } orphansCSS2 orphans : number number :�
orphans p { orphans: 4; } sizeCSS2 size : auto | portrait | landscape | length auto :� (Relative) portrait :� (Relative)() landscape :� (Relative) (Absolute) length :�
size body { size: 8.5in 11in } widowsCSS2 widows : number number :�
widows p { widows: 1 } voice-familyCSS2 voice-family : child | female | male || name child :� female :� male :� name :�
voiceFamily strong { voice-family: "Bob Barker", "Monty Hall", male } volumeCSS2 volume : silent | x-soft | soft | medium | loud | x-loud | number silent :� speak none x-soft :� number 0 soft :� number 25 medium :� number 50 loud :� number 75 x-loud :� number 100 number :� |0-100
volume body { volume: soft } elevationCSS2 elevation : below | level | above | lower | higher | angle below :� -90deg level :� 0deg above :� 90deg lower :� 10deg higher :� 10deg -90deg90degdeg angle :�
elevation body { elevation: 75deg } azimuthCSS2 azimuth : left-side | far-left | left | center-left | center | center-right | right | far-right | right-side | leftwards | rightwards | angle left-side :� 270deg | 90deg far-left :� 300deg | -60deg left :� 320deg | -40deg center-left :� 340deg | -20deg center :� 0deg center-right :� 20deg | -340deg right :� 40deg | -320deg far-right :� 60deg | -300deg right-side :� 90deg | -270deg leftwards :� 20deg rightwards :� 20deg -360deg360degdeg angle :�
azimuth div { azimuth : 30deg; } p { azimuth : center-left; } body { azimuth: 75deg; } stressCSS2 stress : number number :� 0-100 50
pitch-range stress body { stress: 75 } richnessCSS2 richness : number number :� 0-100 50
richness body { richness: 75 } speech-rateCSS2 speech-rate : x-slow | slow | medium | fast | x-fast | slower | faster | number x-slow :� 80/ slow :� 120/ medium :� 180-200/ fast :� 300/ x-fast :� 500/ slower :� 40 faster :� 40 number :�
speechRate strong { speech-rate: fast } cue-beforeCSS2 cue : cue-before || cue-after
cue-before cue-after cue-before cue-after cue div { cue: url(orchestralsneeze.wav) none } div { cue: url(orchestralsneeze.wav); } cue-afterCSS2 cue-after : none | url ( url ) none :� url url ( url ) :�
cueAfter div { cue-after: url(orchestralsneeze.wav) ; } cue-beforeCSS2 cue-before : none | url ( url ) none :� url url ( url ) :�
cueBefore div { cue-before: url(orchestralsneeze.wav); } pauseCSS2 pause : pause-before || pause-after
pause-before pause-after pause-before pause-after pause div { pause: 2s 3s } div { pause: 2s; } pause-afterCSS2 pause-after : time
| speech-rate 60/ speech-rate 100% pause-after 1 time :�
pauseAfter div { pause-after: 2s; } pause-beforeCSS2 pause-before : time
| speech-rate 60/ speech-rate 100% pause-before 1 time :�
pauseBefore div { pause-before: 2s; } pitchCSS2 pitch : x-low | low | medium | high | x-high | number
HZ voice-family number :�
pitch strong { pitch: x-high } strong { pitch: 75hz } pitch-rangeCSS2 pitch-range : number number :� 0-100 50 5050
pitchRange strong { pitch-range: 80 } play-duringCSS2 play-during : url ( url ) | mix | repeat | auto | none url ( url ) :� url mix :� repeat :� auto :� play-during play-during none :�
playDuring p { play-during: url(accordian.wav) mix } speakCSS2 speak : normal | none | spell-out normal :� none :� volume silent spell-out :�
speak acronym { speak: spell-out } speak-numeralCSS2 speak-numeral : continuous | digits continuous :� digits :�
speakNumeral
.telephone { speak-numeral: digits } speak-punctuationCSS2 speak-punctuation : none | code none :� code :�
speakPunctuation
.telephone { speak-punctuation: code; speak-numeral: digits } cursorCSS2 IE4.0+ NS6.0+ cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url ) auto :� all-scroll :� IE6.0 col-resize :� IE6.0 crosshair :� default :� hand :� move :� help :� no-drop :� IE6.0 not-allowed :� IE6.0 () pointer :� IE6.0 hand progress :� IE6.0 row-resize :� IE6.0 text :� I vertical-text :� IE6.0 I 90 wait :� w-resize | s-resize | n-resize | e-resize | ne-resize | *-resize :� sw-resize | se-resize | nw-resize url ( url ) :� IE6.0 url ( .cur .ani )
currentStyle cursor p { cursor: text; } a { cursor: pointer; } body { cursor: url("mycursor.gif"), url("images/cursors/footcursor.jpg"), default; } behaviorIE5+ behavior : url ( url ) | url ( #objID ) | url ( #default#behaviorName ) url ( url ) :� url DHTML.htc ( ActiveX® ) #objID object id url ( #objID ) :� url ( #default#behaviorName ) :� IE( #behaviorName )
DHTML
addBehavior currentStyle (CSS) behavior addBehavior behavior p { behavior: url(#default#download); } div { behavior: url(fly.htc) url(shy.htc); } div { behavior: url(#myObject); } filterIE5.5+ filter : filter filter :� ( Visual Filters and Transitions Reference)
height
img shadow img Microsoft® DirectX® Media SDKC++ MAC filter div { width:200px; filter:blur(strength=50) flipv() ; } img { filter: invert(); } input.aFilter {filter: alpha(opacity=50);} div { width:200px; filter:redirect ; } .aFilter {background-color: #FFFFFF; filter: light(); color: #000000; width: 150;} div.aFilter {filter: glow(Color=blue,Strength=5); width: 150;} div.aFilter {filter: shadow(color=#0000FF,direction=45); width: 150; color: FF0000;} zoomIE5.5+ zoom : normal | number normal :� | 1.0100% number :� normal
( children ) background filter currentStyle zoom div {zoom : 0.75; } .clsTeenyWeeny { zoom: 0.10 } Universal SelectorCSS2
* { sRules }
(DOM) “*”
*[lang=fr] { font-size:14px; width:120px; } *.div { text-decoration:none; } Type SelectorsCSS1 IE4+ NS4+
E { sRules }
(Element) td { font-size:14px; width:120px; } a { text-decoration:none; } Attribute SelectorsCSS2
1. E [ attr ] { sRules } 2. E [ attr = value ] { sRules } 3. E [ attr ~= value ] { sRules } 4. E [ attr |= value ] { sRules }
1. attr E 2. attr value E 3. attr value E value 4. attr value E h[title] { color: blue; } /* titleh */ span[class=demo] { color: red; } div[speed="fast"][dorun="no"] { color: red; } a[rel~="copyright"] { color:black; } Descendant SelectorsCSS1 IE4+ NS4+
E1 E2 { sRules }
E1 E2 E1.contains(E2)==true table td { font-size:14px; } div.sub a { font-size:14px; } Child SelectorsCSS2
E1 > E2 { sRules }
E1 E2 body > p { font-size:14px; } /* bodyp14px */ div ul>li p { font-size:14px; } ID SelectorsCSS1 IE4+ NS4+
#ID { sRules }
ID(DOM) ID
#note { font-size:14px; width:120px;} Class SelectorsCSS1 IE4+ NS4+
E.className { sRules }
HTML E [ class ~= className ] ( Attribute Selectors IE5+ class ()( className )
.dream { font-size:14px; } /* class"note"14px */ GroupingCSS1 IE4+ NS4+
E1 , E2 , E3 { sRules }
.td1,div a,body { font-size:14px; } td,div,a { font-size:14px; } Pseudo SelectorsCSS1 IE4+ NS4+
1. E : Pseudo-Classes { sRules } 2. E : Pseudo-Elements { sRules }
1. ( Pseudo-Classes ) 2. ( Pseudo-Elements ) div:first-letter { font-size:14px; } a.fly :hover { font-size:14px; color:red; } :linkCSS1 IE4+ NS4+
Selector : link { sRules }
a
href () a body link () document linkColor IE3 :link visited a:link { font-size: 14pt; text-decoration: underline; color: blue; } :hoverCSS1/CSS2 IE4+ NS4+
Selector : hover { sRules }
CSS1 a href () a CSS2 a:hover { font-size: 14pt; text-decoration: underline; color: blue; } a:hover span{ color:red; } :activeCSS1/CSS2 IE4+ NS4+
Selector : active { sRules }
() CSS1 a href () a CSS2 :active :link :visited a:active { font-size: 14pt; text-decoration: underline; color: blue; } :visitedCSS1/CSS2 IE4+ NS4+
Selector : visited { sRules }
a IE3 :link :visited
href () a body vlink () document vlinkColor a:visited { font-size: 14pt; text-decoration: underline; color: blue; } :first-childCSS2
Selector : first-child { sRules }
E p a:first-child { color: green } table td:first-child { width:200px; } :firstCSS2 IE5.5+
Selector : first { sRules }
@page
@page :first { margin: 4cm } :leftCSS1 IE5.5+
Selector : left { sRules }
@page
@page :left { margin: 4cm } :rightCSS1 IE5.5+
Selector : right { sRules }
@page
@page :right { margin: 4cm } :langCSS2
Selector : lang { sRules }
blockquote:lang(fr) { quotes: '?' ' ?' } /* quotes */ :focusCSS2
Selector : focus { sRules }
( onfocus ) a:focus { font-size: 14pt; text-decoration: underline; color: blue; } a:focus img { border: thin solid green } :afterCSS1
Selector : after { sRules }
content () table:after { content: END OF TABLE } :first-letterCSS2 IE5.5+
Selector : first-letter { sRules }
height width position
font-size float p a:first-letter { color: green } div:first-letter { color:red;font-size:16px;float:left; } :first-lineCSS2 IE5.5+
Selector : first-line { sRules }
height width position width p a:first-line { color: green } div:first-line { color:red;font-size:16px; } :beforeCSS2
Selector : before { sRules }
content () em:before { content: url("ding.wav"); } @importCSS1/CSS2 IE4+
@import url ( url ) sMedia ; url ( url ) :� url link sMedia :�
link owningElement link style IE4.0+
@import url("foo.css") screen, print; @import "print.css"; @import url(print.css); @charsetCSS2 IE4+
@charset sCharacterSet sCharacterSet :�
HTML meta content ()
@charset "Windows-1251"; @charset "Shift-JIS"; @font-faceCSS2 IE4+
@font-face { font-family : name ; src : url ( url ) ; sRules }
font-family name :� url ( url ) :� url OpenType sRules :�
HTML url OpenType (.eot.ote) WEFT
@font-face { font-family:comic;src:url(http://valid_url/some_font_file.eot); } @font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); } @fontdefNS4+ NS4+
@fontdef { url ( url ) } url ( url ) :� url HTML
HTML
@fontdef url("http://www.example.com/sample.pfr"); @pageCSS1 IE5.5+
@page pseudo-class { sRules } pseudo-class :� :first | :left | :right sRules :�
IE5.5+IEMSHTML
@page thin:first { size: 3in 8in } @mediaCSS2 IE5+
@media sMedia { sRules }
sMedia :� sRules :�
link media ()
// @media screen { BODY {font-size:12pt; } }
// @media print { @import "print.css" BODY {font-size:8pt;} } !importantCSS1 IE4+
{ sRule!important } sRules :�
div { color:red!important } pxCSS1 IE3+ NS4+
Pixel WONDOWS96/MAC72/ div { font-size : 12px; } emCSS1 IE4+ NS4+
div { font-size : 1.2em; } exCSS1 IE4+ NS4+
“x” div { font-size : 1.2ex; } ptCSS1 IE3+ NS4+
Point 1in = 2.54cm = 25.4 mm = 72pt = 6pc div { font-size : 9pt; } pcCSS1 IE3+ NS4+
Pica 1in = 2.54cm = 25.4 mm = 72pt = 6pc div { font-size : 0.75pc; } inCSS1 IE3+ NS4+
Inch 1in = 2.54cm = 25.4 mm = 72pt = 6pc div { font-size : 0.13in; } mmCSS1 IE3+ NS4+
Millimeter 1in = 2.54cm = 25.4 mm = 72pt = 6pc div { font-size : 3.3mm; } cmCSS1 IE3+ NS4+
Centimeter 1in = 2.54cm = 25.4 mm = 72pt = 6pc div { font-size : 0.33cm; } rgb ( R , G , B ) CSS1 IE4+ NS4+
| R :� | G :� | B :�
0 - 2550.0% - 100.0%
div { color: rgb(132,20,180); } div { color: rgb(12%,200,50%); } #RRGGBBCSS1 IE4+ NS4+
RR :� GG :� BB :�
00 - FF
#RGB #FF8800 #F80
div { color: #FF0000; } div { color: #F00; } Color NameCSS1 IE4+ NS4+
div {color: red; } degCSS2
360 body { azimuth: 75deg } body { elevation: 75deg } gradCSS2
100400grad body { azimuth: 75grad } body { elevation: 75grad } radCSS2
2*PI body { azimuth: 3rad } body { elevation: 5rad } sCSS2
1s = 1000 ms div { pause-after: 2s; } div { pause-before: 2s; } msCSS2
1s = 1000 ms div { pause-after: 2s; } div { pause-before: 2s; } HzCSS2
1kHz = 1000 Hz strong { pitch: 75hz } kHzCSS2
1kHz = 1000 Hz strong { pitch: 8kHz } GradientIE5.5+ filter : progid:DXImageTransform.Microsoft.Gradient ( enabled=bEnabled , startColorStr=iWidth , endColorStr=iWidth )
(Boolean) true | false enabled :� true :� false :� (String) #AARRGGBB AA RR GG BB 00 - FF RR GG startColorStr :� BB #RRGGBB AA 00 FF #FF000000 - #FFFFFFFF #FF0000FF EndColorStr :� (String) startColorStr #FF000000
Enabled :� (Boolean) enabled (Integer) 1 | 0 GradientType :� 1 :� 0 :� StartColorStr :� (String) startColorStr (Integer) 0 - 4294967295 0 4294967295 StartColor :� EndColorStr :� (String) startColorStr #FF000000 (Integer) 0 - 4294967295 0 4294967295 EndColor :� 0xAARRGGBB
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#550000FF, endColorstr=#55FFFF00) ;} #idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient() ;} AlphaImageLoaderIE5.5+ filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
(Boolean) true | false enabled :� true :� false :� (String) crop :� sizingMethod :� image :� scale :� src :� (String) url
Enabled :� (Boolean) enabled sizingMethod :� (String) sizingMethod src :� (String) src
PNG(Portable Network Graphics)0%-100% PNG(Portable Network Graphics)PNG(Portable Network Graphics)
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='rain1977.gif',sizingMethod='scale');} .dream{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/earglobe.gif');} AlphaIE4.0+ filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=bEnabled , style=iStyle , opacity=iOpacity , finishOpacity=iFinishOpacity , startX=iPercent , startY=iPercent , finishX=iPercent , finishY=iPercent )
(Boolean) true | false enabled :� true :� false :� (Integer) 0 | 1 | 2 | 3 0 :� Opacity StartX StartY Opacity FinishX 1 :� style :� FinishY FinishOpacity 2 :� Opacity FinishOpacity 3 :� Opacity FinishOpacity opacity :� (Integer) finishOpacity :� (Integer) startX :� (Integer) startY :� (Integer) finishX :� (Integer) finishY :� (Integer)
Enabled :� (Boolean) enabled Style :� (Integer) style Opacity :� (Integer) opacity FinishOpacity :� (Integer) finishOpacity StartX :� (Integer) startX StartY :� (Integer) startY FinishX :� (Integer) finishX FinishY :� (Integer) finishY #idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);} #idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10,finishOpacity=100,style=2);} BasicImageIE5.5+ filter : progid:DXImageTransform.Microsoft.BasicImage ( enabled=bEnabled , grayScale=bGray , mirror=bMirror , opacity=fOpacity , XRay=bXRay )
(Boolean) true | false enabled :� true :� false :� (Boolean) 0 | 1 grayScale :� 1 :� 0 :� (Boolean) 0 | 1 mirror :� 1 :� 0 :� opacity :� (Float) 0.0 - 1.0 1.0 0.0 (Boolean)X 0 | 1 XRay :� 1 :� X 0 :�
Enabled :� (Boolean) enabled GrayScale :� (Boolean) grayScale (Boolean) 0 | 1 Invert :� 1 :� 0 :� (Boolean) MaskColor (Mask) Mask :� 1 :� 0 :� (Integer) 0xAARRGGBB AA RR GG BB 00 - FF RR GG MaskColor :� BB #RRGGBB AA 00 FF 0x00000000 - 0xFFFFFFFF 0x00000000 Mirror :� (Boolean) mirror Opacity :� (Float) opacity (Integer) 0 | 1 | 2 | 3 0 :� Rotation :� 1 :� 90 2 :� 180 3 :� 270 XRay :� (Boolean) XRay
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.2); } #idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.BasicImage(invert=1); } #idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.BasicImage(invert=1,GrayScale=1); } BlurIE5.5+ filter : progid:DXImageTransform.Microsoft.Blur ( enabled=bEnabled , makeShadow=bShadow , pixelRadius=flRadius , shadowOpacity=fOpacity )
(Boolean) true | false enabled :� true :� false :� (Boolean) makeShadow :� true :� ShadowOpacity false :� (Float)( pixelRadius :� 1.0 - 100.0 2.0 1.0 100.0 2.0 (Float) makeShadow () shadowOpacity :� 0.0 - 1.0 0.0 1.0 0.75 0.75
Enabled :� (Boolean) enabled MakeShadow :� (Boolean) makeShadow PixelRadius :� (Float) pixelRadius ShadowOpacity :� (Float) shadowOpacity
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.blur() ; } #idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.blur(pixelradius=3.0, makeshadow='true', ShadowOpacity=1.0); } #idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled='false') ; } ChromaIE4.0+ filter : progid:DXImageTransform.Microsoft.Chroma ( enabled=bEnabled , color=sColor )
(Boolean) true | false enabled :� true :� false :� (String) #AARRGGBB AA RR GG BB 00 - FF RR GG color :� #RRGGBB AA 00 FF #FF0000FF
Enabled :� (Boolean) enabled Color :� (String) color
824JPEG () color
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow'), progid:DXImageTransform.Microsoft.Chroma(color='red') ; } #idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow') ; } CompositorIE5.5+ filter : progid:DXImageTransform.Microsoft.Compositor ( function=sFunction )
(Integer) 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 22 | 23 | 24 | 25 0 :� 1 :� MIN AB 2 :� MAX AB 3 :� AA 4 :� A OVER BBAA BA 5 :� A IN BAB alpha 0 B 6 :� A OUT BAB B 7 :� A ATOP B ABB alpha function : � 8 :� A SUBTRACT BBAAA alpha 9 :� A ADD BBAA A alpha 10 :� A XOR BAB alpha 19 :� BB 20 :� B OVER AABB AB 21 :� B IN ABA alpha 0 A 22 :� B OUT ABA A 23 :� B ATOP A BAA alpha 24 :� B SUBTRACT AABBB alpha 25 :� B ADD AABB B alpha
Function :� (Integer) function
apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration
1. ( function ) 2. ( filter ) 3. A 4. apply 5. visibility innerText background-color border B 6. play
#idDiv{ filter:progid:DXImageTransform.Microsoft.Compositor(function=20, duration=7);} DropShadowIE4.0+ filter : progid:DXImageTransform.Microsoft.DropShadow ( enabled=bEnabled , color=sColor , offX=iOffsetX , offY=iOffsetY , positive=bPositive )
(Boolean) true | false enabled :� true :� false :� (String) #AARRGGBB AA RR GG BB 00 - FF RR GG color :� #RRGGBB AA 00 FF #FF404040 offX :� (Integer)( px ) 5 offY :� (Integer)( px ) 5 (Boolean) positive :� true :� false :�
Enabled :� (Boolean) enabled Color :� (String) color OffX :� (Integer) offX OffY :� (Integer) offY Positive :� (Boolean) positive
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive=true); } #idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.dropshadow(Positive=true) ; } EmbossIE5.5+ filter : progid:DXImageTransform.Microsoft.Emboss ( enabled=bEnabled , Bias=fBias )
(Boolean) true | false enabled :� true :� false :� Bias :� (Float)
Enabled :� (Boolean) enabled Bias :� (Float) Bias
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.emboss(enabled='false') ; } EngraveIE5.5+ filter : progid:DXImageTransform.Microsoft.Engrave ( enabled=bEnabled , Bias=fBias )
(Boolean) true | false enabled :� true :� false :� Bias :� (Float)
Enabled :� (Boolean) enabled Bias :� (Float) Bias
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.emboss(enabled='false') ; } GlowIE4.0+ filter : progid:DXImageTransform.Microsoft.Glow ( enabled=bEnabled , color=sColor , strength=iDistance )
(Boolean) true | false enabled :� true :� false :� (String) #RRGGBB RR GG BB 00 - FF RR GG BB color :� #RRGGBB #FF0000 strength :� (Integer)( px ) 1 - 255 5
Enabled :� (Boolean) enabled Color :� (String) color Strength :� (Integer) strength
( background ) ( background )
#idDiv{position:absolute; left:140px; height:400; width:400;filter: glow(Color=blue,Strength=5) ; } #idDiv{position:absolute; left:140px; height:400; width:400;filter: glow(color=#000000) ; } LightIE4.0+ filter : progid:DXImageTransform.Microsoft.Light ( enabled=bEnabled )
(Boolean) true | false enabled :� true :� false :�
Enabled :� (Boolean) enabled
(Integer) iRed :� (Integer) iGreen :� addAmbient (iRed,iGreen,iBlue,iStrength) :� (Integer) iBlue :� (Integer) iStrength :�
(Integer) iX1 :� (Integer) iY1 :� (Integer)Z iZ1 :� (Integer) iX2 :� (Integer) addCone iY2 :� :� (iX1,iY1,iZ1,iX2,iY,iRed,iGreen,iBlue,iStrength,iSpread) (Integer) iRed :� (Integer) iGreen :� (Integer) iBlue :� (Integer) iStrength :� (Integer) iSpread :�
(Integer) iX :� (Integer) iY :� (Integer)Z iZ :� addPoint (iX,iY,iZ,iRed,iGreen,iBlue,iStrength) :� (Integer) iRed :� (Integer) iGreen :� (Integer) iBlue :� (Integer) iStrength :�
iLightNumber :� (Integer)
(Integer) iRed :�
changeColor (Integer) :� iGreen :� (iLightNumber,iRed,iGreen,iBlue,fAbsolute)
(Integer) iBlue :� fAbsolute :� (Boolean)
iLightNumber :� (Integer)
(Integer) changeStrength (iLightNumber,iStrength,fAbsolute) :� iStrength :�
(Boolean) fAbsolute :� clear () :�
iLightNumber :� (Integer)
iX :� (Integer) moveLight (iLightNumber,iX,iY,iZ,fAbsolute) :� iY :� (Integer)
iZ :� (Integer) Z
(Boolean) fAbsolute :� true false .aFilter { background-color: #FFFFFF; filter:light();color: cyan;width: 150;} MaskFilterIE4.0+ filter : progid:DXImageTransform.Microsoft.MaskFilter ( enabled=bEnabled , color=sColor )
(Boolean) true | false enabled :� true :� false :� (String) #AARRGGBB AA RR GG BB 00 - FF RR GG color :� #RRGGBB AA 00 FF #FF000000
Enabled :� (Boolean) enabled Color :� (String) color
color BasicImage
DIV.aFilter {filter:mask(color=#008800); width: 100;} MatrixIE5.5+ filter : progid:DXImageTransform.Microsoft.Matrix ( enabled=bEnabled , SizingMethod=sMethod , FilterType=sType , Dx=fDx , Dy=fDy , M11=fM11 , M12=fM12 , M21=fM21 , M22=fM22 )
(Boolean) true | false enabled :� true :� false :� (String) SizingMethod :� clip to original :� auto expand :� (String) bilinear bilinear nearest neighbor FilterType : � bilinear :� bilinear nearest neighbor :� nearest neighbor (Float) X Dx :� (Float) Y Dy :� M11 :� (Float)/ M12 :� (Float)/ M21 :� (Float)/ M22 :� (Float)/
Enabled :� (Boolean) enabled SizingMethod :� (String) SizingMethod FilterType :� (String) FilterType Dx :� (Float) Dx Dy :� (Float) Dy M11 :� (Float) M11 M12 :� (Float) M12 M21 :� (Float) M21 M22 :� (Float) M22 1. M11 M12 2. M21 M22 3. M11 M12 M21 M22
padding
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(enabled='false') ; } #idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, sizingmethod="auto expand"); } MotionBlurIE4.0+ filter : progid:DXImageTransform.Microsoft.MotionBlur ( enabled=bEnabled , add=bAddImage , direction=iOffset , strength=iDistance )
(Boolean) true | false enabled :� true :� false :� (Boolean) true add :� true :� false :� (Integer) 0 360 0 - 360 -45 315 0 :� 45 :� 90 :� direction : � 135 :� 180 :� 225 :� 270 :� 315 :� strength :� (Integer)( px ) >=0 5
Enabled :� (Boolean) enabled Add :� (Boolean) add Direction :� (Integer) direction Strength :� (Integer) strength
DIV.aFilter {filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=5,Direction=90);} #oDIV {filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=10, Direction=45, Add='true');} ShadowIE4.0+ filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor , direction=iOffset , strength=iDistance )
(Boolean) true | false enabled :� true :� false :� (String) color :� #RRGGBB RR GG BB 00 - FF RR GG BB #RRGGBB (Integer) 0 360 0 - 360 -45 315 0 :� 45 :� 90 :� direction : � 135 :� 180 :� 225 :� 270 :� 315 :� strength :� (Integer)( px ) >=0 5
Enabled :� (Boolean) enabled Color :� (String) color Direction :� (Integer) direction Strength :� (Integer) strength
DIV.aFilter {filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5,Direction=90);} #oDIV {filter:progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=45, color=blue);} WaveIE4.0+ filter : progid:DXImageTransform.Microsoft.Wave ( enabled=bEnabled , add=bAddImage , freq=iWaveCount , lightStrength=iPercentage , phase=iPercentage , strength=iDistance )
(Boolean) true | false enabled :� true :� false :� (Boolean) add :� true :� false :� freq :� (Integer) 3 lightStrength :� (Integer) phase :� (Integer) strength :� (Integer)( px ) >=1 1
Enabled :� (Boolean) enabled Add :� (Boolean) add Freq :� (Integer) freq LightStrength :� (Integer) lightStrength Phase :� (Integer) phase Strength :� (Integer) strength
DIV.aFilter {filter:progid:DXImageTransform.Microsoft.Wave(Strength=5);} #oDIV {filter:progid:DXImageTransform.Microsoft.Wave(Strength=10, Add=true);} ICMFilterIE5.5+ filter : progid:DXImageTransform.Microsoft.ICMFilter ( colorSpace=sPathFilename , intent =sIntent )
(String)(.icm)(.icm)(.icm) (.icm) sRGB sFile | sRGB colorSpace : � sFile :� (.icm) sRGB :� (String)
Picture :� intent : � Graphic :� Proof :� Match :�
ColorSpace :� (String) colorSpace Intent :� (String) intent
(.icm) Intent Intent Graphic (.icm)(.icm)
#idDiv{ filter:progid:DXImageTransform.Microsoft.ICMFilter(colorSpace=sRGB, intent=Picture);} XrayIE4.0+ filter : Xray ( enabled=bEnabled )
(Boolean) true | false enabled :� true :� false :�
Enabled :� (Boolean) enabled
X BasicImage
#idDiv{ height:250px; width:250px; filter:Xray(); } GrayIE4.0+ filter : Gray ( enabled=bEnabled )
(Boolean) true | false enabled :� true :� false :�
Enabled :� (Boolean) enabled
BasicImage
#idDiv{ height:250px; width:250px; filter:Gray(); } InvertIE4.0+ filter : Invert ( enabled=bEnabled )
(Boolean) true | false enabled :� true :� false :�
Enabled :� (Boolean) enabled
BasicImage
#idDiv{ height:250px; width:250px; filter:Invert(); } FlipHIE4.0+ filter : FlipH ( enabled=bEnabled )
(Boolean) true | false enabled :� true :� false :�
Enabled :� (Boolean) enabled
BasicImage
#idDiv{ height:250px; width:250px; filter:FlipH(); } FlipVIE4.0+ filter : FlipV ( enabled=bEnabled )
(Boolean) true | false enabled :� true :� false :�
Enabled :� (Boolean) enabled
BasicImage
#idDiv{ height:250px; width:250px; filter:FlipV(); } Redirect BarnIE5.5+ filter : progid:DXImageTransform.Microsoft.Barn ( enabled=bEnabled , duration=fDuration , motion=sMotion , orientation=sOrientation )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration (String) motion :� out :� in :� (String) orientation :� vertical :� horizontal :�
Enabled :� (Boolean) enabled Duration :� (Real) duration Motion :� (String) motion Orientation :� (String) orientation (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play) apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
#idDiv{ filter:progid:DXImageTransform.Microsoft.Barn(function=20, duration=7);} BlindsIE5.5+ filter : progid:DXImageTransform.Microsoft.Blinds ( enabled=bEnabled , duration=fDuration , bands=iBands , Direction=sDirection )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration bands :� (Integer) (String) down | up | right down :� Direction :� up :� right :� left :�
Enabled :� (Boolean) enabled Duration :� (Real) duration Bands :� (Integer) bands Direction :� (String) Direction (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play) apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
#idDiv{ filter:progid:DXImageTransform.Microsoft.Blinds(direction='down');} CheckerBoardIE5.5+ filter : progid:DXImageTransform.Microsoft.CheckerBoard ( enabled=bEnabled , duration=fDuration , squaresX=iColumns , squaresY=iColumns , Direction=sDirection )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration squaresX :� (Integer) squaresY :� (Integer) (String) down | up | right | down :� Direction :� up :� right :� left :�
Enabled :� (Boolean) enabled Duration :� (Real) duration SquaresX :� (Integer) squaresX SquaresY :� (Integer) squaresY Direction :� (String) Direction (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.CheckerBoard(duration=5, direction='left'); } FadeIE5.5+ filter : progid:DXImageTransform.Microsoft.Fade ( enabled=bEnabled , duration=fDuration , overlap=fOverlap )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration (Real) 0.4 duration 10 overlap :� 1. 2. 3.
Enabled :� (Boolean) enabled Duration :� (Real) duration Overlap :� (Real) overlap (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play) apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Fade(duration=2);} GradientWipeIE5.5+ filter : progid:DXImageTransform.Microsoft.GradientWipe ( enabled=bEnabled , duration=fDuration , gradientSize=fGradientWidth , motion=sMotion )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration gradientSize :� (Real) (String) WipeStyle motion :� forward :� WipeStyle reverse :� WipeStyle
Enabled :� (Boolean) enabled Duration :� (Real) duration GradientSize :� (Real) gradientSize Motion :� (String) motion (String) 0 | 1 WipeStyle :� 0 :� 1 :� (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
#idDiv{height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.gradientWipe(duration=3, gradientsize=0.5);} InsetIE5.5+ filter : progid:DXImageTransform.Microsoft.Inset ( enabled=bEnabled , duration=fDuration )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration
Enabled :� (Boolean) enabled Duration :� (Real) duration (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange #idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Inset();} IrisIE5.5+ filter : progid:DXImageTransform.Microsoft.Iris ( enabled=bEnabled , duration=fDuration , irisStyle=sShape , motion=sMotion )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration (String) PLUS | DIAMOND SQUARE | STAR PLUS :� DIAMOND :� irisStyle : � CIRCLE :� CROSS :� SQUARE :� STAR :� (String) motion :� out :� in :�
Enabled :� (Boolean) enabled Duration :� (Real) duration IrisStyle :� (String) irisStyle Motion :� (String) motion (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 status :� 0 :� (stop) 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Iris(duration=3);} PixelateIE5.5+ filter : progid:DXImageTransform.Microsoft.Pixelate ( enabled=bEnabled , duration=fDuration , maxSquare=iWidth )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration maxSquare :� (Integer)
Enabled :� (Boolean) enabled Duration :� (Real) duration MaxSquare :� (Integer) maxSquare (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
Enabled false
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Pixelate(duration=3, enabled='false');} RadialWipeIE5.5+ filter : progid:DXImageTransform.Microsoft.RadialWipe ( enabled=bEnabled , duration=fDuration ,wipeStyle=sStyle )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration (String) CLOCK | WEDGE | RADIAL CLOCK :� wipeStyle :� WEDGE :� RADIAL :�
Enabled :� (Boolean) enabled Duration :� (Real) duration WipeStyle :� (String) wipeStyle (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility ) (Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
#idDiv{height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.RadialWipe(duration=3);} RandomBarsIE5.5+ filter : progid:DXImageTransform.Microsoft.RandomBars ( enabled=bEnabled , duration=fDuration , orientation=sOrientation )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration (String) horizontal | vertical orientation :� horizontal :� vertical :�
Enabled :� (Boolean) enabled Duration :� (Real) duration Orientation :� (String) orientation (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility ) (Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
#idDiv{height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.RandomBars(duration=3);} RandomDissolveIE5.5+ filter : progid:DXImageTransform.Microsoft.RandomDissolve ( enabled=bEnabled , duration=fDuration )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration
Enabled :� (Boolean) enabled Duration :� (Real) duration (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange #idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.RandomDissolve();} SlideIE5.5+ filter : progid:DXImageTransform.Microsoft.Slide ( enabled=bEnabled , duration=fDuration , bands=iBands , slideStyle=sslideStyle )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration bands :� (Integer) (String) HIDE | PUSH HIDE :� slideStyle :� PUSH :� SWAP :�
Enabled :� (Boolean) enabled Duration :� (Real) duration Bands :� (Integer) bands SlideStyle :� (String) slideStyle (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play) apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
#idDiv{ filter:progid:DXImageTransform.Microsoft.Slide(bands=8, duration=7);} SpiralIE5.5+ filter : progid:DXImageTransform.Microsoft.Spiral ( enabled=bEnabled , duration=fDuration , gridSizeX=iColumns , gridSizeY=iColumns )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration gridSizeX :� (Integer) gridSizeY :� (Integer)
Enabled :� (Boolean) enabled Duration :� (Real) duration GridSizeX :� (Integer) gridSizeX GridSizeY :� (Integer) gridSizeY (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility ) (Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Spiral(duration=5, GridSizeX=25, GridSizeY=25); } StretchIE5.5+ filter : progid:DXImageTransform.Microsoft.Stretch ( enabled=bEnabled , duration=fDuration , stretchStyle=sStretchStyle )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration (String) SPIN | HIDE | PUSH SPIN :� stretchStyle :� HIDE :� () PUSH :�
Enabled :� (Boolean) enabled Duration :� (Real) duration StretchStyle :� (String) stretchStyle (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility ) (Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
()
#idDiv{height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.Stretch(duration=3);} StripsIE5.5+ filter : progid:DXImageTransform.Microsoft.Strips ( enabled=bEnabled , duration=fDuration , motion=sMotion )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration (String) leftdown | leftup | rightdown | Prightup leftdown :� motion :� leftup :� rightdown :� rightup :�
Enabled :� (Boolean) enabled Duration :� (Real) duration Motion :� (String) motion (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play) apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
#idDiv{height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.Strips(duration=3);} WheelIE5.5+ filter : progid:DXImageTransform.Microsoft.Wheel ( enabled=bEnabled , duration=fDuration , spokes=iSpokes )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration spokes :� (Integer) 2 - 20 4
Enabled :� (Boolean) enabled Duration :� (Real) duration spokes :� (String) spokes (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
#idDiv{height:250px; width:250px; background-color: orange; filter:progid:DXImageTransform.Microsoft.Wheel(duration=3,spokes=8);} ZigzagIE5.5+ filter : progid:DXImageTransform.Microsoft.Zigzag ( enabled=bEnabled , duration=fDuration , gridSizeX=iColumns , gridSizeY=iColumns )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration gridSizeX :� (Integer) gridSizeY :� (Integer)
Enabled :� (Boolean) enabled Duration :� (Real) duration GridSizeX :� (Integer) gridSizeX GridSizeY :� (Integer) gridSizeY (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility ) (Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Zigzag(duration=5, GridSizeX=25, GridSizeY=25); } RevealTransIE5.5+ filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled , duration=fDuration , transition=iTransitionType )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration (Integer) 0 :� 1 :� 2 :� 3 :� 4 :� 5 :� 6 :� 7 :� 8 :� 9 :� 10 :� transition :� 11 :� 12 :� 13 :� 14 :� 15 :� 16 :� 17 :� 18 :� 19 :� 20 :� 21 :� 22 :� 23 :�
Enabled :� (Boolean) enabled Duration :� (Real) duration Transition :� (Integer) transition (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange
24
#idDiv{ height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=5, transition=2); } BlendTransIE4.0+ filter : BlendTrans ( enabled=bEnabled , duration=fDuration )
(Boolean) true | false enabled :� true :� false :� (Real).(0.0000) duration :� play iDuration play Duration
Enabled :� (Boolean) enabled Duration :� (Real) duration (String) 0 - 100 0 100
1. apply Percent 0 Percent :� 2. visibility innerText background-color border 3. Percent 4. Enabled true
visibility (Integer) 0 | 1 | 2 0 :� (stop) status :� 1 :� (apply) 2 :� (play)
apply :� visibility play ( visibility )
(Real) play ( iDuration ) :� iDuration :� play iDuration Duration Duration stop :� onfilterchange BasicImage
#idDiv{ height:250px; width:250px; background-color: gold; filter:BlendTrans(duration=5); } Appendix
1. Media Types 2. Color Table 3. Language Codes 4. Character Set Recognition 5. ISO Latin-1 Character Set ISO Latin-1 6. Additional Named Entities for HTML HTML 7. Character Entities for Special Symbols and BIDI Text BIDI Character Entities for Special Symbols and BIDI TextBIDI
Using NE NE NCR Using NCR C0 Controls and Basic Latin " " " quotation mark, =apl quote, U0022 ISOnum & & & ampersand, U0026 ISOnum < < < less-than sign, U003C ISOnum > > > greater-than sign, U003E ISOnum Latin Extended-A Œ &OElig Œ latin capital ligature oe, U0152 ISOlat2 œ &oelig œ latin small ligature oe, U0153 ISOlat2 Š &Scaron Š latin capital letter s with caron, U0160 ISOlat2 š &scaron š latin small letter s with caron, U0161 ISOlat2 Ÿ &Yuml Ÿ latin capital letter y with diaeresis, U0178 ISOlat2 Spacing Modifier Letters ˆ &circ ˆ modifier letter circumflex accent, U02C6 ISOpub ˜ &tilde ˜ small tilde, U02DC ISOdia General Punctuation &ensp en space, U2002 ISOpub &emsp em space, U2003 ISOpub &thinsp thin space, U2009 ISOpub &zwnj zero width non-joiner, U200C NEW RFC 2070 &zwj zero width joiner, U200D NEW RFC 2070 &lrm left-to-right mark, U200E NEW RFC 2070 &rlm right-to-left mark, U200F NEW RFC 2070 – &ndash – en dash, U2013 ISOpub — &mdash — em dash, U2014 ISOpub ‘ &lsquo ‘ left single quotation mark, U2018 ISOnum ’ &rsquo ’ right single quotation mark, U2019 ISOnum ‚ &sbquo ‚ single low-9 quotation mark, U201A NEW “ &ldquo “ left double quotation mark, U201C ISOnum ” &rdquo ” right double quotation mark, U201D ISOnum „ &bdquo „ double low-9 quotation mark, U201E NEW † &dagger † dagger, U2020 ISOpub ‡ &Dagger ‡ double dagger, U2021 ISOpub ‰ &permil ‰ per mille sign, U2030 ISOtech single left-pointing angle quotation mark, U2039 ‹ &lsaquo ‹ ISO proposed single right-pointing angle quotation mark, › &rsaquo › U203A ISO proposed Language Codes
(Code) (Language) (Code) (Language) (Code) (Language) af Afrikaans sq Albanian zu Zulu ar-sa Arabic (Saudi Arabia) ar-iq Arabic (Iraq) xh Xhosa ar-eg Arabic (Egypt) ar-ly Arabic (Libya) ji Yiddish ar-dz Arabic (Algeria) ar-ma Arabic (Morocco) ve Venda ar-tn Arabic (Tunisia) ar-om Arabic (Oman) vi Vietnamese ar-ye Arabic (Yemen) ar-sy Arabic (Syria) uk Ukrainian ar-jo Arabic (Jordan) ar-lb Arabic (Lebanon) ur Urdu ar-kw Arabic (Kuwait) ar-ae Arabic (U.A.E.) tn Tswana ar-bh Arabic (Bahrain) ar-qa Arabic (Qatar) tr Turkish eu Basque bg Bulgarian th Thai be Belarusian ca Catalan ts Tsonga zh-tw Chinese (Taiwan) zh-cn Chinese (PRC) sv Swedish Chinese (Hong Kong, Chinese Swedish zh-hk zh-sg sv-fi S.A.R. China) (Singapore) (Finland) Spanish hr Croatian cs Czech es-pr (Puerto Rico) da Danish nl Dutch (Standard) sx Sutu Spanish nl-be Dutch (Belgium) en English es-hn (Honduras) English (Great Spanish en-us English (United States) en-gb es-ni Britain) (Nicaragua) Spanish en-au English (Australia) en-ca English (Canada) es-bo (Bolivia) Spanish (El en-nz English (New Zealand) en-ie English (Ireland) es-sv Salvador) English en English (Caribbean) en-bz English (Belize) en-za (South Africa) English en-tt English (Trinidad) et Estonian en-jm (Jamaica) fi Finnish fr French (Standard) fo Faeroese fr-be French (Belgium) fr-ca French (Canada) fa Farsi gd Gaelic (Scotland) gd-ie Gaelic (Ireland) fr-ch French (Switzerland) German French de German (Standard) de-ch fr-lu (Switzerland) (Luxembourg) German German de-li el Greek de-at (Liechtenstein) (Austria) German he Hebrew hi Hindi de-lu (Luxembourg) in Indonesian it Italian (Standard) hu Hungarian it-ch Italian (Switzerland) ja Japanese is Icelandic lv Latvian lt Lithuanian ko Korean Korean mk FYRO Macedonian ms Malaysian ko (Johab) no Norwegian (Nynorsk) pl Polish mt Maltese Portuguese Norwegian pt-br Portuguese (Brazil) pt no (Standard) (Bokmal) Rhaeto- ro-mo Romanian (Moldavia) ru Russian rm Romanic ru-mo Russian (Moldavia) sz Sami (Lappish) ro Romanian Serbian sk Slovak sl Slovenian sr (Cyrillic) Spanish (Spain – Serbian sb Sorbian es sr Traditional) (Latin) Spanish (Costa Spanish es-gt Spanish (Guatemala) es-cr es-mx Rica) (Mexico) Spanish Spanish es-pa Spanish (Panama) es-do (Dominican es (Spain – Republic) Modern) Spanish Spanish es-pe Spanish (Peru) es-ar es-ve (Argentina) (Venezuela) Spanish es-ec Spanish (Ecuador) es-cl Spanish (Chile) es-co (Colombia) Spanish es-uy Spanish (Uruguay) es-py (Paraguay) Character Set Recognition
CharsetFriendlyName Preferred Charset Label Aliases
Arabic (ASMO 708) ASMO-708 Arabic (DOS) DOS-720 arabiccsISOLatinArabicECMA-114ISO_8859-6ISO_8859-6:1987iso-ir- Arabic (ISO) iso-8859-6 127 Arabic (Mac) x-mac-arabic Arabic (Windows) windows-1256 cp1256 Baltic (DOS) ibm775 CP500 Baltic (ISO) iso-8859-4 csISOLatin4ISO_8859-4ISO_8859-4:1988iso-ir-110l4latin4 Baltic (Windows) windows-1257 Central European ibm852 cp852 (DOS) Central European iso-8859-2 csISOLatin2iso_8859-2iso_8859-2:1987iso8859-2iso-ir-101l2latin2 (ISO) Central European x-mac-ce (Mac) Central European windows-1250 x-cp1250 (Windows) Chinese Simplified EUC-CN x-euc-cn (EUC) Chinese Simplified chineseCN-GBcsGB2312csGB231280csISO58GB231280GB_2312- gb2312 (GB2312) 80GB231280GB2312-80GBKiso-ir-58 Chinese Simplified hz-gb-2312 (HZ) Chinese Simplified x-mac-chinesesimp (Mac) Chinese Traditional big5 cn-big5csbig5x-x-big5 (Big5) Chinese Traditional x-Chinese-CNS (CNS) Chinese Traditional x-Chinese-Eten (Eten) Chinese Traditional x-mac-chinesetrad (Mac) Cyrillic (DOS) cp866 ibm866 csISOLatin5csISOLatinCyrilliccyrillicISO_8859-5ISO_8859-5:1988iso- Cyrillic (ISO) iso-8859-5 ir-144l5 Cyrillic (KOI8-R) koi8-r csKOI8Rkoikoi8koi8r Cyrillic (KOI8-U) koi8-u koi8-ru Cyrillic (Mac) x-mac-cyrillic Cyrillic (Windows) windows-1251 x-cp1251 Europa x-Europa German (IA5) x-IA5-German Greek (DOS) ibm737 csISOLatinGreekECMA-118ELOT_928greekgreek8ISO_8859- Greek (ISO) iso-8859-7 7ISO_8859-7:1987iso-ir-126 Greek (Mac) x-mac-greek Greek (Windows) windows-1253 Greek, Modern ibm869 (DOS) Hebrew (DOS) DOS-862 Hebrew (ISO- iso-8859-8-i logical Logical) csISOLatinHebrewhebrewISO_8859-8ISO_8859-8:1988ISO-8859-8iso- Hebrew (ISO-Visual) iso-8859-8 ir-138visual Hebrew (Mac) x-mac-hebrew Hebrew (Windows) windows-1255 ISO_8859-8-IISO-8859-8visual IBM EBCDIC x-EBCDIC-Arabic (Arabic) IBM EBCDIC x-EBCDIC-CyrillicRussian (Cyrillic Russian) IBM EBCDIC x-EBCDIC- (Cyrillic Serbian- CyrillicSerbianBulgarian Bulgarian) IBM EBCDIC x-EBCDIC-
(Denmark-Norway) DenmarkNorway IBM EBCDIC (Denmark-Norway- x-ebcdic-denmarknorway- Euro) euro IBM EBCDIC x-EBCDIC-FinlandSweden (Finland-Sweden) IBM EBCDIC x-ebcdic-finlandsweden- (Finland-Sweden- euro Euro) IBM EBCDIC x-ebcdic-finlandsweden- (Finland-Sweden- X-EBCDIC-France euro Euro) IBM EBCDIC x-ebcdic-france-euro (France-Euro) IBM EBCDIC x-EBCDIC-Germany (Germany) IBM EBCDIC x-ebcdic-germany-euro (Germany-Euro) IBM EBCDIC (Greek x-EBCDIC-GreekModern Modern) IBM EBCDIC x-EBCDIC-Greek (Greek) IBM EBCDIC x-EBCDIC-Hebrew (Hebrew) IBM EBCDIC x-EBCDIC-Icelandic (Icelandic) IBM EBCDIC x-ebcdic-icelandic-euro (Icelandic-Euro) IBM EBCDIC x-ebcdic-international-euro (International-Euro) IBM EBCDIC (Italy) x-EBCDIC-Italy IBM EBCDIC (Italy- x-ebcdic-italy-euro Euro) IBM EBCDIC x-EBCDIC- (Japanese and JapaneseAndKana Japanese Katakana) IBM EBCDIC x-EBCDIC- (Japanese and JapaneseAndJapaneseLatin Japanese-Latin) IBM EBCDIC x-EBCDIC- (Japanese and US- JapaneseAndUSCanada Canada) IBM EBCDIC x-EBCDIC-
(Japanese katakana) JapaneseKatakana IBM EBCDIC x-EBCDIC- (Korean and Korean KoreanAndKoreanExtended Extended) IBM EBCDIC x-EBCDIC-
(Korean Extended) KoreanExtended IBM EBCDIC (Multilingual Latin- CP870 2) IBM EBCDIC x-EBCDIC-
(Simplified Chinese) SimplifiedChinese IBM EBCDIC X-EBCDIC-Spain (Spain) IBM EBCDIC x-ebcdic-spain-euro (Spain-Euro) IBM EBCDIC (tdai) x-EBCDIC-tdai IBM EBCDIC x-EBCDIC-
(Traditional Chinese) TraditionalChinese IBM EBCDIC CP1026 (Turkish Latin-5) IBM EBCDIC x-EBCDIC-Turkish (Turkish) IBM EBCDIC (UK) x-EBCDIC-UK IBM EBCDIC (UK- x-ebcdic-uk-euro Euro) IBM EBCDIC (US- ebcdic-cp-us Canada) IBM EBCDIC (US- x-ebcdic-cp-us-euro Canada-Euro) Icelandic (DOS) ibm861 Icelandic (Mac) x-mac-icelandic ISCII Assamese x-iscii-as ISCII Bengali x-iscii-be ISCII Devanagari x-iscii-de ISCII Gujaratdi x-iscii-gu ISCII Kannada x-iscii-ka ISCII Malayalam x-iscii-ma ISCII Oriya x-iscii-or ISCII Panjabi x-iscii-pa ISCII Tamil x-iscii-ta ISCII Telugu x-iscii-te csEUCPkdFmtJapaneseExtended_UNIX_Code_Packed_ Japanese (EUC) euc-jp Format_for_Japanesex-eucx-euc-jp Japanese (JIS) iso-2022-jp Japanese (JIS-Allow iso-2022-jp _iso-2022-jp$SIO 1 byte Kana - SO/SI) Japanese (JIS-Allow csISO2022JP _iso-2022-jp$ESC 1 byte Kana) Japanese (Mac) x-mac-japanese Japanese (Shift-JIS) shift_jis csShiftJIScsWindows31Jms_Kanjishift-jisx-ms-cp932x-sjis csKSC56011987euc-kriso-ir- Korean ks_c_5601-1987 149koreanks_c_5601ks_c_5601_1987ks_c_5601- 1989KSC_5601KSC5601 Korean (EUC) euc-kr csEUCKR Korean (ISO) iso-2022-kr csISO2022KR Korean (Johab) Johab Korean (Mac) x-mac-korean Latin 3 (ISO) iso-8859-3 csISOLatin3ISO_8859-3ISO_8859-3:1988iso-ir-109l3latin3 Latin 9 (ISO) iso-8859-15 csISOLatin9ISO_8859-15l9latin9 Norwegian (IA5) x-IA5-Norwegian OEM United States IBM437 437cp437csPC8CodePage437 Swedish (IA5) x-IA5-Swedish tdai (Windows) windows-874 DOS-874iso-8859-11TIS-620 Turkish (DOS) ibm857 Turkish (ISO) iso-8859-9 csISOLatin5ISO_8859-9ISO_8859-9:1989iso-ir-148l5latin5 Turkish (Mac) x-mac-turkish Turkish (Windows) windows-1254 ISO_8859-9ISO_8859-9:1989iso-8859-9iso-ir-148latin5 Unicode unicode utf-16 Unicode (Big- unicodeFFFE Endian) Unicode (UTF-7) utf-7 csUnicode11UTF7unicode-1-1-utf-7x-unicode-2-0-utf-7 Unicode (UTF-8) utf-8 unicode-1-1-utf-8unicode-2-0-utf-8x-unicode-2-0-utf-8 ANSI_X3.4-1968ANSI_X3.4- US-ASCII us-ascii 1986asciicp367csASCIIIBM367ISO_646.irv:1991ISO646-USiso-ir-6us Vietnamese windows-1258 (Windows) Western European ibm850 (DOS) Western European x-IA5 (IA5) Western European cp819csISOLatin1ibm819iso_8859-1iso_8859-1:1987iso8859-1iso-ir- iso-8859-1 (ISO) 100l1latin1 Western European macintosh (Mac) ANSI_X3.4-1968ANSI_X3.4- Western European 1986asciicp367cp819csASCIIIBM367ibm819ISO_646.irv:1991iso_8859- Windows-1252 (Windows) 1iso_8859-1:1987ISO646-USiso8859-1iso-8859-1iso-ir-100iso-ir- 6latin1usus-asciix-ansi Additional Named Entities for HTMLHTML
Character Named entity Numeric character reference Description
Latin Extended-B Latin small f with hook, ƒ ƒ ƒ =function, =florin, U0192 ISOtech Greek Greek capital letter alpha, Α Α Α U0391 Greek capital letter beta, Β Β Β U0392 Greek capital letter Γ Γ Γ gamma, U0393 ISOgrk3 Greek capital letter delta, Δ Δ Δ U0394 ISOgrk3 Greek capital letter Ε Ε Ε epsilon, U0395 Greek capital letter zeta, Ζ Ζ Ζ U0396 Greek capital letter eta, Η Η Η U0397 Greek capital letter theta, Θ Θ Θ U0398 ISOgrk3 Greek capital letter iota, Ι Ι Ι U0399 Greek capital letter kappa, Κ Κ Κ U039A Greek capital letter Λ Λ Λ lambda, U039B ISOgrk3 Greek capital letter mu, Μ Μ Μ U039C Greek capital letter nu, Ν Ν Ν U039D Greek capital letter xi, Ξ Ξ Ξ U039E ISOgrk3 Greek capital letter Ο Ο Ο omicron, U039F Greek capital letter pi, Π Π Π U03A0 ISOgrk3 Greek capital letter rho, Ρ Ρ Ρ U03A1 Greek capital letter sigma, Σ Σ Σ U03A3 ISOgrk3 Greek capital letter tau, Τ Τ Τ U03A4 Greek capital letter Υ Υ Υ upsilon, U03A5 ISOgrk3 Greek capital letter phi, Φ Φ Φ U03A6 ISOgrk3 Greek capital letter chi, Χ Χ Χ U03A7 Greek capital letter psi, Ψ Ψ Ψ U03A8 ISOgrk3 Greek capital letter omega, Ω Ω Ω U03A9 ISOgrk3 Greek small letter alpha, α α α U03B1 ISOgrk3 Greek small letter beta, β β β U03B2 ISOgrk3 Greek small letter gamma, γ γ γ U03B3 ISOgrk3 Greek small letter delta, δ δ δ U03B4 ISOgrk3 Greek small letter epsilon, ε ε ε U03B5 ISOgrk3 Greek small letter zeta, ζ ζ ζ U03B6 ISOgrk3 Greek small letter eta, η η η U03B7 ISOgrk3 θ θ θ Greek small letter theta, U03B8 ISOgrk3 Greek small letter iota, ι ι ι U03B9 ISOgrk3 Greek small letter kappa, κ κ κ U03BA ISOgrk3 Greek small letter lambda, λ λ λ U03BB ISOgrk3 Greek small letter mu, μ μ μ U03BC ISOgrk3 Greek small letter nu, ν ν ν U03BD ISOgrk3 Greek small letter xi, ξ ξ ξ U03BE ISOgrk3 Greek small letter ο ο ο omicron, U03BF NEW Greek small letter pi, π π π U03C0 ISOgrk3 Greek small letter rho, ρ ρ ρ U03C1 ISOgrk3 Greek small letter final ς ς ς sigma, U03C2 ISOgrk3 Greek small letter sigma, σ σ σ U03C3 ISOgrk3 Greek small letter tau, τ τ τ U03C4 ISOgrk3 Greek small letter upsilon, υ υ υ U03C5 ISOgrk3 Greek small letter phi, φ φ φ U03C6 ISOgrk3 Greek small letter chi, χ χ χ U03C7 ISOgrk3 Greek small letter psi, ψ ψ ψ U03C8 ISOgrk3 Greek small letter omega, ω ω ω U03C9 ISOgrk3 Greek small letter theta ϑ ϑ ϑ symbol, U03D1 NEW Greek upsilon with hook ϒ ϒ ϒ symbol, U03D2 NEW Greek pi symbol, U03D6 ϖ ϖ ϖ ISOgrk3 General Punctuation bullet, =black small circle, • • • U2022 ISOpub horizontal ellipsis, =three … … … dot leader, U2026 ISOpub prime, =minutes, =feet, ′ ′ ′ U2032 ISOtech double prime, =seconds, ″ ″ ″ =inches, U2033 ISOtech overline, =spacing ‾ ‾ ‾ overscore, U203E NEW fraction slash, U2044 ⁄ ⁄ ⁄ NEW Letterlike Symbols script capital P, =power ℘ ℘ ℘ set, =Weierstrass p, U2118 ISOamso blackletter capital I, ℑ ℑ ℑ =imaginary part, U2111 ISOamso blackletter capital R, =real ℜ ℜ ℜ part symbol, U211C ISOamso trade mark sign, U2122 ™ ™ ™ ISOnum alef symbol, =first ℵ ℵ ℵ transfinite cardinal, U2135 NEW Arrows leftward arrow, U2190 ← ← ← ISOnum
upward arrow, U2191 ↑ ↑ ↑ ISOnum rightward arrow, U2192 → → → ISOnum downward arrow, U2193 ↓ ↓ ↓ ISOnum left right arrow, U2194 ↔ ↔ ↔ ISOamsa downward arrow with ↵ ↵ ↵ corner leftward, =carriage return, U21B5 NEW leftward double arrow, ⇐ ⇐ ⇐ U21D0 ISOtech upward double arrow, ⇑ ⇑ ⇑ U21D1 ISOamsa rightward double arrow, ⇒ ⇒ ⇒ U21D2 ISOtech downward double arrow, ⇓ ⇓ ⇓ U21D3 ISOamsa left right double arrow, ⇔ ⇔ ⇔ U21D4 ISOamsa Mathematical Operators ∀ ∀ ∀ for all, U2200 ISOtech partial differential, U2202 ∂ ∂ ∂ ISOtech there exists, U2203 ∃ ∃ ∃ ISOtech empty set, =null set, ∅ ∅ ∅ =diameter, U2205 ISOamso nabla, =backward ∇ ∇ ∇ difference, U2207 ISOtech element of, U2208 ∈ ∈ ∈ ISOtech not an element of, U2209 ∉ ∉ ∉ ISOtech contains as member, ∋ ∋ ∋ U220B ISOtech n-ary product, =product ∏ ∏ ∏ sign, U220F ISOamsb n-ary sumation, U2211 − ∑ − ISOamsb minus sign, U2212 − − − ISOtech asterisk operator, U2217 ∗ ∗ ∗ ISOtech square root, =radical sign, √ √ √ U221A ISOtech proportional to, U221D ∝ ∝ ∝ ISOtech ∞ ∞ ∞ infinity, U221E ISOtech ∠ ∠ ∠ angle, U2220 ISOamso logical and, =wedge, ⊥ ∧ ⊥ U2227 ISOtech logical or, =vee, U2228 ⊦ ∨ ⊦ ISOtech intersection, =cap, U2229 ∩ ∩ ∩ ISOtech union, =cup, U222A ∪ ∪ ∪ ISOtech ∫ ∫ ∫ integral, U222B ISOtech ∴ ∴ ∴ therefore, U2234 ISOtech tilde operator, =varies ∼ ∼ ∼ with, =similar to, U223C ISOtech approximately equal to, ≅ ≅ ≅ U2245 ISOtech almost equal to, ≅ ≈ ≅ =asymptotic to, U2248 ISOamsr not equal to, U2260 ≠ ≠ ≠ ISOtech identical to, U2261 ≡ ≡ ≡ ISOtech less-than or equal to, ≤ ≤ ≤ U2264 ISOtech greater-than or equal to, ≥ ≥ ≥ U2265 ISOtech ⊂ ⊂ ⊂ subset of, U2282 ISOtech superset of, U2283 ⊃ ⊃ ⊃ ISOtech not a subset of, U2284 ⊄ ⊄ ⊄ ISOamsn subset of or equal to, ⊆ ⊆ ⊆ U2286 ISOtech superset of or equal to, ⊇ ⊇ ⊇ U2287 ISOtech circled plus, =direct sum, ⊕ ⊕ ⊕ U2295 ISOamsb circled times, =vector ⊗ ⊗ ⊗ product, U2297 ISOamsb up tack, =orthogonal to, ⊥ ⊥ ⊥ =perpendicular, U22A5 ISOtech dot operator, U22C5 ⋅ ⋅ ⋅ ISOamsb Miscellaneous Technical left ceiling, =apl upstile, ⌈ ⌈ ⌈ U2308, ISOamsc right ceiling, U2309, ⌉ ⌉ ⌉ ISOamsc left floor, =apl downstile, ⌊ ⌊ ⌊ U230A, ISOamsc right floor, U230B, ⌋ ⌋ ⌋ ISOamsc left-pointing angle ⟨ 〈 bracket, =bra, U2329 ISOtech right-pointing angle ⟩ 〉 bracket, =ket, U232A ISOtech Geometric Shapes ◊ ◊ ◊ lozenge, U25CA ISOpub Miscellaneous Symbols black spade suit, U2660 ♠ ♠ ♠ ISOpub black club suit, ♣ ♣ ♣ =shamrock, U2663 ISOpub black heart suit, ♥ ♥ ♥ =valentine, U2665 ISOpub black diamond suit, U2666 ♦ ♦ ♦ ISOpub
Lucida sans Unicode ISO Latin-1 Character SetISO Latin-1
Character Decimal code Named entity Character Decimal code Named entity
--- � ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ --- --- ! ! --- " " " # # --- $ $ --- % % --- & & & ' ' --- ( ( --- ) ) --- * * --- + + --- , , --- - - --- . . --- / / --- 0 0 --- 1 1 --- 2 2 --- 3 3 --- 4 4 --- 5 5 --- 6 6 --- 7 7 --- 8 8 --- 9 9 --- : : --- ; ; --- < < < = = --- > > > ? ? --- @ @ --- A A --- B B --- C C --- D D --- E E --- F F --- G G --- H H --- I I --- J J --- K K --- L L --- M M --- N N --- O O --- P P --- Q Q --- R R --- S S --- T T --- U U --- V V --- W W --- X X --- Y Y --- Z Z --- [ [ --- \ \ --- ] ] --- ^ ^ --- _ _ --- ` ` --- a a --- b b --- c c --- d d --- e e --- f f --- g g --- h h --- i i --- j j --- k k --- l l --- m m --- n n --- o o --- p p --- q q --- r r --- s s --- t t --- u u --- v v --- w w --- x x --- y y --- z z --- { { --- | | --- } } --- ~ ~ ------ --- ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ ¦ or ¦ ¦ § § § &brkbar; ¨ ¨ ¨ or ¨ © © © ª ª ª « « « ¬ ¬ ¬ ¯ or ® ® ® ¯ ¯ &hibar; ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ ¶ ¶ ¶ · · · ¸ ¸ ¸ ¹ ¹ ¹ º º º » » » ¼ ¼ ¼ ½ ½ ½ ¾ ¾ ¾ ¿ ¿ ¿ À À À Á Á Á Â Â Â Ã Ã Ã Ä Ä Ä Å Å Å Æ Æ Æ Ç Ç Ç È È È É É É Ê Ê Ê Ë Ë Ë Ì Ì Ì Í Í Í Î Î Î Ï Ï Ï Ð Ð Ð Ñ Ñ Ñ Ò Ò Ò Ó Ó Ó Ô Ô Ô Õ Õ Õ Ö Ö Ö × × × Ø Ø Ø Ù Ù Ù Ú Ú Ú Û Û Û Ü Ü Ü Ý Ý Ý Þ Þ Þ ß ß ß à à à á á á â â â ã ã ã ä ä ä å å å æ æ æ ç ç ç è è è é é é ê ê ê ë ë ë ì ì ì í í í î î î ï ï ï &etd; ð &etd; ñ ñ ñ ò ò ò ó ó ó ô ô ô õ õ õ ö ö ö ÷ ÷ ÷ ø ø ø ù ù ù ú ú ú û û û ü ü ü ý ý ý &tdorn; þ &tdorn; ÿ ÿ ÿ
ISO Latin-1IE4+Unicode256HTML