CSS - Cascading Style Sheets

Transkript

1 CSS - Cascading Style Sheets Rechenzentrum Universität Stuttgart Maria Vass 26. April 2005

2 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

3 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

4 CSS - Versionen 1996: CSS Level 1 (CSS1) 1998: CSS Level 2 (CSS2) 2003: CSS Level 3 in Bearbeitung

5 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!!!

6 Stil Name HTML Selektor: h1 { Stildefinition; } Klassen:.klassenname {Stildefinition; } IDs: #idname {Stildefinition; }

7 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;}

8 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 }

9 Klassen verwenden Für bestimmtes HTML Tag: Tag.klassenname { Stildefinitionen } : h1.rot {color: red;} Verwenden von Klassen: <h1 class= rot">...</h1>

10 .rot {color: red;} h1.rot {color: red;} Auf der HTML Seite <h1 class= rot > <h2 class= rot >

11 IDs verwenden Verwendung über: id= name ohne #!

12 Angaben für CSS - Werte Numerische Angaben px, pc, pt, cm, mm,... Farbangaben z.b. #FFFF00, red, rgb(234,123,0), rgb(60%,90%,75%); URL Angaben Absolute URL: Relative URL:../verzeichnis/unterverzeichnis/datei z.b. background-image: url(background.gif) Beschreibende Angaben Abhängig vom Element z.b. center, left, solid, bold...

13 CSS in HTML einbinden Lokal: direkt ins betreffende HTML Tag Intern: in <head> Bereich der betreffenden Datei Extern: in.css Datei

14 Lokale Methode Gilt nur für dieses Tag.

15 Interne Methode <html> <head> <title>titel der Datei</title> <style type="text/css">  </style> </head> <body>... Inhalt der HTML Seite... </body> </html> Gilt für die ganze Seite.

16 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.

17 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 Quelltext

18 Externe CSS-Dateien importieren <html> <head> <title>titel der Datei</title> <style type="text/css"> url(druck.css) print, url(pocketcomputer.css) url(normal.css) screen; --> </style> </head> <body> </body> </html>

19 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>

20 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;}

21 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;}

22 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>

23 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>

24 Kommentare in CSS Einzelne Kommentarzeilen // Hier folgt der Kommentar Mehrzeilige Kommentare /* Hier folgt ein mehrzeiliger Kommentar */

25 Schrifttypen Times New Roman Arial Courier

26 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

27 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

28 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

29 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

30 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

31 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

32 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

33 Rahmentypen

34 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

35 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

36 Weiterführende Links Tabellennloses Layout: Tabellen durch CSS ersetzen Tableless layout HOWTO ( ThreeColumnLayouts mit CSS ( CSS Portal des W3C CSS Validator

37 Kursunterlagen