CSS EINFÜHRUNG. Cascading StyleSheets. November Seite 1

Transkript

1 CSS EINFÜHRUNG Cascading StyleSheets Seite 1

2 Themen Einführung Syntax Stylesheets einbinden Alternative Stylesheets Texteigenschaften Positionieren Farben Hintergrund Pseudoklassen Selektoren (Vererbung) P. Rücker Seite 2

3 Literatur CSS Cascading Style Sheet; Level 2 Kursmaterial CSS Seite 3

4 Einführung CSS ist eine Formatierungssprache, die es Autoren und Benutzern gestattet, Formatierungen (zum Beispiel Schriften, Abstände, Rahmen, Hintergrundfarben, Positionierung) von strukturierten Dokumenten (z.b. HTML-Dokumenten) durchzuführen. Mit der Trennung der Präsentation eines Dokuments vom Inhalt des Dokuments vereinfacht CSS die Erfassung von Web-Dokumenten und die Verwaltung von Sites. CSS ist wie HTML selbst ein softwareunabhängiger Textcode und wird vom W3C normiert. W3C (World Wide Web Consortium) ist das Gremium zur Standisierung der Vereinbarungen für Web-Seiten (Technische Spezifikationen und Richtlinien) Seite 4

5 Cascading Style Sheets Formatierung und Positionierung von HTML und XHTML- Elementen. Durch die Kombination von HTML und Cascading Style Sheets (CSS / Stilvorlagen) werden die Möglichkeiten der Seitengestaltung im Internet deutlich erweitert. XHTML Extensible HyperText Markup Language erweiterbare HTML (ist genauer, z.b. Elementnamen nur klein, mit Start- u. End-Tag, Attributwert in Anführungszeichen) Seite 5

6 Vorteile CSS trennt Struktur von Gestaltung CSS bringt übersichtlichen HTML-Code CSS bietet Gestaltung nicht nur für den Bildschirm (sondern auch zum Drucken) CSS bietet mehr gestalterische Möglichkeiten CSS ermöglicht schnelle Designänderungen CSS ermöglicht barrierefreiere Seiten CSS verringert die Hosting- und Traffic-Kosten CSS verringert die Wartungskosten Seite 6

7 Nachteile Stylesheets werden nur von neueren Browsern unterstützt CSS-Seiten werden manchmal von den Browsern unterschiedlich dargestellt, wie z.b. Positionierung der Abschnitte oder Hintergrundgrafiken Seite 7

8 Version Version 2 (CSS2) seit 1998 wird vom Internet Explorer 6.x eingebunden, liefert aber teilweise andere Ergebnisse Internet Exporer 7.x bindet CSS2 vollständig ein Firefox 3.x ebenfalls vollständig Version 3 (CSS3) seit 2001 Umsetzung ist noch nicht vollständig erfolgt Seite 8

9 Elemente verschachteln Elemente sind hierarchisch strukturiert. Untergeordnete Elemente müssen vor dem übergeordneten Elementen geschlossen werden. Die Elemente dürfen sich nicht überlappen. <p><bold>die Kurse></bold></p> <p><bold>die Kurse></p></bold> richtig falsch Seite 9

10 Elemente schließen Elemente haben ein End-Tag <p><strong>die Kurse</strong></p> In XHTML müssen End-Tags gesetzt sein Seite 10

11 CSS im Head-Bereich definiert <html> <head> <title>titel der Datei</title> <style type = "text/css">  </style> </head> <body> </body> </html> Seite 12

12 Beispiel 1 <html> <head> <title>titel der Datei</title> <style type = "text/css"> <! - h1 { font-family: Verdana, Arial, sans-serif; font-size: 24pt; color: green; background-color: #DDDD00; text-indent: 1em; }.. p } --> </style> </head> <body> { font-family: "Times New Roman"; font-size:12pt; <h1>stylesheets</h1> <p>hier folgt der Text mit der Absatzformatierung.</p> </body> </html>. Seite 13

13 Stylesheets einbinden Auf fünf verschiedene Arten können Stylesheets eingebunden werden: Als Definition im Kopf eines HTML- Dokuments in einer separaten Datei als importierte Definition als Definition für ein bestimmtes Element als Definition für einen Abschnitt <style type="text/css"> <link "dateiname.css" style="" <span style=""> Unterschied: Die Stylesheets, die über <link> übernommen werden, sind optional und können vom Benutzer überschrieben werden. Die importierten werden grundsätzlich implementiert. Seite 15

14 Stylesheets in HTML einbetten <head> <style type="text/css"> h1 { font family: Arial, sans-serif; font-size: 20 px; color: red; } p { font family: Times New Roman, ; font-size: 18px; color: #000000; text-indent: 1em } </style> </head> Seite 16

15 Stylesheet lokal einbinden <h2 style="font-family: Arial, Trebuchet, sans-serif; font-size: 20px; color: red;"> Der Panther </h2> Definition der Formatierungen sind direkt beim Element Seite 17

16 Formate zentral in separater CSS-Datei definieren <html> <head> <title>titel der Datei</title> <link rel="stylesheet" type="text/css" href="formate.css"> <style type = "text/css">  </style> </head> <body> </body> </html> Seite 18

17 Verweis auf die externe Datei <head> <link type="text/css" rel="stylesheet href="styledatei.css"> </head> link type rel href im Kopfbereich einer HTML-Datei weißt auf eine externe Datei hin. spezifiziert den Inhalt der Datei als Stylesheet stellt den Bezug zu den Stylesheets her Pfad zur Datei Das Stylesheet kann mit jeder beliebigen Seite verlinkt werden Zenrale Verwaltung der Formatdefinitionen keine HTML-Tags Seite 19

18 Stylesheet-Datei h1 { font-family: Times, 'Times New Roman', serif; font-size: 28pt; color: black; } p { font-family: Arial, Trebuchet, sans-serif; font-size: 14pt; color: FF0000; text-indent: 1em } Die Textdateien erhalten die Endung ".css" Seite 20

19 Aufgabe 3 Erstellen Sie eine externe CSS-Datei mit der Endung.css. Folgende Formatanweisungen sollen hier definiert werden. In der HTML-Datei vorlage-2.html wird dann diese Datei aufgerufen und die Formatierungen werden entsprechend der CSS-Datei ausgeführt. Hierzu haben Sie eine Datei mit einer Überschrift h1, h2 und einer Hintergrundfarbe definiert. body { background-color: gray;/* Hintergrundfarbe: grau */ font-size: 26px;/* Schriftgröße */ } h1 { font-style: italic; font-size: 28px; font-family: Arial, Trebuchet, sans-serif; color: red; } h2 { font-style: italic; font-size: 1.5em; } Seite 21

20 Block-Element <div> Mehrere Elemente wie Text, Grafiken, Tabellen usw. können in einem gemeinsamen Bereich, Block-Element, eingeschlossen werden mit div (= division = Bereich) wird ein Bereich eingeleitet Seite 22

21 Beispiel body { background-color: #EFEFEF;/* Hintergrundfarbe: hellgrau */ font-size: 26px;/* Schriftgröße */ color: blue;/* Schriftfarbe */ font-family: Arial, Trebuchet, sans-serif;/* Schriftart */ } h1 { font-style: italic;/* Kursivschrift */ font-size:.8em; } h2 { font-style: italic; font-size:.6em; } div { color: black; font-size:.4em; } div Seite 23

22 Alternative Stylesheets Alternative Stylesheets anbieten. Im Browser unter Ansicht die Stile ansehen. <link rel="alternate stylesheet" type="text/css" href="datei1.css" title="auswahl1"> Seite 24

23 Alternativen <link rel="stylesheet" type="text/css" href="style_a.css" title="standard"> <link rel="alternate stylesheet" type="text/css" href="style_b.css" title="serifenschrift"> <link rel="alternate stylesheet" type="text/css" href="style_c.css" title="serifenlose Schrift"> Seite 25

24 Selektoren Die nachfolgende Regel setzt sich aus dem Selektor, der die gewünschten Elemente selektiert (auswählt) und einer Eigenschaft sowie dem ihr zugewiesenen Wert zusammen: Selektor { Eigenschaft: Wert; } Selektor { Eigenschaft1: Wert; Eigenschaft2: Wert; } Seite 26

25 Eigenschaften zur Schrift Bezeichnung Befehl Beispiel Schriftart Schriftart { font-family: Georgia, Times, serif; } Schriftgröße font-size { font-size: 12pt } Schriftstil Neigung { font-style: italic } Schriftstärke Dünn bis fett { font-weight: bold } Kapitälchen Angabe in Kurzform Kleine Großbuchstaben font { font-variant: small-caps; } { font: 12pt Verdana, sansserif; } Seite 27

26 Schriftart { font-family: Times, 'Times New Roman', serif } serif = eine Schriftart mit Serifen sans-serif = eine Schriftart ohne Serifen monospace = eine Schriftart mit gleicher Buchstabenbreite u.a. Seite 28

27 Schriftgröße In HTML waren nur sieben verschiedene Schriftgrößen erlaubt. In CSS geht es pixelgenau { font-size: Wert Maßeinheit } Absolute Maßeinheiten : px, mm, cm, in, pt, pc Relative Maßeinheiten: em, ex, % Seite 29

28 Schriftstil Zur Schriftneigung zählen: italic = Schriftstil kursiv oblique = Schriftstil kursiv normal = normaler Schriftstil Seite 30

29 Schriftstärke HTML-Tags <b> oder <strong> zum hervorheben des Textes, mit CSS sind mehrere Abstufungen möglich: normal = normal bold = fett in 100er Schritten (von dünn bis fett) bolder lighter Seite 31

30 Inline-Element <span> kann Text und andere Inline-Elemente enthalten aber besitzt selbst keine Eigenschaften. <h1 style="font-size:200%"> <span style="color:gray">a</span> <span style="color:yellow">b</span> <span style="color:lime">c</span> </h1> Seite 32

31 Abschnitte formatieren <span style="deklarationen"> Nur für diesen Abschnitt gilt diese Deklaration </span> Beispiel <body> <p>abschnitt mit Formatierungen <span style="font-size:30pt ; color:blue;">und jetzt geht s mit blau weiter </span> und dann wieder wie gehabt. </p> </body> Seite 33

32 Absolute Werte Absoluter Wert Einheit Umrechnung Zoll o. inch in 25,4 mm Zentimeter cm Millimeter mm Punkt pt 1/72 Zoll = 0,353 mm Pixel px Pica pc 12 pt = 1/6 Zoll 0 4,23 Seite 35

33 Relative Werte Relativer Wert Nutzung em Für x-fache Größe des übergeordneten Elements (1 em = 100% ex Schriftgrößen in Abhängigkeit der x-höhe % Breite eines Elements bestimmen. Proportionalen Zeilenabstand anpassen Seite 36

34 Texteigenschaften Bezeichnung Befehl Wert Ausrichtung, horizontal align left, right, center, justify ", vertikal vertical-align top, bottom, text-top, text-bottom, baseline, middle, sub, super, Prozento. Zahlenangabe Groß- u. Kleinschreibung text-transform uppercase, lowercase, capitalize, none Text hervorheben text-decoration underline, overline, line-through, blink, none Zeilenabstand line-height normal, Maßeinheit in px, prozentuale Angabe Wortzwischenraum word-spacing normal, Maßeinheit in px, keine prozentuale Angabe Zeichenabstand letter-spacing normal, Zahlenangaben, keine prozentualen Angaben Text einrücken text-indent Zahlen- u. Prozentangaben Seite 37

35 Textabstände Zeichenabstand: letter-spacing: 50px Wortzwischenraum: word-spacing: 20px h1 { letter-spacing: 50px; } p { text-transform: uppercase; word-spacing: 20px;} Seite 38

36 Block-Element <div> Mehrere Elemente wie Text, Grafiken, Tabellen usw. können in einem gemeinsamen Bereich, Block-Element, eingeschlossen werden mit div (= division = Bereich) wird ein Bereich eingeleitet Seite 39

37 Block-Element <div align="center"> <h1>block zentriert</h1> <ul> <li>alles zentriert</li> <li>eintrag A</li> <li>eintrag B</li> </ul> </div> <div align="right"> <h1>textblock rechts</h1> <ul> <li>alles rechts am Rand </li> <li>eintrag 1</li> <li>eintrag 2</li> </ul> </div> Seite 40

38 Höhe height Box-Model Jedes Element in einer HTML-Datei erhält eine Begrenzung, in Form eines Rechtecks. Das Rechteck enthält den Inhalt mit einem Innenabstand zum Rahmen. Der Rahmen ist standardmäßig ausgeblendet (border-style:none) so breit wie das Browserfenster Jedes Rechteck kann mit einem Abstand zu einem anderen Rechteck bekommen Das Rechteck kann eine Hintergrundfarbe erhalten Außenabstand Rahmen Innenabstand Breite Inhalt width padding border margin Seite 41

39 Beispiel: Rahmen-Beispiel.html body { font-size: 1em; font-family: Arial, Trebuchet, sans-serif;} div { border: 2px solid #000; span { font-size: 3em; p padding: 10px; margin: 30px; } text-indent:0em; border: 2px solid green; padding: 10px; margin: 30px; } { font-size: 1.5em; border: 2px solid green; padding: 10px; margin:.75em 30px; } </head> <body> <div><img src="herbstlaub.jpg" alt="blätter"> </div> <div>im Herbst</div> <div><p>der schöne Sommer ging von hinnen,<br> Der Herbst, der reiche, zog ins Land.<br> Nun weben all die guten Spinnen<br> So manches feine Festgewand..</p></div> </style> Seite 42

40 Positionieren <style type="text/css">  </style> </head> <body> <h2>positionieren relativ und absolut</h2> <p>positioniert mit Wert:static: <span style="position: static; top:100px;left:200px;">postition:static; oben:100 Pixel; links: 200 Pixel</span> </p> <p>position mit relativem Wert: <span style="position: relative; top:100px;left:200px;">postition:relativ; oben:100 Pixel; links: 200 Pixel</span> </p> <p>position mit absolutem Wert: <span style="position: absolute; top:100px;left:200px;">postition:absolut; oben:100 Pixel; links: 200 Pixel</span> </p> <p>positioniert mit Wert:fixed: <span style="position: fixed; bottom:100px;left:100px;">postition:absolut; unten:100 Pixel; links: 50 Pixel</span> </p Seite 44

41 Absolute und relative Positionierung Seite 45

42 Positionieren position: static keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung) position: absolute Abstände werden vom Webseitenrand definiert position: relative relative Position zum eigentlichen Text position: fixed Startposition bezieht sich auf den Browserrand, bleibt beim Scrollen stehen Seite 46

43 Positionierung von Text und Grafiken <p>garten und Kräuter</p> <span style="position: relative; left:20px;"> <p style="border-color:blue; border-width:2px; border-style: solid; padding:4px; width:70px;">steingarten</p> <img src="steingarten.jpg" width="50%" style="position: relative; top:30px; left:180px;"> </span> Seite 48

44 Textumfluss <style type="text/css"> div { float:left; margin-right:20px; margin-bottom:5px; border:solid 1px gray;} </style> <div><img src="steingarten.jpg" width="20%"></div> <p style="font-size:80%"> Auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden. An Steinstufen sind blaue Blumen gepflanzt,... Auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden. An Steinstufen sind blaue Blumen gepflanzt,... Auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden. An Steinstufen sind blaue Blumen gepflanzt,... </p> <p style="clear:left">hier ist der Textumfluss ausgeschaltet</p> Seite 49

45 Text umfließen mit float <body> <div style="float:left; margin-right:20px; margin-bottom:20px; Kapitel<br> border:solid 1px red; text-align:center"> <span style="font-family:algerian,serif; font-size:96px; color:blue"> 1 </span></div> <p style="font-size:120%">hier beginnt das erste Kapitel...</p> <p style="clear:left">nun gehts los...</p> </body> Seite 50

46 Text umfließen ohne float <h1><img src="steingarten.jpg" width="50%" align="left" vspace="10" hspace="20" alt="pflanzen">steingärten</h1> <p>auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden. An Steinstufen sind blaue Blumen gepflanzt,... Auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden. An Steinstufen sind blaue Blumen gepflanzt,... Auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden. An Steinstufen sind blaue Blumen gepflanzt,...<br clear="all"></p> richtige Darstellung im Internet Explorer wie auch im Firefox Seite 51

47 Farben 16 Standardfarben Seite 52

48 Farben Hexadezimalsystem A B C D E F 16 verschiedene Zustände (0 15) für einen Farbwert stehen jeweils 2 Stellen zur Verfügung, d.h. 16 x 16 ergibt 256 Möglichkeiten # A0 C0 3F Seite 53

49 Farbwerte durch Angabe von Hexadezimalwerten Hex RGB color: # steht für schwarz 0,0,0 color: #FFFFFF steht für weiß 255,255,255 color: #FF0000 steht für rot 255,0,0 color: #00509B LUH-Blau des Logos 0,80,155 Seite 54

50 RGB-Farbmodell RGB-Farbraum ist ein Maßraum in dem eine Untermenge aller wahrnehmbaren Farben durch drei Koordinaten definiert werden. Additives Farbmodell (Lichtmischung) Monitore Schwarz: 0,0,0 Weiß: 255,255,255 Rot: 255,0,0 Quelle: Wikipedia Seite 55

51 Farben Dezimalwerte Werte zwischen 0 und 255 rgb( 255, 128, 0 ) entspricht dieser Textfarbe Seite 56

52 Hintergründe entwerfen Beispiel-hintergrund_in_Richtungen.html unterschiedliche Aufteilungen des Hintergrunds hierzu jeweils nur eine Einstellung entkommentieren Seite 57

53 Tabelle mit Hintergrund table { background-image:url("hintergruende/img_1.gif"); background-repeat:repeat; border:4px black solid; } tr,td {border:1px gray solid;} Seite 58

54 Pseudoklassen Pseudoklassen beschreiben einen Zustand oder eine Eigenschaft eines Elements sie werden an den Elementnamen bzw. die vorhergende Klassifizierung angehängt z.b. Element <a> für Links Trennzeichen zwischen der Bezeichnung der Pseudoklasse und dem Elementnamen ist der Doppelpunkt : z. B. a:hover { color: black; text-decoration: underline; } Seite 59

55 Reihenfolge der Pseudoklassen :link :visited :hover :active :focus Unbesuchte Hyperlinks Für Verweise zu bereits besuchten Seiten Für Verweise, die aktivert werden während die Maus drüber fährt Aktive, gerade angeklickte Links Wird mit der Tabulator-Taste angesprochen. Seite 60

56 Beispiel Buttons Datei buttons.html ruft buttons.css auf Seite 62

57 Selektoren Beispiel: Container body Vorfahre von h1 und p h1 und p sind Kinder von body h1, p, u, b, i sind Nachkommen von body p ist Nachbar von h1 u und b sind Nachfahren von p u ist direktes Kind von p b ist Kind von u Seite 65

58 Selektoren Die nachfolgende Regel setzt sich aus dem Selektor, der die gewünschten Elemente selektiert (auswählt) und einer Eigenschaft sowie dem ihr zugewiesenen Wert zusammen: Selektor { Eigenschaft: Wert; } Selektor { Eigenschaft1: Wert; Eigenschaft2: Wert; } Seite 66

59 Klassenselektoren Der am häufigsten eingesetzte Selektor. Über einen Klassennamen können Formatierungen einem einzelnen Element zugewiesen werden. Die Definition beginnt mit einem. (Punkt).class.Klassenname { Eigenschaft: Wert }.rot { color: red } Der Klassenselektor kann auch an einen bestimmten Tag gebunden werden Tag.Klassenname { Eigenschaft: Wert } p.rot { color: red } Seite 67

60 Beispiel <p class="back1" style="font-size:30pt; font-weight: bold;">hintergrundbilder</p> Auszug aus der css-datei:.back1 { background-image:url(hintergruende/img_1.gif) }.back2 { background-image:url(hintergruende/img_2.gif) }.back3 { background-image:url(hintergruende/img_3.gif) } Seite 68

61 Beispiel: Klassen.html  </style> </head> <body> <h1>klassen in Stylesheets</h1> <p class="hintergrund">absatz mit Hintergrund durch Klasse</p> <p class="blau">blaue Schriftfarbe durch Klassendefinition</p> <p class="kursiv">kursive Schrift im Absatz</p> <h1 class="kursiv">kursive Schrift in der Überschrift</h1> Seite 69

62 Selektoren gruppieren h2, h3 { font-family:"times New Roman"; font-size:28px; color:blue; } p { color: black } h2 { color: black } h1 { color: black } p,h2,h3,h1 { color: black } h3 { color: black } Seite 70

63 Universalselektor Selektor Bedeutung Beispiel. Eine Klasse.myclass {color:blue;} ID-Individuelle Definition #myid # * > + Universalselektor Kind-Selektor Mit dem Zeichen > wird in diesem Selektor fefstgelegt, dass p-elemente, sofern sie innerhalb eines div-bereichs vorkommen, nur dann die Textfarbe blau (color:blue) erhalten, wenn das p- Element in dieser Form vorkommt: <div><p></p></div>, also eine Ebene unterhalb des div-elements Benachbarte Elemente Mit diesem Zeichen wird in diesem Selektor festgelegt, dass p-elemente, die unmittelbar auf ein div-element hin folgen, einen Abstand von 100 Pixeln nach oben hin erhalten (margintop:100px;). {background-color:gray} *{ color:black;} div > p { color:blue; } div + p { margin-top:100px; } Seite 71

64 Vererbung Die Formatierungseigenschaften eines bestimmten HTML- Elements werden auf die Unterelemente weitergegeben, vererbt. <body> <h1>(schwarz)</h1> <p> (schwarz) </p> <b>(schwarz)</b> <ol>(blau) </ol> <li>(blau)>/li> <li>(blau)>/li> <p>(schwarz)</p> </body> Seite 72

65 Nachfahre-Selektor Ein Nachfahre-Selektor kann angewendet werden, wenn mehrere Selektoren zur selben Zeit auftreten. Selektor1 Selektor2 { Eigenschaft: Wert } Seite 75

66 Nachfahre <style type ="text/css">  </style> </head> <body> <h1>die Nachfahren</h1> <p>dies ist ein Text, der die Formatierungen verdeutlichen soll.</p> <p><u><b> Dieser fett formatierte Text wird rot eingefärbt</b></u> <i>und dieser kursive Text wird automatisch grün dargestellt</i>. Dieser Text ist wieder schwarz.</p> wenn p und b gleichzeitig auftreten Seite 76

67 Kind-Selektor Ähnlich wie beim Nachfahre-Selektor. Unterschied: die entsprechenden Tags müssen direkte Nachfolger des vorherigen Tags sein. Selektor1>Selektor2 { Eigenschaft: Wert } Seite 77

68 Beispiel: Kind-Beispiel.html  </style> </head> <body> <h1>der Kind-Selektor in Stylesheets</h1> <p>der Text beginnt in diesem Absatz mit der body-einstellung, Farbe: grau. dann <b>folgt durch b wird der Text fett und da direkt nach p erhält der Text die Farbe blau </b> <p><u><b>hier wird nur unterstrichen durch u, es erfolgt aber keine Einfärbung mehr da b nicht direkt auf p folgt.</b></u></p> Seite 78

69 Selektoren für benachbarte Elemente Ein Selektor folgt direkt, unmittelbar einem Selektor (Nachbar) Selektor1+Selektor2 { Eigenschaft: Wert } h1+p { background-color: gray; } Der Absatz bekommt einen grauen Hintergrund wenn er direkt nach der Überschrift h1 folgt Seite 80

70 ID-Selektor Unterschied zu den Klassenselektoren: kommt nur einmal pro Webseite vor #ID { Eigenschaft: Wert } Tag#ID { Eigenschaft: Wert } <div id="titeldaten"> <p> Autor: Rilke <img src="panther.jpg" alt="panther-rilke"> </p> </div> <div id="gedicht"> </div> Seite 81

71 Beispiel ID <style type="text/css"> p { font-family: Arial, Trebuchet, sans-serif; font-size: 16px; color: #000000; }.classtitle { font-weight: bold;} p#idabsatz { color: #FF0000;} </style> </head> <body> <h1>arbeitsweise von <i>klassen</i></h1> <h2 class="classtitle">diese Überschrift nutzt eine Klasse</h2> <p id="idabsatz">dieser Satz nutzt zum Formatieren IDs.</p> Seite 82