Mitschrift 30.04.2014
TAG 17Besprechung 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;
}
<!--li:nth-child(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!
<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>
Exkurs: Hier habe ich mal spaßeshalber ein iframe (Seite in der Seite durch Verlinkung) eingesetzt über:Ist nicht die eleganteste Lösung:
<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>
- Wenig Nutzerfreundlich
- kein Content auf der eigenen Seite (schlecht für SEO, da Content King ist)
- ich verlier die Leute nicht durch Links auf andere Seiten
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
- :root
- :empty
- :first-child
- :last-child
- :nth-child()
- :nth-last-child()
- :only-child
- :first-of-type
- :last-of-type
- :nth-of-type()
- :nth-last-of-type()
- :only-of-type
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}
Childselektoren
 |
| schreibweise Childselektoren |
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.
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;}
- 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;
}
Das kann man auch für andere Tags, wie das input-Tag anwenden:
->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"] {so kann ich mir ne Bibliothek aufbauen:
padding: 10px;
color: red;
}
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)
