CSS

Browser verfügen grundsätzlich über ein Style-Sheet, das HTML-Anweisungen umsetzt.

Dies betrifft den allgemeinen unter <body> definierten Text,  Links - a:link,a: visited, a:active, Überschriften <h1><h2><h3>... Absätze <p> Zeilenhöhen <div>, Tabellenformatierungen <table><TD>, Fettdruck <b><strong> etc.

Sie können Stylesheet-Angaben machen

 

*

{margin:0;
padding:0;
border:0;}

/* Die Angabe gemeinsamer Standardwerte ist nur für ältere Browser erforderlich, die zum Teil unterschiedliche Browser-Stylesheets haben. Neuere Browserversionen sollten gleiche Voreinstellungen haben, grundsätzlich kann es bei nicht gesetzten Angaben jedoch zu unterschiedlichen Interpretationen verschiedener Browser kommen. */

 

CSS Deklarationen vererben ihre Eigenschaften entsprechend der HTML Struktur.
Eigenschaften, die für html{} oder body{} definiert werden, gelten so für alle Elemente der Webseite, falls sie nicht explizit überschrieben weden.

Mit dem Firefox add-on firebug können Sie sich einen Überblick verschaffen über die HTML Struktur und die jeweilig wirksamen CSS-Angaben. Sie können hier auch die Auswirkung anderer Angaben austesten.

Mit CSS können Sie den Inhalt Ihrer HTML-Seiten vom Layout trennen.

Sollten Sie das Layout zu einem späteren Zeitpunkt ändern, können Sie dies einmal in der zentralen .css Datei tun. Das Layout aller mit der .css Datei verknüpften.html Webseiten ändert sich so automatisch.

Grundsätzlich gelten die im jeweiligen Browser-Styleheet hinterlegten Werte. Sie können eigene Angabe in einem Autoren-Stylesheet festlegen. Zusätzlich kann der Benutzer Stylesheet-Angaben für den von ihm verwendeten Browser festlegen.

CSS teilt den Bildschirm in rechteckige Elemente auf - sogenannte Boxen oder Container. Ein Element kann Text und Bilder, sowie Hintergrundgrafik enthalten. Elemente können übereinandergelegt werden.

Mit Hilfe der Container werden Inhalte auf dem Bildschirm positioniert.

Für jedes HTML- Block - Element (div, p. img ..) können mit Stylesheet-Anweisungen (padding, border, margin) Innenabstände, Ränder und Außenabstände definiert werden.

Inline-Elemente (span, ...) können mit display: block in Block - Elemte umgewandelt werden.

Die Standardangaben älterer Browser sind unterschiedlich gesetzt. Schwierigkeiten mit unterschiedlicher Umsetzung kann man umgehen, wenn man zu Beginn des Stylesheet Abstände und Ränder grundsätzlich auf 0 setzt.

*
{
	border: 0;
	margin: 0;
	padding: 0;
}

 

Sie können jeweils die linke obere oder die rechte untere Ecke einer Box definieren und so - zusammen mit Breiten und Höhen-Angaben - die Position eines Elementes auf der Webseite bestimmen.

Elemente können übereinander angezeigt werden. Die Ebene wird mit {z-index:0},{z-index:1},{z-index:2}... festgelegt, je höher der Wert, desto weiter oben liegt das Element.

{position:absolute;
top:20px;
left:20px;}

{position:fixed;
top:20px;
left:20px;}

 

datei.css

.spalte1

{
position:absolute;
font-size:14px;
line-height:15px;
text-align:left;
float:left;
top:50px;
left:0;
width:390px;

}

.spalte2
{
position:absolute;
font-size:14px;
line-height:15px;
float:left;
top:50px;
left:450px;
width:390px;

Sie haben die Wahl zwischen grafischen HTML/CSS-Editoren (Wysiwyg) und Code Text-Editoren.

Kostenfrei erhältlich ist der grafische

und der Texteditor

Seiten

Subscribe to CSS

rhein-main-experten.de wird überprüft von der Initiative-S