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
Beispiel für die Konfiguration der domänenübergreifenden Fehlerbehebung in nginx
Die domänenübergreifende Nginx-Konfiguration wird...
Allgemeine Datentypen in MySQL 5.7
——Anmerkungen aus „MySQL in einfachen Worten (zwe...
So ändern Sie das Passwort des Root-Benutzers in MySQL
Methode 1: Verwenden Sie den Befehl SET PASSWORD ...
Detaillierte Erläuterung der Installationsmethode von Mysql 5.7.18 und des Prozesses zum Starten des MySQL-Dienstes
MySQL ist eine sehr leistungsfähige relationale D...
Beispiel für die Implementierung von Unterstreichungseffekten mit CSS und JS
In diesem Artikel werden hauptsächlich zwei Arten...
So installieren Sie die Odoo12-Entwicklungsumgebung unter Windows 10
Vorwort Da viele Freunde sagen, dass sie keinen M...
Das Konzept von MTR in MySQL
MTR steht für Mini-Transaktion. Wie der Name scho...
WebWorker kapselt JavaScript-Sandbox-Details
Inhaltsverzeichnis 1. Szenario 2. Implementieren ...
Zusammenfassung und Beispiele der Kommunikationsmethoden für Vue3-Komponenten
Die Kommunikationsmodi der Vue3-Komponenten sind ...
Methoden und Techniken zur Gestaltung einer interessanten Website (Bild)
Haben Sie schon einmal eine Situation erlebt, in d...
Über den Startfehler, der durch Inkompatibilität zwischen VMware-Workstations und Gerät/Anmeldeinformationen verursacht wird
VMware-Workstations starten den virtuellen Maschi...
Aufbauprinzip des Nexus-Privatservers und Tutorial-Analyse
eins. Warum einen privaten Nexus-Server erstellen...
So erzielen Sie mit CSS einen Daten-Hotspot-Effekt
Die Wirkung ist wie folgt: analysieren 1. Hier se...
Installation und Verwendung von MySQL unter Ubuntu (allgemeine Version)
Unabhängig von der verwendeten Ubuntu-Version ist...
Problem bei der Schriftartauswahl für Copyright-Symbole in HTML (wie man Copyright-Symbole schöner macht)
1. Entdecken Sie das Problem © ist das Co...