22. April 2011

Tutorial: CSS - Überschriften gestalten

Natürlich kann man bei Blogger auch ganz einfach über die Erweiterten Einstellungen die Überschriften gestalten. Doch bequemer geht es meiner Meinung nach auch mit css. Denn dort hat man außerdem noch einige Gestaltungsmöglichkeiten mehr!

Ein paar Erklärungen:
h1 - ist bei Blogger die Blogüberschrift. Also würde dies in dem Fall eintreten, wenn ihr keinen richtigen Header habt. Kann man natürlich rein setzen, muss man aber auch nicht!
h2 - entspricht einmal der Schrift von dem Datum, und einmal die Überschrift von den Gadgets.
h3 - sind die Blogüberschriften.

Um also etwas dauerhaft für diese Überschriften zu ändern, müsst ihr einfach nur jeweils h1, h2 oder h3 an den Anfang einer Zeile setzen, und dahinter geschweifte Klammern - { }. In diese kommen dann dafür die ganzen Einstellungen. Nutzen könntet ihr zum Beispiel diese Befehle:

color: damit wird ganz normal die Schriftfarbe bestimmt. Dort rein kommt dann einfach zum Beispiel ein Farbcode wie #000000 und beendet wird es immer mit einem Semikolon ; .
font-family: Das ist der Befehl dafür, welche Schriftart genutzt werden soll.
font-size: So stellt ihr die Größe der Schrift ein.
font-weight: Sind zB kursiv, unterstrichen, durchgestrichen, dick.
border-bottom/top/left/right: Hier bestimmst du, ob und wo du einen Rand möchtest, sprich einer Unterstreichung. Natürlich kann man auch alles benutzen, also oben, unten, links, rechts. Oder so variieren, beliebt ist auch die Einstellung für einen dünnen unteren Rand und einen breiteren dicken. Dies könnte dann in etwa so aussehen:
border-bottom: 1px solid #000000; 
border-left: 2px solid #000000;
1px und 2px steht also jeweils für die Breite des 'Striches' und der Farbcode dafür, in welcher Farbe er später in der Überschrift erscheinen soll.
line-height: Ist der Abstand zwischen Text und  Rand.
letter-spacing: Die Abstände zwischen den einzelnen Buchstaben.
text-align: Die Position, in der sich der Text befinden soll. Soll er zB mittig sein, schreibt ihr 'center'.


Mein Code sieht momentan zum Beispiel so aus: 
h3 { color: #202554; font-size: 18pt; font-family: FangSong;  text-decoration: none; border-bottom: 1px solid #b4628f; font-weight: normal; line-height: 17pt; padding: 0; margin: 0; letter-spacing: 0px; text-align: center } 
Also so, wie ihr die Post-Überschriften hier im Blog seht!
Am einfachsten wäre es natürlich, einfach meinen Code zu kopieren ;) Was natürlich aber sehr einfach ist, und man es so meiner Meinung nach weniger versteht. Falls ihr das aber trotzdem machen wollt, dann bitte ich euch, mich irgendwo zu verlinken oder zu erwähnen, da auch ich erst dahinter kommen musste!

Viel Erfolg!
JULE

Kommentare :

  1. ja finde ich auch,
    erst meinte sie ja ich kann alles besonders gut
    aber sie ist auch eine sehr niedliche.

    Liebe Grüße Michi <3
    michimarshmallow.blogspot.com

    AntwortenLöschen
  2. gern ;)
    ich konnte ef nich mehr warten :D
    <3

    AntwortenLöschen
  3. ja , man , endlich :D
    es ist aber kein lg. eigentlich bin ich froh , dass ich so lange warten musste und jetzt 'n besseres bekommen habe. es war zwar auch teurer aber na ja.

    ok , danke (:

    liebste grüße ♥

    AntwortenLöschen
  4. Ich auch weil Gimp genauer ist und schöner . Ich hasse Photoscape eig aber ich finde da mit ging das mit dem überlappen da viel viel schneller ((: sieht aber auch nicht so gut wie bei Picasa 3 aus ((;
    xoxo

    AntwortenLöschen
  5. hey,ich habe gerade dein tutorial mit dem header gesehen und es hat mir echt gut gefallen. aber weißt du,wie man in blogspot einfügt,dass der header eine xcf datei sein kann,weil sonst die transparenz verloren geht?

    liebe grüße.

    http://justnothingwithoutyou.blogspot.com/

    AntwortenLöschen
  6. das tutorial ist echt gut!
    ich mag deinen header total gern :)

    AntwortenLöschen
  7. das tutorial ist wirklich gut ! :-)
    http://natacakes.blogspot.com/

    AntwortenLöschen
  8. der neue header sieht toll aus :)

    AntwortenLöschen
  9. Also ich bin so weit gekommen, dass mein Wort in blau da steht und ab da komm ich nicht mehr weiter (;
    Danke, sehr nett von dir (:

    AntwortenLöschen
  10. es klappt nicht :(
    wenn ich font-family: Lobster;
    eingebe dann kommt da überhaupt nicht die schrift.
    und wenn ich font-size: 18pt (so wie du) eigebe bleibt die so klein :((( man was ist denn nur los mit dem scheiß blogger ding?! :D

    AntwortenLöschen

Ich freue mich sehr über jeden neuen Kommentar!

my post-favourites