Autor: Max Morawa

Damit Formateigenschaften angewendet werden können, muss erst gezeigt werden, welches Element angesprochen wird. Diese nennt man Selektoren.

Beispiele einfacher Selektoren:

Universalselektor: *
Typselektoren: element
Klassenselektoren: class
id-Selektoren: #id

Pseudoelemente

::first-line | Bsp: p::first-line {
background-color: yellow;
}

mit ::first-line wird die erste Zeile des jeweiligen Textes angesprochen.

::first-letter | Bsp: p::first-letter {
font-size: 150%;
color: blue;
}

mit ::first-letter wird der erste Buchstabe des jeweiligen Textes angesprochen.

::before und ::after | Bsp: abbr {
background-color: lightgreen;
}

mit ::before und/oder ::after kann ein beliebiges formatierbares Element erzeugt werden das vor- bzw. hinter einem Inhalt eingefügt werden kann.

Pseudoklassen:

::first-child | Bsp: : first-child {
color: green;
}

mit ::first-child kann das erste Kindelement ausgewählt werden.

Bsp.: die allererste h1 Überschrift und das allererste Listenelement werden im Text mit einer grünen Farbe hervorgehoben.

Unterschied Pseudoklassen und Pseudo-Elementen:

Pseudoklassen beschreiben Elemente mit Eigenschaften, die nicht vom Document Tree abgeleitet werden können. Sie legen zusätzliche Bedingungen bei den selektierten Elementen fest, wodurch die Menge der zutreffenden Elemente reduziert wird. Pseudoklassen sind oft dynamisch, d.h. können durch User Interaktionen hinzukommen oder wegfallen (Ausnahmen hiervon sind :first-child und :lang). Das beste Beispiel hierfür ist die :hover-Pseudoklasse.

Mit Pseudo-Elementen dagegen kommt man an zusätzliche Informationseinheiten, die mit normalen Elementselektoren nicht zugänglich wären (z.B. :first-letter) oder im Document Tree eigentlich nicht existieren (z.B. :before).

Quelle: Pseudoklassen vs. Pseudo-Elemente

dynamische Pseudoklasse

::hover | Bsp: h1:hover{
background-color:yellow;
}

mit ::hover können Sie Elemente verändern, indem Sie mit der Maus darüber fahren.

::active | Bsp: a:active {
background-color: blue;
}

::nth-child | Bsp: h2:nth-child(2) {
background: blue;
}

mit ::nth-child können Sie das n – te Kind verändern, n ist in diesem Fall „2“ und färbt den zweiten h2 Hintergrund in blau.

 

Dieser Beitrag ist an meinem HTML Beitrag angelegt.

Sie können Ihren Elementen Attribute hinzufügen, wenn sie z.B wollen, dass ihre h1 Überschrift rot werden soll müssen Sie eine CSS Datei mit ihrer HTML Datei verknüpfen.

Zum verknüpfen Ihrer CSS Datei müssen Sie folgendes in Ihren head schreiben:

<link href=“IhrPfad“ rel=stylesheet type=“text/css“/>

Am besten ist es, Ihre CSS Datei im gleichen Ordner wie der HTML Datei abzuspeichern, denn umso einfacher ist es, den Pfad anzugeben.

CSS:

CSS=Cascading Style Sheets
Deutsch=Mehrstufige Formatvorlagen

CSS ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und DOM eine der Kernsprachen des World Wide Webs.

Quelle: Wikipedia

Wie wir im oberen Text lesen konnten, können Sie z.B die Farbe Ihrer Überschrift ändern. Wenn sie nun wollen, dass alle Ihre Überschriften rot werden sollen, können Sie in Ihrer CSS Datei folgendes schreiben:

h1 {
color:red;
}

In Ihrer HTML Datei werden nun alle h1 Überschriften rot.

Ein weiteres Element ist das Listen Element.

<h1>Einkaufsliste</h1>
<ul>
<li>Konserven</li>
<ul>Tomaten</ul>
<ul>Gemüse</ul>
<li>Getränke</li>
<ul>Cola</ul>
<ul>Fanta</ul>

dabei steht das ul als eine ungeordnete Liste.

Als nächstes werden wir einen div Container erstellen.

Ein div-Element wird gebraucht um mehrere Elemente wie Text, Grafiken, Tabellen, Listen etc. in einen gemeinsamen Bereich einzubringen.

Unser Ziel ist es, eine kleine Box zu erstellen, da es aber keine Klasse für eine Box gibt, müssen wir sie erstellen.
Eine sogenannte „Klasse“ wird immer mit einem Punkt erstellt

.box {
width:200px;
height:200px;
}

Nun müssen wir diese „box“ in unseren Text einbringen:

<div class=box>
Text
</div>

um z.B den Boxrand zu verstärken, können Sie die border Eigenschaft nutzen.

.box {
width:200px;
height:200px;
border:2px solid grey
}