Embed Size (px)
Citation preview
26. April 2005
CSS - Cascading Style Sheets
RechenzentrumUniversitä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
26. April 2005
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
26. April 2005
CSS - Versionen
1996: CSS Level 1 (CSS1)
1998: CSS Level 2 (CSS2)
2003: CSS Level 3 in Bearbeitung
26. April 2005
Aufbau eines Stils
•Bei mehreren Definitionenp {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 !!!
26. April 2005
Stil Name
• HTML – Selektor: h1 { Stildefinition; }
• Klassen: .klassenname {Stildefinition; }
• IDs: #idname {Stildefinition; }
26. April 2005
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;}
26. April 2005
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 }
26. April 2005
Klassen verwenden
• Für bestimmtes HTML Tag:Tag.klassenname { Stildefinitionen }
Beispiel: h1.rot {color: red;}
• Verwenden von Klassen:
<h1 class=„rot">....</h1>
26. April 2005
Beispiel
.rot {color: red;}h1.rot {color: red;}
Auf der HTML Seite<h1 class=„rot“><h2 class=„rot“>
26. April 2005
IDs verwenden
• Verwendung über: id=“name“ – ohne # !
26. April 2005
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#farbenhttp://de.selfhtml.org/diverses/anzeige/farbnamen_16.htmhttp://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...
26. April 2005
CSS in HTML einbinden
• Lokal: direkt ins betreffende HTML Tag
• Intern: in <head> Bereich der betreffenden Datei
• Extern: in .css – Datei
26. April 2005
Lokale Methode
Gilt nur für dieses Tag.
26. April 2005
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.
26. April 2005
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.
26. April 2005
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>
Beispiel uniwwwhttp://www.uni-stuttgart.de/ueberblick/ Quelltext
26. April 2005
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>
26. April 2005
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
26. April 2005
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 Seitena:visited = Verweise zu bereits besuchten Seitena:hover = Verweise, während der Anwender mit der Maus darüber fährta:active = für gerade angeklickte VerweiseBeispiel
• :first-letter Beispiel: p:first-letter{color: #0000ff;}• :first-line Beispiel: p:first-line{color: #0000ff;}
26. April 2005
Gruppen definieren
• Wenn verschiedene Tags gleiche Eigenschaften besitzen sollen, können Sie diese Tags in Gruppen zusammenfassen
Beispiel:
p,td {color: #0000ff; font-family: Arial,Helvetica, sans-serif;}
26. April 2005
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-tagformatiert wurde.</p>
26. April 2005
Vererbung
<html><head></head><body style=„font-family:Arial,helvetica,sans-serif; font-
size:12pt; "><p>Dies ist nur ein kleiner Beispieltext, indem einige Wörter mit
einer <b>Fett – <i>Markierung</i></b> hervorgehoben wurden.</p>
</body></html>
26. April 2005
Kommentare in CSS
• Einzelne Kommentarzeilen
// Hier folgt der Kommentar
• Mehrzeilige Kommentare
/* Hier folgt ein mehrzeiligerKommentar */
26. April 2005
Schrifttypen
Times New Roman
Arial
Courier
26. April 2005
Schriften
Eigenschaft Mögliche Werte
Beispiel
Beispiel
Beispiel
Beispiel
Beispiel
Beispiel
font-family Schriftart Arial, Helvetica, sans-serif
font-size Schriftgröße
Schriftstil
Schriftgewicht
Schriftfarbe
Zeilenhöhe
12pt, large, smaller
font-style normal, italic
font-weight 500, bold, lighter
color #C0C0C0, red
line-height 14pt, 1.2
26. April 2005
Text formatieren
Eigenschaft Mögliche Werte
Beispiel
Beispiel
Beispiel
Beispiel
Beispiel
text-align Horizontale Ausrichtung left, center, justify
vertical-align
text-indent
white-space
text-decoration
VertikaleAusrichtung
Texteinrückung
Textumbruch
Textdekoration
top, bottom,middle...
0.5cm,2px,
normal,pre,nowrap
underline, none, blink
26. April 2005
Listenformatierung
Eigenschaft Mögliche Werte
Beispiel
Beispiel
Beispiel
list-style-type Darstellungstyp bullet, lower-roman, disc
list-style-imageEigenes
Listenzeichen
Listeneinrückung
url(naviwuerfel.gif)
list-style-position inside, outside
26. April 2005
Elementhintergründe
Eigenschaft Mögliche Werte
Beispiel
Beispiel
Beispiel
Beispiel
Beispiel
Beispiel
background-color Farbe #C450E0, blue
background–image Bild
Wiederh.
Fixierung
Position
Alles
url(background.gif)
background–repeat no-repeat, repeat-x
background-attachment scroll, fixed
background–position top left, 10px 45px
backgroundURL Wiederholung Fixierung Position Farbe
26. April 2005
Aussenrand und Abstand
• margin-top• margin-bottom• margin-left• margin-right
erzwungener Leerraum zwischen dem aktuellen Element zu seinem Elternelement oder Nachbarelement
Beispiele bei SELFHTML
26. April 2005
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:
Beispiele
26. April 2005
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
Beispiel
26. April 2005
Rahmentypen
26. April 2005
Positionierung von Elementen• position (Positionierung):
– absolute = Ausrichtung am Fenster– relative = Relativ zum letzten Element
Beispiele• top, left, ...:
– auch bottom, right oder mehrere Angaben möglichBeispiele
• width– Numerische Angabe Beispiel
• float Textumfluss: Beispiel• z-index (Reihenfolge von überlappenden Elementen):
– von unten (0) nach oben (..) aufsteigendBeispiel
26. April 2005
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/
26. April 2005
Weiterführende Links
• Tabellennloses Layout: Tabellen durch CSS ersetzenTableless layout HOWTO (http://www.w3.org/2002/03/csslayout-howto.html.en)
• ThreeColumnLayouts mit CSS (http://css-discuss.incutio.com/?page=ThreeColumnLayouts)
• CSS Portal des W3Chttp://www.w3.org/Style/CSS/
• CSS Validatorhttp://jigsaw.w3.org/css-validator/
26. April 2005
Kursunterlagen
• http://www.rus.uni-stuttgart.de/kurse/material/
![Kapitel WT:III (Fortsetzung)...Cascading Stylesheets CSS [W3C status, reports, css home] Historie 1996 CSS Level 1. Recommendation. 2011 CSS Level 2 R1. Recommendation. 2016 CSS Level](https://img.pdfslide.org/doc/110x75/5fc4c0e6cd2700396b14acce/kapitel-wtiii-fortsetzung-cascading-stylesheets-css-w3c-status-reports.jpg)
![[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis · Links formatieren & Pseudoklassen/Elemente CSS 3 Download Schlusswort Vorwort CSS (oder lang: "Cascading Style Sheets") geben deiner (HTML](https://img.pdfslide.org/doc/110x75/5f16244122e1e162b77f14cc/guide-css-css-3-inhaltsverzeichnis-links-formatieren-pseudoklassenelemente.jpg)
