Zusammenfassung des CSS-Nutzungslernens_Erfahrungsaustausch

Verwenden Sie Klassen so wenig wie möglich, da Sie die Erkennung kaskadieren können, z. B.: .News h3, ohne Klassen zu h3 hinzuzufügen

3. Wenn es keine zu unterscheidenden Elemente gibt, verwenden Sie div

• Home


• Über uns

kann geändert werden in

• Home


• Über uns

4. Selektor
p a h1 type selector
Li a {text-decoration:none} Descendant selector
*{ padding:0; } Universeller Selektor, alle Elemente auf der Seite.
5. Positionierung
Die relative Positionierung erfolgt relativ zur Position, an der sie erscheinen soll.
Die absolute Positionierung erfolgt relativ zum nächstgelegenen positionierten Vorgängerelement (Experimente ergaben, dass Vorgängerelemente auf relative Positionierung eingestellt werden müssen)
Schwebend Die Box kann sich nach links und rechts bewegen, bis ihre Kante die umschließende Box oder die Kante einer anderen umschließenden Box berührt. Da sich die schwebende Box nicht im normalen Fluss des Dokuments befindet, verhält sich eine Box im normalen Fluss des Dokuments so Floating-Box existiert nicht.
Zusammenfassung: Wenn ein Div schwebend ist, wird das nächste Div so behandelt, als ob das erste nicht existiert. Wissen Sie, wann Sie auf eine schwebende oder umschließende Kiste stoßen.
Klar: rechts Die rechte Seite der schwebenden Box ist verfügbar
Klar: links Die linke Seite der schwebenden Box ist verfügbar
Klar: beide Beide Seiten der schwebenden Box sind nicht verfügbar
Überlauf anwenden Das Attribut mit dem Wert „hidden“ oder „auto“ bereinigt automatisch alle enthaltenen schwebenden Elemente.
6. Verlaufshintergrund
Erstellen Sie ein hohes, aber schmales Verlaufsbild, horizontal gekachelt
Körper
{
Hintergrund: #ccc url (gradient.gif) repeat-x; 🎜>Aber es ist schwierig vorherzusagen, wie hoch die Bildseite sein wird, sodass Sie sie mit der Hintergrundfarbe kombinieren können. Wenn der Farbunterschied zwischen den beiden sehr nahe beieinander liegt, erfolgt die Konvertierung wird nicht sichtbar sein.
Beispiel: Fügen Sie jedem Titel ein Symbol hinzu
H1
{
Padding-left:30px
Hintergrund: url(/images/bullet.gif) keine Wiederholung links in der Mitte; >}
7. Markieren Sie verschiedene Arten von Links
wie: Links zu externen Websites, E-Mails, Downloads usw.
.external
{
Hintergrund: URL (/images/externalLink. gif) no-repeat right top;
Padding-right:10px;}
8. Tabellenspezifische Elemente
1) Zusammenfassungsattribute können auf Tabellenbeschriftungen angewendet werden. Beschreiben Sie den Inhalt der Tabelle
Überschrift Der Titel der Tabelle
2) thead tbody tfoot
Das heißt, Sie können alle Spaltenüberschriften in das Element „ad“ oder „tfoot“ einfügen Mindestens ein Tbody-Element kann nur ein TBODI-Element verwenden.
1) Einzelnes Modell: Jede Zelle hat einen Rand 2) Overlay-Modell: Gemeinsamer Rahmen des Zellengitters
10. Das Feldset schließt den Rahmen. Niedrigere Versionen unterstützen ihn nicht, aber Sie können
Filedset
{
Border: solid 0 verwenden transparent;
}
11 . Formularbeschriftung
Impliziter Modus:
E-Mail


Anzeigemodus:

E-Mail

Ob es sich um die Form der Absätze handelt, ist umstritten. 12. Lassen Sie uns das Drama entwerfen
Methode 1:




#wrapper
{ Breite: 720px;
Margin:0 auto;

}

Aber diese Methode ist in IE6 und niedriger nicht normal
Methode 2 (muss basierend auf zwei Elementen kombiniert werden): Automatische Leerstelle verwenden Body
{
Text-align:center;
Min-width: 760;
}
#wrapper
{
Breite: 720px;
Text-Alignment: left; 🎜>Links: 50 %;
Rand-links: -360; .
Nachteile: Je kleiner es wird, desto schmaler werden die Reihen.
Lösung: Mindestbreite in Pixel und Ems festlegen
14: Flexibles Layout: Wenn sich die Schriftgröße ändert, ändert sich die Linie (Einheit ist Em)
Flexibles Layout legt die Breite des Elements relativ zur Schriftart fest Größe.
1em=10px
Die Standardschriftgröße der meisten Browser beträgt 16 Pixel, 10 entspricht 62,5 % von 16 Pixeln >}
#wrapper
{
Breite:72em;
Textausrichtung: links
}
#mainNav
{
Breite: 18em;
Float:right;
}
15. Legen Sie die Breite in em fest und legen Sie die maximale Breite in Prozent fest.
#wrapper
{
Width:72em;
Max-width: 100%;
Text-align: left; 16: Flüssige und elastische Bilder
Bildverformungsproblem: Versuchen Sie, es in den Hintergrund zu stellen
17. Asterisk-HTML-Trick
* html a:hover
{
Body-style: solid
}
Nur ​​nützlich für IE6 oder niedriger
18: !import- und Unterstreichungstricks
# nav
{
Position: fest !important; statisch;
}
19, mehrere Spalten










Nav erforderlich Zur Unterscheidung Wenn die Farben und die Anzeigehöhe 100 % betragen, können Sie ein Bild mit einer Breite gleich Nav erstellen, ein Hintergrundbild auf dem Hauptbild festlegen und es in vertikaler Richtung kacheln.