Fortgeschrittene Techniken zur Verwendung von CSS (im tatsächlichen Kampf verwendet)
|
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 zur Definition von CSS für ein Tag sowohl Klasse als auch ID verwenden und es doppelte Definitionen gibt, ist die durch den ID-Selektor vorgenommene Definition gültig, da die ID ein höheres Gewicht hat als die Klasse. 3. Eine dumme Art, die Kompatibilität anzupassen (IE und Mozilla): Anfänger können auf folgende Situation stoßen: Das gleiche Tag-Attribut wird im Internet Explorer normal angezeigt, wenn es auf A gesetzt ist, in Mozilla muss es jedoch auf B gesetzt werden, um normal angezeigt zu werden, und umgekehrt. Temporäre Lösung: Der Selektor {Attributname: B !wichtig; Attributname: A} funktioniert manchmal möglicherweise nicht. Sie können auf 52CSS.com nach weiteren BUG-Lösungen suchen. 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 Ihren Tags auf verrückte Weise Selektoren 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. Und noch eine Erinnerung: Übertreiben Sie es nicht. 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. Da das Bild verloren geht, bleibt auch die Lesbarkeit des Textes erhalten. 9. Achten Sie auf die Reihenfolge bei der Definition der vier Zustände des Links: Link besucht Hover aktiv 10. Bitte verwenden Sie Hintergründe für Bilder, die keinen Bezug zum Inhalt haben. Denken Sie immer daran, Präsentation und Inhalt zu trennen. 11. Definieren Sie die Farbe kann abgekürzt werden #8899FF=#89F 12. Tabellen sind in mancher Hinsicht immer noch nützlich. Wenn Sie auf eine Datentabelle stoßen, hassen Sie sie nicht. 13. <script> hat nicht das Sprachattribut, es sollte so geschrieben werden: <script type="text/javascript"> 14. Perfekte Einzelpixel-Frame-Line-Tabelle (kann in IE5, IE6, IE7 und FF1.0.4 und höher getestet werden) Code kopieren Der Code lautet wie folgt:Tabelle { Rahmen-Collapse:Collapse; } td{ Grenze:#000 durchgezogen 1px; } 15. Negative Randwerte können bei der relativen Positionierung eine Rolle spielen, wenn das Etikett 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. 16. Bei der absoluten Positionierung kann durch die Verwendung von Randwerten eine Positionierung relativ zur eigenen Position erreicht werden, die sich von der Positionierung von oben, links und anderen Attributen relativ zum Rand des Fensters unterscheidet. Der Vorteil der absoluten Positionierung besteht darin, dass andere Elemente ihre Existenz ignorieren können. 17. 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=”Breite:120px;Höhe:50px;Rahmen:1px durchgehend blau;Überlauf:versteckt;Textüberlauf:Auslassungspunkte”> <NOBR>Beispielsweise gibt es eine Textzeile, die zu lang ist, um in eine Tabellenzeile zu passen.</NOBR> 18. Wenn im Internet Explorer aufgrund von Kommentaren ein Problem mit doppeltem Text auftritt, können Sie die Kommentare wie folgt ändern: Code kopieren Der Code lautet wie folgt:<!–[if !IE]>Fügen Sie hier Ihren Kommentar ein…<![endif]–> 19. So rufen Sie externe Schriftarten mit CSS auf Grammatik: @font-face{Schriftfamilie:Name;src:url(url);sRules} Wert: Name: Schriftname. Jeder mögliche Wert der Schriftfamilieneigenschaft url(url): Geben Sie die OpenType-Schriftdatei mit einer absoluten oder relativen URL-Adresse an sRules: Stylesheet-Definition 20. 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. 21. Kleine Dinge, die bei der Definition von A-Tags zu beachten sind: Wenn wir a{color:red;} definieren, stellt es die Stile der vier Zustände von A dar. Wenn wir einen Zustand definieren möchten, bei dem die Maus darauf platziert wird, müssen wir nur a:hover definieren. 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! 22. Nicht alle Stile müssen abgekürzt werden: Wenn das Stylesheet p{padding:1px 2px 3px 4px} definiert, wird im nachfolgenden Projekt ein Style 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. 23. 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. 24. Kürzung chinesischer Zeichen mit fester Breite: overflow:hidden;text-overflow:ellipsis;white-space:nowrap; (Es kann jedoch nur die Kürzung von Text in einer Zeile verarbeiten, nicht in mehreren.) (IE5 und höher) FF kann das nicht, es verbirgt nur. |
<<: Lösung für „Spezialisierter Schlüssel war zu lang“ in MySQL
>>: So verwenden Sie pdf.js zur Vorschau von PDF-Dateien in Vue
Artikel empfehlen
Implementierungsbeispiel für die Bereitstellung von Docker rocketmq
Inhaltsverzeichnis Vorbereitung Bereitstellungspr...
React Native realisiert den Auf- und Ab-Pull-Effekt der Überwachungsgeste
React Native implementiert die Überwachungsgeste ...
Beispielcode zur Implementierung der gleichzeitigen Anforderungssteuerung in JavaScript/TypeScript
Szenario Angenommen, es gibt 10 Anfragen, aber di...
Tutorial zur Installation von JDK Tomcat MySQL unter Linux (Fernzugriff über Mac)
Eine Umgebung Alibaba Cloud Server: CentOS 7.4 64...
Zusammenfassung der Unterschiede zwischen MySQL-Primärschlüssel und eindeutigem Schlüssel
Was ist ein Primärschlüssel? Ein Primärschlüssel ...
Verwenden Sie das Firebug-Tool, um die Seite auf dem iPad zu debuggen
Wie debuggt man eine Seite auf dem iPad? Wenn Sie ...
So ändern Sie die Standardcodierung von MySQL in Linux
Wenn während des Entwicklungsprozesses nach der W...
W3C Tutorial (13): W3C WSDL Aktivitäten
Bei Webdiensten geht es um die Kommunikation zwis...
Fallstudie zu JavaScript-Style-Objekten und CurrentStyle-Objekten
1. Stilobjekt Das Stilobjekt stellt eine einzelne...
Nach dem Neustart des Baota-Panels wird die Meldung -ModuleNotFoundError: Kein Modul mit dem Namen „geventwebsocket“ angezeigt.
Hintergrund: Da der Server das Flask-Projekt bere...
vite2.x implementiert das On-Demand-Laden von Ant-Design-Vue@next-Komponenten
1. Version verwenden vite:2.0 Ant-Design-Vue: 2.0...
Beheben Sie den Fehler beim Löschen von MySQL-Benutzern
Als der Autor MySQL zum Hinzufügen eines Benutzer...
Detaillierte Erklärung des Docker-Befehls zum Sichern des Linux-Systems
Tar-Backup-System sudo tar cvpzf backup.tgz --exc...
Spezifische Verwendung von MySQL-Fensterfunktionen
Inhaltsverzeichnis 1. Was ist eine Fensterfunktio...
JavaScript-Plugin-Kapselung für Tabellenwechsel
In diesem Artikel wird der Kapselungscode von Jav...