Kursplan

CSS-Advanced-Tutorial

• CSS-Extrabuch
• CSS-Übersicht
• CSS-Basisgrammatik
• CSS-Hochgrammatik
• CSS-Derived-Selektoren
• CSS-ID-Selektoren
• CSS-Klassenselektoren
• CSS-Erstellung
• CSS-Hintergrund
• CSS-Text
• CSS-Schriftarten
• CSS-Listen

CSS-Boxmodell

• Übersicht über das CSS-Framemodell
• CSS-Innenabstand
• CSS-Ränder
• CSS-Außenabstand
• CSS-Kombination von Außenabständen

CSS-Position

• Übersicht über die CSS-Positionierung
• CSS-Relativposition
• CSS-Absolutposition
• CSS-Float

CSS-Selektor

• CSS-Elementselektoren
• CSS-Selektorgruppen
• CSS-Klassenselektoren im Detail
• CSS-ID-Selektoren im Detail
• CSS-Attributselektoren im Detail
• CSS-Nachfolgerselektoren
• CSS-Kindselektoren
• CSS-Nachbarschaftsbrüderselektoren

Wahlpflichtkurse

Kursempfehlung:

• CodeW3C.com-Schatzkiste

Der Rand des Elements (border) ist eine Linie oder mehrere Linien um den Inhalt und die Innenabstandsstufe des Elements.

Das CSS-Randattribut ermöglicht es Ihnen, die Symbolik, Breite und Farbe des Elementrandes zu bestimmen.

CSS-Ränder

In HTML verwenden wir Tabelle, um den Rand um den Text zu erstellen, aber durch die Verwendung der CSS-Randattribute können wir hervorragende Ränder erstellen und sie auf jedes Element anwenden.

Der Rand des Elements ist innerhalb des Elementumrandes (border). Der Rand des Elements ist eine Linie oder mehrere Linien um den Inhalt und die Innenabstandsstufe des Elements.

Jede Randsymbolik hat drei Aspekte: Breite, Symbolik und Farbe. In den folgenden Abschnitten werden wir diese drei Aspekte im Detail erläutern.

Randsymbolik und Hintergrund

Das CSS-Rohrweisespeichermodell weist darauf hin, dass die Randsymbolik auf dem Hintergrund des Elements gezeichnet wird. Das ist wichtig, weil einige Randsymboliken "unterbrochen" sind (z.B. gepunktete oder gestrichelte Randsymboliken), und der Hintergrund des Elements sollte zwischen den sichtbaren Teilen der Randsymbolik erscheinen.

CSS2 weist darauf hin, dass der Hintergrund nur bis zur Innenabstandsstufe reicht, nicht bis zur Randsymbolik. Später wurde dies durch CSS2.1 korrigiert: Der Hintergrund des Elements erstreckt sich auf den Inhalt, die Innenabstandsstufe und den Randsymbolikbereich. Die meisten Browser folgen der Definition von CSS2.1, aber einige ältere Browser können unterschiedliche Ergebnisse haben.

Randsymbolik

Die Symbolik ist der wichtigste Aspekt der Randsymbolik, nicht weil die Symbolik die Anzeige der Ränder kontrolliert (natürlich, die Symbolik kontrolliert tatsächlich die Anzeige der Ränder), sondern weil ohne Symbolik根本没有 Ränder.

CSS border-style EigenschaftEs wurden 10 verschiedene nicht-inherit Symboliken definiert, einschließlich none.

Zum Beispiel können Sie die Randsymbolik eines Bildes als outset festlegen, so dass es wie ein "hervorgehobener Button" aussieht:

a:link img {border-style: outset;}

Definieren Sie mehrere Symboliken

Sie können mehrere Symboliken für eine Kante definieren, zum Beispiel:

p.aside {border-style: solid dotted dashed double;}

Das obige Regeldefiniert für die Abschnitte mit der Klasse aside vier verschiedene Randsymboliken: eine dicke Linie als Oberkante, eine gepunktete Linie als rechte Kante, eine gestrichelte Linie als untere Kante und eine doppelte Linie als linke Kante.

Wir haben hier wieder gesehen, dass der Wert in der Reihenfolge top-right-bottom-left gewählt wurde, und bei der Diskussion über mehrere Werte zur Festlegung verschiedener Innenabstände wurde diese Reihenfolge ebenfalls gesehen.

Definieren Sie eine Einzelseitige Symbolik

Wenn Sie die Randsymbolik eines Elementsrahmens für eine bestimmte Kante festlegen möchten, anstatt die Symbolik aller vier Kanten zu setzen, können Sie die folgenden Einzelseitigen Randsymbolik-Attribute verwenden:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Daher sind diese beiden Methoden äquivalent:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Beachten Sie:Wenn Sie die zweite Methode verwenden müssen, müssen Sie die Einzelseiteneigenschaft nach dem Kurzwirksatz platzieren. Da sonst der Wert des Kurzwirksatzes die Einzelseitewerte none überschreiben würde.

Rahmenbreite

Sie können border-width-EigenschaftRahmenbreite angeben

Es gibt zwei Methoden, um die Breite eines Rahmens zu bestimmen: Sie können Längenwerte angeben, wie 2px oder 0.1em; oder eines der 3 Schlüsselwörter verwenden, die thin, medium (Standardwert) und thick sind.

Anmerkung:CSS definiert die spezifische Breite der 3 Schlüsselwörter nicht, daher kann ein Benutzeragent thin, medium und thick entsprechend 5px, 3px und 2px oder 3px, 2px und 1px setzen.

Daher können wir die Rahmenbreite so einstellen:

p {border-style: solid; border-width: 5px;}

oder:

p {border-style: solid; border-width: thick;}

Breite einer Einzelseite definieren

Sie können die Kantenbreite des Elements in der Reihenfolge top-right-bottom-left einstellen:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

Der obige Beispiel kann auch so kurzgefasst werden (diese Schreibweise wird alsWert kopieren)

p {border-style: solid; border-width: 15px 5px;}

Sie können auch die Breite jeder Rahmenkante mit den folgenden Eigenschaften separat einstellen:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Daher sind die folgenden Regeln mit dem obigen Beispiel äquivalent:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Kein Rahmen

In den obigen Beispielen haben Sie bereits gesehen, dass um eine Art von Rahmen anzuzeigen, die Rahmenart festgelegt werden muss, zum Beispiel solid oder outset.

Dann was passiert, wenn man border-style auf none setzt?

p {border-style: none; border-width: 50px;}

Obwohl die Rahmengröße 50px beträgt, ist der Rahmenstil auf none gesetzt. In diesem Fall verschwindet nicht nur der Rahmenstil, sondern auch die Breite wird auf 0 gesetzt. Warum verschwindet der Rahmen?

Das liegt daran, dass wenn der Rahmenstil none ist, d.h. der Rahmen根本不存在， dann kann der Rahmen keine Breite haben, daher wird die Rahmenbreite automatisch auf 0 gesetzt, unabhängig davon, was Sie ursprünglich definiert haben.

Dies ist sehr wichtig zu beachten. Tatsächlich ist das Vergessen der Angabe des Rahmens ein häufiger Fehler. Gemäß den folgenden Regeln haben alle h1-Elemente keine Rahmen, geschweige denn 20 Pixel breit:

h1 {border-width: 20px;}

Da der Standardwert von border-style none ist, bedeutet das Fehlen einer Angabe, dass border-style: none ist.Daher müssen Sie eine Rahmenart angeben, wenn Sie möchten, dass der Rahmen sichtbar ist.

Rahmenfarbe

Das Festlegen der Rahmenfarbe ist sehr einfach. CSS verwendet einen einfachen border-color-EigenschaftEs kann gleichzeitig bis zu 4 Farbwerte akzeptieren.

Man kann jede Art von Farbwert verwenden, z.B. kann es eine benannte Farbe oder ein hexadezimales und RGB-Wert sein:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Wenn der Farbwert weniger als 4 Zeichen enthält, tritt die Wertkopie in Kraft. Zum Beispiel deklariert das folgende Regelwerk, dass die oberen und unteren Rahmen des Absatzes blau und die linken und rechten Rahmen rot sind:

p {
  border-style: solid;
  border-color: blue red;
  }

Anmerkung:Die Standardrahmenfarbe ist die Vordergrundfarbe des Elements selbst. Wenn keine Farbe für den Rahmen deklariert wird, ist sie die gleiche wie die Textfarbe des Elements. Andererseits, wenn das Element keinen Text hat, z.B. eine Tabelle, die nur Bilder enthält, dann ist die Rahmenfarbe der Tabelle die Textfarbe des übergeordneten Elements (da color vererbt werden kann). Dieses übergeordnete Element ist wahrscheinlich body, div oder eine andere Tabelle.

Definieren Sie die Farbe eines einzigen Rahmens

Es gibt einige Attribute für die Farbe eines einzigen Rahmens. Der Grund ihrer Funktion ist derselbe wie der für die einzigen Stile und Breitenattribute:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Um einem h1-Element einen geraden schwarzen Rahmen und einen geraden roten rechten Rahmen zuzuweisen, können Sie dies wie folgt angeben:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Transparenter Rahmen

Wir haben bereits erwähnt, dass wenn der Rahmen kein Muster hat, er keine Breite hat. Es gibt jedoch einige Fälle, in denen Sie möglicherweise einen unsichtbaren Rahmen erstellen möchten.

CSS2 führte den Farbwert transparent für die Rahmenfarbe ein. Dieser Wert wird verwendet, um sichtbare, breite Rahmen zu erstellen, die jedoch unsichtbar sind. Sehen Sie sich das folgende Beispiel an:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

Wir haben für die obigen Links die folgenden Stile definiert:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Versuchen Sie es selbst aus

Auf eine Weise funktioniert die Verwendung von transparent so, als wäre die Ränder eine zusätzliche Innenabstand; darüber hinaus hat es auch den Vorteil, dass sie bei Bedarf sichtbar gemacht werden können. Diese transparenten Ränder entsprechen dem Innenabstand, da der Hintergrund des Elements in den Bereich der Ränder erstreckt wird (wenn ein sichtbarer Hintergrund vorhanden ist).

Wichtig:Vor IE7 wurde IE/WIN keine Unterstützung für transparent angeboten. In früheren Versionen setzte IE die Ränderfarbe basierend auf dem Wert von color des Elements.

CSS-Randeigenschaften

Werkzeugkasten

CSS-Referenzhandbuch

CSS-Beispiel

CSS-Test

CSS-Tutorial

Sponsorenlinks