Es gibt viele Tipps zur Entwicklung von CSS-Weblayouts, mit denen Anfänger oft nicht vertraut sind. Bei ein oder zwei kleinen Problemen kann es lange dauern, es herauszufinden. Obwohl dieser Aspekt in den Dokumenten von 52CSS.com oft erwähnt wurde, machen viele Freunde in diesen Fragen immer noch Fehler. Werfen wir heute einen Blick auf diese CSS-Techniken. Vielleicht verstehen Sie sie nicht vollständig. Sie können auf 52CSS.com suchen, um das gewünschte Wissen zu erweitern.
1. Das ul-Tag hat in Mozilla standardmäßig einen Füllwert, aber im IE hat nur margin einen Wert.
2. Derselbe Klassenselektor kann wiederholt in einem Dokument erscheinen, der ID-Selektor kann jedoch nur einmal erscheinen. Verwenden Sie sowohl Klasse als auch ID, um eine Bezeichnung in CSS zu definieren. Wenn die Definitionen wiederholt werden, ist die vom ID-Selektor vorgenommene Definition gültig, da die Gewichtung von ID größer ist als die von Klasse.
3. Eine blöde Art, die Kompatibilität anzupassen (IE und Mozilla):
Anfänger können auf eine solche Situation stoßen: Das Attribut derselben Bezeichnung wird normal angezeigt, wenn es im IE auf A gesetzt ist, muss aber in Mozilla auf B gesetzt werden, um normal angezeigt zu werden, sonst sind die beiden umgekehrt.
Vorübergehende Lösung: Der Selektor {Eigenschaftsname: B !important; Eigenschaftsname: A} funktioniert möglicherweise manchmal nicht. Sie können auf 52CSS.com nach weiteren BUG-Lösungen suchen.
4. Wenn zwischen einer Gruppe verschachtelter Tags ein gewisser Abstand erforderlich ist, belassen Sie ihn beim Randattribut des Tags im Inneren, anstatt den Abstand des Tags außerhalb zu definieren.
5. Es wird empfohlen, für das Symbol vor dem li-Tag „background-image“ anstelle von „list-style-image“ zu verwenden.
6. IE kann den Unterschied zwischen einer Erbschaftsbeziehung und einer Vater-Sohn-Beziehung nicht unterscheiden. Es handelt sich bei allen um Erbschaftsbeziehungen.
7. Vergessen Sie beim Hinzufügen von Selektoren zu Ihren Tags nicht, Kommentare zu den Selektoren in CSS hinzuzufügen. Sie werden wissen, warum Sie dies tun, wenn Sie später Ihr CSS ändern. Aber Vorsicht: Seien Sie nicht zu verrückt.
8. Wenn Sie für eine Beschriftung ein dunkles Hintergrundbild und einen hellen Texteffekt festlegen. Es wird empfohlen, zu diesem Zeitpunkt eine dunklere Hintergrundfarbe für Ihr Etikett festzulegen. Da die Bilder verloren gehen, bleibt der Text lesbar.
9. Achten Sie beim Definieren der vier Zustände eines Links auf die Reihenfolge: Link besucht Hover Aktiv
10. Bitte verwenden Sie einen Hintergrund für Bilder, die nichts mit dem Inhalt zu tun haben. Denken Sie immer daran, die Präsentation vom Inhalt zu trennen.
11. Die definierte Farbe kann mit #8899FF=#89F abgekürzt werden
12. Tabellen sind in mancher Hinsicht immer noch nützlich. Wenn Sie auf eine Datentabelle stoßen, hassen Sie sie nicht.
13. <script> verfügt nicht über das Sprachattribut und sollte wie folgt geschrieben werden: <script type="text/javascript">
14. Perfekte Einzelpixel-Umrisstabelle (kann den Test in IE5, IE6, IE7 und FF1.0.4 oder höher bestehen)
Tabelle{ border-collapse:collapse } td{ border:#000 solid 1px } |
15. Negative Randwerte können bei der relativen Positionierung eine Rolle spielen, wenn das Etikett eine absolute Positionierung verwendet. Wenn die Seite in der Mitte angezeigt wird, ist das Attribut left:XXpx nicht für Ebenen mit absoluter Positionierung geeignet. Es empfiehlt sich, diese Ebene neben einem Etikett zu platzieren, das relativ positioniert werden muss, und dann negative Werte für den Rand zu verwenden.
16. Bei Verwendung der absoluten Positionierung kann der Randwert zur Positionierung relativ zu seiner eigenen Position verwendet werden, was sich von der Positionierung von Attributen wie oben und links relativ zum Fensterrand unterscheidet. Der Vorteil der absoluten Positionierung besteht darin, dass andere Elemente ihre Existenz ignorieren können.
17. Wenn der Text zu lang ist, ändern Sie den langen Teil in Auslassungspunkte und zeigen Sie ihn an: ungültig in IE5 und FF, kann aber ausgeblendet werden, gültig in IE6
| <DIV STYLE=“width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis“> <NOBR>Zum Beispiel gibt es eine Textzeile, die so lang ist, dass sie nicht in einer Zeile in der Tabelle angezeigt werden kann.</NOBR> |
18. Wenn durch Kommentare im IE Probleme mit der Textduplizierung auftreten können, können Sie die Kommentare wie folgt ändern:
<!–[if !IE]>Fügen Sie hier Ihren Kommentar ein…<![endif]–> |
19. So rufen Sie externe Schriftarten mit CSS auf
Grammatik:
| @font-face{font-family:name;src:url(url);sRules} |
Wert:
Name: Schriftartname. Jeder mögliche Wert des Attributs „font-family“. URL(URL): Geben Sie die OpenType-Schriftartdatei mit absoluter oder relativer URL-Adresse an sRules: Stylesheet-Definition |
20. Wie zentriere ich den Text in einem Textfeld in einem Formular vertikal?
Wenn die Verwendung von Zeilenhöhe und Höhengruppen in FF keine Auswirkung hat, besteht die Möglichkeit darin, den oberen und unteren Abstand zu definieren, um den gewünschten Effekt zu erzielen.
21. Kleine Dinge, auf die Sie bei der Definition des A-Tags achten sollten:
Wenn wir a{color:red;} definieren, stellt es die Stile der vier Zustände von A dar. Wenn wir einen Zustand definieren möchten, in dem sich die Maus befindet, definieren Sie einfach a:hover. Die anderen drei Zustände sind in A definierter Stil. Wenn nur ein a:link definiert ist, denken Sie unbedingt daran, die anderen drei Zustände zu definieren!
22. Nicht alle Stile müssen abgekürzt werden:
Wenn p{padding:1px 2px 3px 4px} vor dem Stylesheet definiert wird, wird im nachfolgenden Projekt ein weiterer Stil mit einem oberen Abstand von 5 Pixeln und einem unteren Abstand von 6 Pixeln hinzugefügt. Wir müssen nicht unbedingt 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 es nicht so gut ist, es auf diese Weise zu schreiben, aber haben Sie jemals darüber nachgedacht? Die Methode definiert wiederholt den Stil. Darüber hinaus müssen Sie nicht herausfinden, wie hoch die ursprünglichen Werte für die untere und linke Polsterung sind! Wenn sich der vorherige Stil P in Zukunft ändert, ändert sich auch der Stil von p.style1, den Sie definiert haben.
23. Je größer die Website, desto mehr CSS-Stile wird es geben. Bevor Sie beginnen, treffen Sie bitte umfassende Vorbereitungen und Pläne, einschließlich Namensregeln. Seitenblockaufteilung, interne Stilklassifizierung usw.
24. Kürzung chinesischer Zeichen mit fester Breite: overflow: versteckt; text-overflow: ellipsis; kann nicht, es versteckt sich nur.
Wenn Sie viele Dinge nicht verstehen, ist es egal, ob Sie diese Fähigkeiten aufzeichnen und regelmäßig auf 52CSS.com vorbeischauen. Sie werden auf jeden Fall etwas gewinnen. Sie können für die Suche auch den Inhalt, der Sie interessiert, in das Suchfeld auf der linken Seite eingeben. Sie können gerne Kommentare hinterlassen und CSS-Tipps hinzufügen.