Tipps und Tricks
Diesen Artikel als PDF ansehen/downloadenWas CSS auch noch kann
Im Anschluss an den CSS-Artikel der letzten Ausgabe stellen wir hier einige nützliche Sprachelemente von CSS vor. Universeller Selektor(dl) Die Anweisung * {color: black} weist jedem Element, welches keine Angaben über die Farbe hat, die Farbe schwarz zu. Mit dem Stern lassen sich also Default-Angaben machen. Wird ein Element mit einer anderen Farbe versehen, z.B. p {color: red}, so gilt für
die Farbe rot, weil diese Angabe spezifischer ist. Bei den Angaben .class {Definition} und #id {Definition} ist der Stern-Selektor implizit vorhanden. Man könnte auch *.class und *#id schreiben. Man kann den Stern sogar dann weglassen, wenn er alleine steht; zur Verdeutlichung sollte er jedoch geschrieben werden.
Pseudo-Elemente :before / :after
(dl) Gewöhnliche CSS-Elemente definieren den Stil eines HTML-Elements. Daneben gibt es so genannte Pseudo-Elemente, welche den Stil von bestimmten Teilen eines HTML-Dokuments festlegen können, auch wenn kein entsprechendes HTML-Element existiert. Das Element :first-line beispielsweise betrifft immer die erste Zeile (p:first-line die erste Zeile eines
-Abschnitts), unabhängig davon, welche Wörter nun der Browser konkret in der ersten Zeile unterbringt. Mit :first-letter kann man Initialbuchstaben erzeugen. Besonders nützlich, aber durch die Browser erst teilweise unterstützt sind :before und :after. Damit kann man vor oder nach jedem Element einen beliebigen Inhalt einfügen.Hier wird bei jedem Absatz, der mit der Klasse .neu ausgezeichnet ist, ein entsprechendes Symbolbildchen eingefügt, ohne dass das im HTML-Code jedes Mal geschrieben werden muss:
p.neu:before { content: url("icons/neu.gif");}
ID-Selektoren
(dl) Während ein Klassenselektor auf beliebig viele Bestandteile einer Seite angewendet werden kann, dient der ID-Selektor dazu, ein einziges Element mit bestimmten Merkmalen zu versehen. Der Eintrag #treffer {font-size: 24pt} definiert die Schriftgrösse für den ersten HTML-Tag, der mit dem Attribut id="treffer" versehen ist. Sind weiter unten noch weitere Elemente so bezeichnet, ändert sich an ihnen nichts.
Die häufigste Anwendung finden ID-Selektoren bei Positionsrahmen. Inhalte können mit CSS auf der Seite frei platziert werden, indem ein
Eingebettete Elemente definieren
(dl) Ausgangslage: Man möchte, dass gewöhnlicher Text mit dem HTML-Tag
blau erscheint, innerhalb einer Tabelle hingegen rot.
Das CSS-Skript
p {color: blue}
td {color: red}
erfüllt den Zweck nicht, weil p in td eingebettet und somit spezifischer ist.
Hingegen funktioniert
body {color: blue}
td {color: red}
Da p nicht definiert ist, erbt es die Eigenschaften des Elements, in das es eingebettet ist. Das ist normalerweise body, in einer Tabelle ist es td, denn td ist seinerseits in body eingebettet und daher spezifischer. Allerdings wird so im gesamten body alles blau, was nicht spezifiziert ist, und das ist vielleicht unerwünscht. Innerhalb von td wird alles rot, auch das ist vielleicht nicht im Sinne des Erfinders.
Die folgende Lösung ist besser, weil sie nur das definiert, was in der Ausgangslage gewünscht wurde und sich nicht noch auf anderes auswirken kann.
p {color: blue}
td p {color: red}
Mit einem Leerzeichen zwischen zwei Elementen lässt sich eine Angabe über eingebettete Elemente machen. Dabei sind auch Ketten von mehr als zwei Elementen erlaubt.
table table p {color: green} macht den Absatztext immer dann grün, wenn er in einer Tabelle ist, die ihrerseits in eine Tabelle verschachtelt ist. Das funktioniert, obwohl zwischen den einzelnen Elementen noch weitere eingebettet sind (td und tr).
Vererbung
(dl) Wozu gibt es eigentlich die Angabe inherit, wenn doch sowieso alles vererbt wird, was nicht explizit definiert ist? Man braucht die Angabe, wenn das Element schon definiert ist, aber in speziellen Fällen die Vererbung Priorität haben soll:
p {color:red;}
div {color:blue;}
div p {color:inherit;}
Die letzte Zeile besagt, dass ein
-Element, das in einem
-Text im
Kasten: Tipps aus www.hilfdirselbst.ch
Das Forum www.hilfdirselbst.ch ist eine Fundgrube für Tipps und Tricks zu den gängigen Publishing-Programmen. Die Moderatoren tragen für uns jeweils die «Rosinen» zur Veröffentlichung in der Zeitschrift zusammen.
GoLive
Einsatz von iFrames
(Urs Gamper) Mit GoLive kann man standardmässig nicht ohne weiteres iFrames einfügen. Es gibt eine Erweiterung von André Thijsen, welche kostenlos unter http://share.studio.adobe.com/axAssetDetailSubmit.asp?aID=6024 heruntergeladen werden kann. Die Erweiterung wird (bei geschlossenem Programm) nach dem Entpacken im Programmordner unter Adobe GoLive 6 > Modules > Extend Scripts installiert. Nach dem erneutem Programmstart befindet sich ein neues Symbol in der Objekt-Palette Allgemein, welches per Drag and Drop am vorgesehenen Ort platziert werden kann.
GoLive
Bibliothek websiteübergreifend
(Urs Gamper) Es kommt immer wieder vor, dass gewisse Tabellenformate, Texte oder aber auch einfach nur gewisse Teile von Code über mehrere Websites verwendet werden. Um diese für alle Sites zugänglich zu machen, kann das entsprechende Objekt über Drag and Drop in die Bibliothek der Objektpalette gezogen werden. Komplexe Tabellen oder auch php/asp-Code steht so innert Sekunden zum Einsatz bereit.
IllustratorTexte mit Verläufen füllen
(Wofgang Reszel) Leider kann man in Illustrator Texte erst mit Verläufen füllen, wenn man sie vorher in Pfade umgewandelt hat.
Lösung dieses Problems ist der altbekannte, aber oft vergessene Trick, dass man in Illustrator Texte direkt als Schnittmaske verwenden kann. Man legt also den zu füllenden Text über ein Rechteck, welches den gewünschten Verlauf enthält und wählt den Befehl Objekt > Schnittmaske > Erstellen. Der Text bleibt bearbeitbar und mit dieser Methode ist es sogar möglich, Text mit Bildern zu füllen.
Die zweite Möglichkeit bedient sich der seit Illustrator 9 verfügbaren Aussehen-Palette. Man fügt mittels Neue Fläche hinzufügen aus dem Paletten-Menü der Aussehen-Palette dem ausgewählten Textobjekt eine neue Fläche hinzu, welche man nun nach Belieben mit Verläufen und Mustern füllen kann. Doch für Muster ist der Weg über die Aussehen-Palette eigentlich überflüssig, da sich Texte auch direkt mit Mustern füllen lassen.
Im Übrigen kann man bei einem Textobjekt mittels des Effekts Effekt > Pfad > Konturlinie jedem Buchstaben im Text einen eigenen Verlauf zuweisen. Nachdem man dem Textobjekt diesen Effekt zugewiesen hat, wählt man mit dem Textwerkzeug einzelne Buchstaben aus und weist ihnen einen Verlauf zu.