2.11.3 Rahmen
en Border
fr Cadre

• 1 Allgemein
  • a) Prinzip
  • b) Beispiel 1: Legt die 3 Attribute in einer Angabe fest
  • c) Beispiel 2: Ebenfalls mit 3 Attributen in einer Angabe
  • d) Grundlagen-Websites und Workshops
• 2 Rahmenbreite (border-width)
  • a) Bezeichnungen
  • b) Numerische Angaben
  • c) Relative Angaben
  • d) Beispiel 1: Numerische Angabe
  • e) Beispiel 2: Relative Angabe
  • f) Workshops
• 3 Rahmentyp (border-style)
  • a) Bezeichnungen
  • b) Beispiel 1: Textabsatz mit Rahmendicke medium und Typ dotted
  • c) Beispiel 2: Textabsatz mit Rahmendicke medium und Typ double
  • d) Beispiel 3: Textabsatz mit Rahmendicke 6px und Typ groove
  • e) Beispiel 4: Textabsatz mit Rahmendicke 6px und Typ ridge
  • f) Beispiel 5: Textabsatz mit Rahmendicke 6px und Typ inset
  • g) Beispiel 6: Textabsatz mit Rahmendicke 6px und Typ outset
  • h) Workshops
• 4 Rahmenfarbe (border-color)
  • a) Bezeichnungen
  • b) Beispiel
  • c) Workshops

-

⇧ 1 Allgemein

• a) Prinzip
• b) Beispiel 1: Legt die 3 Attribute in einer Angabe fest
• c) Beispiel 2: Ebenfalls mit 3 Attributen in einer Angabe
• d) Grundlagen-Websites und Workshops

-

↑ a) Prinzip

Festlegung folgender Angaben

• Breite (border-width)

• Art (border-style)

• Farbe (border-color)

-

↑ b) Beispiel 1: Legt die 3 Attribute in einer Angabe fest

1) Angabe im Quelltext

<p style="border:2pt solid #0000ff;">
Ein 2 Punkt starker, durchgezogener, blauer Rahmen </p>

2) Anzeige im HTML-Dokument

Ein 2 Punkt starker, durchgezogener, blauer Rahmen

• CSS 4 You de Rahmen (border)
  CSS 4 You de Beispiel

-

↑ c) Beispiel 2: Ebenfalls mit 3 Attributen in einer Angabe

1) Angabe im Quelltext

<p style="border: medium double rgb(250,0,255);">
Ein mittelstark, doppelter, roter Rahmen </p>

2) Anzeige im HTML-Dokument

Ein mittelstark, doppelter, roter Rahmen

• W3Schools en Beispiel: All the border properties in one declaration

• SELFHTML de Allgemeines zu Rahmen

-

↑ d) Grundlagen-Websites und Workshops

Grundlagen

• W3Schools: en CSS Border

• W3Schools:
  en Beispiel: Set different borders on each side
  en Beispiel: All the bottom border properties in one declaration
  en Beispiel: All the left border properties in one declaration
  en Beispiel: All the right border properties in one declaration
  en Beispiel: All the top border properties in one declaration

• Web Design Group en Syntax: Border

Anwendungen

• Homepage-Total.de de Rahmen für Bilder erstellen

-

⇧ 2 Rahmenbreite (border-width)

• a) Bezeichnungen
• b) Numerische Angaben
• c) Relative Angaben
• d) Beispiel 1: Numerische Angabe
• e) Beispiel 2: Relative Angabe
• f) Workshops

-

↑ a) Bezeichnungen

• border-with = Rahmenstärke = Rahmendicke

-

↑ b) Numerische Angaben

• pt = Punkt = 1/72 inch (z.B. font-size:12pt)

• px = Pixel (z.B. border-width:1px)

• em

• % = Prozent.

• etc.

• SELFHTML de Numerische Angaben
  SELFHTML de Punkt/Inch/Millimeter-Umrechner

-

↑ c) Relative Angaben

• thin = dünn

• medium = mittelstark

• thick = dick

-

↑ d) Beispiel 1: Numerische Angabe

1) Angabe im Quelltext

<p style="border-width:5px;border-style:dotted;">
Ein Rahmen 5px breit</p>

2) Anzeige im HTML-Dokument

Ein Rahmen 5px breit

-

↑ e) Beispiel 2: Relative Angabe

1) Angabe im Quelltext

<p style="border-width:thin;border-style:dashed;">
Ein dünner, gestrichelter Rahmen</p>

2) Anzeige im HTML-Dokument

Ein dünner, gestrichelter Rahmen

-

↑ f) Workshops

• SELFHTML:
  de border[-top, -right, -bottom, -left]-width (Rahmendicke)
  de Beispiel

• W3Schools:
  en Beispiel: Set the width of the bottom border
  en Beispiel: Set the width of the left borderborder
  en Beispiel: Set the width of the right border
  en Beispiel: Set the width of the top border
  en Beispiel: All the width of the border properties in one declaration

• Web Design Group en Syntax: border width

• CSS 4 You de Rahmenbreite (border-width)

-

⇧ 3 Rahmentyp (border-style)

• a) Bezeichnungen
• b) Beispiel 1: Textabsatz mit Rahmendicke medium und Typ dotted
• c) Beispiel 2: Textabsatz mit Rahmendicke medium und Typ double
• d) Beispiel 3: Textabsatz mit Rahmendicke 6px und Typ groove
• e) Beispiel 4: Textabsatz mit Rahmendicke 6px und Typ ridge
• f) Beispiel 5: Textabsatz mit Rahmendicke 6px und Typ inset
• g) Beispiel 6: Textabsatz mit Rahmendicke 6px und Typ outset
• h) Workshops

-

↑ a) Bezeichnungen

• dotted = punktiert

• dashed = gestrichelt

• solid = durchgezogen

• double = doppelt (Doppellinie)

• groove = gerillt

• ridge = erhöht

• inset = eingelassen

• outset = hervortretend

-

↑ b) Beispiel 1: Textabsatz mit Rahmendicke medium und Typ dotted

1) Angabe im Quelltext

<p style="border-width:medium;border-color:#FF9999;
border-style:dotted;padding:5px;">
Textabsatz mit Rahmendicke medium und Typ dotted.</p>

2) Anzeige im HTML-Dokument

Textabsatz mit Rahmendicke medium und Typ dotted.

-

↑ c) Beispiel 2: Textabsatz mit Rahmendicke medium und Typ double

1) Angabe im Quelltext

<p style="border-width:medium;border-color:#FF9999;
border-style:double;padding:5px;">
Textabsatz mit Rahmendicke medium und Typ double.</p>

2) Anzeige im HTML-Dokument

Textabsatz mit Rahmendicke medium und Typ double.

-

↑ d) Beispiel 3: Textabsatz mit Rahmendicke 6px und Typ groove

1) Angabe im Quelltext

<p style="border-width:8px;border-color:#9999FF;
border-style:groove;padding:5px;">
Textabsatz mit Rahmendicke 8px und Typ groove.</p>

2) Anzeige im HTML-Dokument

Textabsatz mit Rahmendicke 6px und Typ groove.

-

↑ e) Beispiel 4: Textabsatz mit Rahmendicke 6px und Typ ridge

1) Angabe im Quelltext

<p style="border-width:6px;border-color:#66CC66;
border-style:ridge;padding:5px;">
Textabsatz mit Rahmendicke 6px und Typ ridge.</p>

2) Anzeige im HTML-Dokument

Textabsatz mit Rahmendicke 6px und Typ ridge.

-

↑ f) Beispiel 5: Textabsatz mit Rahmendicke 6px und Typ inset

1) Angabe im Quelltext

<p style="border-width:6px;border-color:#FF9999;
border-style:inset;padding:5px;">
Textabsatz mit Rahmendicke 6px und Typ inset.</p>

1) Angabe im Quelltext

Textabsatz mit Rahmendicke 6px und Typ inset.

-

↑ g) Beispiel 6: Textabsatz mit Rahmendicke 6px und Typ outset

1) Angabe im Quelltext

<p style="border-width:6px;border-color:#9999FF;
border-style:outset;padding:5px;">
Textabsatz mit Rahmendicke 6px und Typ outset.</p>

2) Anzeige im HTML-Dokument

Textabsatz mit Rahmendicke 6px und Typ outset.

-

↑ h) Workshops

• SELFHTML de border[-top, -right, -bottom, -left]-style (Rahmentyp)
  SELFHTML de Beispiel

• W3Schools: en Beispiel: Set the style of the four borders

• Web Design Group en Syntax: border Style

-

⇧ 4 Rahmenfarbe (border-color)

• a) Bezeichnungen
• b) Beispiel
• c) Workshops

-

↑ a) Bezeichnungen

• border color = Rahmenfarbe

-

↑ b) Beispiel

1) Angabe im Quelltext

<p style="border-top-color:#FF00FF;
border-left-color:#00FF00;
border-right-color:#3333FF;border-bottom-color:#FFFF00;
border-width:4px;
border-style:solid;padding:8px">
xxxxx xxxxx xxxxx usw.</p>

2) Anzeige im HTML-Dokument

xxxxx xxxxx xxxxx usw.

-

↑ c) Workshops

• SELFHTML de border[-top, -right, -bottom, -left]-color (Rahmenfarbe)
  SELFHTML de Beispiel

• W3Schools: en Beispiel: Set the color of the four borders

• Web Design Group en Border Color

↑