Navigation: Startseite → Javascript → Textcss

Style Sheets

Das Box-Modell

Inhalt
Hier befindet sich der eigentliche Inhalt. Meistens ist das Text oder ein Bild.
padding
Die Polsterung ist normalerweise 0: die sichtbare Box hört dort auf, wo auch der Inhalt aufhört.
Mehr padding bedeutet also mehr Abstand des Inhalts zum Rand der sichtbaren Box.
border
Die Breite und Art des Rahmens wird über border festgelegt.
margin
margin vergrößert die Box um einen unsichtbaren Rahmen.
Es hält andere Elemente sozusagen auf Abstand.

margin - Ränder und Abstände

MARGIN kontrolliert die Außenränder nach oben (top), unten (bottom), links (left) und rechts (right).

<h4 style="margin-top:50px";>

Überschrift mit 50 Pixel Abstand nach oben

<h4 style="margin-bottom:50px";>

Überschrift mit 50 Pixel Abstand nach unten

<h4 style="margin-left:50px";>

Überschrift mit 50 Pixel Abstand von links

padding - Polsterung

padding bestimmt den Abstand des Inhalts zum Rand der sichtbaren Box.

<h4 style="padding-top:50px;background-color:yellow";>

Überschrift mit 50 Pixel Polsterung nach oben

<h4 style="padding-bottom:50px;background-color:yellow";>

Überschrift mit 50 Pixel Polsterung nach unten

<h4 style="padding-left:50px;background-color:yellow";>

Überschrift mit 50 Pixel Polsterung nach links

<h4 style="padding:50px;background-color:yellow";>

Überschrift mit 50 Pixel Polsterung in alle Richtungen

Feststehendes Hintergrundbild

Das Hintergrundbild bewegt sich nicht mit, wenn der Text gescrollt wird.

<head>
<style>
body 
{ 
   background-image:url(.bild.jpg); background-attachment:fixed;
}
</style>
</head>

Verschiedene Überschriften

<head>
<style>
h1
{
   font-family:arial, helvetica;
   font-size:60pt;
   color:maroon;
   font-style:italic;
   letter-spacing:0.9mm;
}

h2
{
   font-family:arial, helvetica;
   font-size:48pt;
   color:darkgreen;
}

h3
{
   font-family:arial, helvetica;
   font-size:36pt;
   color:indigo;
}

h4
{
   font-family:arial, helvetica;
   font-size:24pt;
   color:cornflowerblue;
}

h5
{
   font-family:arial, helvetica;
   font-size:16pt;
   color:maroon;
}

</style>
</head>

<h1>Überschrift  h1</h1>
<h2>Überschrift  h2</h2>
<h3>Überschrift  h3</h3>
<h4>Überschrift  h4</h4>
<h5>Überschrift  h5</h5>

Überschrift h1

Überschrift h2

Überschrift h3

Überschrift h4

Überschrift h5

Liste mit eigener Grafik

<ul style=list-style-image:url(buch.gif) }>
   <li>Platz 1: Linux Netzwerke verfremden</li>
   <li>Platz 2: Windows Konfiguration und zweite Schritte</li>
   <li>Platz 3: MacOS der glückliche Zweite?</li>
</ul>

Die Bücher des Monats

Platz 1: Linux Netzwerke verfremden
Platz 2: Windows Konfiguration und zweite Schritte
Platz 3: MacOS der nächste Gewinner?

Die Definition steht unter <head>!

<head>
<style type="text/css">
   ul.buch { list-style-image:url(buch1.gif)}
   ul.punkt { list-style-image:url(p_gelb.gif)}
</style>
</head>

Angewendet wird die jeweilige Liste mit

<ul class="buch">
<li>Platz 1</li>
...
</ul>

oder:

<ul class="punkt">

Der Name der class darf keine Leerzeichen enthalten!

Gestaltung von Links

<style type="text/css">
a:link
{
   color:brown;
   text-decoration:underline;
}

a:visited
{
   color:blue;
   text-decoration:underline;
}

a:active
{
   color:black;
   text-decoration:underline;
}

a:hover
{
   color:green;
   text-decoration:none;
}
</style>

Erläuterungen:

link: Farbe und Textgestaltung des noch nicht angeklickten Links
visited: angeklickter Link
active: gerader aktiver Link
hover: Link, auf dem die Maus steht

Eigene Schriftformatierungen

<style>
.blau_gruen
{
    font-family:verdana,arial, helvetica;
    font-size:18pt;
    color:blue;
    background-color:cyan;
}
</style>
<p class="blau_gruen">
Blaue Schrift - grüner Hintergrund
</p>

Blaue Schrift - grüner Hintergrund

Buchstaben-/Wortabstand

<p style="letter-spacing:5px">
Buchstabenabstand 5 Pixel
</p>

Buchstabenabstand 5 Pixel

<p style="word-spacing:5px">
Der Wortabstand beträgt 5 Pixel.
</p>

Der Wortabstand beträgt 5 Pixel.

line-height - Abstand zwischen den Zeilen

<p style="line-height:50px">
Diese Zeilen haben einen <br>
Abstand von 50 Punkten (px)

Diese Zeilen haben einen
Abstand von 50 Punkten (px)

Eigene Absatzdefinitionen

<style>
p.gross 
{ 
   font-size:14pt; color:black;line-height:18pt 
}

p.klein 
{ 
   font-size:8pt; 
   color:black;
   line-height:18pt;
   background-color:lightcyan; 
}
</style>
<p class="gross">Text</p>

Einen völlig anderen Weg gehen das MacOS, Unix und Linux. Die Partitionen der Festplatte werden sogenannten "Mountpoints" zugeordnet, d. h. sie werden als Verzeichnis in das Dateisystem eingebunden. Laufwerksbuchstaben kennen diese Betriebssysteme nicht. Verzeichnisse werden durch den Slash (/) getrennt.

<p class="klein">Text</p>

text-decoration

<span style="text-decoration:underline;font-size:36pt">
Textdekoration unterstrichen Schriftgröße 36</span>

Textdekoration unterstrichen

<span style="text-decoration:underline overline;font-size:36pt">
Textdekoration unterstrichen und überstrichen Schriftgröße 36</span>

Textdekoration unterstrichen und überstrichen

<span style="text-decoration:line-through;font-size:36pt">
Textdekoration durchgestrichen Schriftgröße 36</span>

Textdekoration durchgestrichen

font-weight

<span style="font-weight:bold;">
fett</span>

fett

<span style="font-weight:bolder;">
extra fett.</span>

extra fett

<span style="font-weight:lighter;">
dünn.</span >

dünn

vertical-align

vertical-align richtet Elemente in einer Zeile an:

Ausrichtung von Bildern

<img src="lago_flumendosa.jpg" border="0">
<img style="vertical-align:top" src="breyeller_see.jpg" border="0">
<img style="vertical-align:bottom" src="rursee.jpg" border="0">

Ausrichtung von Text

vertical-align:middle

Text Text

vertical-align:top

Text Text

vertical-align:sub

Text Text

vertical-align:super

Text Text

vertical-align:text-top

Text Text

vertical-align:text-bottom

Text Text

Schriftgröße

<span style="font-size:96pt">
Schriftgröße 96pt</span>

Schriftgröße 96pt

<span style="font-size:48pt">
Schriftgröße 48pt</span>

Schriftgröße 48pt

font-family - Schriftart festlegen

<p style="font-family:comic sans ms;times,times new roman">
<p style="font-family:arial;times,times new roman">
<p style="font-family:times,times new roman,arial">

Schriftart Comic Sans MS

Schriftart Arial

Schriftart Times new roman

font-style - Kursivschrift

<p style="font-style:italic">

Marktanteile der verschiedenen Betriebssysteme im Serverbereich

font-variant - (Kapitälchen)

<p style="font-variant:small-caps">

Marktanteile der verschiedenen Betriebssysteme im Serverbereich

Formatierung von Absätzen

Blocksatz

<p style="text-align:justify">

1991 begann Linus Torvalds in Helsinki mit der Entwicklung einer Terminal-Emulation, um unter anderem seinen eigenen Computer besser zu verstehen. Mit der Zeit merkte er, dass sich das System immer mehr zu einem Betriebssystem entwickelte; daraufhin kündigte er es in der Usenet-Themengruppe für das Betriebssystem Minix, comp.os.minix, an.Im September desselben Jahres sollte das System dann auf einem Server den Interessierten zur Verfügung gestellt werden. Dem damaligen FTP-Server-Administrator Ari Lemmke gefiel keiner der von Torvalds vorgeschlagenen Namen Freax oder Buggix, deshalb veröffentlichte er es stattdessen in einem Verzeichnis mit dem Namen Linux. Torvalds war mit diesem Namen zunächst nicht einverstanden, gab seinen Widerstand aber schnell auf, weil er nach eigener Aussage eingestehen musste, dass Linux einfach ein besserer Name war.
(Quelle: https://de.wikipedia.org/wiki/Linux#Historische_Entwicklung)

rechtsbündig formatiert

<p style="text-align:right">

zentriert

<p style="text-align:center">

Erste Zeile eingerückt

<p style="text-indent:1cm">

:after und :before

Mit :after und :before kann einem Element ein Text oder eine Eigenschaft des Elementes selbst (attr) voran- oder nachgestellt werden

Beispiele:

h4:before 
{	
   text-decoration:underline;
   content: "Kapitel "
}

1: Ubuntu

2: OpenSuse

3: Manjaro

Hintergrundbild für einen Absatz

<p style="background-image:url(bilder/jazz.jpg);">
<h5>Jazz-Festival in Holweide</h5>
Zum 7.Mal findet auf dem Marktplatz in Holweide...
</p>

Jazz-Festival in Holweide

Zum 7.Mal findet auf dem Marktplatz in Holweide das über die Grenzen Holweides bekannte Jazz-Festival statt. Es spielen:
Das Trumpet Blues Orchestra, die Electric Flute Band und die über die Grenzen Köln hinaus bekannte Rythm´n Blues Group.
Wieder gibts Musik bis zum Abwinken, für das leibliche Wohl ist ebenfalls gesorgt.

Hintergrundfarbe für einen Absatz

<p style="background-color:#DACDF3;">
<h5>Jazz-Festival in Holweide</h5>
Zum 7.Mal findet auf dem Marktplatz in Holweide...
</p>

Jazz-Festival in Holweide

Besonderer Button

<button name="Klick" value="Galerie"
onclick="window.location.href='beispiele/b_galerie.htm'">
<img src=trenc.jpg" alt="Strände" width="70">
<br />
Strände:
</button>

Dazu gehört ein Style-Sheet-Eintrag im Kopf der Seite, der die Hintergrundfarbe
und die Schriftart festlegt:

<style type="text/css">
button
{
   font-family:comic sans Ms,verdana,arial, helvetica;
   font-size:12pt; 
   text-align:center;
   color:darkslategray;
   background-color:lavender;
   border:outset;
   border-width:6px;
   border-color:#9999FF; 
   border-style:outset;
   padding:5px;
   cursor:pointer;
}
</style>

cursor - Verschiedene Cursorformen

Der Mauscursor ändert sich beim Überfahren der Buttons:

Quelltext am Beispiel des pointer-Cursors:

<button style="background-color:ivory;text-align:center;cursor:pointer;width:100px;">hand</button>

Verschiedene Rahmen

<p style="border-width:medium; border-color:#FF9999; border-style:dotted; padding:5px;">

Rahmendicke medium und Stil dotted.

<p style="border-width:medium; border-color:#9999FF; border-style:dashed; padding:5px;">

Rahmendicke medium und Stil dashed.

<p style="border-width:medium; border-color:#66CC66; border-style:solid; padding:5px;">

Rahmendicke medium und Stil solid.

<p style="border-width:medium; border-color:#FF9999; border-style:double; padding:5px;">

Rahmendicke medium und Stil double.

<p style="border-width:10px; border-color:#9999FF; border-style:groove; padding:5px;">

Rahmendicke 10px und Stil groove.

<p style="border-width:11px; border-color:#66CC66; border-style:ridge; padding:5px;">

Rahmendicke 11px und Stil ridge.

<p style="border-width:9px; border-color:#FF9999; border-style:inset; padding:5px;">

Rahmendicke 9px und Stil inset.

<p style="border-width:12px; border-color:#9999FF; border-style:outset; padding:5px;">

Rahmendicke 12px und Stil outset.

outline - Außenrahmen setzen

Die Eigenschaft outline kennt drei Werte:

outline-width: Breite der Linie (thin, medium, thick oder Angabe in px
outline-color: Farbe des Rahmens
outline-style: Rahmenstil

<button style="outline-width :10px;outline-style:groove;outline-color:blue;background-color:ivory">
Button mit Außenrahmen</button>