Angepinnt [Einsteiger] Css für Anfänger

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • [Einsteiger] Css für Anfänger

      Guten Tag GodLikerz
      Heute führe ich euch etwas ein in css
      So dann mal los...

      CSS steht für Cascading Style Sheets, und sollen das Leben eines jeden Webmasters zumindest ein wenig erleichtern. CSS 1 wird von Netscape und dem IE in etwa komplett in den Versionen 5 unterstützt. CSS 2 wird bereits (fast komplett) von dem Netscape 6 unterstützt. Der IE 6 hängt noch ein wenig nach.
      Über CSS kann man das Aussehen von bestimmten HTML Elementen definieren.

      Ein einfaches Beispiel:


      PHP-Quellcode

      1. <p><font color="#ff0000">Ein Text</font></p>


      Nehmen wir an, das Sie diesen Code auf ca. 10 Unterseiten verwenden, z.B. in einem Menü, oder einem anderen Element. Möchten Sie nun, das der Text blau dargestellt wird, dann müssten Sie in ihren 10 Unterseiten jeweils die Farbangabe auf blau ändern.
      Dies ist schon viel Aufwand, doch stellen Sie sich das einmal bei 100, 200 oder gar 300 Unterseiten vor?

      Die Lösung bringt CSS mit sich. Über CSS kann man, wie bereits erwähnt das Aussehen, also die Formatierung von Elementen definieren. Folgende CSS Anweisung würde das oben beschriebene Problem lösen:

      PHP-Quellcode

      1. p {color: #0000ff }

      Diese CSS Anweisung wird in einer Datei *.css gespeichert, und in die jeweiligen HTML Dateien über eine Anweisung im <head> Bereich (siehe unten) eingebunden. Sie definiert, das alle <p> Tags blau dargestellt werden.

      Stylesheets einbinden

      Eine CSS Style Definition kann auf zwei Möglichkeiten in eine HTML Datei eingebunden werden. Zum einen, wie im obigen Fall, das die Stylesheet-Anweisungen in einer ausgelagerten *.css Datei vorliegen, oder, das die Styleanweisungen im <head> Bereich jeder Seite definiert werden.
      Eine weitere Möglichkeit, ist die Verwendung des style-Attributes bei HTML Tags, die auf diese Weise direkt formatiert werden.

      1. Einbindung einer ausgelagerten CSS Datei:
      <link rel="stylesheet" href="style.css" type="text/css">
      Diese Anweisung kommt in den Head-Bereich jeder HTML Seite, die die Style-Definitionen verwenden soll. Über das href-Attribut wird auf die Adresse der Stylesheet Datei verwiesen.
      2. Styledefinition im head-Bereich
      Die Styledefinitionen im <head> Bereich werden durch den <style> Tag umschlossen. Das obere Beispiel würde wie folgt eingebunden werden:

      PHP-Quellcode

      1. <style type="text/css">
      2. p {color: #0000ff}
      3. </style>


      Hierbei steht man natürlich wiederum vor der Problematik, dass das Stylesheet bei einer Änderung in jeder Datei geändert werden muss.
      3. Styledefinitionen bei einem Element
      Man kann CSS Style, durch das style-Attribut direkt bei einem Element definieren. Das obere Beispiel würde wie folgt aussehen:

      PHP-Quellcode

      1. <p style="color: #0000ff">Der Text</p>
      Elemente und Klassen

      Nun, wenn Sie nach dem beschriebenen Schema vorgehen, können Sie jeden HTML Tag (jeden sichtbaren) über CSS vordefinieren. So definiert folgende CSS Anweisung, das alle Überschriften (<h1>) Rot sein sollen.

      PHP-Quellcode

      1. h1 { color: #ff0000 }


      Was ist nun, wenn Sie mehrere Farben für <h1>-Überschriften definieren möchten. So soll z.B. eine Überschrift grün, die andere Rot sein.
      Auch hierfür hat CSS eine Lösung. Man kann einzelne Klassen definieren. Diese Klassen sind ebenfalls Styledefinitionen (wie gewohnt), nur muss von dem HTML-Befehl direkt auf die Klasse verwiesen werden, wenn dieses Element über die jeweilige Klasse definiert werden soll.

      Ein Beispiel veranschaulicht dies:

      PHP-Quellcode

      1. style.css
      2. .rot {color: #ff0000}
      3. .gruen {color: #00ff00}
      4. css_1.html
      5. <html><head>
      6. <title>
      7. CSS - Beispiel 2
      8. </title>
      9. <link rel="stylesheet" href="style.css" type="text/css">
      10. </head>
      11. <body>
      12. <h1 class="rot">Rote Ueberschrift</h1>
      13. <h1 class="gruen">Gruene Ueberschrift</h1>
      14. </body>
      15. </html>
      Alles anzeigen


      Das Ergebnis im Browser (kann man sich schon vorstellen):

      CSS Klassen anwenden


      Über die class-Attribute muss also auf die Klassendefinition in der CSS Datei verwiesen werden. Eine Klasse erster Ebene beginnt mit einem Punkt, in geschweiften Klammern kommt die CSS Definition.

      Was ist nun eine Klasse erster Ebene?

      Eine Klasse erster Ebene ist für alle HTML Tags, die sich im <body> Bereich befinden, anwendbar.
      Man kann auch Klassen definieren, die sich nur auf einen HTML Tag beschränken. Die Klasse kann dann von anderen Tags nicht mehr aufgerufen werden.
      Diesen Sachverhalt kann man auf unser 2. Beispiel übertragen. Dabei müssen Sie die Klassendefinitonen wie folgt verändern.

      PHP-Quellcode

      1. style.css
      2. h1.rot {color: #ff0000}
      3. h1.gruen {color: #00ff00}


      Es werden wie Sie sehen, wiederum zwei Klassen definiert. Diese Klassen können jedoch nur von <h1> Tags aufgerufen werden. Ein Aufruf z.B. über <p class="rot"> würde nicht "funktionieren".

      Mehrere HTML Befehle "gleichzeitig" definieren

      Man kann auch mehrere HTML Befehle "in einem" über CSS definieren. So haben Sie z.B. eine Standardfarbe, allgemein für Überschriften. Folgende CSS Definition definiert, das die h1-h6 Tags alle Grün dargestellt werden sollen.

      PHP-Quellcode

      1. h1, h2, h3, h4, h5, h6 {color: #00ff00 }


      Nun, wenn man jetzt einen Überschriftstyp noch genauer definieren möchte, z.B. die Schriftart, dann kann man diese Definition einfach darunter setzten.

      PHP-Quellcode

      1. style.css
      2. h1, h2, h3, h4, h5, h6 {color: #00ff00 }
      3. h2 {font-family: Arial}

      PHP-Quellcode

      1. css_2.html
      2. <html><head>
      3. <title>
      4. CSS - Beispiel 3
      5. </title>
      6. <link rel="stylesheet" href="style.css" type="text/css">
      7. </head>
      8. <body>
      9. <h1>Überschrift 1</h1>
      10. <h2>Überschrift 2</h1>
      11. </body>
      12. </html>
      Alles anzeigen


      Das Ergebnis sieht im Browser wie folgt aus:


      Verschachtelte CSS Anweisungen


      Zunächst werden alle Überschriften so definiert, das die Textfarbe Grün sein soll. In der zweiten Zeile bekommt speziell die Überschrift h2 noch die Eigenschaft, das Sie von der Schriftart Arial sein soll.

      Kommentare in CSS

      Ja, innerhalb einer Styledefinition können Sie Kommentare verwenden, diese dienen dem besseren Verständnis des CSS Codes. Kommentare werden vom Browser, der den CSS Code interpretiert einfach übersehen.

      PHP-Quellcode

      1. h1 { color: #ff0000 } /* dies ist ein Kommentar */


      So jetzt seid ihr etwas in css eingeführt

      MFG lassu

      PS: Wer ernsthaft mit css coden möchte, sollte natürlich noch mehr dazu lernen und am besten ein handbuch kaufen!

      [COLOR="Green"]~Lunatic Edit: Bitte nächstes mal Quelle angeben, CSS - Einstieg in CSS - Eine Einfhrung[/COLOR]
    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • Hehe nich schlecht der Guide, selber geschrieben?
      Ein Manko hab ich noch =)
      PS: Wer ernsthaft mit css coden möchte, sollte natürlich noch mehr dazu lernen und am besten ein handbuch kaufen!


      Ich denke es is nicht nötig extra ein Buch zu kaufen um CSS zu lernen, dass Geld dazu investiert man lieber in anständige Bücher wie z.B. PHP (<3)

      Eine sehr sehr gute Anlaufstelle für Anfänger wie auch für Fortgeschrittene ist
      CSS 4 You
      Es hat sehr schöne Tutorials für Anfänger sowie eine sehr umfangreiche Referenz da :)

      Lg
      Luna