<div id="myID" style="color:blue">Teraz jestem smutny, ale pniej mog si cieszy.</div>

=====================================

<div id="myID" style="color:blue; cursor:hand" 
onclick="this.style.fontSize='60px'; this.style.color='red'">
Teraz jestem smutny, ale pniej mog si cieszy.</div>

=====================================

Listing 27-1: Dostp do elementu poprzez odwoanie do struktury obiektw DOM.

<html>
<head>
<title>Okelanie wartoci waciwoci CSS przy wykorzystaniu technik dziaajcych
w wielu przegldarkach.</title>
</head>
<body>
<div id="myID" style="color:blue;">
  <p>Teraz jestem smutny, ale pniej mog si cieszy.</p>
</div>
    <div style="width: 100px; padding: 4px; background-color: 
#cccccc; border: blue outset 1px; cursor:hand"> 
    <div align="center"><a href="#" style="text-decoration: 
none" title="Kliknij by zmieni posta czcionki!"  
onclick="myID.style.fontSize='60px'; 
myID.style.color='red'">Kliknij 
tutaj</a> </div>
    </div>
</body>
</html>

=====================================

document.tags.p.fontSize

=====================================

document.tags.P.fontSize="25pt";

=====================================

document.styleSheets["MyID"].addRule ("P", "fontSize:25pt");

=====================================

document.getElementById('tssxyz').sheet.insertRule('P { fontSize: 25pt }', 
document.getElementById('tssxyz').sheet.cssRules.length ) 

=====================================

Listing 27-2: Okrelanie waciwoci CSS poprzez zastosowanie skryptu 
dziaajcego w wielu przegldarkach.

<html>
<head>
<title>Okrelanie waciwoci CSS poprzez zastosowanie skryptu dziaajcego w wielu przegldarkach</title>
<STYLE ID="MyID" TYPE="text/css">
.MyClass {}
</STYLE>

<SCRIPT LANGUAGE="JavaScript1.2"><!--
function changeIt() {
NewSize = 20;
var agt=navigator.userAgent.toLowerCase();
if ( (parseInt(navigator.appVersion)==4) && 
     (agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
&& (agt.indexOf('compatible') == -1) ) {
document.tags.H1.color="red";
document.tags.p.fontSize=NewSize;
document.classes.MyClass.all.color="green";
document.classes.MyClass.p.color="blue";
}
else if (agt.indexOf('gecko') != -1) { 
document.getElementById('MyID').sheet.insertRule('p  { font-size: ' + NewSize + ' }', 

document.getElementById('MyID').sheet.cssRules.length )
document.getElementById('MyID').sheet.insertRule('.MyClass  { color: purple }', 
document.getElementById('MyID').sheet.cssRules.length )
document.getElementById('MyID').sheet.insertRule('p.MyClass  { color: blue }', 
document.getElementById('MyID').sheet.cssRules.length )
}
else if ( (parseInt(navigator.appVersion)>=4) && 
     (agt.indexOf('msie') != -1) ) {
document.styleSheets["MyID"].addRule ("p", "font-size:"  + NewSize);
document.styleSheets["MyID"].addRule (".MyClass",  "color:purple");
document.styleSheets["MyID"].addRule ("p.MyClass",  "color:blue");
}
}
//--></SCRIPT>

</head>
<body>
<div style="width: 100px; padding: 4px; background-color: 
#cccccc; border: blue outset 1px; cursor:hand"> 
  <div align="center"><a href="#" style="text-decoration: 
none" title="Kliknij aby zmieni posta czcionki!" 
onClick="changeIt();">Kliknij tutaj</a> </div>
</div>
<p class="MyClass">
Oto skrypt testowy umieszczony w elemencie P
</p>
<div class="MyClass">
Oto skrypt testowy umieszczony w elemencie DIV
</div>
</body>
</html>

=====================================

if ( (parseInt(navigator.appVersion)==4) && 
     (agt.indexOf('mozilla')!=-1) && 
     (agt.indexOf('spoofer')==-1) &&
     (agt.indexOf('compatible') == -1) ) {
  // zrb co w tym miejscu
}

=====================================

font-size 

=====================================

fontSize

=====================================

.mojeZachowanie {behavior: url(value)}

=====================================

.mojeZachowanie {behavior: url(mojSkryptlet.sct)}

=====================================

.mojeZachowanie { behavior:url(#mojObiekt)}

=====================================

<OBJECT ID=mojObiekt ... ></OBJECT><UL>
<DIV CLASS="mojeZachowanie">a to jaki tekst</DIV>

=====================================

{ filter: warto(parameter, parameter)}

=====================================

{filter: alpha(Opacity=warto, FinishOpacity=warto, Style=warto, StartX=warto, StartY=warto, FinishX=warto, FinishY=warto) }

=====================================

H1 {filter: alpha (20)}
H2 {filter: alpha (20, 100, 1, 10, 10, 200, 300)}

=====================================

{ filter: blur(add=warto, direction=warto, strength=warto)}

=====================================

H1 {filter: blur (false, 45, 20)}

=====================================

{ filter: chroma(kolor)}

=====================================

H1 {filter: chroma (#ff3399)}

=====================================

{filter : dropShadow(Color=warto, OffX=warto, OffY=warto, Positive=warto)}

=====================================

H1 {filter: dropShadow (#336699, 8, 8)}

=====================================

Listing 27-3: Zastosowanie filtra dropShadow. 

<html>
<head>
<title>Tworzenie cienia - filtr dropShadow</title>
</head>
<body>
<div style = " font-size:50px; position: absolute;top: 20; left:15; width:440px; height: 148; font-family: sans-serif; color: #FF9966; filter: dropShadow (#336699, 1, 1)">
A oto i jest CIE.
</div>
</body>
</html>

=====================================

{ filter: flipV}

=====================================

H1 {filter: flipV}

=====================================

{ filter: flipH}

=====================================

H1 {filter: flipH}

=====================================

{filter: Glow(Color=kolor, Strength=warto)}

=====================================

H1 {filter: glow (#333399, 200)}

=====================================

{filter: gray}

=====================================

H1 {filter: gray}

=====================================

{filter: invert}

=====================================

H1 {filter: invert}

=====================================

obiekt.filters.Light.addAmbient(R,G,B,natenie)

=====================================

obiekt.filters.Light.addCone(x1,y1,z1,x2,y2,R,G,B,natenie,rozpito)

=====================================

(0-255) R - czerwony
(0-255) G - zielony
(0-255) B - niebieski

=====================================

(0-255) natenie
(0-90) rozpito (kt)

=====================================

obiekt.filters.Light.addPoint(x,y,z,R,G,B,natenie)

=====================================

obiekt.filters.Light.changeColor(numerOwietlenia, r,g,b, zero/inna)

=====================================

obiekt.filters.Light.changeStrength(numerOwietlenia, natenie, zero/inna)

=====================================

obiekt.filters.Light.Clear

=====================================

obiekt.filters.Light.moveLight(numerOwietlenia, x, y, z, boolean)

=====================================

{Filter: mask(Color=warto)}

=====================================

H1 {filter: mask (#333399)}

=====================================

{ filter: shadow(color=warto, direction=warto)}

=====================================

H1 {filter: shadow(#333333, 45)}

=====================================

{ filter: wave(add=warto, freq=warto, lightStrength=warto, phase=warto, strength=warto)}

=====================================

H1 {filter: wave (false,10, 45, 20, 50)}

=====================================

{ filter: Xray}

=====================================

{filter: xray}

=====================================

{filter: revealtrans(duration=warto, transition=warto)}

=====================================

.filter {filter: revealtrans(duration=10, transition=22)}

=====================================

<META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans(Duration=5,Transition=2)">

=====================================

<META HTTP-EQUIV="Page-Exit" CONTENT="RevealTrans(Duration=5,Transition=2)">

=====================================


