Grundlagen der WWW-Nutzung und WWW-Programmierung Alfred Wassermann
Inhaltsverzeichnis 11 Vorlesung 2 11.1 Style-Sheets.............................. 2 11.1.1 Wo werden Style-Sheets definiert?............. 2 11.1.2 Erste Style-Sheet-Befehle.................. 3 11.1.3 Mögliche Größenangaben.................. 5 11.1.4 Schriftformatierung...................... 6 11.1.5 Ränder............................ 8 11.1.6 Text-Ausrichtung....................... 8 11.1.7 Hintergund einstellen.................... 9 1
Kapitel 11 Vorlesung Übungsblatt 09: 11.1 Style-Sheets Style-Sheets, genauer Cascading Style-Sheets (CSS), ermöglichen die individuelle Gestaltung vieler Tags. Das Konzept der Style-Sheets ist vergleichbar mit den Formatvorlagen bei Microsoft Word oder den Makro-Paketen bei L A TEX. Mit Style-Sheets kann z.b. genau festgelegt werden, wie eine Überschrift 1. Grades (<h1>) dargestellt werden soll: Schriftgröße, Ausrichtung, Abstand zum nachfolgenden Text, Hintergrundfarbe, etc. Der Vorteil von Style-Sheets liegt in der genauerer Steuerung der Text-Präsentation und der besseren Verwaltung von größeren Dateimengen. Mit sorgfältiger Planung kann man in einem Web-Bereich so etwas wie Corporate Identity erzielen. So ist es möglich, mit der Änderung in einer einzigen Datei, in der das Style-Sheet definiert wird, in einem kompletten Web-Bereich das Aussehen von z.b. Überschriften 1. Grades zu verändern. Momentan existieren 2 Spezifikationen von Style-Sheets. Level 1 ist bis auf die üblichen kleinen Abweichungen, die das Leben so erschweren bei den Browsern von Microsoft und Netscape großteils realisiert. Level 2 ist bei beiden Herstellern noch eher unzureichend implementiert. Bei Level 2 ist es u.a. vorgesehen, daß drei verschiedene Formate definiert werden können. Eines für Bildschirm-Ausgabe, eines für Druck-Ausgabe und ein drittes für Audio-Ausgabe. 11.1.1 Wo werden Style-Sheets definiert? Es gibt drei Möglichkeiten Style-Sheets zu definieren: 1. Ein einzelner Tag kann durch eine Style-Sheet-Angabe verändert werden. 2. Style-Sheet-Definitionen im <head>-bereich einer Datei wirken sich auf die gesamte Datei aus. 2
3. Im <head>-bereich einer Datei kann auf eine Datei mit Style-Sheet-Definitionen verwiesen werden. Die Definitionen wirken sich dann auf alle HTML- Dateien aus, die auf diese Datei verweisen. Wir betrachten zunächst nur Möglichkeit 2 und 3. Die erste Variante werden wir später ausprobieren. Im Datei-Kopf werden Style-Sheet-Definitionen folgendermaßen gekennzeichnet: <head>... <style type="text/css"> <!--... Hier stehen die Style-Sheet-Definitionen //--> </style> </head> <body>... Um bei Browsern, die Style-Sheet-Angaben nicht verstehen, unnötige Verwirrung zu vermeiden, ist es günstig, wie im oberen Beispiel die Style-Sheet-Angaben zusätzlich mit einem HTML-Kommentar-Befehl zu umgeben. Eine externe Datei mit Style-Sheet-Definitionen bindet man so ein: <head> <link rel=stylesheet type="text/css" href="xxx.css">... </head> <body>... Dadurch werden die Definitionen aus der Datei xxx.css eingelesen. Aber nun zu den ersten Style-Sheet-Angaben. 11.1.2 Erste Style-Sheet-Befehle Die einfachste Möglichkeit, eine Style-Sheet-Angabe zu machen, ist, den Namen des Tags ohne spitze Klammern <> und dahinter in geschweiften Klammern die Style-Sheet-Information anzugeben. Beispiel: Wir wollen die Überschrift <h1> mit roter, kursiver Schrift definieren: h1 { color:red; font-style:italic; } Beim letzten Befehl vor } kann der Strichpunkt auch weggelassen werden. Man kann mehrere Definitionen zusammenfassen und schachteln: h1, h2 { font-family:helvetica; } h1 { color:red; font-style:italic; } h2 { color:#0000ff; } Kommentare kann man im Style-Sheet-Bereich genau wie in der Programmiersprache C angeben: Alles was zwischen /* und */ steht, wird ignoriert. Ein weiteres Beispiel: will man die Unterpunkte in Aufzählungen kursiv schreiben, so ist zu definieren: 3
li { font-style:italic; } Die Tags, die im Alltagsgebrauch nicht geschlossen werden, also etwa <p> und <li> sollten sicherheitshalber bei der Verwendung von Style-Sheets geschlossen werden. Style-Sheets ermöglichen auch die Definition mehrerer Varianten eines Tags. Dies geschieht mit sogenannten Format-Unterklassen. Wir können uns zum Beispiel einen grünen, roten und blauen Absatz definieren, Umlaute sollten in den Klassen-Namen vermieden werden: p.gruen { color:green; } p.rot { color:red; } p.blau { color:blue; } Dann können wir im laufenden Text setzen: <p class="gruen">hier ist grüner Text</p> <p class="rot">hier ist roter Text</p> <p class="blau">hier ist blauer Text</p> Man kann auch eine allgemeingültige Unterklasse für alle Tags definieren. Dies geht entweder über all.kursiv { font-style:italic; } oder einfach mit.kursiv { font-style:italic; } Dies kann dann zum Beispiel mit <table> <tr> <td class="kursiv">tabellenzelle<td> </tr> </table> verwendet werden. Eine allgemeine Unterklasse mit Text-Größenangabe ist meist wenig sinnvoll. Allerdings ist es möglich, prozentuale Angaben zu machen:.gross { font-size:200%; } Damit wird <h1 class="gross">titel</h1> <p class="gross">text</p> gleichmäßig größer. Formate können auch so definiert werden, daß die Neudefinition nur in Verwendung mit anderen Tags zur Geltung kommen: h1 b { font-weight:bold; font-style:italic; } 4
<h1>extra <b>fetter</b> Titel</h1> So kann dem Tag <b> in einer Überschrift <h1> eine spezielle Bedeutung gegeben werden. Ähnlich wie eine allgemeine Unterklasse kann man ein unabhängiges Format definieren. Dieses Format kann zusätzlich zu anderen Formaten verwendet werden, die für diesen Befehl definiert sind. Unabhängigen Formaten wird ein # vorangestellt. #fett { font-weight:bold; } Eingesetzt werden unabhängige Formate mittels: <li id="fett">ein Unterpunkt</li> Auch sogenannte Pseudo-Formate können mit Style-Sheets überschrieben werden: a:link { color:yellow; } a:visited { color:#00aaee; } a:active { color:#123456; } Dies sind die Einstellungen, die auch im <body>-tag mit link=, etc. eingestellt werden können. 11.1.3 Mögliche Größenangaben Folgende Längeneinheiten sind bei Style-Sheets bekannt: Zuerst die absoluten Maßeinheiten: pt pc in mm cm Punkt = 1/72 inch Pica = 12pt Inch = 2.54cm Millimeter Zentimeter Darüberhinaus gibt es einige relative Maßeinheiten: em urspr. die Breite des Buchstaben M ex die Höhe des Buchstaben X px Pixel % Prozentuale Angabe Bei Farbangaben gibt es wie üblich die vordefinierten Farbnamen wie red, green und die RGB-Angaben mit Hexadezimalwerten. Es ist noch ein drittes Schema möglich, nämlich prozentuale RGB-Angaben: a:link { color:rgb(100%,40%,70%); } setzt den Rot-Anteil auf 100%, den Grün-Anteil auf 40% und den Blau-Anteil auf 70%. Es sind auch absolute Angaben mit Werten zwischen 0 und 255 möglich. 5
11.1.4 Schriftformatierung Mit Hilfe von Style-Sheets kann die Schriftformatierung sehr präzise gewählt werden. Zuerst wird die Schriftart mit font-family: ausgewählt. Ähnlich wie beim <font face=...>-befehl können mehrere Schriftarten gleichzeitig angegeben werden. Der Browser zeigt die erste Schriftart, die im Rechner vorhanden ist, an. Beispiel: h1 { font-family:arial,helvetica; } Es können nun wieder beliebige Schriftenarten verwendet werden. Auch die dynamischen Fonts (pfrs) können verwendet werden. Enthalten die Namen der Schriftarten Leerzeichen, so sollten sie in Anführungszeichen gesetzt werden. Desweiteren gibt es einige plattformübergreifende Schriftarten, die auf jedem Betriebssystem vorhanden sein sollten. Diese sind: serif sans-serif cursive fantasy monospace Die nächste Einstellung, die getroffen werden kann, ist der Schriftstil fontstyle. Da gibt es die Variationen: italic: kursiv oblique: kursiv (funktioniert nicht mit Linux-Netscape) normal: normal Die Schriftgröße wird mit font-size:... eingestellt. Neben relativen und absoluten Maßangaben gibt es auch sogenannte ungenaue Angaben : xx-small: winzig x-small: sehr klein small: klein medium: normal large: groß x-large: sehr groß xx-large: riesig smaller: kleiner als normal larger: größer als normal 6
Mit font-weight kann der Fettigkeitsgrad der Schrift eingestellt werden. Zur Auswahl stehen: bold: fett bolder: sehr fett lighter: dünner normal: normal 100, 200, 300,...,900: sehr dünn (100) bis sehr fett (900). Nicht jede Schriftart unterstützt jeden Fettigkeitsgrad. Insbesondere bei den numerischen Angaben müssen Abstriche gemacht werden. Es existiert auch eine kompakte Schreibweise, in der alle Schriftmerkmale zusammengefasst werden. p { font: bolder italic 24pt sans-serif; } Die üblichen Varianten, wie Text unterstreichen, blinken, etc. werden mit text-decoration=... angesprochen. Es gibt die Variationen: underline: unterstreichen overline: überstreichen line-through: durchstreichen blink: blinken none: Normal-Text Allerdings kennt Netscape 4.x den overline-befehl nicht. Mit dem Befehl text-transform kann Klein- oder Großschreibung erzwungen werden, unabhängig davon wie der Text eingetippt wurde. Die Variationen sind capitalize: Erster Buchstabe im Wort groß uppercase: Alles in Großbuchstaben lowercase: Alles in Kleinbuchstaben none: keine Transformation Mit color: kann wie bereits ausprobiert die Textfarbe eingestellt werden. 7
11.1.5 Ränder Mit Style-Sheets können die Abstände eines Objektes zu den benachbarten Objekte oder zu den Fensterrändern eingestellt werden. Dazu gibt es die Befehle margin-top: oberer Rand margin-bottom: unterer Rand margin-left: linker Rand margin-right: rechter Rand Ein Beispiel: p { margin-top:10px; margin-bottom:20px; } Allerdings ist unterschiedlich, wie Netscape und Internet Explorer reagieren, wenn oberer und unterer Rand eines Elementes zusammenstoßen. Bei Netscape hat margin-top die Priorität vor margin-bottom. Beim Internet Explorer wird der größere der beiden Werte genommen. Es sind auch negative Werte zugelassen. Es gibt zudem die Möglichkeit, die Ränder in einem Befehl zusammenzzfassen: p { margin:1cm } /* 1cm in jede Richtung */ p { margin:1cm 2cm} /* 1cm in oben und unten, 2cm rechts und links */ p { margin:1cm 2cm 3cm} /* 1cm in oben, 2cm rechts und links, 3cm unten */ p { margin:1cm 2cm 3cm 4cm} /* 1cm in oben, 2cm rechts, 3cm unten, 4cm links */ 11.1.6 Text-Ausrichtung Bei Büchern ist oft eine Einrückung des ersten Wortes in einem Ansatz sehr beliebt. Dies kann mit p { text-indent:1em; } erreicht werden. Auch hier sind negative Werte erlaubt. Die Zeilenhöhe kann mit p { line-height:16pt; font-size:14pt } eingestellt werden. Die vertikale Ausrichtung zum Beispiel bei Tabellen kann mit dem Befehl td { vertical-align:top; } eingestellt werden. Mögliche Werte sind: top 8
bottom middle baseline: an der Schrift-Grundline ausrichten sub: Tieferstellen super: Höherstellen text-top: am oberen Schriftrand ausrichten text-bottom: am unteren Schriftrand ausrichten. Die horizontale Ausrichtung wird mit text-align oder alignment eingestellt. Hier sind folgende Werte möglich: left right center justify: Blocksatz 11.1.7 Hintergund einstellen Die im folgenden beschriebenen Befehle wirken sich auf Tags auf, die Blöcke bilden. Dies sind die Überschriften h1 bis h6, p, p, div, blockquote, address, pre. Dazu kommen Befehle wie div, center, th, td, td, tr, table und sogar body. Die Hintergrundfarbe wird mit background-color eingestellt. Ein Hintergrundbild wird mit table { background-image:url(xxx.gif); } eingebunden. In der Klammer von url(...) muß ein gültiger Verweis auf eine GIF- oder JPEG-Datei im Internet sein. Normalerweise wird der jeweilige Block mit dem Hintergrundbild parkettiert. Dies kann unterbunden werden mit dem Befehl table { background-image:url(xxx.gif); background-repeat:no-repeat; } Es gibt insgesamt folgende Variationen: repeat: parkettieren no-repeat: nicht parkettieren repeat-x: nur horizontal parkettieren repeat-y: nur vertikal parkettieren Beim Internet Explorer gibt es eine weitere Option: Der Befehl background-attachment: legt fest, ob das Hintergrundbild beim scrollen mitläuft oder nicht. Gültige Werte sind fixed oder scroll. 9
Literaturverzeichnis [1] Born, Günter: Referenzhandbuch Dateiformate, Addison-Wesley (1996). [2] Bruns, B., Gajewski, P.: Multimediales Lernen im Netz, Springer-Verlag (1999). [3] Bush, Vannevar: As we may think, in The Atlantic Monthly, July 1945, siehe http://www.w3.org/history/1945/vbush/ [4] Haaß, Wolf-Dieter: Handbuch der Kommunikationsnetze, Springer-Verlag (1997). [5] Hauben, Michael: History of ARPANET, siehe http://www.dei.isep.ipp.pt/docs/arpa-contents.html [6] Klau, Peter: Das Internet, Thomson Publishing (1995). [7] Krol, Ed: Die Welt des Internet, O Reilly-Verlag (1995). [8] Levine, John, Young, Margaret: More Internet für Dummies, Thomson Publishing (1996). [9] Stefan Münz: SELFHTML, erhältlich bei http://www.teamone.de/selfhtml [10] Rost, Martin, Schack, Michael (Hrsg.): Der Internet Praktiker (1995), Heise-Verlag. [11] Schulmeister, Rolf: Grundlagen hypermedialer Lernsysteme, Addison- Wesley (1996). 10