|
Ränder mit CSS Ränder für Seitenelemente wie z.B. für <div>, <p>, <span> oder <table> mit CSS formatieren. Auf dieser Seite werden einige Beispiele zum Thema Randformatierung dargestellt. Farbe, Breite und Rahmentyp (style) wird unterschieden, Varianten in der Notierung werden aufgezeigt. Außenränder mit CSS-Inlineanweisungen
Beispiel einer CSS-Inlineanweisung für einen Rahmen (Außenrand). Die Inlineanweisung steht im HTML-Tag und gilt deshalb nur für das betreffende Element.
Beispiel einer CSS-Inlineanweisung für einen Rahmen (Außenrand), die mit weiteren CSS-Anweisungen für Breite und Innenabstand kombiniert weurde. Die Inlineanweisung steht im <div>-Tag und gilt deshalb ausschließlich für dieses Seitenlement.
Außenränder mit globaler Definition Im <head>-Bereich notiert gilt die CSS-Anweisung für alle betreffenden Elemente innerhalb des HTML-Dokuments. Als Beispiele nehme ich hier das <table>-Element und eine freie Klasse mit dem Bezeichner 'RandRot'. im Head-Bereich:
Varianten der Notierung und Formatierung Als Beispiel nehme ich hier wieder eine CSS-Formatierung für das <table>-Element. Ebenso können Sie die Ränder und Rahmen für andere Elemente oder für freie Klassen definieren. 1 Strichstärken Die Kurzschreibweise - alle Ränder gleich
unterschiedliche Strichstärken Die Strichstärken der Seitenränder sind hier separat notiert und könnten dann unterschiedlich stark festgelegt werden.
2 Rahmenfarben unterschiedliche Rahmenfarben Die Rahmenfarben der Seitenränder sind hier separat notiert und können dann unterschiedlich festgelegt werden.
3 Rahmentypen Rahmentypen (style) 3D Typen Gilt für Rahmen mit 3D-Effekt: Aus dem eingetragenen Farbwert für den Tabellenrahmen errechnet der FF und der IE die Farbe für die 'beleuchtete' Seite und die Farbe für die Schattenseite auf seine eigenenwillige Art und Weise. Daher sind unterschiedliche Darstellungen in den Browsern nicht zu vermeiden! Nicht alle 3D Effekte sind für sehr helle Farben geeignet. Übersicht 1 border-styles:
Rahmentypen (style) Strich-Typen Übersicht 2 border-styles:
Auch die Rahmentypen der Seitenränder kann man separat notieren und könnten dann unterschiedlich festgelegt werden. Das macht aber in den wenigsten Fällen Sinn.
<style type="text/css">
<!--
table {
border-color: #B3AAEC;
border-width: 6px;
border-top-style: groove; */ Rahmentyp oben /*
border-right-style: ridge; */ Rahmentyp rechts /*
border-bottom-style: groove; */ Rahmentyp unten /*
border-left-style: ridge; */ Rahmentyp links /*
}
-->
</style>
![]() | ||||||||||||||||||||||||||||||||||||
|