CSS für WordPressartikel
Viele haben schon von gehört, können aber nicht wirklich was mit anfangen – css – Cascading Stylesheets. In html wird der Inhalt geschrieben – mit css bestimmt man wie die Seite aussieht – oder auch nur einzelne Teile davon.
Wenn eine Stelle im Text anders aussehen soll dann gibt man an dass dieser Teil einen besonderen Stil (auf englisch style) hat. Will man eine Textstelle ändern so setzt man sie in <span> – Tags (ein Tag ist ein htmlzeichen, es wird immer in spitze Klammern gesetzt <>)
- <span> am Anfang, </span> am Ende. Alles was dazwischen steht wird entsprechend des ausgesuchten Stils geändert.
Das bekannteste, die meisten von euch haben es sicher schonmal gesehen ist die Farbe per css zu ändern. Das tue ich, indem ich dem <span> – Tag nun einen Stil gebe, das sieht dann so aus
<span style=”…”>Hier kommt der Text</span>
In den ” … ” schreiben wir nun unsere Stilangaben rein, wir möchten zB dass die Farbe rot sein soll.
Farben gibt man am besten in Hexadezimal an, das heisst für jede Farbe gibt es einen Wert, den man in entsprechenden Tabellen nachlesen kan.In css werden Eigenschaften immer so angegeben – zuerst die Eigenschaft, dann nach einem : der Wert. Am Ende setzt man ein Semikolon.
Also – Wert(zb Farbe) : Eigenschaft (zb rot);
Wir wählen die Schriftfarbe (color) rot, der Farbcode ist #990000.
color:#990000;
Also schreiben wir das nun in diesen Tag:
<span style=”color:#990000;”>dieser Text ist rot</span>.
Nun können wir nicht nur die Farbe, sondern auch die Grösse ändern. Die Schriftgrösse nennt sich font-size. Man kann sie in pt angeben (normalerweise werden Schriftgrössen in pt angegeben), aber auch in px (Pixel) oder % – wobei dann die Normalgrösse 100% hat, 200% wäre dann doppelt so gross als wenn man keine Grösse angeben würde. Der Tag dazu sieht so aus:
<span style=”font-size:120%;”>dieser Text ist 1,2mal so gross wie normal</span>
Natürlich kann man auch mehrere Eigenschaften hintereinanderschreiben, wichtig ist dass immer ein Semikolon dazwischen ist.
<span style=”color:#990000;font-size:120%”>dieser Text ist rot und 1,2mal so gross wie normal</span>
Auf diese Art und Weise kann man auch noch mehre Eigenschaften hinzufügen, zb eine Hintergrundfarbe (background-color) wenn ein Stück Text gehighlightet werden soll. Oder man kann der Zeilenabstand ändern, dieses geht mit line-height. Es ist dann empfehlenswert mit 100% zu arbeiten, da ansonsten das Aussehen sehr von der Monitorgrösse abhängt.
Alle Eigenschaften die per css zugewiesen werden können findet ihr hier .
Genauso kann man auch andere Tags ändern – sagen wir mal einen link – tag <a>. Normalerweise sehen links in html so aus:
<a href=”http://www.irgendeineseite.de”>Seite xy</a>
Nun kann man auch hier einen style einfügen – am besten nach der linkadresse.
<a href=”http://www.irgendeineseite.de” style=”font-color:#999900″>Seite xy</a>
Links sind in der Regel unterstrichen – man kann aber auch festlegen dass dies nicht so sein soll – die Eigenschaft dazu heisst “text-decoration” – und wir wollen eben keine – none.
<a href=”http://www.irgendeineseite.de” style=”font-color:#999900;text-decoration:none;”>Seite xy</a>
Das Semikolon nicht vergessen !
Achtung ! Leider ist wordpress etwas unsauber was die Schriftfarbe angeht – angenommen die Farbe ist zuerst grün, dann wird der Text rotgemacht. Normalerweise würde man nun einfach die Farbangabe ändern – WordPress fügt hier jedoch einfach einen neuen span-Tag ein – also
<span style=”color:#990000;”><span style=”color:#000099;”>dieser Text ist blau</span><span>.
Wird nun die Farbe in grün geändert wird einfach noch ein span Tag dahintergesetzt – dabei ist dann die Farbe die die am nächsten am Text ist. Sowas sollte man aber auf keinen Fall machen – es ist eine wirkliche Schwachstelle bei WordPress.
Bei Tabellen oder auch Listen kann man sogar den Hintergrund bestimmen – indem man ein Hintergrund-Bild verwendet (background-image). Zusätzlich kann man auch noch eine Breite angeben (width)
<ul style=”background-image:http://pandabandenwelt.files.wordpress.com/2011/01/higru-pandabande-2.jpg”>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
<li>Punkt 5</li>
</ul>
- Punkt 1
- Punkt 2
- Punkt 3
- Punkt 4
Nun will ich nach oben hin einen Abstand von 15 Pixeln. <ul style=”background-color: #990000; padding-top: 15px;”>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
<li>Punkt 5</li>
</ul>
- Punkt 1
- Punkt 2
- Punkt 3
- Punkt 4
Beim Hintegrund gilt es zu beachten: es gibt in html 2 verschiedene Arten von Elementen – die Block und die Inline – Elemente.
Blocklineelemente erzeugen einen eigenen Absatz und gehen bis zum Ende der Zeile (sofern nicht anders bestimmt). Listen zB sind solche Blockelemente, oder auch Tabellen.
Inlineelemente hingegen nehmen nur soviel Platz ein wie nötig – ein Beispiel ist der <a> Tag für links – dieses Element ist nur so gross wie es sein muss, wenn ein </a><a> Tag im Text ist geht der Text danach normal weiter,ein anderes Beispiele ist der <b> – Tag (für Fettdruck).
Bespiel für ein inline-Element: <b>
Dieser Text hat ein <b>fett</b> gedrucktes Wort.
Ändert man nun die Hintergrundfarbe sieht man dass der Tag nicht grösser ist als nötig
Dieser Text hat ein <b style=”background-color: #990000;”>fett</b> gedrucktes Wort.
So sieht es dann aus:
Dieser Text hat ein fett gedrucktes Wort.
Fortsetzung folgt…
