1 / 20

Cascading Style Sheets

Cascading Style Sheets. Vollständige Trennung von Layout (CSS) und Inhalt (HTML). Beispiel zur Einführung: Wozu CSS?. ALLES GROSSGESCHRIEBEN. Bla text. In einem Rutsch wird aus einer einfachen Webseite durch Zuweisung eines Stile-Sheets eine Layoutete Datei. Welche Browser verstehen CSS?.

davis-bishop
Télécharger la présentation

Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML)

  2. Beispiel zur Einführung: Wozu CSS? ALLES GROSSGESCHRIEBEN Bla text In einem Rutsch wird aus einer einfachen Webseite durch Zuweisung eines Stile-Sheets eine Layoutete Datei

  3. Welche Browser verstehen CSS? • IE3: CSS 1 • IE4, Netscape 4: CSS1, CSS 2 (teilweise) • Sobald im Netscape Javascript ausgeschaltet ist, werden Style Sheets ignoriert. (ebenso ältere Browserversionen)

  4. Was geht in Netscape 4 und IE4? • Tabelle über alle Funktionen: http://www.webreview.com/style/css1/charts/mastergrid.shtml • CSS-Guide von Stefan Münz: • An jeder besprochenen Funktion ist ein Symbol, ob es nur im Standard ist oder von welcher Browserversion es verstanden wird

  5. Übung: Wie fange ich zu arbeiten an? • Vorgefertigte Style Sheets • Bitte im Netscape aufrufen! • http://www.w3.org/StyleSheets/Core/preview • Beliebigen Stil und unten (show me only style sheet) anklicken • Style sheet speichern mit: Auf Datei – Speichern gehen und so in public_html als w3org.css speichern (als Vorlage zum Weiterarbeiten)

  6. Wenn das CSS nicht funktionieren will • Validatoren für fehlerfreie Seiten • www.htmlhelp.org/tools/validator • Validator.w3.org

  7. Wie kommt das CSS zum HTML? • Extern: <head><link rel=stylesheet href=„w3org.css“ type=„text/css“> • Nur in der einen Datei - Embedded: <style type=„text/css“><!– css -> • Nur an der einen Stelle - Inline: <p style=„text-indent: 10pt“>text</p>

  8. Übung: CSS in Webseite einbinden • Kopiere style.css und simpel.html aus www.zdv.uni-mainz.de/download/html/ (mit rechter Maus draufklicken, Ziel speichern unter public_html. • Style.css in simpel.html in den Header schreiben:<link rel="stylesheet" type="text/css" href="style.css"> • simpel.html davor und danach im Webbrowser anschauen. Was ist anders?

  9. Übung- Nachtrag: CSS einbinden • Das gleiche geht natürlich auch im Dreamweaver menügeführt: • Fenster – CSS-Stile • Darin auf das Icon mit dem Stift klicken • Auf Verknüpfen klicken • Das Style-Sheet style.css auswählen • OK

  10. Syntax-Elemente eines Styles ruleset P, em, li {color: red; text-indent: 10pt} property value declaration

  11. Änderbare Eigenschaften (im Prinzip) • Schrift • Abstände, Ränder, Ausrichtung, Rahmen • Farben • Tabellen • Mehrspaltiger Textfluss • Seitenumbruch

  12. DreamweaverHauptfenster 1. Launcher: Einblenden des CSS-Fensters 2. Mit Style Sheet verknüpfen

  13. Was kann man neu definieren? • Freie Eigenschaften (Klassen), indem man ein Stück Text markiert und die Klasse/Eigenschaft zuweist • HTML-Tags • Link-Eigenschaften (Aktiv, Darübergestrichen/Hover, vor kurzem mal angeklickt/visited)

  14. CSS-Datei in Dreamweaver bearbeiten 4 2 3 1 5

  15. Klasse neu definieren • in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken • Bei Name .betonung eintragen, OK • Typ: Farbe: rot, Stärke: fett, Variante: Kapitälchen, Hintergrund, Farbe: gelb • Mit OK bestätigen • Text auf Webseite markieren, dann im Style-Fenster auf betonung klicken

  16. HTML-Tag H1 neu definieren • in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken • Bei „Typ“ HTML-Tag anklicken, OK • Jetzt wird das Tag H1 neu definiert • Die Schriftfarbe auf Hellblau ändern • Mit OK bestätigen

  17. HTML-Tag H2 neu definieren • in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken • Bei „Typ“ HTML-Tag anklicken • Bei „Tag“ h2 auswählen, OK • Jetzt wird das Tag H2 neu definiert • Ein Hintergrundbild einfügen • Mit OK bestätigen

  18. CSS-Selektor neu definieren • in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken • Bei „Typ“ CSS-Selektor anklicken • Bei „Tag“ a:hover auswählen, OK • Jetzt wird das Verhalten eines Hyperlinks beim darüberfahren neu definiert • Die Schrift vergrößern • Mit OK bestätigen

  19. CSS-Stil-Definitionsfenster in Dreamweaver

  20. Übung: Nachbereitung • In kurs.html link setzen (CSS soll auf simpel.html zeigen) • Maile das fertige style.css an slowi@mail.uni-mainz.de

More Related