1. Abkürzungsregeln für CSS-Schriftartattribute
Im Allgemeinen wird CSS zum Festlegen von Schriftartattributen verwendet:
Schriftstärke:fett;
Schriftstil:kursiv;
Schriftartvariante:Kapitälchen;
Schriftgröße:1em;
Zeilenhöhe:1,5em;
Schriftfamilie:verdana,sans-serif;
Sie können sie alle in eine Zeile schreiben:
Schriftart: fett kursiv Kapitälchen 1em/1,5em Verdana, serifenlos;
Scheint das nicht viel einfacher zu sein? Es gibt nur eines zu beachten: Diese Kurzschriftmethode funktioniert nur, wenn die Eigenschaften „font-size“ und „font-family“ gleichzeitig angegeben werden. Auch wenn Sie „font-weight“, „font-style“ und „font-variant“ nicht festlegen, werden Standardwerte verwendet. Denken Sie also daran.
2. Standardwert des CSS-Rahmens
Normalerweise können Sie die Farbe, Breite und den Stil des Rahmens festlegen, z. B.:
Rand: 3 Pixel fest #000;
Dadurch erscheint der Rand 3 Pixel breit, schwarz und einfarbig. Tatsächlich müssen Sie hier jedoch nur den Stil angeben.
Wenn nur der Stil angegeben ist, werden für andere Eigenschaften Standardwerte verwendet. Im Allgemeinen ist die Standardbreite des Rahmens mittel, was im Allgemeinen 3 bis 4 Pixel entspricht. Wenn dieser Wert genau richtig ist, müssen nicht so viele Einstellungen vorgenommen werden.
3. Verwenden Sie zwei Klassen gleichzeitig für Elemente
Im Allgemeinen wird ein Element auf eine Klasse (Klasse) festgelegt. Dies bedeutet jedoch nicht, dass nicht zwei verwendet werden können. Tatsächlich können Sie Folgendes tun:
<p class="text side">…</p>
Geben Sie dem P-Element gleichzeitig zwei Klassen, getrennt durch Leerzeichen, sodass alle Attribute der Text- und Nebenklassen zum P-Element hinzugefügt werden. Wenn es einen Konflikt zwischen den Attributen in den beiden Klassen gibt, wird das später festgelegte Attribut wirksam, dh die später in der CSS-Datei platzierten Attribute der Klasse werden wirksam.
Ergänzung: Für eine ID können Sie weder <p id="text side">…</p> noch so schreiben
4. CSS für den Dokumentendruck
Viele Websites verfügen über eine druckspezifische Version, die jedoch nicht unbedingt erforderlich ist, da der Ausdruck mithilfe von CSS gestaltet werden kann.
Mit anderen Worten: Sie können zwei CSS-Dateien für die Seite angeben, eine für die Bildschirmanzeige und eine für den Druck:
<link type=“text/css“ rel=“stylesheet“ href=“stylesheet.css“ media=“screen“ />
<link type=“text/css“ rel=“stylesheet“ href=“printstyle.css“ media=“print“ />
Zeile 1 dient zur Anzeige, Zeile 2 zum Drucken, achten Sie auf das Medienattribut.
Aber was soll in das Druck-CSS geschrieben werden? Sie können es auf die gleiche Weise einrichten, wie Sie normales CSS entwerfen würden. Beim Entwerfen können Sie dieses CSS so einstellen, dass es CSS anzeigt, um seine Wirkung zu überprüfen. Möglicherweise verwenden Sie den Befehl display: none, um einige dekorative Bilder, einige Navigationsschaltflächen usw. auszuschalten.
5. Fähigkeiten zum Ersetzen von CSS-Bildern
Generell wird empfohlen, für die Anzeige von Text anstelle von Bildern Standard-HTML zu verwenden, was nicht nur schneller, sondern auch besser lesbar ist. Wenn Sie jedoch spezielle Schriftarten verwenden möchten, können Sie nur Bilder verwenden.
Wenn Sie beispielsweise ein Symbol für den Verkauf von Dingen erstellen möchten, würden Sie dieses Bild verwenden:
<h1><img src=“widget-image.gif“ alt=“Widgets kaufen“ /></h1>
Natürlich ist dies möglich, aber für Suchmaschinen ist der Ersatztext in Alt im Vergleich zu normalem Text kaum von Interesse. Dies liegt daran, dass viele Designer hier viele Schlüsselwörter einfügen, um Suchmaschinen zu täuschen. Die Methode sollte also wie folgt aussehen:
<h1>Widgets kaufen</h1>
Dann gibt es aber keine speziellen Schriftarten. Um den gleichen Effekt zu erzielen, können Sie CSS wie folgt entwerfen:
h1 {Hintergrund: URL(widget-image.gif) no-repeat; Höhe des Bildes: Texteinzug: -2000px}
Achten Sie darauf, die Bildhöhe durch die Höhe des realen Bildes zu ersetzen. Hier wird das Bild als Hintergrund angezeigt und da die Einrückung auf -2000 Pixel eingestellt ist, erscheint der echte Text 2000 Punkte auf der linken Seite des Bildschirms und ist unsichtbar. Aber Leute, die das Bild ausschalten, können es möglicherweise überhaupt nicht sehen, seien Sie also vorsichtig.
6. Eine weitere Technik des CSS-Boxmodells
Die Anpassung dieses Box-Modells ist hauptsächlich für IE-Browser vor IE6 gedacht, die die Rahmenbreite und den Leerraum in die Elementbreite einbeziehen. Zum Beispiel:
#box {Breite: 100px; Rand: 5px; Polsterung: 20px}
Nennen Sie es so:
<div id="box">…</div>
Die volle Breite des Felds sollte jetzt 150 Punkte betragen, was in allen Browsern außer IE vor IE6 korrekt ist. Aber in Browsern wie IE5 beträgt die volle Breite immer noch 100 Punkte. Dieser Unterschied kann mit der von früheren Leuten erfundenen Box-Anpassungsmethode behoben werden.
Derselbe Zweck kann jedoch mit CSS erreicht werden, um eine konsistente Anzeige zu gewährleisten.
#box {Breite: 150px}
#box div { border: 5px; padding: 20px }
So genannt:
<div id="box"><div>…</div></div>
Auf diese Weise beträgt die Breite unabhängig vom Browser 150 Punkte.
7. CSS legt fest, dass Blockelemente horizontal in der Mitte ausgerichtet sind
Wenn Sie eine Webseite mit fester Breite erstellen möchten und die Webseite horizontal zentriert sein soll, sieht das normalerweise so aus:
#content { width: 700px; margin: 0 auto }
Sie würden <div id="content"> verwenden, um alle Elemente zu umgeben. Das ist einfach, aber nicht gut genug, und Versionen vor IE6 zeigen diesen Effekt nicht. Ändern Sie das CSS wie folgt:
body { text-align: center } #content { text-align: left; width: 700px }
Dadurch wird der Inhalt der Webseite zentriert, sodass text-align: left zum Inhalt hinzugefügt wird.
8. Verwenden Sie CSS für die vertikale Ausrichtung
Eine vertikale Ausrichtung lässt sich ganz einfach mithilfe von Tischen erreichen. Stellen Sie einfach die Tischeinheit vertikal aus: Mitte. Aber das ist mit CSS nutzlos. Wenn Sie eine Navigationsleiste auf eine Höhe von 2 cm festlegen möchten und möchten, dass der Navigationstext vertikal zentriert ist, ist das Setzen dieses Attributs nutzlos.
Was ist die CSS-Methode? Stellen Sie übrigens die Zeilenhöhe dieser Wörter auf 2em ein: line-height: 2em, und das war’s.
9. Positionierung von CSS innerhalb des Containers
Ein Vorteil von CSS besteht darin, dass Sie ein Element auch innerhalb eines Containers beliebig positionieren können. Beispiel für diesen Container:
#container { Position: relativ }
Auf diese Weise werden alle Elemente im Container relativ positioniert, was wie folgt verwendet werden kann:
<div id="container"><div id="navigation">…</div></div>
Wenn Sie 30 Punkte von links und 5 Punkte von oben lokalisieren möchten, können Sie Folgendes tun:
#navigation { Position: absolut; links: 30px; oben: 5px }
Natürlich können Sie auch Folgendes tun:
Rand: 5px 0 0 30px
Beachten Sie, dass die Reihenfolge der vier Zahlen ist: oben, rechts, unten, links. Natürlich ist manchmal die Positionierung statt der Ränder besser.
Weitere CSS-Layouts und -Techniken finden Sie in den zahlreichen Tutorials auf 52CSS.com.
10. Hintergrundfarbe direkt am unteren Bildschirmrand
Die Steuerung in vertikaler Richtung liegt außerhalb der Möglichkeiten von CSS. Wenn Sie möchten, dass die Navigationsleiste wie die Inhaltsleiste direkt zum Ende der Seite reicht, ist die Verwendung einer Tabelle sehr praktisch. Wenn Sie jedoch nur CSS wie folgt verwenden:
#navigation {Hintergrund: blau; Breite: 150px}
Eine kürzere Navigationsleiste reicht nicht ganz nach unten; sie endet in der Mitte des Inhalts. Was zu tun?
Leider besteht die einzige Möglichkeit zum Schummeln darin, der kürzeren Spalte ein Hintergrundbild hinzuzufügen, dessen Breite der Spaltenbreite entspricht und dessen Farbe mit der eingestellten Hintergrundfarbe übereinstimmt.
body { Hintergrund: url(blue-image.gif) 0 0 wiederholen-y }
Sie können derzeit nicht „em“ als Einheit verwenden, da der Trick dann aufgedeckt wird, sobald der Leser die Schriftgröße ändert, und Sie nur „px“ verwenden können.