Kurs Tag 13 - HTML & CSS - CSS: Vertiefung der Selektoren-Hierarchie & Auslagerung in CSS-Datei

Mitschrift 24.04.2014

TAG 13

LYNC - Beschäftigt = ich habe eine Frage

Wiederholung:

gestern hatten wir 2 Themenbereiche:
Selektoren und Schriftfarben

• Selektoren
• Spezifität = Hierarchie innerhalb der Selektoren
• Globalselektor: * {} (manche Autoren schreiben auch html {} als Globalselektor)
• Elemen-Selektor (name {}: alle Elemente einer Seite formatieren)
• Klassen-Selektor (.name{}: Elementselektorenformatierung wird dann überschrieben - Klassennamen frei wählbar - wir nur aktiv mit dem class-Attribut im body-Bereich)
• elementunabhängiger KS (lassen sich für jedes Element nutzen)
• elementabhängiger KS (man kann einen Default-KS wählen und dann diesen für einzelne Elemente detaillierter definieren) - nimmt Formatierung nur vor in Verbindung mit dem vorangestellten Element 
• ID-Selektor (#name{}: ist elementunabhängig - nur aktiv mit id-Attribut im Body-Teil (id="name"))
• die id steht immer in einem direkten Zusammenhang mit dem ID-Selektor
• direkte CSS-Angabe im HTML-Bereich durch style-Attribut im zu definierendem Attribut - hat die höchste Wertigkeit

 

Hier nochmal die Hierarchiestufenübersicht der Selektoren

Vertiefung der Selektoren und der CSS-Formatierung

Selektorkombination, mit denen wir später komplett über CSS formatieren können! ERGO: Ich kann die Selektoren also auch kombinieren. :)

Vorgegebene Reihenfolge:
!!!Immer erst das Element, dann der ID-Selektor, dann der Klassenselektor!!!

• div(Elementselektor)#name(ID-Selektor).menu(Klassenselektor) {}

Ziel der Selektoren: Die Struktur vollständig von der Formatierung loslösen! So kann ich meine Elemente 100% über das CSS im Headbereich ansprechen!!!

kombinierte Selektoren- Verdeutlichung durch Vergleich CSS- und HTML-Teil

Wichtiger Hinweis:
Da wir mit CMS arbeiten - sind die Strukturen vorgegeben! 

• Content Management Systeme geben den (Block-)Elementen oftmals schon Klassen und/oder IDs vor
• Ich komme daher nicht an den HTML-Quelltext dran, sondern kann nur über das CSS die Formatierung verändern.
• Wenn wir später selbst in HTML strukturieren, macht es Sinn die Elemente (Tags, wie div, p, a...) präventiv mit class und/oder id zu versehen!

Exkurs: Klassen und ID-Selektoren als CSS-Bezeichner - Link zu HTML-seminar.de

Wann ID-Selektoren und wann Klassenselektoren?!?

• ID 
• (Strukturgebende Elemente: width, height... Verschiebungen nach rechts links, Ausrichtung - ELEMENTE, die es nur einmal gibt)
• Elemente, die es nur einmal gibt. Z.B. die Steuerung können so mit einer ID und den dazugehörigen CSS-Design ausgestattet werden.
• class 
• (Formatierende Elemente: font: border... Schriftfarbe, Schriftart...)
• Über die Klassen können wiederholende Designelemente bestimmt werden

!!!Das besondere daran ist, dass

• mit CLASS mehrere Elemente ausgezeichnet werden können, dagegen
• die ID nur für 1 einziges Element pro Seite verwendet werden darf. 

ID ist also zur eindeutigen Bestimmung eines Elementes!!!
Verschachtelte Elemente:
Wenn ein Element in einem anderen Element anders formatiert wird über einen Elementselektor, den ich aushebeln möchte, dann geb ich den Pfad an, um auch das h1-Element mit der gleichen Formatierung zu versehen, wie den div-Teil:

• HTML-Teile:

• <div id="main" class="menu">
              <h1>Überschrift</h1>
              Text - Text - Text
          </div>

•  CSS-Teil: 

• html body div#main.menu h1
• wobei ich an sich nur den Folgepfad angeben muss und html body rauslassen könnte:
• div#main.menu h1{backgroundcolor: ...;}

!!!Wir laden gleich den CSS-Teil in extra CSS-Dateien ein - aus HTML heraus!!!

So eine CSS-Datei kann 7000 Zeilen beinhalten :-o 
Um die Elemente zu finden, hilft uns der Firebug.

CSS-Pfad kopieren

Hinweis: Um den Pfad in firebug angezeigt zu bekommen, muss ich auf das verschachtelte Element (in unserem fall h1 im div-Container) klicken, dann wird mir oben der Pfad angezeigt. 

Pfad für CSS-Angaben

Jetzt kann ich mit rechtem Mausklick auf <h1> den CSS-Pads kopieren!!!

CSS-Pfad für Quelltext / CSS-Datei kopieren über rechte Maus: CSS-Pfad kopieren

Div-Container haben die Aufgabe zu strukturieren

Style-Sheet auslagern in eigene CSS_Datei:

1. neue Datei: template.css
2. Inhalt des Style-Tags in die neue Datei reinkopieren (ohne <style>-Tag)
3. und link in den Head der HTML-Datei setzen:
4. <link rel="stylesheet" href="template.css" />
5. und schon haben wir eine eigene CSS-Datei als ausgelagerte Datei angelegt!!! 

Schauen wir uns nochmal den Link an: 

<link rel="stylesheet" href="template.css" />

• wir werden in Zukunft auch Verzeichnisse mit bei der CSS-Datei  angeben müssen:
• wir organisieren unsere Dokumente in einem css-Verzeichnis/Ordner
• dazu legen wir einen neuen Ordner an
• dann müssen wir über den Link die richtige Pfadangabe machen
• <link rel="stylesheet" href="css/template.css" />

Unterscheidung der Selektoren in .css mit Hilfe von Farben!


Nochmal Wiederholung der Selektoren:
siehe Datei: css-inkludiert.html

innerhalb des Firebugs lesen wir von unten nach oben!
So sehen wir, ob etwas überschrieben wurde oder ob es beibehalten wurde!


weiter mit Schriftarten über google webfonts wir haben eine neue Datei fonts.zip erhalten. Diese Zipdatei enthält 18 freie Schriften (truetype und opentype schriften heruntergeladen von www.dafont.com).

Jede Schrift hat ein physikalisches Gewicht, also 35kb, 166kb 200kb... 
ERGO: jede Schrift ist eine riesen große Datei, die vom Browser geladen werden muss!

Heute Nachmittag können wir ausprobieren eine selbst runtergeladene Schrift einzufügen.
Morgen wiederholen wir das Prozedere für alle.
Zum Üben hier schonmal eine Anleitung: CSS-Schriften-implementieren.pdf

Bis morgen ! :)