Learning Style Sheet CSS-Referenz – Häufig verwendetes CSS Knowledge_Experience Exchange

1. Vergleich von Block- und Inline-Elementen

Alle HTML-Elemente gehören zu einem von Block- und Inline-Elementen. Die Eigenschaften des
Blockelements sind:
beginnt immer in einer neuen Zeile;
Höhe, Zeilenhöhe sowie oberer und unterer Rand können alle gesteuert werden;
Breite ist standardmäßig auf 100 % des Containers eingestellt. Sofern Sie keine Breite festlegen, sind

,

,

,

,

und
• Beispiele für Blockelemente.
  
  Im Gegensatz dazu sind die Eigenschaften von Inline-Elementen:
  und andere Elemente befinden sich in derselben Zeile.
  Höhe, Zeilenhöhe sowie oberer und unterer Rand können nicht geändert werden sein Text Oder die Breite des Bildes, die nicht geändert werden kann.
  
  , , , , , und sind Beispiele für Inline-Elemente.
  Verwenden Sie den Befehl display: inline oder display: block, um diese Funktion eines Elements zu ändern. Wann müssen Sie dieses Attribut ändern?
  Ein Inline-Element in einer neuen Zeile beginnen lassen;
  Das Blockelement und andere Elemente in derselben Zeile belassen;
  Kontrolle der Breite des Inline-Elements; die Höhe des Inline-Elements;
  Sie können eine Hintergrundfarbe mit der gleichen Breite wie der Text für ein Blockelement festlegen, ohne die Breite festzulegen.
  
  
  2. Eine andere Box-Hacking-Methode
  Der Grund, warum es so viele Box-Hacking-Methoden gibt, liegt darin, dass sich das Verständnis von Box vor 6 von anderen unterscheidet Geben Sie die Kantenbreite und den Leerraum an. Um IE5 mit anderen Browsern konsistent zu machen, können Sie CSS verwenden:
  
  padding: 2em;
  border: 1em solid green
  width: 20em>width/** /:/** / 14em;
  
  Die erste Breite wird von allen Browsern erkannt, aber IE5.x erkennt die Breiteneinstellung von Zeile 2 nicht, nur weil sich in dieser Zeile ein leeres Kommentarsymbol befindet (wie dumme Syntaxanalyse! ) , also IE5.
  
  
  3. Die Mindestbreite der Seite
  
  min-width ist ein sehr praktischer CSS-Befehl. Er kann festlegen, dass die Mindestbreite des Elements nicht kleiner sein darf eine bestimmte Breite, damit gewährleistet werden kann, dass das Layout immer korrekt war. Der IE erkennt dies jedoch nicht und behandelt die Breite tatsächlich als Mindestbreite. Damit dieser Befehl auch im IE funktioniert, können Sie ein unter dem
  -Tag einfügen und dann eine Klasse für das div angeben:
  
  
  
  
  Dann ist das CSS so gestaltet:

  }
  
  Die erste Mindestbreite ist normal; aber die Breite in Zeile 2 verwendet Javascript, das nur vom IE erkannt wird, wodurch Ihr HTML-Dokument ebenfalls kleiner wird vertraut. Es implementiert tatsächlich die Mindestbreite durch Javascript-Beurteilung.
  Die gleiche Methode kann auch verwendet werden, um die maximale Breite für IE zu erreichen:
  
  #container
  {
  min-width: 600px
  max-width: 1200px ;
  width:expression(document.body.clientWidth
  1200? „1200px“ : „auto“;
  }
  
  4. Probleme mit IE und Breite und Höhe
  
  IE erkennt die Definition von „min-“, behandelt aber tatsächlich die normale Breite und Höhe, als ob es „min“ gäbe. Wenn Sie nur „Breite“ und „Höhe“ verwenden, werden diese beiden nicht verwendet Funktioniert in normalen Browsern nicht. Wenn Sie nur „min-width“ und „min-height“ verwenden, bedeutet dies, dass die Breite und Höhe im IE überhaupt nicht festgelegt sind Um ein Hintergrundbild festzulegen, ist diese Breite wichtiger. Diese Frage kann wie folgt aussehen:
  .box
  {
  width: 80px;
  height: 35px; }
  
  html>body .box
  {
  width: auto;
  min-width: 80px
  min-height: 35px; >}
  
  Alle Browser können die erste Box-Einstellung verwenden, aber der IE erkennt die zweite Einstellung nicht, da die zweite Einstellung spezieller ist, sodass er den ersten Einstellungsbefehl überschreibt >5 >
  
  Der Texttransformationsbefehl ist sehr nützlich. Er verfügt über drei Werte: Texttransformation: Großbuchstaben und Texttransformation: Großbuchstaben Alles kleingeschrieben und der dritte Buchstabe großgeschrieben. Auch wenn bei der Eingabe Fehler auftreten, sind diese auf der Webseite nicht sichtbar Bildtext verschwindet im IE
  
  
  Manchmal tritt das Problem auf, dass Text oder Hintergrundbild nach dem Aktualisieren wieder verschwinden. Dies ist wichtiger, wenn Sie sich in der Nähe schwebender Elemente befinden (Hinweis: Ich habe es noch nie gesehen.) Zu diesem Zeitpunkt können Sie Folgendes festlegen: position: relative für die verschwindenden Elemente 🎜>7. Unsichtbarer Text
  
  
  Egal, warum Sie möchten, dass Webtext nicht im Browser angezeigt wird, z. B. beim Drucken oder auf einem kleinen Bildschirm, Sie können display: none verwenden. Das ist sehr einfach, aber manchmal ist es für manche Leute etwas nutzlos, und sie können dieses Steuerelement entfernen und dann Folgendes verwenden: position: absolute left: -9000px .
  
  Dies gibt tatsächlich den Text an, der außerhalb der Seite angezeigt werden soll.
  8. Entwerfen Sie spezielles CSS für Handheld-Geräte
  
  
  Das heißt, Benutzer mit kleinen Bildschirmen wie Mobiltelefonen/PDAs können ein spezielles CSS entwerfen, um die Webseite anzuzeigen komfortabler.Dazu können Sie das Browserfenster auf eine Breite von 150 Punkten einstellen, um den Effekt zu sehen. Die Syntax zum Angeben von Handheld-spezifischem CSS lautet:
  
  
  
  Sie können sich auch über die Handheld-spezifische Verfügbarkeit informieren.
  
  9. Schaltflächen mit 3D-Effekten
  
  Wenn Sie in der Vergangenheit Schaltflächen mit 3D-Effekten erstellen wollten, die sich beim Klicken änderten, mussten Sie ein Bild verwenden Jetzt erledigt das CSS den Zweck:
  
  a
  {
  display: block
  border-color: #aaa #000 #000 # aaa;
  width: 8em;
  background: #fc0; >left: 1px ;
  border-color: #000 #aaa #aaa #000;
  
  Was den Effekt betrifft, können Sie ihn auch selbst anpassen.
  
  
  10. Verwenden Sie den gleichen Navigationscode auf verschiedenen Seiten.
  
  
  Viele Webseiten verfügen über Navigationsmenüs. Wenn Sie eine bestimmte Seite aufrufen, lautet das entsprechende Element im Menü sollte grau werden und andere Seiten leuchten. Um diesen Effekt zu erzielen, müssen Sie im Allgemeinen ein Programm oder Design speziell für jede Seite schreiben. Jetzt können Sie diesen Effekt mit CSS erzielen.
  
  Verwenden Sie zunächst die CSS-Klassen in Ihrem Navigationscode:
  
  
  
  Home
  
  
  
  
  Über uns

  
  
  • Kontaktieren Sie uns
  
  
  Geben Sie dann eine ID für den Hauptteil jeder Seite an und Die obige Klasse hat den gleichen Namen. Wie zum Beispiel
  .
  • Dann entwerfen Sie das CSS wie folgt:
  #home .home, #about .about, #about .about
  {

  Befehle für hervorgehobene Navigation finden Sie hier
  }
  Wenn hier die ID auf „home“ gesetzt ist, wird .home wirksam, d. h. in der Reihe der Navigationsleisten mit der auf „home“ eingestellten Klasse werden Spezialeffekte angezeigt. Das Gleiche gilt auch für andere Seiten.