Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

CSS – Cascading Style Sheets

Ähnliche Präsentationen


Präsentation zum Thema: "CSS – Cascading Style Sheets"—  Präsentation transkript:

1 CSS – Cascading Style Sheets
Formatvorlagen des World Wide Web

2 Hintergründe zu CSS Style Sheets sind Formatvorlagen (vgl. Word) des WWW Prinzip: Einmalige Festlegung von Formatierungen in einem Style Sheet  Anwendung des CSS auf jeder gewünschten Seite Vorteile: einheitliches Layout der Website, weniger Aufwand bei der Erstellung und bei Änderungen, kürzere Ladezeiten der Website bestimmte tags (z.B. <font>) werden nach und nach aussterben und durch CSS ersetzt

3 Externe CSS Erstellung einer .css-Datei (reine Textdatei):
Allgemeiner Aufbau: Elementname/tag {Schlüsselwort: Wert} 2 Beispiele: h1 {color: red} h2, h3 {font-family: book antiqua, comic sans ms, arial} Einfügen des tags <link href=“Dateiname der CSS-Datei“ rel=“stylesheet“ type=“text/css“> in den <head>-Bereich jeder Seite, in der das Style Sheet angewendet werden soll

4 Interne CSS Aufbau wie bei externen CSS, allerdings ohne den tag <link href...> die CSS-Anweisungen müssen innerhalb der tags <style type=„text/css“></style> Allgemeiner Aufbau: <head> <style type=„text/css“> Elementname (tag) {Schlüsselwort: Wert} </style> </head> Beispiel: h1 {color: red}

5 Direktformatierung mit CSS
auch für einzelne tags im <body>-Bereich ist eine Formatierung mit CSS möglich allgemeiner Aufbau: <tag style=“Schlüsselwort: Wert;> Beispiel einer pixelgenauen Positionierung eines Textabschnittes: <p style=“position:absolute; left: 90px; top:150px;“> Text</p>

6 Interne vs. externe CSS Wann sollte man interne, wann externe CSS benutzen? Interne CSS Externe CSS bei kurzen CSS falls die CSS sich nur auf eine bestimmte Seite beziehen und sonst keine weitere Anwendung finden bei umfangreicheren CSS für Formatierungen, die für mehrere Seiten der Website genutzt werden für kürzere Ladezeiten


Herunterladen ppt "CSS – Cascading Style Sheets"

Ähnliche Präsentationen


Google-Anzeigen