Border Styles

In diesem Tutorial will ich euch erklaeren, wie ihr diese Tollen "Raender" bei Links oder Ueberschriften hinbekommt. Das ganze ist im jeweiligem Abschnitt im CSS Bereich verankert.
Je nachdem, was du stylen willst - eigentlich ist es sehr einfach.
Es besteht lediglich aus ein paar Begriffen, die sich auch abzaehlen lassen xD

Wie funktioniert das nun?

nehmen wir mal an, du willst, dass deine Ueberschrift 1 einen Langen "Unterstrich" (border-bottom) besitzt. Nun machst Folgendes: fuege in den Abschinitt h1 { } einfach das hier ein:

border-bottom: 1px solid #ffffff;

♥ border steht fuer "Rand"
♥ bottom fuer sozusagen "Boden", also Unten.
♥ 1px fuer die Dicke/Staerke des Striches
♥ solid steht fuer gearde, also ein gearder udn durgaengiger Strich
♥ #ffffff steht fuer den Hexcode, also dem Farbcode, den du Via dein GFX Progri, Farbtabelle rausbekommst (ffffff=weiss, 000000=schwarz, adadad=grau...)
Und zum Schluss ned vergessen, ales mit einem Strichpunkt ; zu schliessen.

Jah, das ist eigentlich as wichtigste. Weiter unten erklaere ich weitere Styles.
Du kannst die einzelnen Werte wie "bottom", "1px", "solid", "#ffffff"
auch beliebig aendern.

Richtung (oben, unten, links oder rechts?)

Da alle Internetsprachen auf Englisch aufgebaut sind, emfiehlt es sich hier, ein bisschen Englisch zu verstehen.
Wenn zu beispielsweise deinen Border Links haben willst, gibts du border-left ein.
♥ fuer rechts: border-right
♥ fuer oben: border-top

Wie breit?

Hier ist es eigentlich egal, welchen Wert du eingibst, hauptsache, er ist realistisch.
1px ist die kleinste, gebraeuchige EInheit (natuerlich gibt's auch Inch, etc... aber die sind eher weniger gebraucht, wenn man nur "Hobbiemaessig" codet.)
Wie dick dein Border sein soll, kannst du selber auswaehlen. Erfahrung macht den Meister! (Oder Uebung ;) )

Strich, Punkte, Gestrichelt, doppelt oder Inset?

...diese Eigenschaften muss man nur auf English uebersetzen, um den Wert fuer's CSS zu wissen.

♥ solid ... Strich ♥ dotted ... gepunktet ♥ dashed ... gestrichelt ♥ double ... Doppelter, einfacher Strich ♥ ridge ... kann man verschieden verwenden. Als ganzen Border sieht es wie 3D aus (wird meist fuer Login Kaestchen verwendet) Aber als einfacher Strich sieht's aus, wie 2 Striche, einer dicker, einer Duenner. Aus der Farbe, die du eingibst, ergibt sich (wie ein "Schatten) dazu dann die 2. Farbe.

Hexcode

Hier ist es egal, welche Farbe du eingibst. Es ist allerdings nur eine moeglich. Du findets sie in deinem GFX Programm bei der Farbentabelle. Natuerlich kannst du dafuer auch die Wort-ausdruecke verwenden, wie:
green ... Gruen ...
etc...

Zum Schluss

Ich hoffe dieses Tut hat dir weitergeholfen, und du kannst nun den Border Style beliebig einsetzen.
Es ist natuerlich moeglich, mehrer Border gleichtzeitig einzusetzetn:

border-bottom: 1px dotted #000000; border-left: 5px solid #adadad; border-bottom: 1px solid #000000;

Oder Aber auch ganz mit einem border umrahmen:

border: 2px ridge #ffffff;

Border Styles sind fuer jeden Abschnitt anwedbar, ob body, inset, textarea, h1, h2, b, i, u, links etc...


Probier's einfach aus! Nur so kannst du die Anwendungen fuer CSS herausfinden :)