4.4 CSS

CSSCSS

CSSCSS

CSSCascading Style SheetsW3CHTML CSSHTMLCSS

CSSHTMLHTMLCSS ""HTML

1. CSS Selector{ Rule}HTMLh1.textID /**/ CSS

2. 1 CSS HTMLCSS HTML CSS

2 HTMLCSS@import @import URL(""); ......

HTML@import HTMLHTMLCSS

3 HTML HTML

4 : : style CSS......

HTML

CSSHTML class idid span div

1. Class Selectorclass class classClass Selector.

1. {1; 2; ......} p.back { background-color:#666666;} ... ..... ... #666666 ......

2. {1; 2; ......} .text {font-family: ""; font-size: 14pt; color: red} 1

2. idID Selectorid ididHTML id #id { 1; 2; ...}idididid

... ... #colorid1 { color:green;} ... ... IDID ......

3. Contextual Selector td p { color:darkred}HTML.........

4. : { : }HTMLCLASS

: (links)(visited links)(active links)

a:visited { color: #0000FF; text-decoration: none}a:link { font-family: ""; font-size: 9pt; color: #FF00FF; text-decoration: none}a:hover { font-family: ""; font-size: 12pt; color: #003333; background-color: #FFCC99; text-decoration: none}

5. span spanclassidstyleCSSspanHTMLspan spanCSSHTML

6. div alignclassidstyle HTML

1. h2 { color:red;} DIV

p.class1 {font-size:12pt;} p.class2 {font-size:200%} p.class3 {font-size:100%}

2. HTML id

CSS

1. font-familyfont-sizefont-stylefont-weightfont-variantfont

2. : color: , #RRGGBB, #RGB: : h1{color:red}h2{color:#008800}h3{color:#080}

: background-color:, #RRGGBB, #RGB, transparent:: body {background-color:white} h1{background-color:#0000F0}p{background-color:transparent}

: background-image:URLs, none:: body{background-image:url(bg.gif)}p{ background-image:url(http://www.htmlhelp.com/bg.jpg)}

:background-repeat: repeat, repeat-x, repeat-y, no-repeat:repeat: body {background-repeat:no-repeat}p {background-repeat:repeat-x}

:background-attachment: scroll, fixed:sroll: body {background-attachment:fixed}

: background-position:,:: body{background-position:30% 70%}p{background-position:bottom left}

: background::: body {background:url(bg1.gif)green repeat-y fixed left 20pt}

3. : letter-spacing:|normal:: h1 {letter-spacing:8px}p {letter-spacing:14pt}

: text-decoration: none|underline|overline|line-through|blink:line-throughblinknone: a:link,a:visited,a:active { text- decoration: none}

: text-align: left|right|center|justify():: p {text-align:center}h1 {text-align:right}

: vertical-align: baseline|super|sub|tomiddle|bottom|text-top|text-bottom|:: img.mid { vertical-align:50%}span.sup { vertical-align:super}span.sub { vertical-align:sub}

: text-indent:|:: p { text-indent:30pt}h1 { text-indent:10%}

: line-height: normal|||:: p { line-height:200%}p { line-height:30pt}

4. bodypdivtdtablehxx=1,2,...,7 marginpaddingborder

5. : list-style-type

6. 1topleftposition ()top left position topleftpositionposition absolute relativeHTML staticHTMLstatic

2 CSSz-indexz-indextopleft z-index"""" z-index0z-index=0

CSS1filterfiltername(parameters)

CSS

2alpha filteralpha(opacity=opcity finishopacity=finishopacitystyle=style startX=startX startY=startY finishX=finishX finishY=finishY)

Opacity: 01000-100- Style: 0-1-2-3-Finishopacity()0100 StartXStartYfinishXfinishY

alpha

3blur()filterbluradd=adddirectionstrength=strength AddtruefalseStrength: 5

Direction045270

4Chroma FilterChromacolor=colorColorchroma

5DropShadowDropShadowFilter:DropShadow (Color=color, Offx=Offx, Offy=offy, Positive=positive)

Color: Offxoffy: XY,XYPositiveTrueFalse01

6FlipHFlipVFlipHFlipVFilterFlipHFilterFlipV

7GlowFilter:Glow(Color=colorStrength=strength)ColorStrength1-255 Glow

8Gray FilterGray 9InvertFilterInvert

10MaskFilterMaskColor=Colormask Mask

11Shadow Filter:Shadow(Color=color,Direction=directionColorDirection045

ShadowDropshadowShadowDropshadowShadow Dropshadow ShadowDropshadow

12Wave Filter:Wave(Add=0/1,Freq=,LightStrength=Phase=Strength=AddTrueFalseFreqLightStrength0-100Phase0-1002590360*25%

Wave

13XrayXXFilterXray

Xray