Abonniere die Beiträge von PinkPearl Info

EMail Adresse hinzufügen

Teile dich mit!

Verwende den Hashtag #ppiupdate in den Sozialen Medien (wie zum Beispiel Twitter), um Besucher auf deine Updates aufmerksam zu machen.
Mehr Infos...

Freitag, 29. April 2016

Stylesheets - Was ist das und wie verwende ich es?

lulu
Das Wort "Stylesheets", "style" oder "style.css" wird im täglichen Verbrauch verwendet. Doch was sind diese Stylesheets eigentlich?

Stylesheet-Sprachen [ˈstaɪlʃiːt] sind formale Sprachen in der Informationstechnik, um das Erscheinungsbild von Dokumenten bzw. Benutzeroberflächen festzulegen. wikipedia

Stylesheets besteht aus dem Wort "style" (auf deutsch Stil, Ausdrucksweise, Formatvorlage) und dem Wort "sheet" (Blatt, Platte, Sammlung). Man könnte es also als "Stil Sammlung" übersetzen. In dieser Sammlung stehen verschiedene Ausdrücke, die als Formatvorlage unserer Website dienen.

Fassen wir zusammen: Stylesheets bestehen aus Ausdrücken die dem Browser sagen, wie unsere Homepage aussehen soll. Mit ihnen können wir die Schriftfarbe, die Schriftgröße oder die Hintergrundfarbe der Homepage festlegen.

Für diese Ausdrücke gibt es übrigens verschiedene Sprachen. Die uns wohl bekannteste ist CSS (Cascading Style Sheets). CSS wurde entwickelt, um Inhalt und Design zu trennen. Meistens erstellt man dafür eine eigene css Datei (z.B. style.css).

HTML Code = Inhalt
CSS = Beschreibung des Aussehens dieses Inhalts.

Viele Webmaster schreiben ihre CSS direkt in den HTML Code (z.B. so: <div style="color: #fff">Ich bin weiß</div>). Von dieser Vorgehensweise ist abzuraten! Sollte das Design einmal geändert werden, muss bei dieser Variante jede Unterseite durchgegangen und überarbeitet werden.
Besser ist, alles in eine separate CSS Datei (z.B. style.css) zu schreiben und diese einzubinden. So muss nur diese eine Datei geändert werden.

Das sieht in der HTML (oder PHP Datei) dann so aus:
<div class="weiß">Ich bin weiß </div>

Und in der CSS Datei so:
.weiß{color: #fff;}

Man unterscheidet hier übrigens zwischen class und id. Eine id wird nur verwendet, wenn etwas einmalig ist bzw. nur einmal im ganzen Code gebraucht wird. Wie zum Beispiel bei einem header div..
<div id="header">Ich bin der Header</div>
In der CSS Datei hat wird die id Beschreibung mit einer Raute (#) begonnen:
#header{background-color: #000;}
Im Unterschied dazu wird eine Klasse (class) öfters im HTML Code verwendet.
<div class="weiß">Ich bin weiß </div>
<div class="weiß">Ich bin auch weiß </div> 

In der CSS Datei werden Klassen mit einem Punk (.) begonnen:
.weiß{color: #fff;}

Stylesheets verwenden

Zuerst wird eine CSS Datei erstellt (z.B. style.css). In diese Datei beschreiben wir nun, wie unsere Website aussehen soll. Dafür gibt es verschiedene Befehle, die verwendet werden können. Eine Übersicht gibt es unter anderem auf CSS4you oder W3Schools

Unsere style.css könnte zum Beispiel so aussehen:

body{
    background: blue;
    color: #000;
}
h1{
   font-size: 28px;
   color: #c27ba0;
}

Hiermit machen wir den Hintergrund der Website blau, die normale Schriftfarbe schwarz und sagen, dass die h1 Überschrift 28px groß und pink ist.


Damit der Browser von unserer CSS Datei weiß, müssen wir die Datei im Header (<head>) unseres Webseitencodes einbinden:

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
Jetzt läd der Browser die ganzen Styles, die wir in der CSS Datei stehen haben. Er weiß nun wie unser Hintergrund und unsere h1 Überschrift aussehen.

Innerhalb deiner PHP oder HTML Datei kannst du nun deine definierten Styles verwenden.
Zum Beispiel so
<h1>Überschrift</h1>

Du hast noch fragen? Dann schreib mir eine EMail oder hinterlasse einen Kommentar :)

4 Kommentare:

  1. Sehr schönes Tutorial :3 schafft wirklich eine gute Basis

    AntwortenLöschen
  2. Vielen Dank für die tolle Info. :3
    Mich regt der Style.css eines Designs auch immer wieder auf, vor allem nun bei meiner neuen Forumsoftware, die ich ausprobieren wollte (Mybb), wo wirklich alles per Code aufgebaut ist und man im ersten Moment gar nicht weiß, welche Änderung was bewirkt^^ Ist wie beim Style.css eines Designs, wo die "grünen Spalten" (Anfang: <--- und Ende: --->) nicht vorhanden sind XD
    Aber ich mag es auch, mich auszuprobieren, nur dadurch wird man ja erfahrener. Früher wusste ich nicht einmal, wie man ein Template hochläd oder die Navigation entsprechend ändert. XD

    AntwortenLöschen
    Antworten
    1. Übung macht den Meister, oder wie sagt man so schön? :) Wenn ich etwas verändern will schaue ich meistens vorher über die Entwicklertools vom Google Chrome um welche Klasse es sich handelt und wo genau ich etwas ändern muss.
      Ich finds super, dass du neue Dinge ausprobierst und dich so weiter entwickelst *_*

      Löschen

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates