HTML &CSS

Klassen dürfen als Wert des HTML-Attribut class= im HTML-Code mehrmals auftauchen

<span class="rot">Ich bin rot</span>
<span class="rot">Ich bin rot</span>

dürfen mit anderen Klassennamen verwendet werden:
<span class="rot durchgestrichen"> Ich bin rot und durchstrichen </span>

----------------------------

ID dürfen als Wert des HTML-Attributs id= im HTML-Code nur 1 x auftauchen

Ziel: Starke Trennung von Inhalt und Gestaltung

Als externe Datei 

Im Head als <style>Tag

Inline als style= Attribut

Die ID hat die höherer Priorität und darf nur 1 mal verwendet werden

Bsp. <p id="artikel" class="betont">Welche Farbe hat dieser Zeitungsartikel?</p>

Hier wird die ID artikel höher Priorisiert Egal in welcher Reihenfolge im CSS die Farben vergeben wurden

Eine Pseudoklasse in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand abzufragen. So steht beispielsweise :hover für Elemente, die gerade mit dem Mauszeiger berührt werden.

Wie auch pseudo-classes können  Pseudoelemente einem Selektor hinzugefügt werden, aber statt einzelen Zustände ermöglichen Sie das gestalten eines einzelnen Teils von einem Element. Das Pseudoelement ::first-line richtet sich bspw. nur an die erste Zeile eines Elements.

px Pixels: (relative zur Anzeigedichte des jeweiligen Ausgabemedium, früher lange absolut) z.B. unser Bildschirm hätte eine Auflösung von 96px/inch => 254mm/96px ➔ unformatierter Text innerhalb vom Body-Tag hat 16px.

em relative Grösse zur jeweiligen Schriftgrösse vom Element (1em = size of the current font-size of the element itself)

rem relative Grösse zur jeweiligen Schriftgrösse von body/html (root) (4em = 4 x size of the current font-size of the body/html-Tag

% relativ zur aktuellen Grösse oder zum Elternelement

vh 1% of Viewport Height

vw 1% of Viewport Width

Vereblich:

color, font-famaly, font-style.......

Nicht Vererblich

Wenn border erblich wäre, hätten alle Elemente unterhalb eines Elements mit border ebenfalls einen Rahmen. Wenn background-image erblich wäre, würden Hintergrundbilder dichte Schichten bilden.

Ist ein Anzeigeprogramm für Websites mit Navigationsmöglichkeit. To browser heisst stöbern

Bei der ersteren werden Kontrollstruktur angelegt und Entscheidungen getroffen, bei der zweiten werden Inhalte Inhalte strukturiert und formatiert.

Ist datenbankunabhängig (hartcodiert), ist zustandslos

Eine fest definierte Schreibweise.

Start- und Endtage, Attribute, Inhalt

meta, br, img, link, doctype, input,

reset => main => ausgabespezifisch => inline-style

Weist eine spezfische Bedeutung den Bestandteilen einer Website zu.

Deren Namen haben einen Bedeutung und dienen den Suchmaschinen und uns zur Orientierung.

Die Semantik ist ein Teilgebiet der Sprachwissenschaften. Im Zusammenhang mit HTML strebt man nach "bedeutungsvollem" Quellcode. Dies soll heißen, dass die Inhalte einer Internetseite sinnvoll gegliedert werden, womit man dem Text eine Struktur gibt.

Alle a-Elemente und p-Elemente

        /* Alle p Elemente UND h1 ein Underline*/

        h1, p{

            text-decoration: underline;

        }

Alle a-Elemente innerhalb von p (alle Nachfahren) ****

        /* Alle a Elmente innerhaln einers ul Element*/

        ul a{

            color: chartreuse;

        }

--------------------------------------------------------------

        /* Alle span in div's ( Egeal wie weit weg Grosseletrn usw.)*/

        div span{

            color: hotpink;

        }

/*Diese Regeln macht die erste Spalte jeder Zeile in einer Tabelle fettgedruckt*/

#data-table-1 td:first-child { 

     font-weight: bolder; 

Alle Elemente der Klasse ’foo’

        /* Alle Klassen foo bekommen monospace*/

        .foo{

            font-family: monospace;

        }

Alle div-Elemente mit der Klasse ’foo’

        /* Alle p mit der Klasse foo werden zentriert. ACHTUNG: Kein Leerzeichen zwischen foo und dem Punkt*/

        p.foo{

            text-align: center;

        }

Alle div-Elemente mit der id ’foo’ / Selektor für ID's

        /* Das Elemet mit der id lol*/ --> geht auch h1#lol

        #lol{

            font-family: sans-serif;

        }

Alle div-Elemente mit der Klasse ’foo’ innerhalb von td, d.h. innerhalb einer Tabellenzelle

Alle a-Elemente, welche das Attribute-Eigenschaft title enthalten

vergleicht Elemente basierend auf dem Vorhandensein oder Wert eines bestimmten Attributs

<ul>

     <li><a href="#internal">Internal link</a></li>

</ul>

/* Internal links, beginning with "#" */

a[href^="#"] {

     background-color: gold;

}

Alle a-Elemente, welche das Attribute title="klicken" enthalten

Child selector : Alle em-Elemente, welche Kinder (erste Einrückungsstufe) von p sind / Nur die direkten Kinder

div

   span Text sapn     --> Nur dieser ist aqua

   p

      span text2 span

   p

   span Text 3 span   -->  --> Nur dieser ist aqua

div

 /* Nur die direkten Kinder span. Also nur die die dierekt under div sind*/

        div > span{

            color: aqua;

        }

Adjacent Sibling Selector: 

Das erste p Element, welches als "Vor"- Nachbar h1 hat

        /* Nur der direkte Geschwister (Nur das erste) die nach der ID center in jedem div kommen sind gelb*/

        #center + div{

            color: yellow;

        }

General Sibling Selector: Alle p-Elemente, welche nachstehende Geschwister von h1 sind 

        /* Alle Geschwister die nach der ID center kommen in jedem div sind rot*/

        #center ~ div{

            color: red;

        }

a-Element bei Mauskontakt

---------------------------------------------------------------------

a Element mit der Klasse Homepage bei Mauskontakt

a.homepage:hover { 

     background-color: #666; 

}

a-Element, wenn es fokussiert wird (reinklicken, mit Tabulator "reintaben")

-----------------------------------------------------------------

a Element mit der Klasse Homepage wenn es mit fokussiert wird (reinklicken, mit Tabulator "reintaben")

 a.homepage:focus { 

     background-color: #666; 

}

a-Element nach dem Anklicken

----------------------------------------------------------------

a Element mitder Klasse Homepage nach dem Anklicken

 a.homepage:visited {

     color: #fff;

     background: #555;

}