10 gute CSS-Kenntnisse, die Sie vielleicht nicht kennen_Erfahrungsaustausch

Diese Übersetzung ist weder vom Autor noch von der Website autorisiert. Alle Rechte liegen beim ursprünglichen Autor und der ursprünglichen Website.
Wenn Sie vom ursprünglichen Autor oder der ursprünglichen Veröffentlichungswebsite autorisiert sind, können Sie diese Übersetzung frei verwenden.

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

Im Allgemeinen werden Schriftartattribute mit CSS wie folgt festgelegt:

Schriftstärke: fett;
Schriftstil: kursiv;
Schriftart:1em;
Schriftart:verdana,sans-serif; >Sie können sie aber auch alle in einer Zeile schreiben:

Schriftart: Bold Italic Kapitälchen 1em/1,5em Verdana,Sans-Serif

Toll! 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, dies bedeutet jedoch nicht, dass nicht zwei verwendet werden können. Tatsächlich können Sie Folgendes tun:


...


Geben Sie dem P-Element gleichzeitig zwei Klassen, getrennt durch Leerzeichen, sodass der gesamte Text und die Seite vorhanden sind Dem P-Element werden Klassenattribute hinzugefügt. 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 nicht so schreiben
...
, noch können Sie so schreiben

3. Der Standardwert des CSS-Rahmens

ist normalerweise in Ordnung. Legen Sie Farbe, Breite und Stil des Rahmens fest, z. B.:
Rahmen: 3 Pixel einfarbig #000
Dadurch wird der Rahmen 3 Pixel breit, schwarz und einfarbig angezeigt. 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 CSS zum Festlegen des Druckstils verwendet 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:





Nr 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 generell empfohlen, Standard-HTML zu verwenden, um Text anstelle von Bildern anzuzeigen. Dies ist nicht nur schneller, sondern auch besser lesbar. Wenn Sie jedoch spezielle Schriftarten verwenden möchten, können Sie nur Bilder verwenden.

Wenn Sie beispielsweise das ganze Icon verkaufen möchten, können Sie dieses Bild verwenden:




Natürlich ist es möglich, aber für Suchmaschinen, Es ist normal, dass sie im Vergleich zu Text wenig Interesse am Ersatztext in Alt haben. Dies liegt daran, dass viele Designer hier viele Schlüsselwörter einfügen, um Suchmaschinen zu täuschen. 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 }

Pay Die Aufmerksamkeit auf die Bildhöhe wird durch die Höhe des realen Bildes ersetzt. 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 gilt hauptsächlich für IE-Browser vor IE6. Sie zählen die Rahmenbreite und den Leerraum als übergeordnete Elemente. Zum Beispiel:

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

Nennen Sie es so:

...

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.

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

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

Aufruf wie folgt:

...

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

7. Blockelemente in der Mitte ausrichten

Wenn Sie eine Webseite mit fester Breite erstellen möchten und die Webseite horizontal zentriert sein soll, geht das normalerweise so:

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

Sie würden

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: 0 auto }

Dadurch wird der Inhalt zentriert Also wurde
text-align: left zum Inhalt hinzugefügt.

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 das war's.

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 es wie folgt verwenden:

...

Wenn Sie 30 Punkte von links und 5 Punkte von oben positionieren möchten, können Sie dies tun:

#navigation { position : absolut; links: 30px; oben: 5px }

Natürlich können Sie dies auch 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.

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

Es ist unmöglich, sie mit CSS in vertikaler Richtung zu steuern. Wenn Sie möchten, dass die Navigationsleiste wie die Inhaltsleiste direkt an den unteren Rand der Seite gelangt, 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 reicht nicht direkt nach unten, sondern endet, wenn der Inhalt auf halbem Weg 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, da sich in diesem Fall der Leser ändert Die Schriftgröße, dieser Trick wird enthüllt, Sie können nur px verwenden.

Der Autor dieses Artikels ist: Trenton Moss.
Die Veröffentlichungswebsite lautet: http://www.webcredible.co.uk/.

Diese Übersetzung ist nicht vom Autor oder der Website autorisiert. Alle Rechte liegen beim ursprünglichen Autor und der ursprünglichen Website.
Wenn Sie vom ursprünglichen Autor oder der ursprünglichen Veröffentlichungswebsite autorisiert sind, können Sie diese Übersetzung frei verwenden.​