Sammlung allgemeiner Tipps für CSS-Stylesheets_Erfahrungsaustausch

· Das ul-Tag hat in Mozilla standardmäßig einen Füllwert, aber im IE hat nur margin einen Wert.

· Derselbe Klassenselektor kann wiederholt in einem Dokument erscheinen, aber der ID-Selektor kann nur einmal erscheinen; verwenden Sie sowohl Klasse als auch ID, um eine Bezeichnung in CSS zu definieren. Wenn es doppelte Definitionen gibt, wird die ID ausgewählt. Es gilt die durch das Symbol vorgenommene Definition.

· Anfänger können auf eine solche Situation stoßen, wenn das Attribut derselben Bezeichnung im IE auf A eingestellt ist, in Mozilla muss es jedoch auf B eingestellt werden, damit es normal angezeigt wird, sonst sind die beiden vertauscht .
Vorübergehende Lösung: Selector {Attribute name: B !important ; Attribute name: A;} //Ungültig unter IE7

· Wenn zwischen einer Gruppe verschachtelter Tags ein gewisser Abstand erforderlich ist, überlassen Sie es dem Randattribut des innen liegenden Etiketts, anstatt den Abstand des außen liegenden Etiketts zu definieren

· Es wird empfohlen, für das Symbol vor dem li-Label
· IE kann den Unterschied zwischen einer Erbschaftsbeziehung und einer Vater-Sohn-Beziehung nicht erkennen, es sind alles Erbschaftsbeziehungen.

· Vergessen Sie beim Hinzufügen von Selektoren zu Ihren Tags nicht, die Selektoren in CSS mit Anmerkungen zu versehen. Sie werden wissen, warum Sie dies tun, wenn Sie Ihr CSS in Zukunft ändern.

· Wenn Sie ein dunkles Hintergrundbild und einen hellen Texteffekt für eine Beschriftung festlegen. Es wird empfohlen, zu diesem Zeitpunkt eine dunklere Hintergrundfarbe für Ihr Etikett festzulegen.

· Achten Sie auf die Reihenfolge der Definition der vier Zustände des Links: Link besucht Hover Aktiv

· Bitte verwenden Sie Hintergrund für Bilder, die nichts mit dem Inhalt zu tun haben

· Die definierte Farbe kann mit #8899FF = #89F abgekürzt werden

· Tabelle schneidet in einigen Aspekten viel besser ab als andere Tags. Bitte verwenden Sie es dort, wo eine Spaltenausrichtung erforderlich ist.

·
hat nicht das Sprachattribut. Es sollte wie folgt geschrieben werden: <script> <script type="text/javascript"><br>· Der Titel ist der Titel und der Text des Titels ist der Text von der Titel. Manchmal muss im Titel nicht unbedingt Text angezeigt werden, daher: <br>Titelinhalt<h1> wird geändert in <h1>Titelinhalt<span> <br>·Perfekte Einzelpixel-Umrisslinie Tabelle (kann den Test in IE5.0, IE6.0 und FF bestehen, andere wurden nicht getestet) Tabelle {border-collapse:collapse;} td {border:#000 solid 1px;} <br><br>·margin ist negativ. Der Wert kann eine Rolle bei der relativen Positionierung spielen, wenn das Etikett eine absolute Positionierung verwendet. Wenn die Seite zentriert ist, ist das Attribut left:XXpx nicht für Ebenen geeignet, die eine absolute Positionierung verwenden. Es empfiehlt sich, diese Ebene neben einer Beschriftung zu platzieren, die Sie relativ positionieren möchten, und dann einen negativen Wert für den Rand zu verwenden. <br><br>· Bei Verwendung der absoluten Positionierung kann durch die Positionierung des Randwerts eine Positionierung relativ zu seiner eigenen Position erreicht werden, die 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. <br><br>Mehrere häufig verwendete CSS-Stile<br><br>· 1. Richten Sie chinesische Zeichen an beiden Enden aus: text-align:justify; text-justify:inter-ideograph· 2 . Abschneiden chinesischer Zeichen mit fester Breite: overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(Es kann jedoch nur das Abschneiden von Text in einer Zeile, nicht in mehreren Zeilen, verarbeitet werden.) (IE5 und höher) <br> <br> · 3. Zeilenumbruch für chinesische Zeichen (Wort): table-layout:fixed; word-break:break-all; (IE5 und höher) <br><br>· 4. Platzieren Sie das <br> Text <br> mit der Maus Sehen Sie sich die Auswirkung auf den vorherigen Text an. Dieser Effekt ist auf vielen ausländischen Websites zu beobachten, jedoch nur auf sehr wenigen inländischen. <br><acronym style="cursor: help" title="输入要提示的文字">· 5. Stellen Sie das Bild auf halbtransparent ein: .halfalpha {background-color: #000000; filter: Alpha(Opacity=50)} hat den Test in IE6 und IE5 bestanden, ist jedoch in FF fehlgeschlagen.<br><br>· 6. FLASH-Transparenz: Wählen Sie swf aus, öffnen Sie das Originalcodefenster, geben Sie vor <param name="wmode" value="transparent"> ein. Wenn wir Webseiten erstellen, verwenden wir häufig den Effekt, die Maus auf das zu erstellende Bild zu platzieren das Bild heller. Sie können die Technik des Ersetzens von Bildern verwenden oder die folgenden Filter verwenden: <br><br>.pictures img { filter: alpha(opacity=45 } <BR> .pictures a:hover img { filter: alpha(opacity=90); } <br><br>· Wenn der Text zu lang ist, wird der lange Teil als Auslassungspunkte angezeigt: IE5 und FF sind ungültig, können es aber sein ausgeblendet, IE6 ist gültig <BR><div style="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis"> <BR><NOBR>Zum Beispiel gibt es eine Textzeile, die sehr lang ist und nicht in einer Zeile in der Tabelle angezeigt werden kann. Der Kommentar wird geändert in: <br>Fügen Sie hier Ihren Kommentar ein... <br><!--[if !IE]> <BR><BR>· So verwenden Sie CSS zum Aufrufen externer Schriftarten Syntax: @font-face { Font-Family: Name: URL (URL ); sRules } Wert: <![endif]-->name: Schriftartname. Jeder mögliche Wert des Attributs „font-family“ <br>url ( url ): Geben Sie eine OpenType-Schriftartdatei mit einer absoluten oder relativen URL-Adresse an <br>sRules : Stylesheet-Definition <BR></script>