Zehn klassische CSS-Techniken_CSS/HTML

1. CSS-Regeln für die Abkürzung von Schriftartattributen

Im Allgemeinen werden Schriftartattribute mit CSS wie folgt festgelegt:

font-weight:bold;
Schriftstil:kursiv;
Schriftvariante:Kapitälchen;
Schriftgröße:1em;
Zeilenhöhe:1,5em;
Schriftfamilie:verdana,sans-serif ;

Sie können sie aber auch alle in einer Zeile schreiben:

Schriftart: fett kursiv Kapitälchen 1em/1,5em verdana,sans-serif;

Wirklich gut! Nur eine Einschränkung: Diese Kurzschriftmethode funktioniert nur, wenn sowohl die Eigenschaften „font-size“ als auch „font-family“ angegeben sind. Auch wenn Sie „font-weight“, „font-style“ und „font-variant“ nicht festlegen, werden Standardwerte verwendet. Denken Sie also daran.

2. Zwei Klassen gleichzeitig verwenden

Im Allgemeinen kann nur eine Klasse (Klasse) für ein Element festgelegt werden, aber das bedeutet nicht, dass zwei nicht möglich sind verwendet werden. Tatsächlich können Sie Folgendes tun:

...

Geben Sie zwei P-Elemente an Gleichzeitig werden Klassen durch Leerzeichen getrennt, sodass alle Attribute der Text- und Nebenklassen dem 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

...

schreiben

3. Der Standardwert des CSS-Rahmens

Normalerweise können Sie die Farbe, Breite und den Stil des Rahmens festlegen, z. B.:

Rahmen: 3 Pixel einfarbig #000

Dies zeigt den Rand als 3 Pixel breite, schwarze, durchgezogene Linie. Tatsächlich müssen Sie hier jedoch nur den Stil angeben.

Wenn nur der Stil angegeben ist, verwenden andere Attribute Standardwerte. 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.

4. CSS für den Dokumentendruck

Viele Websites haben eine Version zum Drucken, aber tatsächlich ist diese nicht erforderlich, da sie mit CSS eingestellt werden kann. Druckstil festlegen.

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:

>

Die erste Zeile dient der Anzeige und die zweite Zeile dient dem Drucken. Achten Sie auf das Medienattribut.

Aber was sollte 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 und einige Navigationsschaltflächen zu deaktivieren. Weitere Informationen finden Sie im Artikel „Druckunterschiede“.

5. Fähigkeiten zum Ersetzen von Bildern

Es wird allgemein empfohlen, Standard-HTML zu verwenden, um Text anstelle von Bildern anzuzeigen, 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:

Natürlich ist es möglich, aber für Suchmaschinen haben sie im Vergleich zu normalem Text wenig Interesse am Ersetzungstext in alt Dies liegt daran, dass viele Designer hier viele Schlüsselwörter einfügen, um Suchmaschinen auszutricksen. Die Methode sollte also so aussehen:

Widgets kaufen

Aber auf diese Weise gibt es keine spezielle Schriftart. Um den gleichen Effekt zu erzielen, können Sie CSS wie folgt entwerfen:

h1 {background: url(widget-image.gif) no-repeat; height: image height text-indent: -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 für den echten Text eine Einrückung von -2000 Pixeln eingestellt ist, erscheinen diese 2000 Punkte auf der linken Seite des Bildschirms und sind unsichtbar. Aber Leute, die das Bild ausschalten, können es möglicherweise überhaupt nicht sehen, seien Sie also vorsichtig.

6. Eine weitere Anpassungstechnik für das CSS-Box-Modell

Diese Anpassung des Box-Modells ist hauptsächlich für IE vor IE6 Für Browser , sie zählen Rahmenbreite und Leerzeichen in die Elementbreite. Zum Beispiel:

#box { width: 100px; border: 5px; padding: 20px }

Nennen Sie es so:

< p id="box">...

Zu diesem Zeitpunkt sollte die volle Breite der Box 150 Punkte betragen, was in allen Browsern der Fall ist IE-Browser vor IE6 Alle sind auf dem Gerät korrekt. 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.

Doch derselbe Zweck kann mit CSS erreicht werden, um eine konsistente Anzeige zu gewährleisten.

#box { width: 150px } #box p { border: 5px; padding: 20px }

Aufruf wie folgt:

...

Auf diese Weise beträgt die Breite unabhängig vom Browser 150 Punkte.

7. Zentrierte Ausrichtung von Blockelementen

Wenn Sie eine Webseite mit fester Breite erstellen möchten und möchten, dass die Webseite horizontal zentriert wird, ist dies normalerweise so dies:

#content { width: 700px; margin: 0 auto }

Sie würden

verwenden. 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, um die vertikale Ausrichtung zu verwalten.

Die vertikale Ausrichtung kann einfach mithilfe von Tabellen erreicht werden. Stellen Sie einfach die Tabelleneinheit „vertikal-align: middle“ ein. 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 fertig.

9. CSS-Positionierung innerhalb eines Containers

Ein Vorteil von CSS besteht darin, dass Sie ein Element auch innerhalb eines Containers beliebig positionieren können. Zum Beispiel für diesen Container:

#container { position: relative }

Auf diese Weise werden alle Elemente im Container relativ positioniert. Sie können ihn verwenden so:

...

Wenn Sie 30 Punkte nach links und 5 Punkte nach oben lokalisieren möchten, gehen Sie wie folgt vor:

#navigation { position: absolute; top: 5px }

Natürlich können Sie Folgendes tun:

Rand: 5px 0 0 30px

Beachten Sie, dass die Reihenfolge der 4 Zahlen ist: oben , rechts, unten, links. Natürlich ist manchmal die Positionierung statt der Ränder besser.

10. Die Hintergrundfarbe, die direkt bis zum unteren Bildschirmrand geht

wird in vertikaler Richtung gesteuert und kann nicht durch CSS gesteuert werden. Wenn Sie möchten, dass die Navigationsleiste wie die Inhaltsleiste direkt zum Ende der Seite reicht, ist es sehr praktisch, eine Tabelle zu verwenden. Wenn Sie jedoch nur CSS wie folgt verwenden:

#navigation { Hintergrund: blau; Breite: 150px }

Eine kürzere Navigationsleiste geht nicht direkt nach unten, sondern endet, wenn der Inhalt zur Hälfte endet. Was zu tun?

Leider besteht die einzige Möglichkeit zu betrügen darin, der kürzeren Spalte ein Hintergrundbild hinzuzufügen, dessen Breite der Spaltenbreite entspricht und dessen Farbe der eingestellten Hintergrundfarbe entspricht.

body { background: url(blue-image.gif) 0 0 repeat-y }

Sie können em derzeit nicht als Einheit verwenden, weil in diesem Sobald der Leser die Schriftgröße ändert und dieser Trick aufgedeckt wird, können nur px verwendet werden.