25 Tipps und Tricks zur Div+CSS-Programmierung

1. Das ul-Tag hat in Mozilla standardmäßig einen Füllwert, im IE jedoch nur einen Randwert.

2. Derselbe Klassenselektor kann in einem Dokument wiederholt vorkommen, der ID-Selektor jedoch nur einmal. Wenn Sie sowohl Klasse als auch ID verwenden, um ein Tag in CSS zu definieren, ist bei wiederholter Definition die durch den ID-Selektor vorgenommene Definition gültig, da das Gewicht der ID größer ist als das der KLASSE.

3. Eine dumme Art, die Kompatibilität anzupassen (IE und Mozilla): Anfänger können auf eine Situation wie diese stoßen: Das gleiche Tag-Attribut wird im IE normal angezeigt, wenn es auf A gesetzt ist, muss in Mozilla aber auf B gesetzt werden, um normal angezeigt zu werden, oder umgekehrt. Temporäre Lösung: Selektor {Attributname: B !wichtig; Attributname: A}

4. Wenn eine Gruppe verschachtelter Tags etwas Abstand benötigt, überlassen Sie dies dem Randattribut des inneren Tags, anstatt die Polsterung des äußeren Tags zu definieren.

5. Es wird empfohlen, für das Symbol vor dem Li-Tag ein Hintergrundbild anstelle eines Listenbilds zu verwenden.

6. Der IE kann nicht zwischen einer Vererbungsbeziehung und einer Eltern-Kind-Beziehung unterscheiden, es handelt sich bei allen um Vererbungsbeziehungen.

7. Wenn Sie wie verrückt Selektoren zu Ihren Tags hinzufügen, vergessen Sie nicht, die Selektoren im CSS zu kommentieren. Sie werden verstehen, warum Sie dies tun, wenn Sie Ihr CSS zukünftig ändern.

8. Wenn Sie für ein Etikett ein dunkles Hintergrundbild und einen hellen Texteffekt festlegen. Es wird empfohlen, derzeit eine dunkle Hintergrundfarbe für Ihr Etikett festzulegen.

9. Achten Sie auf die Reihenfolge bei der Definition der vier Zustände des Links: Link besucht Hover aktiv

10. Für Bilder, die nicht mit dem Inhalt in Zusammenhang stehen, verwenden Sie bitte Hintergrund

11. Definieren Sie die Farbe kann abgekürzt werden #8899FF=#89F

12. Die Leistung von Tabellen ist in manchen Aspekten viel besser als bei anderen Tags. Bitte verwenden Sie es überall dort, wo Sie eine Spaltenausrichtung benötigen.

13. <script> hat nicht das Sprachattribut, es sollte so geschrieben werden: <script type="text/javascript">

14. Ein Titel ist ein Titel, und der Text eines Titels ist der Text eines Titels. Manchmal muss der Titel nicht unbedingt Text anzeigen, daher wird: <h1>Titelinhalt</h1> in <h1><span>Titelinhalt</span></h1> geändert.

15. Perfekte Einzelpixel-Rahmentabelle (kann in IE5, IE6, IE7 und FF1.0.4 und höher getestet werden) table{border-collapse:collapse;} td{border:#000 solid 1px;}

16. Negative Randwerte können bei der relativen Positionierung eine Rolle spielen, wenn das Tag die absolute Positionierung verwendet. Wenn die Seite zentriert ist, ist die Ebene mit der absoluten Positionierung nicht für die Verwendung des Attributs left:XXpx geeignet. Ein guter Ansatz besteht darin, diese Ebene neben einem Etikett zu platzieren, das relativ positioniert werden soll, und dann negative Randwerte zu verwenden.

17. Bei der absoluten Positionierung kann durch die Verwendung von Randwerten eine Positionierung relativ zur Position des Elements selbst erreicht werden. Dies unterscheidet sich von der Positionierung mit Attributen wie oben und links relativ zum Rand des Fensters. Der Vorteil der absoluten Positionierung besteht darin, dass andere Elemente ihre Existenz ignorieren können.

18. Wenn der Text zu lang ist, wird der lange Teil als Auslassungspunkt angezeigt: Ungültig für IE5 und FF, kann aber ausgeblendet werden. Gültig für IE6 <DIV STYLE="width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis"> <NOBR>Zum Beispiel, wenn eine Textzeile zu lang ist, um in eine Zeile der Tabelle zu passen.</NOBR>

19. Wenn im Internet Explorer aufgrund von Kommentaren ein Problem mit Textduplizierung auftritt, können Sie den Kommentar wie folgt ändern: <!?[if !IE]>Fügen Sie hier Ihren Kommentar ein…<![endif]?>

20. So verwenden Sie CSS, um externe Schriftarten aufzurufen. Syntax: @font-face{font-family:name;src:url(url);sRules} Wert: Name: Schriftname. Jeder mögliche Wert der Eigenschaft font-family url(url): Verwenden Sie eine absolute oder relative URL-Adresse, um die OpenType-Schriftdatei anzugeben sRules: Stylesheet-Definition

21. Wie kann ich den Text in einem Textfeld in einem Formular vertikal zentrieren? Wenn die Verwendung der Zeilenhöhe und der Höhengruppe in FF keine Wirkung hat, besteht die Lösung darin, die obere und untere Polsterung zu definieren, um den gewünschten Effekt zu erzielen.

22. Kleine Dinge, die beim Definieren des A-Tags zu beachten sind: Wenn wir a{color:red;} definieren, stellt es die Stile der vier Zustände von A dar. Wenn Sie einen Zustand definieren möchten, bei dem die Maus darauf platziert wird, definieren Sie einfach a:hover. Die anderen drei Zustände sind die in A definierten Stile. Wenn nur ein a:link definiert ist, müssen Sie unbedingt die anderen drei Zustände definieren!

23. Nicht alle Stile müssen abgekürzt werden: Wenn das Stylesheet p{padding:1px 2px 3px 4px} definiert, wird im nachfolgenden Projekt ein Stil mit 5px Padding oben und 6px Padding unten hinzugefügt. Wir müssen nicht p.style1{padding:5px 6px 3px 4px} schreiben. Es kann als p.style1{padding-top:5px;padding-right:6px;} geschrieben werden. Sie haben vielleicht das Gefühl, dass dies nicht so gut ist wie das Original, aber haben Sie jemals daran gedacht, dass Ihre Schreibmethode die Stildefinition wiederholt? Außerdem müssen Sie die ursprünglichen Werte der unteren und linken Polsterung nicht herausfinden! Wenn sich der bisherige Stil P in Zukunft ändert, muss sich auch der Stil des von Ihnen definierten p.style1 ändern.

24. Je größer die Website, desto mehr CSS-Stile gibt es. Treffen Sie vor dem Start entsprechende Vorbereitungen und Pläne, einschließlich Namensregeln. Seitenblockaufteilung, interne Stilklassifizierung usw.

25. Einige häufig verwendete CSS-Stile:
-1) Chinesische Schriftzeichen an beiden Enden ausrichten: text-align:justify; text-justify:inter-ideograph;

-2) Kürzung chinesischer Zeichen mit fester Breite: overflow:hidden;text-overflow:ellipsis;white-space:nowrap; (Es kann jedoch nur die Kürzung von Text auf einer Zeile verarbeiten, nicht auf mehreren.) (IE5 und höher) FF kann das nicht, es verbirgt nur.

-3) Zeilenumbruch für chinesische Zeichen (Wörter) mit fester Breite: table-layout:fixed; word-break:break-all; (IE5 und höher) FF kann das nicht.

-4) <acronym title=”Geben Sie den Text ein, der angezeigt werden soll” style=”cursor:help;”>Text</acronym>Bewegen Sie die Maus auf den vorherigen Text, um den Effekt zu sehen. Dieser Effekt ist auf vielen ausländischen Websites zu beobachten, in China ist er jedoch selten.

-5) Stellen Sie das Bild halbtransparent ein: .halfalpha { background-color:#000000;filter:Alpha(Opacity=50)} Der Test wurde in IE6 und IE5 bestanden, schlug jedoch in FF fehl. Dies liegt daran, dass dieser Stil privat für IE ist.

-6) FLASH-Transparenz: Wählen Sie swf, öffnen Sie das Quellcodefenster und geben Sie vor </object> <param name=”wmode” value=”transparent”> ein. Oben ist der Code für IE. Für FIREFOX fügen Sie dem <embed>-Tag einen ähnlichen Parameter wmode="transparent" hinzu

-7) Beim Erstellen von Webseiten wird oft der Effekt der Aufhellung des Bildes genutzt, indem man mit der Maus darüber fährt. Dazu kann man die Bildersetzungstechnik oder den folgenden Filter verwenden: .pictures img { filter: alpha(opacity=45); } .pictures a:hover img { filter: alpha(opacity=90); }