Links zu CSS
http://www.w3schools.com/css
www.css4you.de
Erste Schritte in CSS
Die Formatierungen der in HTML erstellen Elemente und Bereiche erfolgt per CSS
und zwar in form von Eigenschaften und Werten.
CSS in HTML einbinden
CSS-Angaben werden normalerweise in eine externe Datei
geschrieben, deren Name mit .css endet.
In Wordpress befinden sich die CSS Eigenschaften und Werte in der style.css.
Die Verlinkung zur style.css erfolgt in der HTML-Datei zwischen <head> ... </head>
<link rel="stylesheet" type="text/css" href="/style.css">
wenn sich die style.css im Root-Verzeichnis befindet.
WICHTIG
CSS-Anweisungen werden von oben nach unten abgearbeitet.
Wenn unten etwas steht, was der Eigenschaft oben widerspricht, dann gilt die untere Anweisung.
Sie erreichen ein Ausschalten dieser Regel, wenn Sie ein !important hinten anhängen.
p {
background-color: gray !important;
}
Nach dem Selektor werden innerhalb geschweifter Klammern die Eigenschaften und Werte eingefügt,
Jede Eigenschaft oder jeder Wert in einer eigenen Zeile, die mit einem Semikolon ; endet.
Mehrere Selektoren trennen Sie mit einem Komma. h1, h2, h3 { .... }
Aufbau einer CSS-Anweisung
Die in HTML erstellten IDs oder Klassen werden so über CSS angesprochen.
HTML | CSS |
<p id="stadt"> ... </p> | p#stadt { ...} |
<p class="stadt"> ... </p> | p.stadt { ... } |
Das HTML-Element, wie hier das p, können auch weggelassen werden.
Es erleichtert jedoch zu Beginn die Arbeit mit CSS.
ACHTUNG
Nach dem HTML-Element darf kein Leerzeichen stehen.
ID
Das Rautezeichen (#) zeigt an, dass es sich um eine CSS-ID handelt
Klasse (class)
Der Punkt (.) zeigt an, dass es sich um eine CSS-Klasse handelt.
Eltern-, Kind, Inline- und Block-Elemente
<div>
<p>
<span> Text eines Beitrages </span>
</p>
</div>
<p> ist ein Kind von <div>
<div> Eltern von <p>
Block.Elemente
Block-Elemente erzeugen selber eine neue Zeile.
zum Beispiel: div, h1 - h6, p, table, ol, ul
Sie werden untereinander angeordnet.
Inline-Elemente
Inline-Elemente erzeugen selber keine eigene neue Zeile,
sie werden nebeneinander angeordnet.
Es gibt 2 Arten, ersetzende Elemente, nicht ersetzende Elemente
ersetzende Elemente z.B. img (hier können Sie Breite und Höhe festlegen)
nicht ersetzende Elemente: z.B. span (hat keine ersetzende Wirkung)
Beispiele:
a, strong, em, u, img, input, label, select, span
Beispiele HTML und CSS-Selektoren
HTML | CSS-Selektor | Beschreibung |
<div id="page"> | #page | Formatierung Elemente der ID page |
<header id="branding"> | #banner | Formatierung Elemente der ID branding |
<h1 id="seitentitel"> | #seitentitel | Formatierung Elemente der ID seitentitel |
<nav id="navi"> | #navi | Formatierung Elemente der ID navi |
- Zugriffe: 4894