Frau Kalke's Blog - Comcave: Kurs Tag 19 - HTML & CSS - CSS: Whd. Positioning & Klausurvorbereitung

Mitschrift 05.05.2014

TAG 19

Wiederholung Positioning und Besprechung der Klausurinhalte

Morgen nur noch Kleinigkeitenund neue Dinge, die nicht mehr klausurrelevant sind.

Wiederholung Positioning

Positionsart: position
Bestimmt die Art, wie die Positionsangaben verwendet werden.

-> grundsätzlich positionieren wir mit CSS standardmäßig absolut. (=default)

=>absolut:

Die absolute Positionierung ohne Positionsangaben meint immer top:0 & left: 0!!! (=default)-> nur noch der letzte Container ist sichtbar! Sie liegen übereinander
das Element bekommt eine feste Position von der Browserkante entfernt.
absolute Angaben zur Positionierung (top, left, bottom, right)
Wir positionieren die Elemente top/bottom oder left/right - darum geht es bei der Positionierung. Wir können alle Elemente absolut positionieren
Achtung: left: 0, kann ich ohne Pixel angeben, sobald ich die Zahl veränder, muss ich Pixel mit angeben! left: 5px;
ich muss immer die Richtung angeben, von der aus gemessen werden soll: top, left, right, bottom: Wieviel Pixel Abstand erfolgt?
Neue Positionierungsmöglichkeit rein über Koordinaten! Nicht mehr das klassische Inlineelement
Die Darstellung ist abhängig vom momentanen Browserfensterstatus beim Öffnen!

wenn ich scrolle, bleibt das absolut positionierte Element an der Stelle stehen, an der es sich beim Öffnen des Browserfensters platziert hat und wenn ich dann scrolle, wird es mitgescrolled

absolut positionierte Elemente immer ans Ende des Quelltextes schreiben: Warum? Damit es uns nicht das gesamte Layout zerschießt, wenn die CSS-Angabe des absoluten Positionierens aus irgendeinem Grund nicht greift

Warum ist die absolute Positionierung so wichtig?
Überlagerung möglich, was über das Boxmodell nicht möglich ist.

Überlagerung: Ich kann schichten übereinanderlegen - somit ist die natürliche Reihenfolge der Elemente elementar wichtig!
unabhängig von der Ureigenschaft setzt es sich als übergeordnete Schicht obendrüber.
Es beeinflusst nicht die nachfolgenden Elemente. Ich kann die Elemente überlappen.
Normalerweise würde der Text sonst von div-Container verdrängt werden - Zeilenumbruch erzwungen
-> Vorteil vom absoluten Postionieren: Keine Auswirkungen auf nachfolgende Elemente!

=>fixed:

erweiterte Form des absoluten Positionierens
wir gehen davon aus, dass das Element vor den anderen Elementen bleibt, egal, ob wir scrollen oder nicht
es wird nie mitgescrolled sondern steht immer fix an einer Position vom Browserfenster

=>relative:

nicht mehr der sichtbare Bereich des Browserfensters ist ausschlaggebend für die Positionierung, sondern das Elternelement
alles wird absolut zum Elternelement positioniert - dazu müssen wir das Elternelement relativ positionieren!
wenn das Elternelement kleiner wird oder sich anders positioniert, gehen die Kindelemente mit
also positionieren sich die Kindelemente absolut zu ihrem Elternelement
hat keinerlei Auswirkungen auf das Element und seine Darstellung an und für sich
Der einzige Unterschied besteht darin, dass, wenn wir innerhalb des Elements Kindelemente platzieren, diese sich absolut am Elternelement ausrichten
Elternelement: position: relative;
Kindelement: position: absolute; top: 6px; left: 3px; bottom: 10px; right: 5px

Für die Klausur:
reine Regelabfrage!

Rahmenbedingungen

Tipp: Links, Mitschriften etc - wir können alles benutzen!!!
HErausforderung ist die Zeit - ca 3 min pro Aufgabe
30 Fragen -> 3,33 Punkte pro Aufgabe
Start: 9h
Ende: 10.30h
dann Pause, danach Entschluss, ob am gleichen Tag zu korrigieren
Danach gehen wir zusammen die Klausur durch
Danach Korrektur oder noch ein Thema.
Wir bleiben am Platz sitzen.

Themenvorbereitung:

Was ist HTML
Beschreibungssprache (Unterschied zw Script-/Programmierungssprache und Beschreibungssprache)
Beschreibt mit fertigen Befehlen, die man nacheinander anwendet
-> Ich gebe eine Seitenbeschreibung
-> hier wird eine Darstellungsbeschreibung an den KLienten/Browser gegeben - der führt es aus, ohne mitzudenken.
Programmiersprache - arbeitet mit variablen - z.b. PHP $variable = 1.2; - > hier wird automatisiert

HTML-Basics

Was ist HTML (Unterschied von Script- & Beschreibungssprachen)
Seitenstruktur (html-head - body - html = Grundgerüst)
Unterschiede zwischen Block- & Inlineelement (div-Container)
Alles rund um die folgenden Themen wird vorkommen:

a) Selektoren
b) Tabellen
c) Boxmodell
d) Listen!!!
e) Fonts (Externe- Webfonts, physikalische Fonts, CSS andere Hauptschriftart einstellen)

Links und dessen Funktion, Einsatzgebiete und Attribute
2 Fragen zu Positionieren

Ok, dann fange ich mal an

Wo kann ich nachschlagen?

selfhtml (de.selfhtml.org/index.htm)
css4you (css4you.de)
selfhtml-wiki (wiki.selfhtml.org/wiki/Startseite)

=> Was ist HTML
Hyper text Markup Language = Beschreibungssprache

Unterschied zw Script-/Programmierungs- und Beschreibungssprache:

Beschreibungssprache:

Beschreibt mit fertigen Befehlen, die man nacheinander anwendet
-> Ich gebe eine Seitenbeschreibung
-> hier wird eine Darstellzungsbeschreibung an den KLienten/Browser gegeben - der führt es aus, ohne mitzudenken.

Programmiersprache

arbeitet mit Variablen
z.b. PHP $variable = 1.2;
- > hier wird automatisiert

=> HTML-Basics: Seitenstruktur/ Grundgerüst

Grundgerüst einer HTML-Datei
Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen:

Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version)

Das HTML-Wurzelelement <html>, und darin

Header (Kopfdaten. z.B. Angaben zu Titel u.ä.)

Body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)

Schema:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Beschreibung der Seite</title> 
      Info an den Browser


    </head>

    <body>
        The content of the document...... 
       auszugebende Info


    </body>
</html>

-> Damit wir die Trennung hinbekommen, gibt es Bereichsangaben:
<!doctype html> (HTML5 Standard)
= Kopfdateien
hier geben wir dem Browser Info mit, nach welchem Standard wir die Seite aufbauen = Dokumententyp

das umfassende HTML-Tag:
<html>...</html>
-> umschließt head und body und zeichnet den Text als echtes HTML-Dokument aus = Rahmen!
Ist der Container für Head UND Body-Bereich.

Head-Tag:
head <head> ... </head>
Nur Infos für den Browser!

Informationen für den Browser
(sollen nicht ausgegeben werden - kleinerer Teil)

Body-Tag
body <body> ... </body>
Für den Leser! (=Ausgabe-HTML)
->alles was zwischen dem beginnendem und schließendem Body-Tag steht, soll angezeigt werden.
-> ersten Quellcode eingeklammert :)

Informationen für die Leser
(müssen ausgegeben werden - größerer Teil)

Übersicht der Bereiche eines HTML-Dokuments

Tipp: Bereiche ggfs Einrücken, um die Struktur besser zu erkennen

Hinweis: Ein Tag hat auch Attribute - also erweiterbare Eigenschaften

=> Unterschiede zwischen Block- & Inlineelement

Selfhtml-Link
-> im HTML basiert alles auf 2 Elementarten, auf die sich CSS aufbaut:

Blockelement

dienen zur Strukturierung!
ein Blockelement ist standardmäßig linksbündig formatiert.
immer maximale Ausdehnung zur Browserbreite (erstreckt sich über die gesamte Breite des Browserfensters - egal, wie groß der Inhalt ist, es ist immer automatisch so breit wie das Browserfenster)
nimmt sich die gesamte/maximale Breite und reserviert sich eine neue Zeile (verdrängt also den vorangegangenen und den Folgeinhalt
hier sind Breitenangaben über width möglich!
-> Zeilenumbruch vor uns nach dem Blockelement- IMMER VOR & NACHHER
-> sie positionieren sich immer untereinander!
ich kann mehrere Blockelemente untereinander anordenen, aber nicht nebeneinander!
zitiert von selfhtml:

Block-Elemente erzeugen einen eigenen Absatz im Textfluss. Je nach Elementtyp kann der Browser dabei automatisch einen größeren Abstand zum vorangehenden Inhalt einfügen. So erzeugen die Browser beispielsweise beim p-Element einen sichtbaren Abstand, damit die Absatzschaltung vom einfachen Zeilenumbruch unterscheidbar ist. Beim div-Element dagegen wird beispielsweise einfach eine neue Zeile begonnen.
Block-Elemente können in der Regel normalen Text und Inline-Elemente enthalten. Einige Block-Elemente können auch andere Block-Elemente enthalten. Ausnahmen von der Regel werden bei den Beschreibungen zu den einzelnen Elementen behandelt.
Folgende Elemente gehören zu den Block-Elementen: address | blockquote | center | del | dir | div | dl | fieldset | form | h1-6 | hr | ins | isindex | menu | noframes | noscript | ol | p | pre | table | ul

Inlineelement

dienen zur Formatierung!!!

Ausdehnung über die Breite des Inhalts! (Ist immer nur so breit, wie der Inhalt - selbst wenn ich die width angebe, bspw bei einem <a>, die Breite wird sich nicht verändern - es bleibt bei der Inhaltbreite)
Regel: ein Inlineelement dehnt sich analog zum maximalen Inhalt aus. Breitenangaben sind nicht anwendbar
->es gibt keine Zeilenumbrüche
->sie positionieren sich immer hintereinander/nebeneinander!
zitiert von selfhtml:

Inline-Elemente erzeugen keinen eigenen Absatz im Textfluss. Inline-Elemente sind als untergeordnete, "innere" Elemente für Block-Elemente gedacht. Sie können in den meisten Fällen normalen Text und weitere Inline-Elemente enthalten, jedoch keine Block-Elemente. Ausnahmen oder Einschränkungen werden bei den Beschreibungen zu den einzelnen Elementen behandelt.
Folgende Elemente gehören zu den Inline-Elementen: a | abbr | acronym | applet | b | basefont | bdo | big | br | button | cite | code | del | dfn | em | font | i | img | ins | input | iframe | kbd | label | map | object | q | samp | script | select | small | span | strong | sub | sup | textarea | tt | var

Mischformen
= Elemente, die weder Block- noch Inlineelement sind

=> Das Image-Element:
Eingabe im Body:
<img src"image.jpg" />

Eingabe im Head:
image {
width: 260px;
}

man könnte sagen, dass es ein Inlineelement ist - da es keine neue Zeile beansprucht
Eigentlich lassen sich Inlineelemente nicht in der Größe verändern....
Bilder schon - dasBild ist ein Sonderfall!

Images sind Inline-Blockelemente

haben Eigenschaften eines echten Inlineelements

weisen aber auch Eigenschaften auf, die an ein Blockelement erinnern!

-> diese Mischformen machen wir uns zunutze!
z.B. Breite für Links etc einstellen... :)

!!! Wir schreiben jetzt kein Style mehr in den HTML-text, sondern defnieren unsere Style-Angaben nur noch im Header!!!

Nochmal auf unser Formular form-2.html bezogen:
Wir haben in einer Liste strukturiert
label = Steuerelement

Wie wäre es, wenn wir dem Label eine Breite geben könnten?! Dann hätten wir alle Steuerelemente einheitlich in einer Reihe!

label{
width: 200px
}
Es reagiert nicht auf Größenangaben, denn es ist ein klassisches Inlineelemen.
ABER: Es gibt einen Trick!

Transformation eines Inlineelements zu einem Inline-Blockelement
Wir machen aus dem Inlineelement label - ein Inline-Blockelement :) -> Transformieren!

label{
display: inline-block;
width: 200px
}

-> dazu muss ich natürlich im Body die Stellen mit <label>-Tag versehen haben!

Was heißt transformieren?
Wir haben die Art des Elements umgebogen durch disply: inline-block

Hinweise:

image hier in Inlineelement, ist aber eine Mischform!

Block- & Inlineelemente unterscheiden sich im Verhalten! (Zeilenumbrüche, Ausdehnung, Breiteneinstellung)

Abwärtskompatibilität:das Blockelement ist das führende Element - es ist so dominant, dass es mir selbst das Inlineelement zerschießt, wenn ich ein Blockelement hineinpacke (angenommen ich setzte in einem Link einen Absatz: <p> </p>)

Ein Inlineelement kann einem Blockelement untergeordnet werden, aber nicht umgekehrt - also Ein Blockelement kann nicht in ein Inlineelement gepackt werden. ich kann bspw. ein <i></i> in ein Blockelement einsetzen

Abwärtskompatibilität bei Blockelementen

Quelltext vom Dozenten:

<!doctype>
<html>
    <head>
        <title>Inline / Blockelemente</title>
        <meta charset="UTF-8" />
    </head>

    <body>

    <p style="border: 1px solid red;">Dies ist ein Blockelemente</p><h1 style="border: 1px solid red;">Dies ist ein Blockelemente</h1>
    <a style="border: 1px solid red;" href="#">I</a>
    <a style="border: 1px solid red;" href="#">Ich bin ein Inlineelement</a>
    <a style="border: 1px solid red;" href="#">Ich bin ein Inlineelement</a>
    <p style="border: 1px solid red;">Dies ist ein Blockelemente</p>

    </body>

</html>

Boxmodell: inline-(blau) und blockelemente (schwarz)

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.

=> Boxmodell:

Erklärung des Box-Modells:

jedes Element hat darüber hinaus noch eigene Eigenschaften ;)
(neue Datei: boxmodell.html)

Kern/ innere Schicht/ Inhalt, blau

wir sehen die eigentliche Abmessung des Inhalts des Blockelements!

Schicht: padding

Abstand zum Rahmen/ Innenabstand

Schicht: border

ist unser Rahmen

Schicht: margin

Außenabstand gemessen vom border

wird vom System eingegeben, können wir aber manipulieren ;)

firebug>CSS>Layout -> Boxmodell

Das Boxmodell besteht aus einem simplen Aufbau:

Alles baut sich in Schichten auf!
Alle 4 Schichte

sind farblich hinterlegt
können einzelnd definiert und verändert werde!
zeigen an, wo die Elemente anfangen und enden :)

>Inhalt/Kern
> Innenabstand (padding)
> border (in Rahmenfarbe, falls border definiert)

> Außenabstand vom Rahmen zum nächsten Element oder zum Browserende (margin)

Style: gibt padding im Uhrzeigersinn an: top - right - bottom - left
(also bspw.: padding: 10px 50px 20px 80px;)

Hinweis: <p> oder <h1> oder sonstige Formatierungen unterliegen Systemeinstellungen, welche die Angaben in den 4 Schichten vorbestimmen, also Rahmen, Innen- und Außenabstand... das sind Voreinstellungen, die ich verändern kann ;)

Das Box-Modell definiert die Berechnung der Breite und Höhe von Elementen. Seit der CSS1-Spezifikation des W3-Konsortiums aus dem Jahre 1996 errechnet sich die Gesamtbreite eines Elements aus einer Addition

Grafik1: Quelle: css4you

der Breite des Elementinhalts (width),
des Innenabstands (padding), - zum Rahmen
der Rahmenstärke (border-width) und
des Außenabstands (margin). - zum nächsten Element

Dies gilt analog für die Höhe (height) sowie generell für alle Maßeinheiten; diese dürfen auch gemischt angewandt werden.

Für jedes Element einer Seite wird nach den CSS-Regeln ein rechteckiger Bereich reserviert, der in dem sog. Boxmodell beschrieben ist.
Hinweis: Padding und margin sind Kernelemente der CSS-Formatierung! (Also gut merken ;) )

=> Tabellen:
Link zu Selfhtml/Tabellen

ähnlich wie bei Listen, brauchen wir auch bei Tabellen einen umfassenden Tag, der zeigt: "dieser Bereich zeigt eine Tabelle!"
<table>-Tag </table>
Wie ist eine Tabelle aufgebaut?

klassische Tabelle - bspw. Excel:

Eine Tabelle besteht aus:
- Spalten
- Zeilen

HTML arbeitet nach einem anderen Prinzip als Excel - und zwar über die Zeilen

<th>-Tag (table head / erste Zeile als Ersatz für <td> in der ersten Row!

ist automatisch fett und zentriert! (kann ich nur mit CSS "knacken"/verändern)
bildet die Spaltenüberschrift / sind für Überschriften reserviert

<tr> -Tag (table row/Tabellenzeile)
innerhalb einer Row, benötigen wir Datenzellen: <td>-Tag (table data/Tabellenzelleninhalt) hier kommen Inhalte rein!

-> alle Tags in einer Tabelle benötigen schließende Tags!

Tipp: Rahmen um die Tabelle:
Damit wir eine Tabelle sichtbar machen können, setzen wir innerhalb des table-tags ein Attribut ein: border="1":
<table border="1">...

Matrix mit <th>-Tag / Head :

<!doctype html>
<html>
    <head>
        <title>Tabelle 1</title>

    </head> 
        <table width="400 "border ="3">
            <tr> 
                <th>Headline 1</th>
                <th>Headline 2</th>
                <th>Headline 3</th>
                <th>Headline 4</th>
            </tr>

            <tr> 
                <td width="25%">Tabellenzelle</td>
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
            </tr>

            <tr> 
                <td>Tabellenzelle</td>
                <td>Tabellenzelle - <br /> wird zur Anschaulichkeit mal größer gemacht
                    </td>
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
            </tr>

            <tr> 
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
                <td> </td>
                <td>Tabellenzelle</td>
            </tr>


        </table>
    <body>

    </body>
</html>

tabelle1-modifiziert.html - Table mit Head :)

Tabelle-Aufbau in HTML:
Rumpf (<table>)> Reihe (<tr>) (ist Container für Zellen) > Zelle(n) (<td>)
-> aus den nebeneinandergestellten Zellen heraus bilden sich Spalten!

Regeln:

Hauptregel einer Zelle: Durch Inhalt oder andere Angaben, ist die maximale Breite einer Spalte gültig!
Die Zellenbreite wird vom Inhalt bestimmt!!! die Tabelle ist von Grund aus dynamisch: die Zellen-Höhe und -Breite passt sich automatisch der Länge des Textes an.

Hinweis: Inhalt vor Attributangaben! gebe ich bspw 25% für die Zellenbreite an, aber der Text einer anderen Zelle in der Spalte ist größer (aufgrund des Inhaltes), dann ist die Prozentangabe nichtig!

der Browser verzeiht auch nicht geschlossene table datas - aber es ist syntaktisch nicht korrekt - beeinflusst die Lesbarkeit negativ! Bitte nicht versuchen Zeichen zu sparen, sondern syntaktisch korrekt arbeiten!
Egal ob man eine Zelle leer lässt oder eine <td> weglässt (fehlende Zelle) - das Ergebnis ist eine Lücke in der Tabelle - wenn wir eine leere Zelle produzieren wollen, besser ein erzwungenes Leerzeichen einsetzen:   sonst werden die Zellen aufgerückt :(
-> ERGO: die Anzahl der <td>s in den <tr>s muss immer gleich sein!!!

Welche Attribute können wir dem table-Tag geben?
hier ein Link zu Selfhtml - hier wird angegeben, welche Attribute die Table-Tags annehmen können!
Nochmal: Attribute sind Paare aus Schlüssel & Wert. Sie werden durch ein Leerzeichen getrennt!

border="" (bspw. 1,5...)

Rahmenlinien
verleiht der Tabelle ihr Erscheinungsbild durch Setzung eines Rahmens

width="" (bspw. 200, 800...)

= Breite der Tabelle
nur nummerischer Wert, keine Maßeinheiten!
Hinweis zur Mindestbreite: die Tabelle kann nur so klein werden, wie der größte Inhalt einer Zelle an Zeichen hat bzw. an Platz benötigt!
wir können die Width auch in jede einzelne Zelle schreiben: <td width="25%"

Wir müssen es nicht in jeder Zelle eingeben, da maximal nur die Gesamtbreite des Browserfensters der Tabelle als Breite zur Verfügung steht!

bgcolor="" (kann ich nicht nur für table sondern auch für body nutzen)

Backgroundcolor/Hintergrundfarbe
kann direkt gesetzt werden
sowohl namedcolor als auch Hexadezimalangaben!
hat nichts mit CSS zu tun!
wenn wir die border rausnehmen bzw. auf null setzen, sehen wir dank der Hintergundfarbe trotzdem Zellen! :)

cellspacing="" (bspw. 10...)

Außenabstand um die Zellen!!!
der Abstand der einzelnen Zellen ist gewachsen - 10 px bei "10", oder 30 px bei "30"
der Außenrahmen wächst mit!
=Abstand der einzelnen Zellen zur nächsten Zelle und zum Rand!

cellpadding="" (bspw. 10)

Innenabstand in der Zelle!!!
der Abstand des Zelleninhaltes zum Zellenrand ist gewachsen

valign=""

mit diesem Attribut können wir alle Zelleninhalte ausrichten
<td valign="">

top
middle
bottom
(baseline)

colspan="" ("1"... maximal Anzahl der Spalten)

column span (=Zellen verbinden) -> in xls ganz easy
wenn ich jetzt in die <td colspan="2" angebe, dann schiebt er die anderen Zeilen nach rechts...
ERGO: Wir müssen eine Zelle entfernen!!!

=> Listen
(netter Link bei selfhtml):
Buch - Seite 70 / Kapitel 7!
Wir haben die Möglichkeit die Vorzeichen und Nummerierungen zu ändern:

Aufzählung/unordered List <ul>

Aufzählungslisten sind z.B. von Bedeutung, um Produkteigenschaften oder Argumente für eine These übersichtlich darzustellen. Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen (Bullet) versehen.
<ul> leitet eine Aufzählungsliste ein (ul = unordered list = unsortierte Liste). Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag. Es ist zwar nach HTML-Standard erlaubt, das abschließende </li>-Tag wegzulassen, doch davon ist abzuraten. </ul> beendet die Liste.
Wie das Bullet dargestellt wird, bestimmt dabei der Web-Browser.
Das Verschachteln von Listen ist ebenfalls möglich.

Zwischen <li> und </li> darf eine komplette weitere Liste stehen. Auch andere Listentypen sind dabei erlaubt.
3 Arten von Aufzählungszeichen (Kreis, Punkt, Quadrat)
Attribut für die Liste: type: circle, disc und square
disc ist der default-type, also der voreingestellte Type - die anderen beiden sind optional, können also eingestellt werden.

Nummerierung/ ordered List <ol>

Nummerierte Listen sind z.B. von Bedeutung, um nacheinander auszuführende Aktionen oder Rangfolgen übersichtlich darzustellen. Bei einer nummerierten Liste werden alle Listeneinträge automatisch durchnummeriert.
<ol> leitet eine nummerierte Liste ein (ol = ordered list = nummerierte Liste). Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag. Es ist zwar nach HTML-Standard erlaubt, das abschließende </li>-Tag wegzulassen, doch davon ist abzuraten. </ol> beendet die Liste.
Hinweis: Verschachteln von nummerierten Listen ist ebenfalls möglich, bewirkt aber keine Gesamtnummerierung. Automatische Nummerierungshierarchien wie 1, 1.1, 1.1.1, sind mit HTML alleine nicht möglich.

Arten: a.,b.,c. (=a)// A.,B.,C. (=A)//1.,2.,3. (=1) //I.,II.,III.(=I) //i.,ii.,iii. (=i)
Type-Optionen: a,A,1,I,i
default-type: <ol type="1">
Startpunkt frei wählbar mit Attribut start="17"

Beschreibungslisten / definition List <dl>

Definitionslisten sind für Glossare gedacht. Glossare bestehen aus einer Liste von Einträgen. Die Einträge eines Glossars bestehen aus einem zu definierenden Ausdruck (z.B. ein Fachbegriff) und der zugehörigen Definition.

erst in den letzten Jahren dazugekommen
z.B. für Glossare
wichtig bei Formularen oder CSS-Formatierungen!

<dl> leitet eine Definitionsliste ein
(dl = definition list = Definitionsliste).
<dt> leitet einen zu definierenden Ausdruck ein
(dt = definition (list) term = Ausdruck in der Definitionsliste).
<dd> leitet eine Definition eines Ausdrucks ein
(dd = definition (list) definition = Definition in der Definitionsliste).
</dl> beendet die Liste. Die End-Tags </dt> und </dd> dürfen zwar auch fehlen, doch davon ist abzuraten

->Wofür brauche ich Listen im Web?

bspw. Listen für Wettkämpfe
Paragraphen und Absätze im Recht
Inhaltsverzeichnisse, Agenden

Hauptpunkte mit Untergliederungen

Listen sind aber auf fast jeder Seite - beim Inhaltsverzeichnis, beim Menü der Webseiten!

überall wir mit Listen strukturiert!
definierte Aufzählungszeichen über CSS
nicht nur untereinander auch nebeneinander (gekippt = in die Waagerechte gelegt)
ol/ul ist sehr flexibel einsetzbar!

->Wie erstelle ich Unterpunkte?
<h1>Beispiel für unordered List - Vereinsagenda</h1>
        <ol Start="1" type="I"> 
            <li>Begrüßung</li>
            <li>
                Vorstellung der Tagesthemen
(unterhalb des Listentextes noch eine weitere ol einfügen!!!)
                <ol type ="a">
                    <li>Erfolgsmeldungen der Abteilungen</li>
                    <li>Ehrung der Verstorbenen</li>
                </ol>
            </li>

UND: der Browser erstellt automatisch verschiedenen Aufzählungszeichen für die unterschiedlichen Unterpunkte.
1. Ebene: Disc
2. Ebene: Circle
ab 3. Ebene: Square

Listen

unorderes List

<ul><li></li></ul>
Attribut: Type - Wahl des Aufzählungszeichen
default type: schwarzer Punkt (disc)
disc (1.Ebene), circle (2. Ebene), square (ab 3. Ebene) = Basisaufzählungszeichen in HTML (in CSS sind weitere möglich) so wird das Aufzählungszeichen automatisch gewählt. Man kann auch über den Type die Ebenen mit anderen Aufzählungszeichen versehen.
Aufgabe: Auflistung

ordered List

<ul><li></li></ul>
nummeriert durch
default type: 1 = nummerisch
Attribut: type - Wahl der Nummerierungszeichen
1,a,A,i & I
Attribut start - Startnummerierung angeben bspw. 15
(Ausgabe entweder 15. oder o., O., XV, je nach type)
Schachtelung möglich - Hierarchie wird aufgebaut!

<ol> <li> <ul> <li></li> </ul> </li> </ol>
passt die Aufzählungszeichen nach Ebenen direkt an
(wenn UL in 2. Ebene ist, wird automatisch der circle angegeben und nicht der eigentliche default - die UL registriert die Strukturen/Ebenen)

definition List

Tag <dl><dd><dt></dt></dd></dl>
2 Tags <dd> Definition Desciption & <dt> Definition Text
wichtig für die Strukturierung von Formularen (und CSS)

Verlinkung

Verlinkungsarten am Beispiel Wikipedia:

Dokumenteninterne Verlinkung

über Sprungmarken
die Inhaltsverzeichnisse in Wikipedia- oben das Inhaltsverzeichnis - mit Klick auf einen der Punkte, springt der Browser direkt runter auf der Seite
die Seite lädt sich nicht neu durch, sondern springt direkt dorthin

(Domain)Seiteninterne Verlinkung

Wikipedia verlinkt hauptsächlich intern
die Seite lädt sich neu durch, aber wir bleiben auf der Domain
meist wählt man so, dass die verlinkte Seite im bestehenden Browserfenster geöffnet wird

Externe Verlinkung

wir verlassen die Seite und rufen eine fremde Domain/URL auf
hier wählt man meist _blank

Email Referenzierung

=> Verlinkung/ Referenzierung

Mit den Definition Lists kommen wir zu den Verlinkungen!

3 Verlinkungsarten:

Dokumenteninterne Verlinkung auf einer Seite
(selten, wird teilweise sogar übersehen)

von oben nach untern oder andersherum
keine echte Verlinkung sondern springen auf einer Seite von einen Punkt zum Anderen.
#name zu name => Sprungmarken!

(Seiten)interne Verlinkung (bleiben auf der gleichen Domain)

häufig bei Shops (bspw. conrad.de) oder Wikipedia
http://www.meine-domain.de/sofa.html zu
http://www.meine-domain.de/sessel.html

Externe Verlinkung (häufigste Art zu verlinken)

von der einen auf die anderen Domain verlinken

http://www.meine-domain.de zu http://www.deine-domain.de

Email Referenzierung (keine direkte Verlinkung)

Öffnen des Emailclients

Beispiel für Dokumenteninterne Verlinkung

Ein Link ist ein anker-Tag (a-Element):

<a>Ankertext = Wort, welches ich verlinken möchte</a>
attribute:

href=""

erst mit dem Attribut href wird ein Link produziert (inkl. Unterstrich)!
<a href="">Ankertext</a>
a= Anker, h = Hyper, Ref = Referenzierung
href = Zieladresse, mit welcher verlinkt werden soll

target=""

Angabe, in welcher Instanz die Zieladresse geöffnet werden soll.

im selben Fenster oder
in einem neuen Tab (_blank)

durch ein weiteres Attribut: target, wird das Ziel eingegeben.
bspw.: mit _blank wird über den Link die Zielseite in einer neuen Reiterkarte geöffnet:
<a target="_blank" href="http://www.google.de">

title=""

Tooltipp/ Beschreibungstext zum Link wird beim "hover" angezeigt

externe Verlinkung

<a title="Beschreibungstext zum Link" target="_blank" href="http://www.webadresse.de">Ankertext</a>

-> hier würde ich präferieren die Seite in einem neuen Tab zu öffnen - also mit _blank

(Seiten)interne Verlinkung

<a title="Beschreibungstext zum Link" target="_blank" href="Dateiname.html">Dateiname</a>

-> hier bleiben die Leute eh auf meiner Seite, somit mache ich nicht extra ein neues Tab auf, sondern leite sie im gleichen tab auf die nächste Seite meiner Webpage - also ohne _blank

Angabe des Dateinamens je nachdem in welcher Verzeichnisebene die Datei liegt
(Hinweis: Verzeichnis hier gleich Ordner)

Unterscheidung in relativ oder absolut:

relativ:

Verzeichnisintern:An sich versuche ich immer die Seiten, auf die ich verweise, im gleichen Ordner zu haben. (Verzeichnisintern) -> dann brauche ich nur den Dateinamen benennen

Im Unterordner des Verzeichnisses: Es kann aber sein, dass ich noch einen Unterordner in meinem Verzeichnis haben, dann gebe ich den Unterordner vor dem Dateinamen an Name_unterordner/Dateiname.html

In einem Übergeordneten Verzeichnis: Oder es kann sein, dass es ein Verzeichnis darüber gelagert ist, dann muss ich dem Browser sagen, dass er ein Verzeichnis hochwandern muss. Dies geschieht mit zwei Punkten für die übergeordneten, gleichen Ordner: "..Übergeordnetes _Verzeichnis/Verzeichnis/Dateiname.html

absolut:

einfachere und fehlerärmere Lösung!

einfach den gesamten Pfad eintragen, der oben im Fenster des Explorers angezeigt wird.
file://C:/Users/name/Ordner/Unterordner/Dateiname.html

<a title="Tooltipp bzw. Angaben zum Linkinhalt bzw. Beschreibungstext zum Link" target="_blank" href="..Hauptordner/Unterordner/Dateiname.html">Dateiname</a>

wenn der Browser keine Infos mit http oder www erhält, dann führt er den Pfad aus und schreibt ihn automatisch unten in die Leiste:

=>Parameter

bestehen immer aus einem Paar! Schlüssel (cc=) und Wert (Emailadresse):

cc = carbon copy (wie früher der Durchschlag)

ich kann mich auch auf CC setzen:
<a href="mailto:info@base-solution.de?cc=meineemailadresse@example.de">Email an den Autor: Name Autor; Emailadresse</a>

bcc = blind carbon copy

BSP:<a href="mailto:info@base-solution.de?cc=heido.bratze@example.de&bcc=ich@ich.de">Email an den Autor</a>

subject= Betreffzeile

<a href="mailto:info@base-solution.de?cc=heido.bratze@example.de&bcc=ich@ich.de&subject=Ihre%20Anfrage%20an%20uns">Email an den Autor</a>

body = Emailtext

<a href="mailto:info@base-solution.de?cc=heido.bratze@example.de&bcc=ich@ich.de&subject=Ihre%20Anfrage%20an%20uns&body=Sehr%20geehrte%20Frau/Herr,%20vielen%20Dank.">Email an den Autor</a>

Hier können Sie dem Autor eine Mail senden:
<a href="mailto:info@base-solution.de?
cc=heido.bratze@example.de
&bcc=ich@ich.de
&subject=Ihre%20Anfrage%20an%20uns
&body=Sehr%20geehrte%20Frau/Herr,%20vielen%20Dank.">Email
an den Autor</a>

=>Struktur: <a href="mailto:Emailadresse?cc=Emailadresse,Emailadresse&bcc=Emailadresse&subject=Ihre%20Anfrage%20an%20uns
&body=Sehr%20geehrte%20Frau/Herr,%0Aneue%20Zeile%20vielen%20Dank."> </a>

Links transformieren!
a {
display: inline-block;
width: 200px
}

CSS: Linktransformation über a{ display: inline-block; width: 200px;}

Wir können die Höhe und Breite einstellen, die Ur-Eigenschaft, dass die Folgeelemente hintereinandergereiht sind, bleibt erhalten!

=> Positionierung

Positionsart: position
Bestimmt die Art, wie die Positionsangaben verwendet werden.

-> grundsätzlich positionieren wir mit CSS standardmäßig absolut. (=default)

=>absolut:

Die absolute Positionierung ohne Positionsangaben meint immer top:0 & left: 0!!! (=default)-> nur noch der letzte Container ist sichtbar! Sie liegen übereinander
das Element bekommt eine feste Position von der Browserkante entfernt.
absolute Angaben zur Positionierung (top, left, bottom, right)
Wir positionieren die Elemente top/bottom oder left/right - darum geht es bei der Positionierung. Wir können alle Elemente absolut positionieren
Achtung: left: 0, kann ich ohne Pixel angeben, sobald ich die Zahl veränder, muss ich Pixel mit angeben! left: 5px;
ich muss immer die Richtung angeben, von der aus gemessen werden soll: top, left, right, bottom: Wieviel Pixel Abstand erfolgt?
Neue Positionierungsmöglichkeit rein über Koordinaten! Nicht mehr das klassische Inlineelement
Die Darstellung ist abhängig vom momentanen Browserfensterstatus beim Öffnen!

wenn ich scrolle, bleibt das absolut positionierte Element an der Stelle stehen, an der es sich beim Öffnen des Browserfensters platziert hat und wenn ich dann scrolle, wird es mitgescrolled

absolut positionierte Elemente immer ans Ende des Quelltextes schreiben: Warum? Damit es uns nicht das gesamte Layout zerschießt, wenn die CSS-Angabe des absoluten Positionierens aus irgendeinem Grund nicht greift

Warum ist die absolute Positionierung so wichtig?
Überlagerung möglich, was über das Boxmodell nicht möglich ist.

Überlagerung: Ich kann schichten übereinanderlegen - somit ist die natürliche Reihenfolge der Elemente elementar wichtig!
unabhängig von der Ureigenschaft setzt es sich als übergeordnete Schicht obendrüber.
Es beeinflusst nicht die nachfolgenden Elemente. Ich kann die Elemente überlappen.
Normalerweise würde der Text sonst von div-Container verdrängt werden - Zeilenumbruch erzwungen
-> Vorteil vom absoluten Postionieren: Keine Auswirkungen auf nachfolgende Elemente!

=>fixed:

erweiterte Form des absoluten Positionierens
wir gehen davon aus, dass das Element vor den anderen Elementen bleibt, egal, ob wir scrollen oder nicht
es wird nie mitgescrolled sondern steht immer fix an einer Position vom Browserfenster

=>relative:

nicht mehr der sichtbare Bereich des Browserfensters ist ausschlaggebend für die Positionierung, sondern das Elternelement
alles wird absolut zum Elternelement positioniert - dazu müssen wir das Elternelement relativ positionieren!
wenn das Elternelement kleiner wird oder sich anders positioniert, gehen die Kindelemente mit
also positionieren sich die Kindelemente absolut zu ihrem Elternelement
hat keinerlei Auswirkungen auf das Element und seine Darstellung an und für sich
Der einzige Unterschied besteht darin, dass, wenn wir innerhalb des Elements Kindelemente platzieren, diese sich absolut am Elternelement ausrichten
Elternelement: position: relative;
Kindelement: position: absolute; top: 6px; left: 3px; bottom: 10px; right: 5px
Ermöglicht das absolute Positionieren von Kindelementen relativ zu ihren Elternelementen.

Also muss ich das position: relative; im Selektor des Elternelementes angeben!

Das relative Positionieren kommt nur dann zum Tragen, wenn das Element auch ein Kind-Elemente hat, welches ich absolut positioniere!!!
Ergo muss die Eltern-Kind-Beziehung bereits in der HTML-Struktur berücksichtigt worden sein! (relative Positionierungen kann man nicht nachträglich im CSS formatieren, wenn im HTML diese Struktur nicht eingebaut wurde.)

(absolut = absolut zur Browserkante vs relativ = andere div-Container als Maß, an dem ausgerichtet wird)
Also ausgehend von der inneren Leinwand die bunten div-Container positioniert bekommen...

farbige Div-Container sind jetzt relativ zur Leinwand positioniert
farbige Div-Container sind jetzt relativ zur Leinwand, aber absolut positioniert!!!

Anwendungsbeispiel: wann benutze ich float und wann ist relative Positionierung sinnvoll?
Blau: Seite/Browserfenster
Grün: Container
orange: weiterer Container
Jetzt möchte ich ein Logo immer oben rechts im grünen Container positioniert haben!

und 2 Spalten

und weiteres Logo im Hintergrund...

Jetzt hört es auf, mit float, jetzt lohnt es sich relative Positionierung anzuwenden!

Irgendwann hilft uns das floaten nicht mehr weiter, weil es eben auch die Folgeelemente betrifft, gerade dann macht relatives Positionieren Sinn! :)

ERGO: Aufgabenangemessen setzen wir somit float, position etc. ein!

ODER: Anwendnungsbeispiel2:
Aufgabe: innerhalb eines Containers immer am Fuß eine Infozeile zu setzen! Und die Höhe des Containers variiert, dann müssen wir mit Positioning arbeiten!
Hinweis: Position: relative beim Elternelement funktioniert nur mit position: absolute beim Kindelement - position: fixed greift hier nicht!!!

3. Anwendungsbeispiel:
Link

hier wurde versucht mithilfe von Tabellen eine Hintergrundgrafik zu erstellen. Leider reagiert sie nicht responsive :(

Eine elegantere Lösung wäre gewesen ein Elternelement zu setzen und dann Kindelemente einzufügen, die sich an dem Elternelement ausrichten.
Es wird auch für die "Social Bars" auf den Websites verwendet!

Manipulation der natürlichen Reihenfolge der Elemente im Quelltext

z-index = neue Achse:
zu der x- und y-Achse, nehmen wir die z-Achse hinzu - Also ÜberlappungsAchse - Layer oder Schicht genannt!
z-index bei css4you
jetzt setzen wir ein weitere Attribut in den div3: z-index: 1;
Mit Hilfe dieses Attributes können wir den dritten div (grün) in den Vordergrund stellen (die Wichtigkeit der Hierarchischen Reihenfolge im Quelltext wird von z-index dominiert!

z-index:

ist immer nummerisch (ab 1 - mit steigernder Wertigkeit)
beschreibt die Reihenfolge
je höher der z-index, desto höher liegt die Schicht

Beispiel:
Wir können jetzt den Grünen nach vorne holen:

#drei {

=> Schriften / Fonts

Formen der Schriftformatierung

Schriftfarbe / color: Über color definiere ich die Schriftfarbe. (hexadezimal oder nummerisch)
Schriftgröße / font-size: Was jetzt folgt, ist etwas inkonsistent ;) Es heißt zwar nur color für Schriftfarbe, aber font-size für Schriftgröße! 24px...
Schriftart / font-family (aus dem alten HTML: font face) Arial, Verdana...
Schriftstil / font-style: bold, lighter...

weitere Formen unter CSS4YOU (font weight, font variant (Kapitälchen...)

h2 {
     color: blue;
   font-size: 24px;
     font-family: arial,helvetica,sans-serif;
     font-style: italic;
     font-weight: bold;
}

da nicht auf allen Systemen alle Schriften vorhanden sind, haben wir die Möglichkeit alternative Schriftarten anzugeben:

bevorzugte Schriften: am Liebsten benutze Arial, wenn diese nicht geht dann Helvetica und sonst sans-serif!
Man kann die Werte auch aneinanderreihen und sie mit einem KOMMA separieren! (anders als bei Margin, padding, border!!!

Schriften in CSS einfügen

Es gibt 2 Möglichkeiten Schriften, die nicht automatisch im System sind, wie arial, sans-serif, helvetica... in die CSS-Datei einzufügen.

2 Möglichkeiten Schriften einzubauen:

1) Webfonts / Google Schriftarten

Ich nutze die Schrift referenziert!!! (also mit Link oder @import)

interne Schriftverlinkung über link-Tag
Bewährte Methode: Dozent bevorzugt diese Methode, da CSS nur Formatieren soll und Referezierungen in den Head-Bereich der HTML-Datei gehören!!!
<link rel="stylesheet" href="css/template.css" type="text/css" />
habe sie nicht auf der eigenen Seite, sondern mit der URL oder über einen Link verbunden.
Risiko: Falls der Dienst abgestellt wird oder die Links ändert, ist meine Schrift weg.

=> Einfügen über einen Link im Head-Bereich des HTML-Dokuments:

gehe zu Google Webfonts
eine Schrift auswählen durch Button "Add to Collection": Patrick Hand SC

unter 1. Choose the style:
Tachometer zeigt an, inwiefern die Schrift unser Lageverhalten verändern kann

unter 3. add this code - Standard!
Inhalt der Reiterkarte kopieren und im Head meines Dokumentes angeben/einfügen.

Hinweis: Ein Link-Tag! = wir referenzieren auf die google Fonts Seite:
<link href='http://fonts.googleapis.com/css?family=Sofadi+One|Patrick+Hand+SC' rel='stylesheet' type='text/css'>
ERGO: Wir importieren stylesheet aus einer anderen Quelle.

unter 4. Integrate the fonts into your CSS
Dann muss ich es in mein im Headbereich meines HTML-Dokumentes einfügen UND auch in meinem CSS-Dokument, wie weiter unten angegeben!

Den Code kopieren & im Headbereich eintragen

Headbereich im Quelltext:

<!doctype html>
<html>
   <head>
       <title>Web Fonts</title>

       <link href='http://fonts.googleapis.com/css?family=Sofadi+One|Patrick+Hand+SC' rel='stylesheet' type='text/css'>


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

   </head>

CSS-Angaben im CSS-Dokument:

       *{
            font-family: 'Patrick Hand SC', verdana, helvetica, arial, sans-serif;
            font-weight: 300;
       }

Tipp: Damit ich nicht alle Elemente definieren muss, für die die Schrift gilt, stelle ich die Schrift in einen Globalselektor!

Globalselektor: * {font-family angeben!!!}

anderes Beispiel - andere Schrift mit mehreren Styles (Strichstärken)

Schrift Dosis hat 7 Styles (mit verschiedenen Strichstärken)

Hinweis: ich kann für alle Schriften die Strichstärke verändern:

mit font-weight: 800; kann ich die Strichstärke verändern - also den Text fetter und dünner schreiben lassen.
CSS4YOU > Schrift > font-weight

Der Browser interpoliert (frischt auf), wenn wir die Schriftbilder und Strichstärken verändern.

ABER: Immer wenn der Browser interpolieren muss, also die Schriften nicht physikalisch vorliegen, kann es Probleme geben, bspw. wenn man in pdf konvertiert etc.

ERGO: es macht Sinn, sich eine Schrift zu besorgen, die alle möglichen Schriftstärken abbilden kann, damit es später keine Probleme gibt.

=> Einfügen über die @import Angabe im CSS-Dokument:

Exkurs:
In CSS gibt es eine Besonderheit:
@ Klammeraffe: hier wird etwas importiert / implementiert
Beispiele: @font-face, @print, @media

=externe Schriftverlinkung!!!

gehe zu google Webfonts
suche eine Schrift aus durch "Add to collection" (Open Sans Condensed)
klicke auf "Use"
bei 3. den zweiten Reiter @import wählen!

Haken bei light 300 - genügt
@import-link kopieren
Link in CSS-Datei einfügen
Sichwerheitshalber den Link mit einfache Anführungszeichen 'link' quotieren!!!

also: @import url('http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

So wird erstmal keine Schrift angezeigt, ich muss sie erst VERWENDEN!!!
jetzt verwenden durch Angabe im Globalselektor!

steht unter 4. in den Google Web-fonts in der Use-Ansicht - kopieren& einfügen!

Pluszeichen sind immer Leerzeichen!
Grundsätzlich mit font-weight eine Strichgröße benennen!!!!!
Angaben im CSS:

@import url ('http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

        *{
        font-family: 'Open Sans Condensed', verdana, helvetica, arial, sans-serif;
        font-weight: 300;
        }

Hinweis:
die @import-Methode geschieht durch Verbindung mit einer URL
Das hat den Vorteil, dass es nicht nur über einen bestimmten Link, wie beim Standard-Einfügen geschieht (dieser kann kaputt gehen und schon ist die Schrift nicht mehr vorhanden).

URL: Ich kann mir den Link/ die Adresse rauskopieren und im Browser öffnen
-> so bekomme ich die CSS-Angaben angezeigt:

@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'),

url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/

v7/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff)

format('woff');
}

-> hier werden uns die CSS-Angaben von Googlefonts angezeigt durch Implementierung @font-face und somit haben wir die Schleife zur 2. Möglichkeit der Schrifteneinbindung gezogen:
Einfügen von heruntergeladenen Schriften!

2) Dafont oder andere Schriftportale

ich lade die Schrift herunter!
Einbetten einer heruntergeladenen Schriftdatei in meine CSS-Datei
Dafont hat den Vorteil, dass ich mir die Schrift physikalisch in meinen Schriftenordner laden kann - also auf meinem Rechner/Server liegen habe!
Dann füge ich die Schrift über @font-face ein

Schriften mit @font-face einbinden - so geht's!

a) @font-face {} in mein CSS einfügen
b) font-family: 'Foxes-In-Love' ; in @font-face eintragen

wir definieren den Verwendungsnamen der Schrift - Wir müssen angeben, wie die Schrift heißt => Hier kann ich jeden Namen vergeben!!! z.B. Standardschrift oder so, woie mein Unternehmen

c) src: URL ('Foxes In Love Font.ttf');

URL sagt aus, dass eine relative Pfadangabe folgt!
es ist eine physikalische Schrift - hier wird angegeben, wo sie liegt, damit der Browser sie finden und anwenden kann.
wir verknüpfen die physikalische Schrift mit dem Dokument
für die Quelle muss ich gucken, wo meine HTML-Datei steht und dann den relativen Pfad angeben also bspw.: template.css steht im Ordner CSS in Tag 14 - Ordner Fonts im selben Tagesordner:
src: url( '../fonts/'Foxes In Love Font.ttf');
Jetzt ist die Schrift erst implementiert - bis hierhin wurde nur der Name definiert und die Quelle angegeben.

d) Jetzt müssen wir die Schrift verwenden!!!

am Besten über den Globalselektor:

* {font-family: 'Foxes In Love Font'.ttf, verdana, helvetica, sans-serif; font-weight: 200;}

Erst font-family-Angaben im CSS wird die Schrift verwendet/aktiv!!!

Quelltext in CSS:

@font-face {
            font-family: 'Foxes-In-Love';
            src: url('../fonts/Foxes-In-Love.ttf');
        }

        *{
            font-family: 'Foxes-In-Love', 'Open Sans Condensed', verdana, helvetica, arial, sans-serif;
            font-weight: 300;
        }

Allgemeine Hinweise zu Schriften:

Dateiendungen für Schriften
wir unterscheiden nach TruType- und OpenType-Schriften!
-> bitte selber nachlesen:

Open-Type-Schrift : .otf
True-Type-Schrift: .ttf

Warum Schrift in ''?
Die üblichen Schriften sind im System verankert - der Browser kennt sie. Aber die neuen Schriften kennt das System nicht. mit den einfachen Anführungszeichen helfen wir dem Browser den Schriftnamen zu erkennen. Teilweise heißen die Schriften "Schrift bold" - würden wir ohne '' schreiben, würde er nicht wissen, ob nun Schrift oder bold die SChrift ist.

Deshalb auch keine Leerzeichen verwenden.
ALSO IMMER DIE LEERZEICHEN IN DEN SCHRIFTEN DURCH -(Bindestriche) oder _(Unterstriche) ersetzen!!!

ERGO: Vereinheitlichung ist wichtig: Entscheiden Sie sich für eine Einfügungsmethode!!!
Die Link-Methode hat sich bewährt!

Aufgabe: über die Link-Funktion oder/und @import-Funktion eine Schrift einfügen!

DATEI: font-import.zip erhalten -> können wir als Vorlage nutzen!
hier sind template dateien zu finden, wie die Vorgehensweisen bei googlefonts und über @font-face aussehen.

Hinweis für die Realität:
Man kann über @font-face mehrere Schriften einfügen ins Dokument, aber in der Realität macht man das besser nicht - warum?

Weiter geht es mit Größenangaben / Schriftgrößen

Link zu SelfHTML
->weg von absoluten zu relativen Schriftgrößen

absolute Schriftgrößen:

nicht skalierbar
schwer zu vergrößern
Früher haben wir mit pt (Punkt gearbeitet - absolut: 1 Punkt = 1/72 inch - ein inch = 2,54cm)

relative Schriftgrößen

px = Pixel (Mischform aus absolut und relativ) - keine echte relative Schriftgröße, da in Relation
em = equal to M (Geviert im klassischen Sinne des Drucks)

relative Größenangabe bezogen auf die Schriftgröße des Elements

Neue Datei: groessen.html

h1 {}
Die Relation geht immer von der Standardeinstellung des Browsers aus!
Herauszufinden über den Firebug:
rechte Seite - Berechnet: hier wird angegeben, was 100% bedeutet:

wir können auch andere &-Angaben machen

und sogar Dezimalzahlen angeben:

Welche Vorteile hat es relative Größenangaben zu machen?
Es ist egal, welches Endgerät ich nutze - Responsive! Super, weil die Leute sowohl vom Smartphone, als auch über Tablets und Rechner ins Netz gehen!
Der Browser skaliert sich automatisch richtig!
ERGO: Die Darstellung passt immer zum Gerät!

Bootstrap wird häufig als CSS-Hilfe verwendet!
(Werbeslogan: Designed for everyone, everywhere.

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.)

Linktipps (Datei: links-css.txt) :
# CSS allgemein
http://www.mediaevent.de
http://www.postner.de/blog/2011/08/10/css-box-shadow-an-einzelnen-seiten/

# Effekte CSS3
http://www.onlinecasinodemar.com/webdesign/xhtml-css/beeindruckende-effekte-mit-der-css-eigenschaft-text-shadow/

# IE Filter
http://www.drweb.de/magazin/internet-explorer-spezial-die-filter-des-internet-explorers/

# px oder em
http://www.elmastudio.de/webdesign/tipps-und-tools/pixel-oder-em-welche-schrifteinheit-ist-die-richtige/ - diesen Beitrag bitte lesen = Aufgabe!

Hier ein Zitat elmastudio.de:

Pixel oder em? Welche Schrifteinheit ist die Richtige?
Soll ich Pixel oder em für mein CSS verwenden? Was sind eigentlich die Unterschiede? Und welche Vor- und Nachteile gibt es? Da ich ursprünglich aus dem Grafikdesign komme, war mir früher eigentlich nur Punkt (pt) als Schrifteinheit geläufig. Im Webdesign begegneten mir dann auf einmal Pixel (irgendwie noch logisch), em (schon etwas komplizierter) und Prozent als weitere Einheiten. Es war also mal wieder an der Zeit, etwas Neues dazu zu lernen.

Falls es dir ähnlich geht wie mir, hier eine Übersicht, die ein wenig Licht ins Dunkel bringen soll. Damit dir die Entscheidung für eine Schrifteinheit, bei deinem nächsten Projekt auf keinen Fall mehr Kopfzerbrechen bereitet.

Pixel (px)
Ein Pixel ist die kleinste Einheit einer Rastergrafik, bzw. deren Bildschirmdarstellung. Eine Schrift in 14px, ist also auf deinem Monitor 14 Pixel hoch, ganz egal welche Schriftart du verwendest.

Pixel ist also eine statische Einheit. Sie verändert sich nicht. Egal ob du dir die Schrift auf Windows oder Mac, oder in unterschiedlichen Browsern anschaust.
Pixel verändern sich auch nicht in verschachtelten (cascading) Parent-Child-Elementen. Wenn du also in einen Parent-Element mit 18px ein Child-Element mit 16px platzierst, bleibt das Child-Element 16px groß.
Willst du sicher gehen, dass dein Design, auch auf unterschiedlichen Systemen und Browsern, genau so aussieht, wie du es auf deinem eigenen Rechner angelegt hast, dann erreichst du das sicher am besten mit Pixeln.

em
Die Schrifteinheit em (aus dem Schriftsatz: equal to M) hat im Gegensatz zu Pixeln keinen festen Wert, da em immer relativ zur definierten Schriftgröße in Pixeln steht.
Wenn du also in deinem CSS Style Sheet die Textgröße mit 10px definierst, ist 1em=10px. Soll deine h1-Überschrift dann 30px groß sein, sind das 3em. Eigentlich gar nicht so schwierig, oder?
Wenn du allerdings nirgends in deinem CSS eine feste Textgröße definiert hat, orientiert sich em an der standardmäßigen Browser-Einstellung, die bei den meisten Browsern bei 16px liegt. 1Em wäre dann also dann =16px.
Du kannst dir bestimmt schon vorstellen, dass diese Rechnung auch komplizierter werden kann. Vor allem wenn du in deinem Style Sheet eine ganze Reihe unterschiedlicher Schriftgrößen verwendest.
Ein beliebter Trick ist deshalb, die Textgöße nicht auf einen festen Pixelwert zu setzen, sondern auf 62.5%. Denn wenn die Standard-Browsereinstellung 16px ist, macht das bei 62.5% =10px. So wird eine Schriftgröße von 21px zu 2.1em, was die Rechnung sehr viel einfacher macht.

Was sind die Vor- und Nachteile?
Ein großer Vorteil der Einheit em ist, dass em, im Gegensatz zu Pixeln, in Internet Explorer 6 oder noch älteren Browsern in der Größe veränderbar ist.
Ems sind außerdem auch auf Webseiten mit elastischen Layouts im Einsatz. Hier werden alle Elemente der Webseite in em definiert, so dass alle Elemente im Verhältnis zueinander stehen.
Das heißt: Wenn du deine Schriftgröße veränderst, passen sich alle Elemente auf deiner Seite an. Das macht ein elastisches Layout natürlich enorm flexibel.
Vorsichtig solltest du allerdings sein, wenn du em vor allem als Ersatz für Pixel verwenden willst. Ems stehen immer in Relation zu ihrem Parent-Element. Das bedeutet, sie verändern ihren Wert, sobald zwei Elemente ineinander verschachtelt sind (wenn du z.B. ein List-Element li in einem Paragraph-Element p setzt). Was zu einem ganz schönen durcheinander führen kann, wenn du viele Elemente ineinander verschachtelst.

Nützliche kleine Helfer
Beim praktischen Pixel zu Em-Umwandler bekommst du den CSS Code für deine Schriften auch gleich mit dazu.
Der Pixel zu Em Rechner ist ein kleines, aber hilfreiches Javascript-Tool.
Mit Typetester kannst du Schriften in verschiedenen Größen, Farben, und Fonts testen, und bekommst auch gleich den CSS Code für deine Auswahl generiert.

Noch mehr Lesestoff
»How to size Text in CSS« ein Artikel von Richard Rutter von A List Apart.com.
Einen tolle Übersicht über Pixel, Em, Prozent und Punkt gibt Chris Coyier von CSS-Tricks in seinem Artikel »px-em-%-keyword«.

Ems stehen immer in Relation zu ihrem Parent-Element. Das bedeutet, sie verändern ihren Wert, sobald zwei Elemente ineinander verschachtelt sind (wenn du z.B. ein List-Element li in einem Paragraph-Element p setzt). Was zu einem ganz schönen durcheinander führen kann, wenn du viele Elemente ineinander verschachtelst.

-> wir können es für uns nutzen!!!
Wir können es ausnutzen, Texte und Textpassagen halbwegs proportional zueinander wachsen zu lassen!
Ich muss halt irgendwo mal Prozentangaben machen, um Veränderungen vornehmen zu können.
-> der firebug hilft uns bei der Berechnung :)

=> Selektoren:

Regelliste zur Wertigkeit von Selektoren:

Globalselektor

unterste Ebene für Schriften und sonstige allgemeingültige Angaben!
* {font-family:...;}

Element-Selektoren

formatieren alle Elemente eines Dokuments (grundsätzlich!)
Bsp: alle <h1> sollen standardmäßig in roter Schrift erscheinen
Lösung: h1{color: red;}

Klassen-Selektoren

formatieren nur Elemente die eine Attribuierung über class="" mit der dazugehörigen KLasse erhalten haben.
Bsp: einige <h1> Elemente sollen nicht rot, sondern grün formatiert werden.
Lösung:

CSS-Angaben im Head: .gruen {color: green;}
HTML-Angaben im Body: <h1 class="gruen">...</h1>

Unterscheidung:

elementunabhängige Klassenselektoren

.gruen {color: green;}
dieser Klassenselektor ist für jedes beliebige Element einsetzbar: h1, p,...

elementabhängige Klassenselektoren
(noch wertiger als unabhängige!!!)

h1.gruen {color: green;}
dieser Klassenselektor greift nur beim Element h1!
Frage: Warum gibt es elementabhängige Klassenselektoren?
Antwort: angenommen ich erstelle zwei Button (einen über das <button>-Tag, den anderen über das <input>-Tag) Beide bekommen eine Klasse, die von 2 verschiedenen Elementarten benutzt wird.
Jetzt kann ich definieren, dass die input-Ausgabe anders formatiert werden soll, als die button-Ausgabe:

input.interaction {color: red;}
button.interaction {color: blue;}
-> so haben beide Button eine andere Schrift

!!! Vorteil: wir können auch elementunabhängig ein default geben, quasi übergeordnete Formatierung der Klassenselektoren:

.interaction {font-size: 2em;}

Voraussetzung dafür: die Elemente müssen über verschiedene Tags gesteuert werden!

ID-Selektoren

#idselektor: hat die Eigenschaft immer mit einer führenden # anstelle eines Punktes gekennzeichnet zu sein
Bsp.: #main {color: yellow;}
body: : Attribuierung pnnerhalb eines Elements geschieht über eine ID
CSS-Angaben im Head: #main {color: yellow;}
HTML-Angaben im Body: <h1 id="main">...</h1>

und CSS-Angaben im HTML-Text

direkte Eingabe im HTML-Text über das style-Attribut hat die höchste Priorität

Hierarchiestufen in der Ausgabe visualisiert im firebug
(durchgeschstichene Definitionen in den Selektoren auf der rechten Seite der CSS-Angaben)

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)...

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?!?

(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.

=> Selektoren!

geben dem Browser mit für CSS - wie er mit den einzelnen Elementen bei der Ausgabe verfahren soll.
werden immer im Head eingetragen!
wir müssen es in einem style-Tag einrahmen!
dann sagen, wass passieren soll:

formatiere mir das li mit den nachfolgenden Werten! (wir wollen das li-Tag formatieren - also sagen wir dem Browser: alle Li-Tags bekommen eine Formatierung:)
Dann formatiert es alle <li>-Tags mit den Attributen und ihren Values, wie unten.

Vorteile:

keine Redundanzen (doppelte Formatierungen im Tag)
einfache Korrektur möglich
Trennung zwischen CSS & HTML (ich schreib es nicht mehr ins HTML, sondern definieren einen Selektor - in diesem Fall einen ELEMENT-SELEKTOR)

Element-Selektor = Formatierung des Elements direkt

Hinweis: jedes Attribut MUSS mit einem Semikolon abgeschlossen werden!
Wenn etwas nicht richtig dargestellt wird - überprüfen,

ob die Klammern alle geschlossen sind
alle Semikolons und Leerzeichen richtig gesetzt sind!

!!!ACHTUNG: Keine Kommentare mit  in der Style-Definition der Selektoren im Head!!! sondern mit /* */

Tipp für Gesamtdefinition der Selektoren:

Damit wir nicht alle Schriften neu formatieren müssen, können wir die Definition der Elementselektoren zusammenfassen - mit Komma getrennt.
Also die gleiche Schriftart für alle Text führenden Elemente:

p, h1, h2, h3 {
font-family: arial;
}

Aber was ist, wenn ich einen div-Container habe, in dem nur der Text steht...?!?

Lösung:
Wir formatieren das Element body! :)

body {
font-family: arial,helvetica,san-serif;
color: #333333
}

Das li:nth-child(Nr.) ist ein Pseudo-Klassenselektor
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:

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!

Seiten

Montag, 5. Mai 2014

Kurs Tag 19 - HTML & CSS - CSS: Whd. Positioning & Klausurvorbereitung

Mitschrift 05.05.2014

Wiederholung Positioning

Grundgerüst einer HTML-Datei

Schema:

Mischformen

Images sind Inline-Blockelemente

Transformation eines Inlineelements zu einem Inline-Blockelement

Display: