Sie sind hier: Web Design > CSS DinkostaOnline 
  

Home
Themen
Computer
Web Design
Software
CSS
 Cascading Style Sheets (CSS) existieren als Empfehlung des W3C seit 1996, aber erst mit den neuren Browsern (Internet Explorer 5 usw.) bekommen die Stylesheets die entsprechende Unterstützung in den Browsern. Jetzt hat fast jede Web-Site in ihrem Quelltext auch CSS integriert.
 Diese Web-Technologie gibt Web Autoren bessere Kontrolle über das Aussehen von Elementen auf einer Web Seite. Mit CSS kann man Text-Rollover Effekte wie mit JavaScript erzielen, Elemente können besser positioniert werden, Regeln für das Aussehen einer Web Seite können in einer externen Datei gesetzt werden und dann auf mehrere Web Seiten angewendet werden (so reduziert man den Code und die Grösse der Dateien, usw ).
 Styleregeln können im HEAD definiert werden und dann setzt man sie zwischen <style>...</style> tags. Beispiel:
<style>
body{background:url(bild.gif) fixed red 10% no-repeat}
</style>

 CSS kann auch im BODY Teil definiert werden, zum Beispiel: <div style="background:red;color:white">.
 Und die dritte Möglichkeit ist eine externe Stylesheetdatei zu definieren: dabei handelt es sich um eine Textdatei in der Regeln bestimmt werden und die mit einer ".css" Endung gespeichert wird. So definierte Regeln können dann auf alle HTML Dokumente angewendet werden, welche einen Link zur Stylesheetdatei im HEAD haben, zum Beispiel: <link rel="stylesheet" href="xy.css" type="text/css">, wo xy der Name der externen Stylesheetdatei ist.

CSS-Formate kann man für HTML-Elementtypen (DIV, P, H2 usw.), für class Attribute (eine Klasse kann mehrmals in einem Dokument vorkommen und bei der Definition steht ein Punkt vor dem Namen der Klasse) und für id Attribute (dieses Attribut kann nur ein Mal im Dokument vorkommen und bei seiner Definition steht ein # vor seinem Namen) definieren. Beispiel:
<HTML><HEAD> 
<title>Dokument-Titel</title>
<style> 
P {font-family: Arial; font-size: 12pt}  
H2 {color: darkblue; font-size: 24pt} 
.tap {color: red} 
#green {color: green} 
</style>
</HEAD>
<body>
<h2>

Dunkelblaue Überschrift in Font-Grösse 24

</h2> <p>

Der Text in diesem Paragraph ist im Arial-Font mit der Grösse 12.

</p> <div id=green>
Der Text in diesem Teil ist grün.
</div> <div class=tap>
Und in diesem Teil ist der Text rot.
</div> <div style="color:green;font:bold">
Der Stil für diesen Teil ist innerhalb des DIV Elements definiert (bold und grün).
</div>

Pseudoformate (für Verweise)
Sie können das Erscheinungsbild von Verweisen zu noch nicht besuchten Seiten, zu bereits besuchten Seiten und zu Verweisen, die gerade mit der Maus überfahren oder angeklickt werden, bestimmen.
Beispiel:
<style>
a:link { font:bold; color:#0000E0; text-decoration:none }
a:visited { font:bold; color:#000080; text-decoration:none }
a:hover { font:bold; color:red; text-decoration:underline }
a:active { font:bold; color:#E00000; text-decoration:underline }
a:focus { font:bold; color:#00E000; text-decoration:underline }
</style>
</head>
<body bgcolor="FFFFFF" text="#000000">
<a href="css.html">CSS</a><br>
<a href="javascript.html">JavaScript</a>
Pseudoformate werden zentral in einem style-Bereich notiert. Die hier beschriebenen Pseudoformate gelten für das a-Element in HTML, daher wird vor dem Doppelpunkt das a notiert.
Um eine korrekte Darstellung dieser Pseudoformate zu erreichen, müssen Sie bei der Notierung die folgende Reihenfolge einhalten (aber man muss nicht alle verwenden):
:link, :visited, :hover, :active
Netscape 4.x und der Internet Explorer 3.0 interpretieren noch nicht alle Angaben. Insbesondere reagiert Netscape 4.x noch nicht auf das Pseudoformat a:hover. Der Internet Explorer 5.x kennt die Angabe a:focus noch nicht.
Filter: Auch Filter gehören zum CSS und zusammen mit Skripts kann man damit interessante Effekte erreichen. Man unterscheidet zwischen visuellen und Transitionsfiltern. Zu den visuellen gehören alpha, blur, flipV, mask, dropShadow usw. Die Transitionfilter sind mit den Nummern 0 bis 23 besetzt.
Beispiele für Filter:
<span style="width:105;filter:Shadow(color=gold, strength=3)">Schatten Beispiel</span>
Das Gleiche mit etwas JavaScript
<span style="width:150;filter:Shadow(color=gold, strength=3)" onmouseover="this.filters.Shadow.color='lime'" onmouseout="this.filters.Shadow.color='gold'">Maus über diesen Text</span>

Hier ist ein Beispiel für einen Transitionsfilter:
<script>
bilder = new Array("sl1.jpg","sl2.jpg","sl3.jpg")
tr = 0
function trans(){
tr = (tr+1)%bilder.length
pro.filters.revealTrans.Apply()
document.images.pro.src=bilder[tr]
pro.filters.revealTrans.Play()
setTimeout("trans()",5000)
}
</script>
<img id=pro src="sl1.jpg" onclick="trans()" style="width:150;height:100;filter: revealTrans(duration = 2, transition = 12)">


Startseite  |  Batch Dateien  |  JavaScript   |  Registry Tweaks  |  Pirot  |  Software  |  Reisetipps
Hosted by www.Geocities.ws

1