Frau Kalke's Blog - Comcave: Kurs Tag 17 - HTML & CSS - CSS: Listenstrukturierung, Childselektoren, attributabhängigen Selektoren, eigene Attribute

Mitschrift 30.04.2014

TAG 17

Besprechung und Fehlersuche meiner Arbeit von gestern:

Ausgabeergebnis

Quelltext:

<!doctype html>
<html>
    <head>
        <title>Bild nachgebaut</title>

        <style type="text/css">
        body {
            background-color: #000;
            font-family: verdana;
            font-weight: bold;
        }

        div {
            width: 245px;
            margin-bottom: 5px;
            background-color: #fff;
            text-align: center;
            vertical-align: 50%;
        }

        img {
            margin: 10px;
            vertical-align: middle;
        }


        ul {
            list-style-type: none;
            padding-left: 0px;
        }

        li {
            float: left;
            background-color: white;
            width: 245px;
            margin: 10px;
        }

        li#4 {
            clear: left;
        }

        

        </style>

    </head>

    <body>
        <ul>
            <li id="1">
                <div>
                    <img src="001.png" />
                    <br />
                        <label>Bild 1</label>
                </div>
            </li>

            <li id="2">
                <div>
                    <img src="002.png" />
                    <br />
                        <label>Bild 2</label>
                </div>
            </li>

            <li id="3">
                <div>
                    <img src="003.png" />
                    <br />
                        <label>Bild 3</label>
                </div>
            </li>

            <li id="4">
                <div>
                    <img src="004.png" />
                    <br />
                        <label>Bild 4</label>
                </div>
            </li>

            <li id="5">
                <div>
                    <img src="005.png" />
                    <br />
                        <label>Bild 5</label>
                </div>
            </li>

            <li id="6">
                <div>
                    <img src="006.png" />
                    <br />
                        <label>Bild 6</label>
                </div>
            </li>

        </ul>


    </body>

</html>

Tipps:
-> damit sich der Labeltext nicht neben das Bild stellt:

label {
display: block
}

-> li:nth-child(4) {
clear: left;
}
Das li:nth-child(Nr.) ist ein Pseudo-Klassenselektor
Das vierte Listenelement wird im obigen Beispiel angesprochen!

Exkurs: Hier habe ich mal spaßeshalber ein iframe (Seite in der Seite durch Verlinkung) eingesetzt über:

<iframe src="http://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse" width="100%" height="400" name="SELFHTML_in_a_box">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
Sie können die eingebettete Seite über den folgenden Verweis
aufrufen: <a href="http://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse">SELFHTML</a></p>
</iframe>

Ist nicht die eleganteste Lösung:

Wenig Nutzerfreundlich
kein Content auf der eigenen Seite (schlecht für DEO, da Content King ist)
ich verlier die Leute nicht durch Links auf andere Seiten

besser: auswertbarer Inhalt
Barrierefreiheit, Usability und SEO gehören untrennbar zusammen :) "Habe ich Erfolg in dem einen Bereich, hab ich es auch in den anderen beiden"

=> Da man das so schlecht lesen kann, hier nochmal, as usual, als Link mit Textkopie:

Aus selfhtml.wiki: Bei Pseudoklassen handelt es sich um einfache Selektoren, die ein Element dann ansprechen, wenn es eine bestimmte Eigenschaft besitzt. So lassen sich zum Beispiel Elemente auswählen, über denen sich gerade der Mauszeiger (:hover) befindet oder Elemente, die das erste Kindelement (:nth-child() ) eines anderen Elementes sind. CSS unterscheidet:

strukturelle Pseudoklassen

dynamische Pseudoklassen

:lang(), für Sprachangaben
:not(), für Negationen

für das nth-child gibt es folgende Steuerungsmöglichkeiten:

:nth-child(an+b) selektiert all diejenigen Kindelemente deren „Platznummer“ bei Division durch a den Rest b lässt.
:nth-child(odd) ist identisch zu :nth-child(2n+1) und :nth-child(2n-1) (ungerade Platznummer).
:nth-child(even) ist identisch zu :nth-child(2n) (gerade Platznummer).
:nth-child(b) selektiert nur das b-te Kindelement.
:nth-child(n) selektiert alle Kindelemente.

weitere Linktipps zu Pseudoklassen:

Vertiefung der Listenstrukturierung

Schrittweise von außen nach innen

Wir beginnen mit einer UL - diese können wir horizontal & vertikal strukturieren
Dann bauen wir Listenelemente (li) ein
In die li setzen wir je ein Image (img) ein
!!! Bitte immer darauf achten, eine eingerückte hierarchische Struktur zu verwenden!!!
-> Jetzt haben wir das Bild
Nun wollen wir einen Polaroideffekt um das Bild haben!

Lösung: Ich setze einen Div-Container um mein Bild und Label!

Damit ich sehen kann, wie mein Div-Container aussieht, setze ich einen Rahmen um den Div-Container
Ich stelle fest, dass der div-container über die gesamte Breite geht

Warum? Weil mein Li auch über die gesamte Breite geht

Das führende Strukturelement ist das li - deshalb geb ich dem li eine Breite mit width:

Dann gebe ich dem li eine Background-color
(wenn ich möchte - muss nicht sein, so sieht man nur die Auswirkungen von li - muss man später eh wieder rauslöschen)
Dann sag ich dem div, er soll einen Außenabstand haben mit margin
wenn ich das li groß mache, stellt sich das Label neben das Bild:

Lösung:

ich mache das Bild oder das label zu einem Blockelement - Transformation über: label {display: block;}

Dann trage ich bei label noch ein: text-align: center;
Hintergundfarbe des Bodys machen wir schwarz:

body {background-color: black;}

jetzt färben wir den border in ein dunkles Grau
Als nächstes nehme ich die Aufzählungspunkte raus:

ul {list-style-type: none;}

Jetzt wollen wir die Bilder zu dritt nebeneinadner stellen:

wir floaten die li: li {float: left;} - jetzt sind alle nebeneinander:

Das float soll beim vierten Bild unterbrochen werden:

Pseudoklassen-Selektor: li:nth-child(4) {clear: left;} oder
Klassenselektor:

HTML: class="bild4"
CSS: li.bild4: {clear: left}

Ergebnis siehe [oben] (dieser Link ist ein Test - seid mir nicht, böse, wenn er nicht funktioniert - scrolled einfach wieder nach oben zum Anfang der Tagesmitschrift ;) - Danke!)

Childselektoren

schreibweise Childselektoren

ul > li > div > label
Die Childselektoren gehören zu den Pseudoklassen - der childselektor arbeitet, indem er die Elemente in Eltern-Kind-Beziehung zueinander stellt:
nur, wenn diese Reihenfolge der "Kinder" (Kind von, Kind von, Kind von...) eingehalten wird, dann soll der Selektor angewendet werden!

Hierarchie / Spezifität:
-> div > p: Ich formatieren das p, das in direkter Reihenfolge mit dem div steht

ich kann rein auf der Elementebene Basisformatierungen durchführen

also ohne im HTML Verweise schreiben, genau beschreiben, welches Element zur Formatierung angesprochen werden soll.

wir verknüpfen Elementselekjtoren miteinander!

Der ID-Selektor, bspw: p#irgendwas ist weiterhin dominanter/ besitzt eine höhere Spezifität

sollte ich einen Childselektor mit einem ID-Selektorr verknüpfen: div > p#irgendwas - ändert es sich - und der Child-ID-Selektor besiztt eine höhere Spezifität! - er ist genauer!

Die Regeln der Spezifität sind hier wieder anwendbar.

VORTEIL: So sind wir in der Lage, Formatierungen auch nachträglich durchzuführen!

Der Pfad des Childselektors werden vom Firebug angezeigt - der firebug unterstützt uns - allerdings zeigt er den PÜfad andersherum an!

Der firebug unterstütz uns, indem er uns den Pfad des Childelements zeigt (allerdings in umgekehrter Reihenfolge)

Beispiel:
Ich möchte jetzt ein bestimmtes Bild anders formatieren:

gehe in firebug auf das Bild im Quelltext,
dann mit rechter Maustaste auf das img-Tag,
dann "CSS-Pfad kopieren" und
dann können wir es in unseren Quelltext als Pfad kopieren:

html body ul li div img = copy and paste - Ausgabe
wir können auch ohne die Größerzeichen (>) formatieren:

ul li:nth-child(5) div img {border: 4px solid red;}

oder

ul > li:nth-child(5) > div > img {

                              border: 4px dotted red;
                      }

ERGO: Wir geben also den Weg zum Element über die Elternbeziehung an!

Selektoren-KOMBINATION:

Frage: Ist es möglich, dass Elternangaben nicht aus reinen Elementselektoren bestehen? Können wir es kombinieren mit ID- und Klassenselektoren?

Antwort: Ja - bspw: div > p#irgendwas > span

Attributsabhängige Selektoren

Datei: Attrib-selektoren.html

Bisher kannten wir Formatierungen anhand von Element-, klassen- und ID-Selektoren - heute kamen noch die Seudoklassenselektoren als Kombinationsmöglichkeit hinzu .

Jetzt können wir sogar die Attribute nachfragen:

img[title] {}

ACHTUNG: kein Leerzeichen zwischen img & der [] Klammer!!!

Was bedeutet eigentlich der Attributsabhängige Selektor: image[title]?

Er bedeutet: formatiere jedes img-Tag, welches ein title-Attribut eingetragen hat!

Attributabhängigen Selektoren

Ich kann auch die attributabhängigen Selektoren noch weiter spezifizieren:

Allgemein: alle Bilder mit Titel:

img[title] {
border-color: green;
}

Spezifischer für das mit Bild mit dem bestimmten Titel:

img[title="Bildbeschreibung"] {
border-color: yellow;
}

-> diese Spezifikation bedeutet: formatiere mir alle image-Tags mit diesem Titel (und wenn es nur das eine ist ;) )= Bildbeschreibung wie folgt!

Das kann man auch für andere Tags, wie das input-Tag anwenden:

Ich kann die attributsabhängigen Selektoren auch durch Komma getrennt hintereinanderschreiben!
->So kann ich mit einem Selektor sämtliche Elemente treffen!

Anwednung findet dies gerne bei Formularen, da wir so sämtliche Eingabe-Felder über die Attribuierung steuern können!

Ich kann dann sogar size-Vorgaben überschreiben :)

input[type="text"] {
        padding: 10px;
        color: red;
    }

so kann ich mir ne Bibliothek aufbauen:

Bibliothek in Kombination mit einer Form :)

Wiederholung: mit dem alt-Attribut kann man den Browser dazu anweisen, diesen alternativen Text anzuzeigen, wenn das Bild nicht angezeigt werden kann!

bsp: <img alt="Bild: hier würde sonst ein Bild mit einer Maus angezeigt" />
- Dieser Text würde auch vorgelesen werden in Geräten mit Sprachwiedergabe (Screenreader)
-> Daher sind text und title und alt wichtige Dinge für die Barrierefreiheit!

Wir können unsere Eigenen Attribute setzen!

Ausgabe

Quelltext

über kapitel (oder sonst ein erfundenes Attribut)="einleitung" inhalt="Beschreibung"

h1[kapitel]

Warum das Ganze? Wir können eine Transparenz schaffen, in der auch inhaltlich geklärt wird, worum es geht.
Erst seit dem XHTML.0 möglich.

Allerdings haben diese selbstdefinierten Attribute keinerlei Funktion!

Klausur: 90 min erhalten Probeklausur und wichtige Kapitel im vorhinein.

Vorschau auf Freitag: Positioning (absolutes Positionieren)