CSS - Cascading Style Sheets Rechenzentrum Universität Stuttgart Maria Vass 26. April 2005
Gliederung: CSS Grundlagen CSS praktisch einsetzen CSS in HTML einbinden Schriften / Texte formatieren Listen, Pseudoformate Rahmen, Abstände und Ränder Elemente positionieren Browserprobleme Übung
CSS Stylesheets und HTML Sinn und Zweck von CSS Stylesheets eine unmittelbare Ergänzung zu HTML Definition von Formateigenschaften einzelner HTML Elemente Trennung von Form und Inhalt halten die HTML-Dateien klein <font> Deprecated Lösung -> CSS leicht zu erlernen Software: einfacher Texteditor wie Notepad
CSS - Versionen 1996: CSS Level 1 (CSS1) 1998: CSS Level 2 (CSS2) 2003: CSS Level 3 in Bearbeitung
Aufbau eines Stils Bei mehreren Definitionen p {Erste Definition; Zweite Definition;} Ein lokaler Stil wird direkt im HTML Tag gesetzt und durch das Attribut style eingeleitet <p style= font-size: 14pt; >text</p> Hinweis: end Tags müssen gesetzt werden!!!
Stil Name HTML Selektor: h1 { Stildefinition; } Klassen:.klassenname {Stildefinition; } IDs: #idname {Stildefinition; }
HTML-Selektor verknüpfen einen Elementtyp, also ein HTML-Tag mit einer Formatierung. Z.B: h1 { font-size:14px; font-style:italic; } p { color:#ff0000;}
Klassen Klassen sind Selektoren mit beliebigen Namen. Vor dem Namen wird ein Punkt notiert. Kleinbuchstaben, keine Umlaute, Leer oder Sonderzeichen. Name muss mit einem Buchstaben beginnen. Für alle HTML Tags:.klassenname { Stildefinitionen }
Klassen verwenden Für bestimmtes HTML Tag: Tag.klassenname { Stildefinitionen } : h1.rot {color: red;} Verwenden von Klassen: <h1 class= rot">...</h1>
.rot {color: red;} h1.rot {color: red;} Auf der HTML Seite <h1 class= rot > <h2 class= rot >
IDs verwenden Verwendung über: id= name ohne #!
Angaben für CSS - Werte Numerische Angaben px, pc, pt, cm, mm,... http://de.selfhtml.org/css/formate/wertzuweisung.htm Farbangaben z.b. #FFFF00, red, rgb(234,123,0), rgb(60%,90%,75%);... http://de.selfhtml.org/css/formate/wertzuweisung.htm#farben http://de.selfhtml.org/diverses/anzeige/farbnamen_16.htm http://de.selfhtml.org/diverses/anzeige/farbpalette_216.htm URL Angaben Absolute URL: http://www.adresse.de/verzeichnis/datei Relative URL:../verzeichnis/unterverzeichnis/datei z.b. background-image: url(background.gif) Beschreibende Angaben Abhängig vom Element z.b. center, left, solid, bold...
CSS in HTML einbinden Lokal: direkt ins betreffende HTML Tag Intern: in <head> Bereich der betreffenden Datei Extern: in.css Datei
Lokale Methode Gilt nur für dieses Tag.
Interne Methode <html> <head> <title>titel der Datei</title> <style type="text/css"> <!-- /*... Hier werden die Formate definiert... */ --> </style> </head> <body>... Inhalt der HTML Seite... </body> </html> Gilt für die ganze Seite.
Externe Methode <html> <head> <title>titel der Datei</title> <link rel="stylesheet" type="text/css" href="standard.css"> </head> <body> </body> </html> rel = relation = Bezug, type = Mime-Typ). Beim Attribut href= geben Sie die gewünschte Datei an (href = hyper reference = Hypertext- Referenz). Wenn sich die CSS-Datei in einem anderen Verzeichnis oder auf einem anderen Server befindet, müssen Sie an dieser Stelle Pfadangaben oder absolute URLs notieren.
Mehrere externe CSS verwenden <html> <head> <title>titel der Datei</title> <link rel="stylesheet" type="text/css" href="standard.css"> <link rel="stylesheet" type="text/css" href= realm.css"> </head> <body> </body> </html> uniwww http://www.uni-stuttgart.de/ueberblick/ Quelltext
Externe CSS-Dateien importieren <html> <head> <title>titel der Datei</title> <style type="text/css"> <!-- @import url(druck.css) print, embossed; @import url(pocketcomputer.css) handheld; @import url(normal.css) screen; --> </style> </head> <body> </body> </html>
Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien <html> <head> <title>titel der Datei</title> <link rel="stylesheet" media="screen" href="website.css"> <link rel="stylesheet" media="print, embossed" href="druck.css"> <link rel="stylesheet" media="aural" href="speaker.css"> </head> <body> </body> </html> http://de.selfhtml.org/css/formate/einbinden.htm#link_media
Formate für Pseudoelemente Fest definierte Schlüsselwörter Definition: tag:pseudoformat { Stildefinition } z.b. für Verweise: a:link = Verweise zu noch nicht besuchten Seiten a:visited = Verweise zu bereits besuchten Seiten a:hover = Verweise, während der Anwender mit der Maus darüber fährt a:active = für gerade angeklickte Verweise :first-letter : p:first-letter{color: #0000ff;} :first-line : p:first-line{color: #0000ff;}
Gruppen definieren Wenn verschiedene Tags gleiche Eigenschaften besitzen sollen, können Sie diese Tags in Gruppen zusammenfassen : p,td {color: #0000ff; font-family: Arial,Helvetica, sans-serif;}
Eigene Inline-Tags definieren <p>im Absatz<span class= rot >steht rote Schrift</span>, die mit einem benutzerdefinierten Inline-tag formatiert wurde.</p> <p>im Absatz<span id= rot >steht rote Schrift</span>, die mit einem benutzerdefinierten Inline-tag formatiert wurde.</p> <p>im Absatz<span style= color:red; >steht rote Schrift</span>, die mit einem benutzerdefinierten Inline-tag formatiert wurde.</p>
Vererbung <html> <head> </head> <body style= font-family:arial,helvetica,sans-serif; fontsize:12pt; "> <p>dies ist nur ein kleiner text, indem einige Wörter mit einer <b>fett <i>markierung</i></b> hervorgehoben wurden.</p> </body> </html>
Kommentare in CSS Einzelne Kommentarzeilen // Hier folgt der Kommentar Mehrzeilige Kommentare /* Hier folgt ein mehrzeiliger Kommentar */
Schrifttypen Times New Roman Arial Courier
Schriften Eigenschaft Mögliche Werte font-family Schriftart Arial, Helvetica, sans-serif font-size Schriftgröße 12pt, large, smaller font-style Schriftstil normal, italic font-weight Schriftgewicht 500, bold, lighter color Schriftfarbe #C0C0C0, red line-height Zeilenhöhe 14pt, 1.2
Text formatieren Eigenschaft Mögliche Werte text-align Horizontale Ausrichtung left, center, justify vertical-align Vertikale Ausrichtung top, bottom,middle... text-indent Texteinrückung 0.5cm,2px, white-space Textumbruch normal,pre,nowrap text-decoration Textdekoration underline, none, blink
Listenformatierung Eigenschaft Mögliche Werte list-style-type Darstellungstyp bullet, lower-roman, disc list-style-image Eigenes Listenzeichen url(naviwuerfel.gif) list-style-position Listeneinrückung inside, outside
Elementhintergründe Eigenschaft Mögliche Werte background-color Farbe #C450E0, blue background image Bild url(background.gif) background repeat Wiederh. no-repeat, repeat-x background-attachment Fixierung scroll, fixed background position Position top left, 10px 45px background Alles URL Wiederholung Fixierung Position Farbe
Aussenrand und Abstand margin-top margin-bottom margin-left margin-right erzwungener Leerraum zwischen dem aktuellen Element zu seinem Elternelement oder Nachbarelement e bei SELFHTML
Innenabstand Innenabstand bedeutet: erzwungener Leerraum zwischen dem Inhalt eines Elements zu seinem eigenen Elementrand, also z.b. zwischen dem Text eines Elements und dem Rand dieses Elements. Sinnvoll z.b. bei HTML Elementen, die einen eigenen Absatz erzeugen bzw. einen Block bilden (h1,h2.., p und bei Tabellen.) padding-top: padding-bottom: padding-left: padding-right: e
Rahmen Sinnvoll für HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden (h1,..,p,div, table) border-width border-color border-style
Rahmentypen
Positionierung von Elementen position (Positionierung): absolute = Ausrichtung am Fenster relative = Relativ zum letzten Element e top, left,...: auch bottom, right oder mehrere Angaben möglich e width Numerische Angabe float Textumfluss: z-index (Reihenfolge von überlappenden Elementen): von unten (0) nach oben (..) aufsteigend
Browserkompatibilität Auch die neuesten Versionen der am häufigsten verwendeten Browser sind nicht voll kompatibel mit den Standards der W3C Lösung von Kompatibilitätsprobleme: gestalterische Grundkonzeption, Testseite basteln Basiselemente von CSS einbauen und Seite mit verschiedenen Browser prüfen Erweiterungen einbauen und prüfen Bei Problemen die Notwendigkeit abwägen Probleme können auch an einer fehlerhaften Programmierung liegen: validieren http://jigsaw.w3.org/css-validator/
Weiterführende Links Tabellennloses Layout: Tabellen durch CSS ersetzen Tableless layout HOWTO (http://www.w3.org/2002/03/csslayout-howto.html.en) ThreeColumnLayouts mit CSS (http://cssdiscuss.incutio.com/?page=threecolumnlayouts) CSS Portal des W3C http://www.w3.org/style/css/ CSS Validator http://jigsaw.w3.org/css-validator/
Kursunterlagen http://www.rus.uni-stuttgart.de/kurse/material/