Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

Anmeldung: https://forum.selfhtml.org/events/2

CSS/Eigenschaften/äußere Gestaltung/Rahmen/border

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der border-Eigenschaft können Sie das Aussehen eines Rahmens um ein Element bestimmen. Sie ist eine Zusammenfassung der möglichen Einzelangaben zu Rahmendicke, Rahmentyp und Rahmenfarbe.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0

alle Seiten eines Elements[Bearbeiten]

Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen:

Beispiel: Randlinien ansehen …
#one {
	border: 20px solid red;
}

#two {
	border: 5px dotted red;
}

#three {
	border: 20px groove red;
}

#four {
	border: 20px ridge red;
}

#five {
	border: 20px inset red;
}

#six {
	border: 20px outset red;
}

#seven {
	border-width: 20px;
	border-style: solid;
	border-color: red blue yellow green;
}

#eight {
	border: 20px double red;
	border-radius: 20px;
}

#nine {
	border: 20px dashed red;
	border-radius: 50%;
}

#ten {
	border: 10px solid red;
	outline: 10px solid blue;
	box-shadow: 0 0 0 10px yellow inset;
}
Das Beispiel enthält 10 div-Elemente, die über ihre Selektoren unterschiedliche Rahmen erhalten:
  • Box 1 erhält einen 20px breiten festen (solid) roten Rahmen.
  • Box 2 hat nur einen gepunketen Rahmen (dotted) von 2px Breite.
    Beachten Sie, dass die Breite des Rahmen zur Breite des Elements dazugerechnet wird. Mit box-sizing können Sie dies unterbinden.
  • Box 3 -6 erhalten mit den Schlüsselwörtern groove, ridge, inset und outset einen 3d-Effekt. Die Rahmenfarben werden vom Browser aus dem angegebenen Farbwert berechnet.
  • Box 7 zeigt, wie Sie über mehrfache Angaben der Einzeleigenschaft border-color jede Seite des Rahmens in der gewünschten Farbe darstellen können.
  • Box 8 erhält mit double einen doppelten Rahmen, der mit border-radius abgerundete Ecken erhält.
  • Box 9 hat eine gestrichelten Linie (dashed) und einen border-radius von 50%.
  • Box 10 ist ein Beispiel für mehrere Konturlinien. Dabei ist nur der rote Streifen ein Rand. Der blaue Streifen besteht aus einer Außenlinie outline, die sich außerhalb der border-box befindet. Der gelbe Rand ist ein Innenschatten, der mit box-shadow realisiert wurde.

Die Reihenfolge der Angaben ist egal. Es dürfen dabei auch nur eine oder zwei Angaben gemacht werden. Bei fehlender Farbangabe ist die Voreinstellung die Textfarbe des Elements, bei fehlender Rahmenstärke ist die Voreinstellung medium.

Hinweis

Obwohl die Reihenfolge der Angaben beliebig ist und keine Verwechslungsgefahr besteht, sollten Sie dennoch konsequent bei einer Notation bleiben. Die meisten Werkzeuge zur Fehlersuche verwenden die Reihenfolge border: width style color;.

einzelne Seiten eines Elements[Bearbeiten]

Daneben können Sie zusammenhängende Angaben für Rahmendicke, Rahmenfarbe und Rahmentyp auch für einzelne Seiten des Elements machen.

  • border-top definiert eine zusammenhängende Angabe für oben,
  • border-right für rechts,
  • border-bottom für unten und
  • border-left für links.
Beachten Sie: Eine weitere Zusammenfassung wie zum Beispiel border: 1px solid red 3px dotted green; ist nicht möglich.
Beispiel: Randlinien an einzelnen Seiten ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Border</title>
    <style>
      h2 {
        border-bottom: thick double blue;
        float: left;
        width: 48%;
      }
      h2.anders {
        border-bottom: medium solid blue;
        float: right;
      }
      p {
        border: 1px solid red;
        width: 30em;
        padding: 5px;
        clear: both;
      }
      p.beachten {
        border: none;
        border-left: 5px solid #FFCCCC;
      }
    </style>
  </head>
  <body>
    <h1>Border</h1>
    <h2>Überschrift, doppelt unterstrichen</h2>
    <h2 class="anders">Teilüberschrift, einfach unterstrichen</h2>
    <p>Textabsatz begrenzter Breite, mit einem schmalen roten Rahmen</p>
    <p class="beachten">Dies kennen Sie ...</p>
  </body>
</html>
  • Überschriften nehmen als Block-Elemente normalerweise die gesamte Fensterbreite ein. Die Angaben zu float bei den Überschriften stellen sicher, dass diese nur so breit sind, wie ihr Inhalt es erfordert. Näheres dazu finden Sie unter CSS/Eigenschaften/Positionierung/float.
  • Für den Absatz mit der Klasse „beachten“ gilt wie für alle Absätze zunächst einmal ein kompletter roter Rahmen. Da dieser nicht erwünscht ist, wird er mit border: none; entfernt, bevor der linke Rahmen gesetzt wird.


Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]