CSS Rahmenzusammenfassung

Rahmendefinitionen mit CSS zusammenfassen

Der Rahmen für ein Element auf der Webseite hat vier Seiten: oben, rechts, unten und links. Für jede dieser Seiten kann man individuelle Definitionen wählen, wenn man einen Rahmen einsetzen möchte, doch das muss man nicht, weil es die Möglichkeit gibt, die Definitionen zusammenzufassen.

Das macht die CSS-Datei übersichtlicher und die Verwaltung einfacher, vor allem dann, wenn man mit verschiedenen Arten von Rahmen konfrontiert ist. Außerdem gibt es oft die Situation, dass ein Rahmen einheitlich aussieht und dann ist auch die Definition kürzer und leichter zu durchschauen.

Zusammenfassung der Rahmendefinitionen in CSS

<p style="border: 1px solid #ff0000;">Ein kompletter Rahmen</p> <p style="border-top-style: solid; border-top-width: 1px; border-top-color: #ff0000; border-right-style: solid; border-right-width: 1px; border-right-color: #ff0000; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ff0000; border-left-style: solid; border-left-width: 1px; border-left-color: #ff0000;">Noch ein kompletter Rahmen</p>

---

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

---

ergibt:

Ein kompletter Rahmen

Noch ein kompletter Rahmen

Diese beiden Beispiele sind eine gute Demonstration über den Sinn des Zusammenfassens von Rahmengestaltungen. Im ersten Beispiel wurde für alle Seiten die gleiche Einstellung gewählt und das gilt auch für alle vier Seiten, indem mit border: dies angekündigt wird.

Im zweiten Beispiel werden genau die gleichen Befehle erteilt, aber für jede Seite individuell. Das Ergebnis ist, wie man sehen kann, das gleiche, doch der Quellcode sieht gewaltig anders und umfangreicher aus. Man hat also im ersten Beispiel gleich einiges an Tipparbeit erspart.

Diese Zusammenfassungen findet man oft in CSS, auch bei margin: 0 wird der Abstand für alle vier Seiten auf 0 Pixel gesetzt und verfolgt damit das gleiche Prinzip. Nicht möglich ist die Zusammenfassung freilich dann, wenn man unterschiedliche Rahmenstile, Rahmenstärken oder Farben verwenden möchte. Dann müsste man die individuellen Einstellungen anführen.

Lesen Sie auch

---

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

---

Mit CSS lassen sich die Texte sehr schön formatieren und man kann die gesamte Seite mit den Abständen und den Textfluss aufbauen, aber es geht noch mehr. Eine wichtige Thematik ist die Absatzformatierung, bei der vertikale und horizontale Ausrichtung ebenso möglich ist wie auch der Zeilenumbruch und damit bewusst kürzere Zeilenlängen oder die Zeilenhöhe.

• Zeilenabstand (line-height)
• Einzug (text-indent)
• Zeilenumbruch (white-space)
• Horizontale Ausrichtung (text-align)
• Vertikale Ausrichtung (vertical-align)

Das nächste Thema bei den Formatierungen mit CSS betrifft den Rahmen. Der Rahmen ist häufig ein optisches Werkzeug, um Inhalt hervorzuheben oder zu strukturieren und man kann in CSS viele Formatierungen wählen wie der Typ der Linie, die Farbe oder auch die Rahmenstärke.

• Rahmenstärke
• Rahmenfarbe
• Rahmentyp
• Rahmen Zusammenfassung

Ebenfalls interessant sind die Gestaltungsmöglichkeiten bei den Listen. Sie können bei den Abständen individuell eingestellt werden und man kann bei der ungeordneten Liste sogar ein eigenes Bild als Aufzählungszeichen wählen.

• Bulletzeichen (ul)
• Bullettzeichen (ol)
• list-style-image
• Listen formatieren

Themenseiten

Diesen Artikel teilen

• 
• 
• 
• 
• 

Infos zum Artikel

Artikel-Thema: CSS Rahmenzusammenfassung
Beschreibung: Die 👍 Rahmen können mit verschiedensten Angaben in CSS versehen werden, um sie zu gestalten und diese ✅ Ideen lassen sich gut zusammenfassen.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel