CSS-Rahmen (Border)


CSS Tutorial  >  Rahmen

Gebräuchliche Arten zur Bestimmung von Rahmeneigenschaften in CSS sind wie folgt:

  • border-style
  • border-width
  • border-color
  • border-top-, border-left-, border-bottom-, border-right-
  • border

    border-style

    Die border-style-Eigenschaft definiert das Format des Rahmens. Die untenstehende Tabelle zeigt die möglichen Werte und wie die einzelnen Formate aussehen.

    CSS-StatementAusgabe

    p {border-style:solid;}

    Solider Rahmen

    p {border-style:dashed;}

    Gestrichelter Rahmen

    p {border-style:double;}

    Doppelter Rahmen

    p {border-style:dotted;}

    Gepunkteter Rahmen

    p {border-style:groove;}

    Groove Rahmen

    p {border-style:ridge;}

    Ridge Rahmen

    p {border-style:inset;}

    Inset Rahmen

    p {border-style:outset;}

    Outset Rahmen

    border-width

    Die border-width-Eigenschaft definiert die Breite des Rahmens. Der Wert hierfür kann “thin”, “medium”, “thick”, oder ein Zahlenwert sein.

    CSS-StatementAusgabe

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

    Rahmenbreite 9px

    p {border-width:medium; border-style:dashed;}

    Rahmenbreite Mittel

    border-color

    Die border-color-Eigenschaft definiert die Farbe des Rahmens.

    Beispiele:

    CSS-StatementAusgabe

    p {border-color:#0000FF; border-style:solid;}

    Rahmenfarbe Blau

    p {border-color:red; border-style:dotted;}

    Rahmenfarbe Rot

    border-top-, border-left-, border-bottom-, border-right-

    Anweisungen wie (oben, links, unten, rechts) können mit style, width und color zusammengebracht werden um einen 3-teiligen CSS-Befehl zu erzeugen. border-top-style definiert zum Beispiel den Style der oberen Seite des Rahmens. Einige Beispiele:

    CSS-StatementAusgabe

    p {border-top-style:solid; border-bottom-style:dotted;}

    Beispiel 1

    p {border-top-style:solid; border-top-width:medium;}

    Beispiel 2

    p {border-left-style:solid; border-bottom-style:dashed;
    border-bottom-color:#00FF00;}

    Beispiel 3

    border

    Wenn die Eigenschaften für alle 4 Seiten des Rahmens gleich sein sollen, so können sie innerhalb einer einzigen Zeile, mit Hilfe der border-Eigenschaft, angegeben werden. Zusätzlich können auch alle drei Rahmeneigenschaften (border-style, border-width und border-color) mit dem border-Befehl zu einer einzigen Zeile zusammengefügt werden.

    Mit dem folgenden CSS-Statement,

    p {
      border:#0000FF 5px solid;
    }

    würde der folgende HTML-Code,

    <p>Mit einer einzigen Zeile können alle Rahmeneigenschaften angegeben werden.</p>

    so aussehen:

    Mit einer einzigen Zeile können alle Rahmeneigenschaften angegeben werden.

    Folgende Seite: CSS Padding



    Copyright © 2024   1keydata.com   Alle Rechte vorbehalten