CSS - Cascading Style Sheets

Größe: px

Ab Seite anzeigen:

Download "CSS - Cascading Style Sheets"

Kirsten Dittmar
vor 7 Jahren
Abrufe

1 CSS - Cascading Style Sheets HTML ist die Struktur, CSS ist das Design Eigenschaften von CSS: Definitionssprache zur Festlegung von Formateigenschaften von HTML-Elementen und/oder ganzer Seiten für unterschiedliche Ausgabemedien, wie: Bildschirm (screen), Dia-/Overheadprojektor (projection) Fernseh-Ausgabe (tv), Handy, Palmtops usw. (handheld) Druck (print), Blindenschrift (braille), Sprachausgabe (aural) alle Medien (all) nicht prozedural (keine Seiteneffekte) Syntax an C/C++ angelehnt CSS Level 1: 1996 (MS Internet Explorer ab V3.0, Netscape Navigator ab V4.0) CSS Level 2: 3/1998 (Internet Explorer ab V4.0, Netscape Navigator ab V4.0)

2 CSS - Cascading Style Sheets HTML ist die Struktur, CSS ist das Design Eigenschaften von CSS: Definitionen zur Festlegung von Formateigenschaften einzelner, spezieller und/oder allgemeiner HTML-Elemente wie: Schriftart, Schriftgröße, Schriftstil und -farbe Anordnung und Position in X-, Y-, und Z-Richtung Hintergrundfarben und -grafiken Rahmen optischen Effekten (z.z. nur MSIE ab 4.0)

3 CSS - Cascading Style Sheets Stylesheets einbinden: 1. Im Kopf einer HTML-Datei: <html> <head> <title>titel der Datei</title> /*... Style-Sheet-Angaben... */ </style> </head> <body> </body>

4 CSS - Cascading Style Sheets Stylesheets einbinden: 2. Stylesheets aus separater Datei einbinden (HTML) <html> <head> <title>titel der Datei</title> <link rel=stylesheet type="text/css" href="formate.css">... Extra-Style-Sheet-Angaben... </style> </head> <body> </body>

5 CSS - Cascading Style Sheets Stylesheets einbinden: 3. Stylesheets aus separater Datei einbinden (CSS) <html> <head> <title>titel der url(formate.css); /* generelle Stylesheetvorlagen */ </style> </head> <body></body>

6 CSS - Cascading Style Sheets Stylesheets einbinden: 4. Stylesheets für unterschiedliche Ausgabemedien (HTML) <html> <head> <title>titel der Datei</title> <link rel=stylesheet media="screen" href="website.css"> <link rel=stylesheet media="print" href="printer.css"> <link rel=stylesheet media="aural" href="speaker.css"> </head> <body> </body>

7 CSS - Zentrale Formate <html><head><title>titel der Datei</title> h1 { font-size: 48pt; color: #FF0000; font-style: italic; } p,li { font-size: 12pt; line-height: 14pt; font-family: Helvetica,Arial; letter-spacing: 0.2mm; word-spacing: 0.8mm; } </style></head> <body><h1>überschrift</h1> <p>ein normaler Textabsatz</p> <ul><li>ein Listenpunkt<li>Ein anderer Listenpunkt</ul> </body>

8 CSS - Unterklassen(1) <html><head><title>titel der Datei</title> p.normal { font-size: 10pt; color: black; } p.gross { font-size: 12pt; color: black; } p.klein { font-size: 8pt; color: black; } all.rot { color: red; }.blau { color: blue; } </style> </head> <body> <p class="normal">textabsatz mit Schrift 10 Punkt schwarz</p> <p class="gross">textabsatz mit Schrift 12 Punkt schwarz</p> <p class="klein">textabsatz mit Schrift 8 Punkt schwarz</p> <p class="rot">roter Textabsatz</p> <address class="rot">roter Absatz für Adressen</address> <blockquote class="blau">blaues Zitat</blockquote> </body>

9 CSS - Unterklassen(2) <html><head><title>titel der Datei</title> p.normal { font-size: 10pt; color: black; } p.gross { font-size: 12pt; color: black; } p.klein { font-size: 8pt; color: black; } #rot { color: red; } #blau { color: blue; } </style></head><body> <p class="normal">textabsatz mit Schrift 10 Punkt schwarz</p> <p class="gross">textabsatz mit Schrift 12 Punkt schwarz</p> <p class="klein">textabsatz mit Schrift 8 Punkt schwarz</p> <p id="rot">roter Textabsatz</p> <address id="rot">roter Absatz für Adressen</address> <blockquote id="blau">blaues Zitat</blockquote> </body>

10 CSS für verschachteltes HTML <html><head><title>titel der Datei</title> h1 { color: red; } h1 i { color: blue; font-weight: normal; font-style: normal; } </style> </head> <body> <h1>wir lernen <i>style-sheets</i></h1> <p>wir lernen <i>style-sheets</i></p> </body>

11 CSS für Pseudoelemente <html> <head><title>titel der Datei</title> a:link { color: #FF0000; font-weight: bold; text-decoration: none; } a:visited { color: #990000; text-decoration: none; } a:active { color: #0000FF; font-style: italic; text-decoration: none; } </style> </head> <body> <a href ="casc_html.htm"> >ein Verweis</a></p> </body>

12 Links zu CSS Lokale (Campus-)Links: Dokumentation CSS (Münz): CSS-MILL (Stylesheet-Generator): Netscape-Farbtabelle: WWW: Dokumentation CSS (W3.ORG):

Ähnliche Dokumente

CSS - Cascading Style Sheets

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,