Sie sind nicht angemeldet.

Tippspiel

Paule bei Facebook & Twitter

Google-Anzeigen

Empfehlung

Lieber Besucher, herzlich willkommen bei: Paules-PC-Forum.de. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Paule

Moderator

  • »Paule« ist der Autor dieses Themas

Beiträge: 6 936

Registriert: 27. Oktober 2008

  • Nachricht senden

1

Donnerstag, 13. November 2008, 15:45

Rund um CSS

Autor: michi

Rund um CSS
  • Was ist der Vorteil von CSS?

    Zitat


    • Formatsprache für HTML-Elemente
      Mit HTML definieren Sie den grundsätzlichen Aufbau Ihrer Web-Seiten, die Elemente, die Strukturen, die Verweise, die referenzierten Elemente wie Grafiken, Multimedia usw. Aber HTML ist eigentlich nicht dazu gedacht, um exakt anzugeben, wie ein Element genau aussehen soll. So können Sie in HTML eine Überschrift definieren und dabei angeben, dass es sich um eine Überschrift 1. Ordnung handeln soll. Sie können innerhalb von HTML aber nicht bestimmen, wie groß, in welcher Schriftart usw. die Überschrift dargestellt werden soll. Das übernimmt der Web-Browser bei der Anzeige. Er benutzt dabei eine Mischung aus Grundeinstellungen, die der Anwender vornehmen kann, und fest programmierten Darstellungen einzelner HTML-Elemente.

      An diesem Punkt setzen die Cascading Stylesheets (CSS) ein. Es handelt sich dabei um eine unmittelbare Ergänzungssprache, die vorwiegend für HTML entwickelt wurde. Sie klinkt sich nahtlos in HTML ein und erlaubt das beliebige Formatieren einzelner HTML-Elemente. Mit Hilfe von CSS Stylesheets können Sie beispielsweise festlegen, dass alle Überschriften 1. Ordnung 24 Punkt groß sind, in roter Helvetica-Schrift, mit einem Nachabstand von 16 Punkt und mit einer grünen doppelten Rahmenlinie oberhalb dargestellt werden. Sie können aber genauso gut auch für einen beliebigen Text festlegen, dass nur dieser Text 3 Zentimeter groß sein soll und eine gelbe Hintergrundfarbe erhält. Daneben enthält CSS auch Möglichkeiten zum punktgenauen platzieren von Elementen am Bildschirm und für andere Ausgabemedien wie Drucker oder Audio-Systeme bereit.

      CSS erlaubt es, zentrale Formate zu definieren, beispielsweise für alle Überschriften erster Ordnung, oder für alle Textabsätze mit einem bestimmten Klassennamen, oder für kursiv ausgezeichneten Text, der innerhalb einer Tabellenzelle vorkommt. Die zentralen Formate können sich auf eine HTML-Datei beziehen, aber auch in eine externe Style-Datei ausgelagert werden, die Sie dann in allen gewünschten HTML-Dateien einbinden können. So werden einheitliche Formatvorgaben möglich, und der HTML-Code wird von unnötigem Ballast befreit.

      CSS ist mit HTML eng verzahnt. Es lohnt sich daher, beide Sprachen gleichzeitig zu erlernen. Im HTML-Kapitel der vorliegenden Dokumentation werden Sie bei den Beschreibungen zu einzelnen HTML-Elementen deshalb immer auch auf die Möglichkeiten hingewiesen, wie Sie diese Elemente mit Hilfe von CSS gestalten können.

      CSS ist ebenso wie HTML eine Klartextsprache. Auch für CSS brauchen Sie keine bestimmte Software, es genügt ein Texteditor. CSS ist wie HTML eine offen dokumentierte und vom W3-Konsortium standardisierte Sprache, die Sie frei und ohne Lizenzprobleme verwenden können.

      Quelle: SelfHtml



  • Eine CSS für mehrere HTML Seiten

    Sollten die HTML ein unterschiedliches Layout haben, wird nicht für jede HTML eine eigene CSS benötigt. Das erreicht man mit einer "Class" Anweisung.

    Der CSS-Code sieht beispielsweise so aus:

    Quellcode

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    BODY.ws 
    {
     background-color: #FFFFFF;
     color: #000000;
    }
     
    BODY.gr 
    {
     background-color: #C0C0C0;
     color: #000000;
    }
     
    BODY.rt 
    {
     background-color: #FF0000;
     color: #000000;
    }

    Jeder Body Tag erhält so seine eigenen Informationen.

    Auf der jeweiligen HTML-Seite sieht der Body dann so aus:

    Quellcode

    1
    
    <BODY CLASS="ws"> Bla,bla <br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.2.0</div><br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.2.0</div><br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.2.0</div></BODY>
    Diese Seite wird also eine weiße Hintergrund haben mit schwarzem Text.


  • CSS und der HEAD Bereich

    Die CSS ist ein eigener Dateityp, um es in das HTML Formular einzufügen, muss im HEAD Bereich der HTML dieser Tag stehen. (link.css ist die CSS Datei)

    Quellcode

    1
    
    <link rel=stylesheet type="text/css" href="link.css">

    Nun werden die Informationen zusammen mit den HTML Quellencode umgesetzt.


  • Der Link wechselt vor dem anklicken die Farbe

    Beispiel

    Quellcode

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    body { 
    background-color: #ffffff; color: #000000;
    }
    A:link {
    COLOR: #0000ff; TEXT-DECORATION: none; FONT-STYLE: normal
    }
    A:visited {
    COLOR: #0000ff; TEXT-DECORATION: none; FONT-STYLE: normal
    }
    A:active {
    COLOR: #33cc00; TEXT-DECORATION: none; FONT-STYLE: normal
    }
    A:hover {
    COLOR: #33cc00; TEXT-DECORATION: none; FONT-STYLE: normal
    }


Zurzeit ist neben Ihnen 1 Benutzer in diesem Thema unterwegs:

1 Besucher

Thema bewerten