Drucken
 

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: 4893