Kurs Tag 11 - HTML & CSS - CSS: Wertigkeit von Selektoren (Spezifität)

Mitschrift 22.04.2014

TAG 11

Wiederholung des letzten Kurstages:

Wir habern angefangen mit CSS (Cascading Style Sheet) zu formatieren 

• Ausgangspunkt: unser Rechnungsformular
• Strukturierung über ul (unordered list)
• jedes li (Listenelement) enthält:
• ein Label - bspw. "Bestellung als:" (Inlineelement - Eigenschaften: spannt sich nur so weit, wie sein Inhalt Platz benötigt - Ausdehnung) & es erzwingt für die nachfolgenden Elemente keinen Zeilenumbruch, sondern fügt das nachfolgende Element direkt hintendran. Lässt sich nicht über width und height vergrößern/verkleinern)
• Labelattribut: for - stellt bezug zu Steuerelement dar - ganz wichtig für Endgeräte, die vorlesen, aber auch wichtig für den Browser und die Leserfreundlichkeit
• und ein Steuerelement (Bitte wählen, Frau, Herr - steht in <select>)
• weiteres Strukrurierungelement: fieldset (container - es markiert einen Bereich "field") - Blockelement - Eigenschaften: nimmt sich die gesamte Breite des Browsers - maximale Ausdehnung! - Steuerbar über Attribute: width und height)
• fieldset ist dazu da, einen Bereich abzugrenzen
• mit dem fieldset wird ein Kasten um den Bereich gesetzt
• er grenzt den Bereich inhaltlich ab (optisch und für den Browser)
• legend-Tag - hiermit können wir dem fieldset eine Überschrift geben = Bereichsüberschrift
• Das Boxmodell formatiert unser Listenelement (li) - wir können Abstände setzen und formatieren!
• das Boxmodell besteht aus  4 Schichten
• einem Inhalt
• der Innenabstand legt sich als Schicht drumherum (padding)
• darum die Schicht ist der Rahmen (border)
• die letzte Schicht ist der Ausßenabstand (margin)
• border-
• width
• color
• style
• padding-
• top, left, right, bottom
• Einbindung des CSS
• man kann die CSS-Angaben im HTML-Quelltext des Bodys eingeben, aber wir geben es besser 
• im head-Bereich (nicht für die Ausgabe sondern für Metainformationen an den Browser bestimmt) mit Hilfe des Style-Tags ein
• so ist eine klare Trennung zwischen Struktur und Formatierung sichergestellt!!!
• Element-Selektor
• definiert für die einzelnen Elemente (ul, body, h1, fieldset, legend...) die Formatierung und sagt somit dem Browser, wie er die Elemente für das gesamte Dokument zu formatieren hat!
• es ist nicht notwendig für jeden Selektor einen eigenen Style-Bereich einzustellen - 
• nach Möglichkeit nur ein Style-Tag mit allen CSS Formatierungsangaben der Selektoren im Head

!!! Korrekte Syntax und Sematik wertet jede Seite auf !!!

Linktipp: www.css4you.de

legend-Tag :
die Überschrift liegt direkt auf dem Rahmen und Unterbricht die Rahmenlinie :(
selbst wenn ich über margin oder padding formatiere, bleibt die Linie unternbrochen - später lernen wir Methoden kennen, diesen Effekt auszuhebeln :)

Wenn wir ein Formular á la buecher.de haben wollen, benötigen wir CSS!

Goldene Regel:
(Weiß-)Fläche schafft Lesbarkeit!

Hinweis: Kommentare in den CSS-Angaben: /*  */

Aufzählungszeichen außer Kraft setzen in einer UL:
ul {
            list-style-type: none;
        }

Tipp: Wenn ich meinen Firmannamen immer auf die gleiche Art und Weise dargestellt haben möchte, kann ich dies über <dfn>...</dfn> nutzen!

Vorgehensweise für das Formular:
Wenn wir unsere Struktur in HTML haben, gehen wir langsam von außen nach innen und entfernen bspw. Aufzählungszeichen, geben bestimmte Schriftarten semantisch korrekt die CSS-Angaben im Head-Bereich an...

Sichtbare Dinge: Was ist "sichtbar"? bspw. Linien: border-bottom: 30px;

wie bekomme ich Dinge "aligniert", also z.B. alle Steuerelemente linksbündig:
Label ist ja ein Inlineelement, aber ich kann die Eigenschaft des Elements verändern über die Displayangabe im Selektor!

Display:

mit display kann ich die Eigenschaften verändern - es legt fest, wie ein Element angezeigt werden soll!
ein Inlineelement zu einem Blockelement machen und umgekehrt bzw. auch eine Mischform.
display: block; 
display: inline-block; -> Mischform, bei der die Ureigenschaften erhalten bleiben! (kein Zeilenumbruch, aber Breitenangaben angebbar)

für solides CSS, benötigen wir nur die folgenden 3 (die anderen sind Nonsens!!!)

• block
• Das Element wird als Block-Element dargestellt.
• inline
• Das Element wird als Inline-Element dargestellt.
• inline-block
• Das Element ist eine Mischung aus einem Block- und einem Inline-Element. Es wird als Block-Element formatiert, du kannst Breite, Höhe und Außenabstand angeben, floatet aber wie Inline-Elemente in der Zeile.

Wertigkeit von Selektoren (Spezifität):

Was, wenn ich ein Element, welches ich im Head definiert habe, als Ausnahme anders formatieren möchte, wie oben angegeben?
ich kann direkt über das Attribut style="width: 30px" oder ähnliches im HTML direkt abändern, aber besser ist es eine Selektorenhierarchie im Head-Teil aufzubauen!!!

Regel: 
Elementselektoren formatieren dokumentweit= alles was im body steht (allgemeinverbindlich).
Sie sind gültig bis eine individuelle Formatierung (z.B. CSS-Formatierung im HTML-Text über das style-Attribut) die aufgeführten Selektoren überschreiben.
 

Selektoren:

• Elementselektoren (Typselektor, Tagselektor): body, div, p, a
• Klassenselektoren: .irgendwas
• ID-Selektoren: #name

Spezifität - Hierarchie/ Wertigkeit nimmt nach unten hin zu!

!!!Wenn etwas überschrieben wird, dann wird es im firebug durchgestrichen dargestellt!!!

!!! Die aktivste Formatierung ist immer ganz oben und die durchgestrichenen Formatierungen sind darunter!!!

Klassenselektoren: 

-> sind frei wählbar - kann man nennen, wie man will!

So, jetzt setzen wir mal einen Klassenselektor für unsere Hausnummer:

1) in den Head-Bereich:

• Klassenselektor wie folgt eintragen:

        .hausnr {
                  width: 100px;
        } 
        
        -> führender Punkt!

2) im Body-Bereich

• dann das Attribut class="hausnr" in das entsprechende Tag einfügen - in unserem Fall ins <input>-Tag
• und falls bereits Formatierungen einer höheren Hierarchiestufe (bspw. style="width...") eingesetzt wurden, diese bitte herauslöschen, weil sie sonst dominant sind.

Spezifität: Klassenselektoren

 -> in die Element-Selektoren kommen alle Basisangaben herein:

• border
• width
• padding
• color
• font...

-> in die Klassen-Selektoren kommen dann die Besonderheiten 
(alles, was ich nicht umformatiere, bleibt dei den Klassenselektoren aus der Element-Formatierung erhalten!!!):

• bspw.: width (für den Teilbereich)...

Aufgabe: Bitte über CSS-Selektorenangaben im Head.-Teil das Formular so umformatieren, dass die Felder alle gleich groß sind!

So - am Ende des Tages habe ich folgende Selektorenangaben gemacht - morgen geht es weiter:

/* KLASSEN-Selektor */
        .hausnr {
                width: 33px;
        }
       
        .strasse {
                width: 280px;
        }
       
        .plz {
                width: 8%;
        }
       
        .ort {
                width: 49%;
        }
       
        .tt, .mm, .jjjj {
                width: 18%;
        }
       
        .li{
            border-bottom-style: solid;
            border-color: grey;
            border-bottom-width: 1px;
            padding: 15px 0px;
        }
       
        .radio {
            width: 10px;
            margin-right: 15px;
            padding: 0px 5px;
        }
       
        .radioliste {
            padding-left: 36px;
        }
       
       
/* ELEMENT-Selektor */
        option{
            padding: 5px;
        }
       
        select{
            width: 342px;
            padding: 5px 5px 0px 5px;
        }

        ul {
            list-style-type: none;
        }
       
        body {
            font-family: arial,helvetica,sans-serif;
            background-color: #ECECEC;
        }
       
        fieldset {
            background-color: #EDF7F6;
            width: 640px;
        }
       
        legend {
            font-style: arial,helvetica,sans-serif;
            font-weight: bold;
        }
       
        label{
            display: inline-block;
            width: 200px;
        }
       
        label for="geburtsdatum"{
            display: inline-block;
            width: 30%;
        }
       
        a {
            display: inline-block;
            width: 300px;
        }
       
        input{
            padding: 5px;
            width: 60%;
        }

Aufgabe für den Nachmittag: 
das Formular weiterbauen nach Vorlage von buecher.de

Vorschau auf morgen:

• Größenangaben: px, prozent oder wie gebe ich die Größe am Besten an?
• weiter mit Spezifität! Ist sehr wichtig in CSS!