CSS Cascading Stylesheets 1. Einführung Warum denn CSS= Cascading Style Sheets? CSS ist eine Spache, bestimmt für die Formatierung von HTML-Seiten. Sie greift auf die Sprachelemente von HTML zu und verleiht ihnen spezielle gewünschte Darstellungsmerkmale. Man stelle sich mal vor, man möchte die Schrift auf allen Seiten des Projekts durch eine andere ersetzen. Mit HTML müsste man überall die einzelnen Attribute des Textes ändern..was sehr aufwändig und mühsam ist. Mit CSS kann man das an einer einzigen Stelle festlegen und die gesamten Veränderungen erfolgen automatisch: WICHTIG: Eine gute Webseite trennt Inhalte und Struktur (HTML) vom Layout (CSS). Was kann CSS? a) CSS kann bewirken, daß spezielle Textarten (z. B. Bildunterschriften, Erläuterungen etc. Tabellen, Grafiken ) überall im Dokument in gewünschter Formatierung erscheinen, ohne daß diese jedesmal angegeben werden muß. b) Man kann alle Formatierungsanweisungen in einer speziellen Datei mit der Kennung ".css" ablegen, auf die alle Seiten einer Präsentation zugreifen. Änderungen dieser Datei verändern dann die gesamte Präsentation. c) CSS bietet Formatieroptionen, die weit über die Möglichkeiten von HTML hinausgehen. d) Weil im HTML-Code Formatieranweisungen entfallen können, werden die Seitentexte erheblich kürzer, was der Ladezeit für eine Seite zugute kommt. Beispiel 1 Wir legen eine eigene CSS Datei an, in der wir für jedes HTML Tag (z.b: <table> oder <p>) entsprechende Angaben über die Formatierung geben (z.b. die Textfarbe etc.) 1. Schritt: Erstelle folgende HTML Seite namens test.html. Überlege Dir, ob Du alle tags kennst und streiche gegebenenfalls Ausdrücke an, welche Dir nicht klar sind. <html> <head> <title>css-uebung</title> </head> <body> <h1>css-beispiel 1</h1> Die Hintergrundfarbe ist nun grundsätzlich für jeden body identisch.<br> <table> <tr><td><h1> Tabellenüberschrift </h1></td></tr> <tr><td><p> Der Text in diesem Abschnitt ist rot. </p></td></tr> <tr><td><p> Der Text in diesem Abschnitt ist ebenfalls rot, da er in einem <p> tag steht.</p></td></tr> <tr><td><a> Hier ist ein oranger Link </a></td></tr> </table> 1
</body> </html> 2. Schritt: Erstelle eine CSS Datei namens stylesheet.css. Die HTML-tags lassen sich nun ein dieser externen Datei für die gesamten HTML definieren. Beachte jeweils das Semikolon am Ende der Definitionen! body{ background-color:#c2f0eb; font-family:arial; h1{font-size:18px; p{color:#fc4303; a{color:#fca900 3. Schritt: Damit die ALyoutdefinitionen auch Auswirkung haben, muss die CSS Datei im HTML Dokument verknüpft werden (in jedem Dokument) und zwar im <head> Abschnitt ein: <head> <title>css-uebung</title> <link rel="stylesheet" href="css/stylesheet.css" type="text/css"> </head> Falls die stylesheet.css Datei im gleichen Ordner wie test.html gespeichert wurde, musst man auch den Link so anpassen: href="stylesheet.css"> Beispiel 2 Meistens will man die Definitionen noch gezielter anpassen. Zum Beispiel soll der Text nicht in jedem <p> gleich aussehen. Erweitere die stylesheet.css Datei wie folgt: p.unwichtig{color:#1a0919; p.wichtig{color:#fc4303;..und andere das <p> tag im HTML Dokuments test.html folgendermassen ab: <p class= wichtig > Der Text in diesem Abschnitt ist rot. </p></td></tr> <p class= unwichtig > Der Text in diesem Abschnitt ist nun nicht mehr rot</p> Auch lässt sich der Link verfeinern!je nach Zustand ändert der Link seine Farbe z.b. hover (mit der Maus darüber fahren), active (während des Anklickens etc.) a:link{color:#f9b606; a:hover{color:#ecf90c a:active{color:#2716d6; a:visited{color:#0307f9 Am <a> muss hier nichts mehr geändert werden. 2
Auch für Tabellen gibt es unzählige Formatierungsmöglichkeiten. Ergänze das stylesheet.css wie folgt: table{ border:1px solid #12081E; background-color: #FBFCFA; td{ border-top: 1px dashed #BEBEAE; td.ueberschrift{ border-top: 1px none #12081E; background-color:#1c8988; color:#ffffff; text-align:center;..und ändere die benötigten Stellen im HTML Dokument test.html selbständig. 2. Grundprinzip Format Klassen Im obigen Beispiel haben wir sogenannte Format-Klassen definiert. Genauer ausgedrückt, man definiert zu einem Tag eine oder mehrere Klassen, indem man an den Tag-Bezeichner mit Punkt einen neu eigenen Klassen-Namen anhängt. p.gelb{color:yellow HTML-Tag Klassenname CSS Attribute Möchte man nicht nur für ein spezielles Tag sondern allgemeine Formatierung vornehmen, so lässt man einfach die Bezeichnung des Tags vor dem Punkt weg:.gelb{color:yellow Einbettung der CSS Datei in eine HTML Seite Damit die Datei mit den CSS Definitionen genutzt werden kann, muss Sie zuerst in die HTML Seite eigebunden werden. Dies geschieht mit der Angabe im <head> Teil der Seite: <LINK REL="stylesheet" TYPE="text/css" HREF="stylesheet.css"> Die Nutzung der Format-Klassen geschieht mit einem speziellen HTML-Attribut, mit "class". Der Aufruf erfolgt ganz HTML-gemäß mit <tag CLASS="klassenbezeichner">... </tag>, beim Klassenbezeichner entfällt natürlich der führende Punkt. Ich habe außer dem obigen Definitionsteil im <head> nun hier folgend diese Aufrufe eingefügt: <p class="gelb"> Hier steht der Text </p> Einbettung Klassenname 3
3. Die wichtigsten CSS Attribute (unvollständig) px (Pixel): Feste Grösse bei Längenangangaben. Vorteil: Immer gleich gross. Nachteil: Beim Skalieren im Browser keine Veränderung. em: Grösse relativ zur übergeordneten Grösse. Wenn z.b. die Schriftgrösse im body mit 16px festgelegt wird, so entspricht 1em= 16px. 2em entspricht 32px etc Vorteil: Beim Skalieren (z.b. Browserinhalt) bleiben die Verhältnisse gleich. %: Relative Grösse zum übergeordneten Element. Vorteil: Skalierbar. Nachteil: Fortlaufende Skalierung (wenn Angabe in übergeordnetem Element =80%, so beträgt die Skalierung bei erneuter Definition von 80% dann nur noch 64%. font-size : 10px font-family : arial ; font-style : italic ; font-weight : bold ; color : text-align: center; text-decoration: none; background-color: #fff666; background-image: url(header.jpg); background-repeat: repeat-y; border-bottom: 1px solid #345fff; border-top: border-left: border-right: border: 1px none #fff034; width: 650px height : 30% margin-left: 3px ; margin-right: 3px ; margin-bottom: 3px ; margin-top: 3px ; margin : 3px 3px 4px 5px ; margin : 0px 2px auto padding : 3px 3px 4px 5px ; list-style-type: none; float: right; clear: left; position: relative; display: inline; a : hover{.. a : active{.. a : link{.. a : visited{.. Schriftgrösse: em, px, % Schriftart: Arial, Helvetica, Schriftstil: italic, normal, oblique. Schriftgewicht: bold, lighter, normal,... Schriftfarbe Postition innerhalb des Blockelements : left,center, right Spezielle Textformatierung: underline, etc.. Hintergrundfarbe im jeweiligen Blockelement. Hintergrundbild. Repetition des Hintergrundbildes: no-repeat, repeat-y, repeat-x; Rahmen des jeweiligen Blockelements: Dicke, Art, Farbe. Dicke: Art: solid, dashed, Farbe: Breite und Höhe des Blockelements: em, px, % Aussenabstand zum übergeordneten Blockelement (Ebene, body etc.) Einheiten: px, em Kurzschreibweise (zusammengefasst) auto legt die Werte automatisch und identisch fest (hier links und rechts, also zentriert) Innenabstand im Blockelement. Aufzählungszeichen vor Liste :none, circle etc. Umfliessen des Blockelements: left, right. Umfliessen aufheben: left, right, both. Position des Blockelements: absolut, relativ etc.. Zeigt an, wie ein Element angezeigt werden soll: inline, block, none. Hyperlinkformatierung. <a href > </a> ÜBUNGEN : Gehe zu hauseurs.ch Unterricht EFI 5. KlassenÜbungen und bearbeite bei Einführung CSS Link zur Übungsseite alle Abschnitte ausser Barrierefreies Webdesign und Formularfelder. Experimentiere im Onlineeditor! 4
4. Positionierung von Seitenelementen Die Positionierung von Seiteninhalten war in HTML bisher nur mit Tabellen möglich. Mit Hilfe von CSS so gibt es nun die Möglichkeit, alle Elemente einer Seite pixelgenau im Browserfenster anzuordnen. Die Positionierung kann absolut oder relativ erfolgen, sie umfaßt auch die Möglichkeit, umfließenden Text zu gestalten, Elemente überlappen zu lassen etc. Wie bei fast allen neuen Möglichkeiten von CSS werden auch hier nicht alle vorgesehenen Optionen in allen Browsern genutzt. Zwar sollte die Positionierung für alle Tags gelten, bei denen das sinnvoll wäre. Sicherer ist es, die Positionieraufrufe immer auf Bereiche zu anzuwenden, die mit <div> oder mit <span> eigens abgegrenzt wurden. Beispiel: Unser Ziel ist es nun, auf einfachste Art und Weise auf der Seite test.html drei farbige Kästchen mit Text einzufügen und zwar pixelgenau. Sie sollen absolut positioniert werden. 1.Schritt: Mit dem <div>-tag werden drei Textbereiche formatiert. Ergänzen Sie test.html wie folgt: <html> <head> <title>css-uebung</title> <LINK REL="stylesheet" TYPE="text/css" HREF="css/stylesheeti.css"> </head> <body> <div class= position1 >Hier könnte Text stehen</div> <div class= position2 >Hier könnte Text stehen</div> <div class= position3 > Hier könnte Text stehen </div> </body> </html> 2. Schritt: Nun können Sie die CSS Datei ergänzen:.position1{ top:0px; left:0px; width:340px; z-index:1; background-color:#ffdddd; padding:10mm.position2{ top:260px; left:30px; width:700px; z-index:1; 5
background-color:#aaffcc; padding:10mm.position3{ top:300px; left:340px; width:340px; z-index:2; background-color:#cfddef; padding:50mm.position { top:230px; left:340px; width:340px; z-index:2; background-color: #???; padding:10mm Positionsangabe (absolute, relativ) Abstand vom oberen Browserrahmen Abstand vom linken Browserrahmen Breite des Rahmens Überlappungsreihenfolge(je kleiner desto weiter unten) Rahmen Hitergrundfarbe unsichtbarer Rahmen um Schrift (vergrössert Fenstergrösse) 6