Rainer's DHTML Library
Total Page:16
File Type:pdf, Size:1020Kb
· ©2002 Rainer Su . All rights reserved . Introduction To CSS2 CSS Cascading Style Sheet () (Linking to a Style Sheet) .cssHTMLlink <head> <title></title> <link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css" type="text/css"> </head> XML <? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?> (Embedding a Style Block) HTML<HTML><BODY><STYLE>...</STYLE> <html> <head> <title></title> <style type="text/css"> <!-- body {font: 10pt "Arial"} h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} p {font: 10pt/12pt "Arial"; color: black} --> </style> </head> <body> styletype"text/css" (Inline Styles) style <p style="margin-left: 0.5in; margin-right:0.5in"><p> (CSS Syntax) Selector { property: value } Selector -- property : value -- (:)(;) (The ' Inherit ' Value) Inherit 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 )(<EM></EM>) 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