HTML Text und Textstruktur mit CSS gestalten by ojp13483

VIEWS: 0 PAGES: 10

									Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien




       Tutorium


       HTML: Text und Textstruktur
       mit CSS gestalten


       Martin Stricker
       martin.stricker@rz.hu-berlin.de
       23. Juni 2004
Schriftarten und generische Schriftfamilien


     Schriftarten werden mit font-family definiert
     Es ist üblich, eine Aufzählung mehrerer Schriften anzugeben, für
     den Fall, dass bestimmte Schriften nicht auf dem System des
     Users vorhanden ist. Beispiel:
     font-family:Verdana,Helvetica,Arial,sans-serif;
     Zuletzt sollte immer eine "generische" Schriftfamilie stehen, wie
     sans-serif (serifenlose Schrift), serif, monospace (feste
     Laufweite)
     Sollte keine der angegebenen Schriften vorhanden sein, nutzt der
     Client die Schrift, die in seinen Einstellungen für die
     entsprechende generische Schriftfamilie gewählt ist




    Hermann von Helmholtz-Zentrum für Kulturtechnik
    Übung: Wissensmanagement mit Neuen Medien
    Tutorium/ HTML: Text mit CSS
Häufige Web-Schriften

                                                      Arial    sans-serif
The quick brown Fox
The quick brown Fox
                                                      Verdana sans-serif



The quick brown Fox
                                                      Tahoma   sans-serif


                                                      Times    serif
The quick brown Fox
                                                      Courier monospace
The quick brown
Fox
    Hermann von Helmholtz-Zentrum für Kulturtechnik
    Übung: Wissensmanagement mit Neuen Medien
    Tutorium/ HTML: Text mit CSS
Schriftgröße

             CSS-Eigenschaft font-size
             Angabe (u.a.) in:
              • Bildschirmpixel, Bsp: font-size:12px
              • Punkt (1/72 Inch), Bsp: font-size:10pt
              • in (Inch), cm, mm
              • "relativ" zur Schriftgröße des Elternelements:
                Prozentwerte %, em, ex
             "Absolute" Größenangaben gibt es praktisch nicht, da
              • z.B. cm und Inch in Pixel umgerechnet werden müssen,
              • das Umrechnungsverhältnis (Pixel je Inch, dot per inch, dpi) je
                nach Betriebssystem und Software unterschiedlich ist,
              • Kalibrierung auf tatsächliche Monitorgröße nicht stattfindet,
              • Pixelangaben aufgrund unterschiedlicher Monitorauflösungen
                und -größen ebenfalls relativ sind

    Hermann von Helmholtz-Zentrum für Kulturtechnik
    Übung: Wissensmanagement mit Neuen Medien
    Tutorium/ HTML: Text mit CSS
Weitere Schriftstile


        color - Textfarbe, Angabe
          • hexadezimal - color:#003366
          • als rgb-Schema - color:rgb(0,51,102)
          • Farbnamen - color:blue
        font-weight:bold oder normal - "fett"
        font-style:italics oder normal - "kursiv"
        text-decoration:underline oder none - "unterstrichen"
        font-variant:small-caps oder normal - "Kapitälchen"
        line-height - Zeilenabstand in Abhängigkeit der Angabe in
        font-size, es sind diesselben Maßeinheiten möglich



     Hermann von Helmholtz-Zentrum für Kulturtechnik
     Übung: Wissensmanagement mit Neuen Medien
     Tutorium/ HTML: Text mit CSS
Absatzformatierung



                 margin (und die Derivate margin-left, -top, -right
                 und -bottom) bestimmen den Außenabstand, Beispiel:
                 margin-top:10px;margin-bottom:10px
                 Stoßen zwei Elemente mit Außenabstand aufeinander,
                 werden die Abstände miteinander verrechnet
                 mit padding-left bzw. padding-right lassen sich
                 Absatzelemente (und andere Blockformate) einrücken
                 text-indent bestimmt das Verhalten der ersten Zeile:
                   • text-indent:10px - erste Zeile rückt 10 Pixel ein
                   • text-indent:-8px - erste Zeile rückt 8 Pixel aus



    Hermann von Helmholtz-Zentrum für Kulturtechnik
    Übung: Wissensmanagement mit Neuen Medien
    Tutorium/ HTML: Text mit CSS
Listen



                          Eine nummerierte (ol, ordered list) oder nicht
                          nummerierte Liste (ul, unordered list) kann per CSS
                          gestaltet werden:
                           • pauschal für alle Listenblöcke über ul bzw. ol
                           • für jeden Listenpunkt einzeln über li (list item,
                             Listenpunkt)
                          Der linke Standardeinzug der Listenpunkte von
                          üblicherweise 30px - bezogen auf den Textblockrand
                          - kann über padding-left verändert werden




    Hermann von Helmholtz-Zentrum für Kulturtechnik
    Übung: Wissensmanagement mit Neuen Medien
    Tutorium/ HTML: Text mit CSS
list-style-type

               Mit list-style-type lassen sich die Listenpunkte
               (bei ul) bzw. Aufzählungszeichen (bei ol) bestimmen
               Mögliche Werte bei ul:
                • list-style-type:disc - "Bullets"
                • list-style-type:circle - Kreis
                • list-style-type:square - Quadrat
                • list-style-type:none
               Mögliche Werte bei ol:
                • list-style-type:decimal - 1,2,3,4 usw.
                • list-style-type:upper-roman - I.,II.,III.,IV. usw.
                • list-style-type:lower-roman - i.,ii.,iii.,iv. usw.
                • list-style-type:upper-alpha - A,B,C,D usw.
                • list-style-type:lower-alpha - a,b,c,d usw.


     Hermann von Helmholtz-Zentrum für Kulturtechnik
     Übung: Wissensmanagement mit Neuen Medien
     Tutorium/ HTML: Text mit CSS
list-style-image


            Mit list-style-image kann eine eigene Grafikdatei als
            Listenzeichen verwendet werden.
            Beispiel für eine nicht nummerierte Liste, als zentrales Format
            definiert:
            ul {list-style-image:url(bilder/mybullet.gif)}

            Die referenzierte Grafik muss sich in einem Web-üblichen
            Grafikformat (.jpg,.gif,.png) befinden
            Für den angegebenen Pfad gelten dieselben Verweisregeln
            wie bei Hyperlinks und Bildern. Bei einem relativen Pfad ist
            das Ausgangsdokument die Datei, in der der CSS-Stil notiert
            ist (z.B. ein externes Stylesheet)



     Hermann von Helmholtz-Zentrum für Kulturtechnik
     Übung: Wissensmanagement mit Neuen Medien
     Tutorium/ HTML: Text mit CSS
list-style-position




            Mit list-style-position kann bestimmt werden, ob das
            Listenzeichen vor dem Textblock steht, oder am Anfang der
            ersten Zeile mit Textumfluss
            Mögliche Werte:
             • list-style-position:inside
               ... Listenzeichen mit Textumfluss innerhalb
             • list-style-position:outside
               ... Listenzeichen ausgerückt




     Hermann von Helmholtz-Zentrum für Kulturtechnik
     Übung: Wissensmanagement mit Neuen Medien
     Tutorium/ HTML: Text mit CSS

								
To top