HTML5 / CSS Dokumentation

Vorab Der Sinn dieser Web Applikation.

Um den Content und die Modulinhalte einer Joomla website effektiv zu bearbeiten, ist es von grossem Vorteil, wenn man HTML und CSS benutzen kann oder noch besser, beherrscht. Diese Dokumentation ist erste Hilfestellung, aber auch ständiger Begleiter in der Bearbeitung des CMS Joomla. Diese Dokumentation erhebt aber keinen Anspruch auf Vollständigkeit.

Was ist HTML 5 ?

HMTL 5 HTML5 ist eine textbasierte Auszeichnungssprache zur Strukturierung und semantischen Auszeichnung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. Die Sprache befindet sich zurzeit noch in der Entwicklung, es liegen aber bereits recht ausgereifte Entwürfe zweier Entwicklerteams vor. Sie soll die Nachfolge von HTML4 antreten. Die Sprache ersetzt die Dokumentbeschreibungsstandards HTML 4.01, XHTML 1.0 und DOM HTML Level 2. Sie bietet vielfältige neue Funktionalitäten wie unter anderem Video, Audio, lokalen Speicher und dynamische 2D- und 3D-Grafiken, die von HTML4 nicht direkt unterstützt werden und sich ohne HTML5 nur mit zusätzlichen Plugins – wie zum Beispiel Adobe Flash – umsetzen lassen. mehr info

Was ist CSS ?

Cascading Style Sheets ist der Begriff für stufenförmige oder (hintereinander) geschachtelte Gestaltungsvorlagen), kurz CSS genannt. Es ist eine deklarative Sprache für Stilvorlagen (stylesheets) von strukturierten Dokumenten. Sie wird vor allem zusammen mit HTML und XML (zum Beispiel bei SVG) eingesetzt. CSS gilt heute als die Standard-Stylesheetsprache für Webseiten. Einige, früher übliche HTML- Elemente wie font oder center sind inzwischen deprecated (veraltet) und sollen in Zukunft aus dem HTML-Standard entfernt werden. Grund ist eine Ausgliederung der designtechnischen Angaben aus dem reinen HTML-Quelltext, der im Rahmen des Markups nur die Struktur einer Seite wiedergibt, jedoch keine Hinweise auf Optik und Gestaltung gibt. mehr info

HTML5 tags Erklärungen in englischer Sprache, weil die Programmiersprache auch englisch ist !

in alphabetsicher Reihenfolge :

<!--...-->

Defines a comment.

 

<!DOCTYPE>

Defines a document type.

 

<a>

Defines a hyperlink.

 

<abbr>

Defines an abbreviation (Kürzel).

 

<address>

Defines contact information for the author/owner of a document.

 

<area>

Defines an area inside an image-map.

 

<article>

Defines an article.

 

<aside>

Defines content aside from the page content.

 

<audio>

Defines sound content.

 

<b>

Defines bold text.

 

<base>

Specifies the base URL/target for all relative URLs in a document.

 

<bdi>

Isolates a part of text that might be formatted in a different direction from other text outside it.

 

<bd0>

Overrides the current text direction.

 

<blockquote>

Defines a section that is quoted from another source.

 

<body>

Defines the document's body.

 

<br>

Defines a single line break.

 

<button>

Defines a clickable button.

 

<canvas>

Used to draw graphics, on the fly, via scripting (us. JavaScript).

 

<caption>

Defines a table caption.

 

<cite>

Defines the title of a work.

 

<code>

Defines a piece of computer code.

 

<col>

Specifies column properties for each column within a <colgroup> element .

 

<colgroup>

Specifies a group of one or more columns in a table for formatting.

 

<datalist>

Specifies a list of pre-defined options for input controls.

 

<dd>

Defines a description/value of a term in a description list.

 

<del>

Defines text that has been deleted from a document.

 

<details>

Defines additional details that the user can view or hide.

 

<dfn>

Defines a definition term.

 

<dialog>

Defines a dialog box or window.

 

<div>

Defines a section in a document.

 

<dl>

Defines a description list.

 

<dt>

Defines a term/name in a description list.

 

<em>

Defines emphasized text.

 

<embed>

Defines a container for an external (non-HTML) application.

 

<fieldset>

Groups related elements in a form.

 

<figcaption>

Defines a caption for a <figure> element.

 

<figure>

Specifies self-contained content.

 

<footer>

Defines a footer for a document or section.

 

<form>

Defines an HTML form for user input.

 

<<h1> to <h6>>

Defines HTML headings.

 

<head>

Defines information about the document.

 

<header>

Defines a header for a document or section.

 

<hr>

Defines a thematic change in the content.

 

<html>

Defines the root of an HTML document.

 

<i>

Defines a part of text in an alternate voice or mood.

 

<iframe>

Defines an inline frame.

 

<img>

Defines an image.

 

<input>

Defines an input control.

 

<ins>

Defines a text that has been inserted into a document.

 

<kbd>

Defines keyboard input.

 

<keygen>

Defines a key-pair generator field (for forms).

 

<label>

Defines a label for an <input> element.

 

<legend>

Defines a caption for a <fieldset> element.

 

<li>

Defines a list item.

 

<link>

Defines the relationship between a document and an external resource (most used to link to style sheets).

 

<map>

Defines a client-side image-map.

 

<mark>

Defines marked/highlighted text.

 

<menu>

Defines a list/menu of commands.

 

<meta>

Defines metadata about an HTML document.

 

<meter>

Defines a scalar measurement within a known range (a gauge).

 

<nav>

Defines navigation links.

 

<noscript>

Defines an alternate content for users that do not support client-side scripts.

 

<object>

Defines an embedded object.

 

<ol>

DDefines an ordered list.

 

<optgroup>

Defines a group of related options in a drop-down list.

 

<option>

Defines an option in a drop-down list.

 

<output>

Defines the result of a calculation.

 

<p>

Defines a paragraph.

 

<param>

Defines a parameter for an object.

 

<pre>

Defines preformatted text.

 

<progress>

Represents the progress of a task.

 

<q>

Defines a short quotation.

 

<rp>

Defines what to show in browsers that do not support ruby annotations.

 

<rt>

Defines an explanation/pronunciation of characters (for East Asian typography).

 

<ruby>

Defines a ruby annotation (for East Asian typography).

 

<s>

Defines text that is no longer correct.

 

<samp>

Defines sample output from a computer program.

 

<script>

Defines a client-side script.

 

<section>

Defines a section in a document.

 

<select>

Defines a drop-down list.

 

<small>

Defines smaller text.

 

<source>

Defines multiple media resources for media elements (<video> and <audio>).

 

<span>

Defines a section in a document.

 

<strong>

Defines important text.

 

<style>

Defines style information for a document.

 

<sub>

Defines subscripted text.

 

<summary>

Defines a visible heading for a <details> element.

 

<sup>

Defines superscripted text.

 

<table>

Defines a table.

 

<tbody>

Groups the body content in a table.

 

<td>

Defines a cell in a table.

 

<textarea>

Defines a multiline input control (text area).

 

<tfoot>

Groups the footer content in a table.

 

<th>

Defines a header cell in a table.

 

<thead>

Groups the header content in a table.

 

<time>

Defines a date/time.

 

<title>

Defines a title for the document.

 

<tr>

Defines a row in a table.

 

<track>

Defines text tracks for media elements (<video> and <audio>).

 

<u>

Defines text that should be stylistically different from normal text.

 

<ul>

Defines an unordered list.

 

<var>

Defines a variable.

 

<video>

Defines a video or movie.

 

<wbr>

Defines a possible line-break.

 

Editieren

To feel comfortable working with Joomla template we recommend you to download all applications required. You can see the list of required software at the template preview page.
The requirements may vary for different templates so we'll tell you here what is needed in general:

CSS Selektoren Die definierte Ansprache der Elemente

CSS Syntax

Eine CSS Regel besteht aus zwei Teilen:

Der Selektor ist das HTML-Element, dass definiert wird. Jede einzelne Angabe zum Selektor besteht aus der "Eigenschaft (property)" und seinem "Wert (value)". Hat ein Selektor mehrere Angaben, werden diese jeweils durch einen Strichpunkt(semicolon) getrennt. Die Angaben werden mit einer geschweiften Klammer {curly bracket} zusammengefasst.

Um das Ganze übersichtlich zu halten, wird jede Eigenschaft und ihr Wert in jeweils eine Zeile geschrieben:

  • h1
  • {
  • color:blue;
  • font-size:12px;
  • }
  • /* das ist ein kommentar */
Tip : Kommentare sind kleine Helferlein, die individuell eingesetzt werden können und von Browsern ignoriert wreden.

CSS Selektoren

1 - universalselector
  • Type: *
  • Das Sternchen * (Asterisk) ist der Universalselektor. Mit ihm werden alle Elemente in einem Dokument angesprochen.
  • Beachte : Im IE (inkl. IE7) werden durch den Universalselektor auch die Dokumenttypangabe und Kommentare beachtet. Dies kann dazu führen, dass nicht vorhandene Elemente dargestellt oder falsche Elemente formatiert werden.
  • CSS style sheet:
    *
    {
    border: 2px solid blue;
    }
  • html element :
    <body>
    <p>Hier wirkt sich dieser Universalselektor aus.</p>
    </body>
2 - typselector
  • Type: p
  • Der Element- bzw. Typselektor besteht aus dem Namen des Elements, das angesprochen werden soll. Mit diesem Selektor werden alle Elemente eines Typs angesprochen.
  • Beachte : In XML-Dokumenten muss die Schreibweise des Selektors mit der des anzusprechenden Elements übereinstimmen.
  • CSS style sheet:
    p
    {
    border: 2px solid blue;
    }
  • html element :
    <body>
    <p>Hier wirkt sich dieser Typselektor aus.</p>
    </body>

CSS Selektoren 2

1 - id selector
  • Type: #example
  • Mit dem ID-Selektor kann ein Element angesprochen werden, dem eine ID zugeordnet wurde, was wiederum von der Auszeichnungssprache abhängig ist. In HTML- und XHTML-Dokumenten handelt es sich dabei um das id-Attribut. Ein ID-Selektor wird gebildet, indem das Gatterzeichen „#“ vor den ID-Namen gestellt wird.
  • Beachte : Eine ID darf im Dokument nur ein einziges Mal vorkommen und sollte mit keiner Zahl beginnen. Die Kombination des ID-Selektors mit anderen Selektoren macht also nur dann Sinn, wenn die entsprechende ID in mehreren Dokumenten und in unterschiedlichen Situationen eingesetzt wird. Welches Attribut als ID erkannt wird, hängt bei XML-Dokumenten von der DTD ab. Da ein XML-Parser eine DTD nicht verarbeiten muss, kann bei dem Browser unbekannten XML-Formaten nicht garantiert werden, dass die CSS-Eigenschaften angewendet werden.
  • CSS style sheet:
    #example
    {
    text-align:center;
    color:red;
    }
  • html element :
    <body>
    <div id="example"> <h1>ID-Selektoren</h1> <p>Hier steht alles im gruppierenden div-Element in rot und mittig.</p> </div>
    </body>
2 - class selector
  • Type: .
  • Ein Klassenselektor spricht Elemente an, die einer bestimmten Klasse zugehörig sind. Welche das sind, hängt von der verwendeten Auszeichnungssprache ab. In HTML-Dokumenten werden Klassen über das class-Attribut vergeben. Ein Klassenselektor wird gebildet, wenn vor dem Klassennamen ein Punkt notiert wird.
  • Beachte : Klassennamen sollten nach ihrer Funktion (z.B. „demo“) benannt werden und nicht nach den Formatierungen, die sie beinhalten. So ist sicher, dass die Klasse auch nach einer Überarbeitung der Gestaltung noch nachvollziehbar den Bestandteilen eines Dokuments zugeordnet werden kann.
    Viele informelle Eigenschaften eines Elements können durch elementspezifische Attribute abgedeckt werden. CSS erlaubt das Ansprechen von Elementen anhand ihrer Attribute. Klassen und Klassenselektoren sollten deshalb nur dann eingesetzt werden, wenn keine andere Zuordnungsmöglichkeit besteht.
    Der IE (inkl. IE6) verarbeitet miteinander verbundene Klassenselektoren nicht korrekt. Es werden alle Elemente formatiert, die der zuletzt im Selektor genannten Klasse angehören. Im Beispiel würde also nicht nur der Zweite, sondern auch der Dritte Absatz eine grüne Schriftfarbe erhalten.
  • CSS style sheet:
    .demo
    {
    text-align:center;
    color:red;
    }

    .demo.add
    text-align:left;
    color:blue;
    }
  • html element :
    <body>
    <p class="demo">Dieser Absatz gehört zur Klasse demo und seine rote Schrift wird deshalb mittig dargestellt.</p>
    <p class="demo add">Dieser Absatz gehört zur Klasse demo und zur Klasse add. Sein blauer Text wird deshalb linksbündig dargestellt.</p>
    <p class="add">Dieser Absatz gehört nur zur Klasse add. Für diese Klasse sind im sheet keine Styleangaben notiert.</p>
    </body>
3 - attribut selector
  • Type: [...]
  • Ein Element, das ein bestimmtes Attribut besitzt, kann durch den einfachen Attributselektor angesprochen werden. Dieser Selektor besteht aus eckigen Klammern, in die der Name des Attributs eingesetzt wird.
  • Beachte : Attributselektoren können mit anderen Selektoren verbunden werden !
  • CSS style sheet:
    [objekt]
    {
    text-align:center;
    border:2px solid green;
    }
  • html element :
    <body>
    <h2>Der einfache Attributselektor.</h2>
    <p objekt">Dieser Text wird durch den Attributselektor objekt definiert. Sein mittiger Text wird deshalb grün umrandet.</p>

CSS Pseudoklassen und -elemente

Bei Pseudoklassen handelt es sich um einfache Selektoren, die ein Element dann ansprechen, wenn es eine bestimmte Eigenschaft besitzt. So lassen sich zum Beispiel Elemente auswählen, über denen sich gerade der Mauszeiger befindet oder Elemente, die das erste Kindelement eines anderen Elementes sind.

Mittels Pseudoklassen und Pseudoelementen können Sie Deklarationen für HTML-Bestandteile definieren, die sich nicht durch ein eindeutiges HTML-Element ausdrücken lassen, z.B. ein "noch nicht besuchter Verweis" oder der "erste Buchstabe eines Absatzes". Zum Definieren solcher Pseudoelemente und Pseudoklassen gibt es eine spezielle Syntax.

Pseudoklassen

dynamische Pseudoklassen

Pseudoklassen werden zentral in einem style-Bereich notiert. Die hier beschriebenen Pseudoklassen gelten teilweise nur für das a-Element in HTML, daher wird vor dem Doppelpunkt das a notiert. In den Formatdefinitionen für die einzelnen Pseudoklassen können Sie beliebige, geeignete CSS-Eigenschaften zuweisen. Die folgenden Pseudoklassen bedeuten:

  • :active = für gerade angeklickte Elemente
  • :hover = für Elemente, während der Anwender mit der Maus darüber fährt (CSS 2.0)
  • :focus = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)
  • :target = für Elemente, die Ziel eines Verweises sind
  • :visited = für Verweise zu bereits besuchten Seiten
  • :link = für Verweise zu noch nicht besuchten Seiten

1 - :active
  • Type: a:active
  • Diese Pseudoklasse selektiert Elemente, die angeklickt werden durch die Interaktion des Benutzers.
  • Beachte : Um die gewünschte Darstellung dieser Pseudoklassen zu erreichen, muss bei der Notierung eine bestimmte Reihenfolge eingehalten werden.
  • CSS style sheet:
    a:active
    {
    font-weight:bold;
    color:blue;
    text-decoration:underline;
    }
  • html element : <a href="http://v12-marketing.de">Beim Anklicken erhält dieser link den Zustand, wie im style sheet definiert</a>
2 - :hover
  • Type: a:hover
  • Diese Pseudoklasse selektiert Elemente, die der Mauszeiger berührt, ausgelöst durch die Interkation des Benutzers.
  • Beachte : Um die gewünschte Darstellung dieser Pseudoklassen zu erreichen, muss bei der Notierung eine bestimmte Reihenfolge eingehalten werden.
  • CSS style sheet:
    a:hover
    {
    font-weight:bold;
    color:blue;
    text-decoration:underline;
    }
  • html element : <a href="http://v12-marketing.de">Beim Berühren mit der Maus erhält dieser link den Zustand, wie im style sheet definiert</a>
3 - :focus
  • Type: a:focus
  • Diese Pseudoklasse selektiert Elemente, die den Focus erhalten, zum Beispiel durch die Tabulatortaste, ausgelöst durch die Interkation des Benutzers.
  • Beachte : Um die gewünschte Darstellung dieser Pseudoklassen zu erreichen, muss bei der Notierung eine bestimmte Reihenfolge eingehalten werden.
  • CSS style sheet:
    a:focus
    {
    font-weight:bold;
    color:blue;
    text-decoration:underline;
    }
  • html element : <a href="http://v12-marketing.de">Bei Auswahl durch die Tabulatortaste erhält dieser link den Zustand, wie im style sheet definiert</a>
4 - :target
  • Type: a:target
  • Mithilfe dieser Pseudoklasse werden Elemente selektiert, die Ziel eines Verweises sind. Die CSS-Anweisungen gelten nur dann, wenn der Verweis gerade aktiviert wurde.
  • Beachte : Zur Aktivierung ist entweder eine ID-Vergabe (ghl) oder die Definition eines Ankers (khl) möglich. Der IE unterstützt die Angabe eines Ankers dabei nicht.
  • CSS style sheet:
    a:target
    {
    color:red;
    }
  • html element :
    <body>
    <h1 id="ghl">HEADLINE GROSS</h1>
    <h2><a name="khl">headline klein</a></h2> <p>verlinkungen</p>
    <ul>
    <li><a href="#ghl">hline gross wird rot</a></li> <li><a href="#khl">hline klein wird rot</a></li>
    </ul>
    </body>
5 - :visited
  • Type: a:visited
  • Diese Pseudoklasse kennzeichnet besuchte Verweise.
  • Beachte : :visited erlaubt es, in Kombination mit gewissen Eigenschaften, herauszufinden, ob die Besucher einer Webseite bestimmte Links besucht haben (sog. History Stealing). Datenschutztechnisch ist das problematisch. Weil man sich dagegen außer durch komplettes Deaktivieren von CSS, was eine enorme Einschränkung darstellt, auch nicht wehren kann, unterstützen moderne Webbrowser nur eine sehr eingeschränkte Auswahl von Eigenschaften für diese Pseudoklasse.
  • CSS style sheet:
    a:visited
    {
    text-decoration:underline;
    }
  • html element :
    <a href="http://v12-marketing.de">besuchte links erhalten den Zustand, wie im style sheet definiert</a>

Pseudoklasse für Sprachangaben

2 - :lang
  • Type: :lang(fr)
  • Gibt die Landessprache an, die innerhalb des HTML-Elements verwendet wird - bei mehrsprachigen Dateien - aber auch für Suchmaschinen im Internet. Als Angabe ist ein standardisiertes Sprachenkürzel erlaubt, z.B. fr für französisch.
  • Beachte : Diese Angaben werden auch vom Internet Explorer 7 noch nicht interpretiert.
  • CSS style sheet:
    :lang (fr)
    {
    background-color:#yellow;
    }
  • html element :

    <p lang="fr">C'est la vie! ist gelb unterlegt</p>

Pseudoelemente

Pseudoelemente werden zentral in einem style-Bereich notiert. Die hier beschriebenen Pseudoelemente sind für typische Absatz- oder Überschriftenelemente in HTML gedacht. In den Deklarationen können Sie beliebige, geeignete CSS-Eigenschaften zuweisen.

1 - :first-line
  • Type: p:first-line
  • Die erste Textzeile des Elements erhält die CSS-Eigenschaften.
  • html element : <p>Hier steht der dazugehörige Text</p>
  • Beachte : Um die gewünschte Darstellung dieser Pseudoklassen zu erreichen, muss bei der Notierung eine bestimmte Reihenfolge eingehalten werden. !
  • CSS style sheet:
    p:first-line
    {
    font-weght:bold;
    }
2 - :first-letter
  • Type: p:first-letter
  • Das erste Zeichen des Textes erhält die CSS-Eigenschaften.
  • html element : <p>Hier steht der dazugehörige Text</p>
  • Beachte : Diese Angaben werden auch vom Internet Explorer 7 noch nicht interpretiert.
  • CSS style sheet:
    p:first-letter
    {
    font-size:300%;
    color:blue;
    }

CSS Eigenschaften

Background

1 - background-image
  • Type: # (+ id selector)
  • Mit dieser Eigenschaft legen Sie den Pfad zu den Hintergrundbildern für ein Element fest.
  • Beachte : Multiple Hintergründe werden nicht von allen Browsern unterstützt.
    Relative Angaben beziehen sich ggf. auf die CSS-Ressource, nicht auf das HTML-Dokument. Erlaubt ist zudem der Wert none, welcher ebenfalls eine Hintergrundebene erzeugt. Dies ist ggf. bei der Festlegung weiterer Eigenschaften multipler Hintergründe zu beachten.
  • CSS style sheet:
    #bg-image
    {
    background-image:url (...);
    }
  • html element :
    <div id="bg-image"></div>
2 - background position
  • Type: # (+ id selector)
  • Diese Eigenschaft bestimmt mittels x- und y-Koordinate, wo die linke obere Ecke des Hintergrundbildes positioniert wird. Das wird unter anderem angewendet, um die Ladezeit von Spritegrafiken zu verringern.
  • Beachte : Ausgangswert ist immer 0px von links oben aus gerechnet. Erlaubt sind auch left, center, right zur horizontalen und top, center, bottom zur vertikalen Positionierung. Fehlende Angaben ersetzt der Browser durch center.
  • CSS style sheet:
  • #bg-image-eins
    {
    background-position:center;
    }
  • #bg-image-zwei
    {
    background-position:left top;
    }
  • html element :
  • <div id="bg-image-eins">mittig</div>
  • <div id="bg-image-zwei">links oben</div>
3 - background-size
  • Type: # (+ id selector)
  • Mit dieser Eigenschaft wird das Hintergrundbild skaliert.
  • Beachte : Ausgangswert ist auto. Dabei werden die Ausgangsmasse des Huntergrundbildes beibehalten.
  • Folgende Längenangaben sind auch möglich:
  • Zoll; background-size:5in
  • Pica; background-size:5pc
  • Punkt; background-size:5tp
  • Zentimeter; background-size:5cm
  • Millimeter; background-size:5mm
  • CSS style sheet:
  • #bg-image-eins
    {
    background-size:100px 150px;
    }
  • #bg-image-zwei
    {
    background-size:110%;
    }
  • #bg-image-drei
    {
    background-size:cover;
    }
  • #bg-image-vier
    {
    background-size:contain;
    }
  • html element :
  • <div id="bg-image-eins">Breite x Höhe</div>
  • <div id="bg-image-zwei">110% der Origialgrösse</div>
  • <div id="bg-image-drei">bildschirmfüllend</div>
  • <div id="bg-image-vier">an den contentbereich angepasst</div>
4 - background-repeat
  • Mit dieser Eigenschaft wird bestimmt, wie mit Hintergrundbildern verfahren werden soll, falls das Element grösser als ein Hintergrundbild ist.
  • Beachte : Der Ausgangswert ist repeat. Dabei wird das Motiv in der x- und y-Richtung wiederholt.
  • Folgende Werte der Eigenschaft background-repeat sind möglich:
  • repeat-x; das Motiv wird nur auf der x-Achse wiederholt.
  • repeat-y; das Motiv wird nur auf der y-Achse wiederholt.
  • no-repeat; das Motiv wird nicht wiederholt.
    Als Alternative zum Wert space gibt es round. Dabei wird das Motiv skaliert, so dass es ohne angeschnittene Einheit formatfüllend steht.
    Beachte : nicht alle Browserversionen unterstützen multiple Hintergründe.
  • CSS style sheet:
  • body {
  • background-image:url('bild.jpg');
  • background-repeat:no repeat; }
  • html element :
  • <body>
  • <p>Dieser Text steht auf dem Hintergrund</p>
  • <body>
    oder
  • CSS style sheet:
  • div {
  • outline:1px solid black;
  • background-image:url('bild.jpg'); }
  • div code {
  • background-color:white; }
  • #bgeins { background-repeat: repeat-x; }
  • #bgzwei { background-repeat: space; }
  • html element :
  • <body>
  • <div id="bgeins"><code>Das Motiv wird auf der x-Achse wiederholt; die zusätzliche Hintergrundfarbe ist weiss</code></div>
  • <div id="bgzwei"><code>Das Motiv wird als Ganzes sooft wiederholt, wie es in das entspechende Element passt; eventuell werden die Abstände vergrössert; die zusätzliche Hintergrundfarbe ist weiss</code></div>
  • <body>
5 - background-attachment
  • Mit dieser Eigenschaft wird bestimmt, wie sich das Hintergrundbild verhalten soll, wenn das Element bewegt wird.
  • Beachte : nicht alle Browserversionen unterstützen multiple Hintergründe.
  • Folgende Werte sind möglich:
  • fixed;
  • - das Hintergrundmotiv ist am Viewport ausgerichtet. Angaben zur Positionierung beziehen sich auf den Viewport (!). (fehlerhaft im IE6)
  • - beim Bewegen des Elements wird immer ein anderer Bereich des Hintergrundes sichtbar.
  • - beim Bewegen des Elementinhalts bleibt der Hintergrund unverändert.
  • - vergleichbar mit position: fixed.
  • scroll;
  • - das Hintergrundbild ist an der Elementbox ausgerichtet, Angaben zur Positionierung beziehen sich auf diese.
  • - beim Bewegen des Elements bleibt der Hintergrund unverändert, das heißt, er scrollt mit dem Element mit.
  • - beim Bewegen des Elementinhalts bleibt der Hintergrund unverändert.
  • - vergleichbar mit position: absolute.
  • local;
  • - das Hintergrundbild ist an der Elementbox ausgerichtet, Angaben zur Positionierung beziehen sich auf diese.
  • - beim Bewegen des Elements bleibt der Hintergrund unverändert.
  • - beim Bewegen des Elementinhalts bewegt sich der Hintergrund mit.
  • - vergleichbar mit position: relative.
  • CSS style sheet:
  • p {
  • outline:1px solid;
  • overflow:auto;
  • width:165px;
  • height:300px;
  • background-image:url("http://www.....");
  • background-repeat:no; }
  • #bgeins { background-attachment: fixed; }
  • #bgzwei { background-attachment: scroll; }
  • #bgzwei { background-attachment: local; }
  • html element :
  • <body>
  • <p id="bgeins">beim Scrollen von Bildschirm und/oder Textelement bleibt der Hintergrund fixiert</p>
  • <body>
  • <body>
  • <p id="bgzwei">nur beim Scrollen vom Textelement bleibt der Hintergrund fixiert</p>
  • <body>
  • <body>
  • <p id="bgdrei">Hintergrund scrollt immr mit</p>
  • <body>
6 - background-clip
  • Mit dieser Eigenschaft wird bestimmt, für welche Bereiche der Elementbox die Hintergrundeigenschaften gelten.
  • Beachte : Safari unterstützt auch in der Version 5 nur die Angaben border-box und padding-box.
  • Folgende Werte sind möglich:
  • content-box;
  • - der Hintergrund wird nur im Inhaltsbereich dargestellt.
  • padding-box;
  • - der Hintergrund wird im Inhalts- und padding-Bereich dargestellt.
  • border-box;
  • - der Hintergrund wird im Inhalts- und padding-Bereich sowie unter den Rahmen dargestellt.
  • CSS style sheet:
  • div {
  • width: 20em;
  • margin: 1em;
  • outline: 1px solid black;
  • border: 1em dashed red;
  • padding: 1em;
  • background-color: gold;
  • }
  • #bgeins { background-clip: border-box; }
  • #bgzwei { background-clip: padding-box; }
  • #bgzwei { background-clip: content-box; }
  • html element :
  • <body>
  • <div id="bgeins">alles ist gelb unterlegt</div>
  • <body>
  • <body>
  • <div id="bgzwei">der Innenteil bis zu den roten Balken ist gelb unterlegt</div>
  • <body>
  • <body>
  • <div id="bgdrei">nur die Textzeile ist gelb unterlegt</div>
  • <body>
7 - background-color
  • Mit dieser Eigenschaft kann einem Element eine Hintergrundfarbe zugewiesen werden.
  • Beachte :
  • Bis IE 7 werden Hintergrundfarben nicht auf den Rahmenbereich angewendet, wenn das Element unter dem Einfluss von hasLayout steht. Transparente Rahmenabschnitte zeigen stattdessen den hinter dem Element liegenden Bereich.
  • Das Festlegen von Farben durch die Angabe von Farbton, Sättigung und Helligkeit mittels hsl(h,s%,l%) wird ebenso wie die Farbdefinitionen mit Transparenz (rgba(r,g,b,a) bzw. hsla(h,s%,l%,a)) nicht von allen Browsern unterstützt. Damit auch Browser, die dies nicht verstehen, eine Farbe anzeigen können, die der gewünschten nahe kommt, sollten im CSS mehrere Angaben gemacht werden.
  • Folgende Farbangaben sind möglich:
  • Hexadezimal
  • - am besten über eine Tabelle oder im Photoshop die gewünschte Farbe bestimmen.
  • - #660000 entspricht rot
  • - #770000 entspricht grün.
  • RGB-Modus
  • - Prozentwerte im Bereich 0 - 100 angeben (rgb 20% 30% 55%).
  • - Zahlen im Bereich 0 - 255 angeben (rgb 10 128 50).
  • - als vierter Wert kann die Transparenz der Farbe angegeben werden: rgba 10 28 50 0.8 = 80% Deckkraft.
  • CSS style sheet:
  • h1 {
  • background-color: #333333;
  • }
  • p {
  • background-color: #blue;
  • }
  • html element :
  • <body>
  • <h1">die Headline ist grau unterlegt</div>
  • <h1">das p-Element ist blau unterlegt</div>
  • <body>

Text

Die Textformatierung beinhaltet Angaben zu Textfarben, Abstände zwischen Zeichen oder Wörtern sowie weitere Textdekorationen. Sie beziehen sich auf alle HTML-Elemente, die Text enthalten.Folgende CSS-Eigenschaften haben Einfluss auf die Gestaltung des Textes:

1- color
  • Mit der Eigenschaft color wird die Farbe der Schrift oder des Textvordergrundes definiert.
  • Beachte : Gültig sind Farbangaben sowie die Angabe inherit. Diese bewirkt, dass die Schriftfarbe des Elternelements übernommen wird.
  • Grundsätzlich ist es möglich, Farbwerte mit dem Zusatz der Transparenz zu versehen. Von transparentem Text ist aber grundsätzlich abzuraten. Falls doch, dann zusätzlich den Farbwert ohne Transparenz angeben, da nicht alle Browser Transparenz anzeigen.
  • Folgende Farbangaben sind möglich:
  • Hexadezimal
  • - am besten über eine Tabelle oder im Photoshop die gewünschte Farbe bestimmen.
  • - #660000 entspricht rot.
  • - #770000 entspricht grün.
  • RGB Modus
  • - am besten über eine Tabelle oder im Photoshop die gewünschte Farbe bestimmen.
  • - rgb 255, 153, 0 entspricht orange.
  • - rgb 204, 0, 153 entspricht magenta.
  • CSS style sheet:
  • p { color: green; }
  • h1 { color: #006699; }
  • a { color: #ccc; }
  • a:visited { color: rgb(204,0,51); }
  • span { color: hsl(240,100%,50%); }
  • .vererbt { color: inherit; }
  • html element :
  • <h1>Der Text aller h1-Elemente ist blau.</h1>
  • <p>Der Text aller p-Elemente ist grün.</p>
2- letter-spacing
  • Mit der Eigenschaft letter-spacing wird der Abstand zwischen den Buchstaben (Laufweite) definiert.
  • Beachte : Ein für ein Element festgelegter Zeichenabstand wird automatisch an die Kindelemente vererbt.
  • Folgende Werte sind möglich:
  • numerische Angabe
  • - negative Werte gelten.
  • - keine Prozentangaben.
  • normal
  • - Textdartellung orientiert sich an den Parametern des Fonts.
  • - Voreinstellugen gelten.
  • - Browser kann Abstände bestimmen.
  • inherit
  • - Werte des Elternelements werden übernommen.
  • CSS style sheet:
  • body { letter-spacing: 1,5em; }
  • p { letter-spacing: 0,3em; }
  • h1 { letter-spacing: inherit; }
  • span { letter-spacing: 1px; }
  • html element :
  • <h1>Vererbung von body</h1>
  • <p>alle p-Elemente haben Abstand 0.3em.</p>
  • <p>span-Elemente haben Abstand 1px.</p>
3- word-spacing
  • Mit der Eigenschaft word-spacing wird der Abstand zwischen den Wörtern (Wortabstand) definiert.
  • Beachte : Ein für ein Element festgelegter Wortabstand wird automatisch an die Kindelemente vererbt.
  • Folgende Werte sind möglich:
  • numerische Angabe
  • - negative Werte gelten.
  • - keine Prozentangaben.
  • normal
  • - Textdartellung orientiert sich an den Parametern des Fonts.
  • - Voreinstellugen gelten.
  • - Browser kann Abstände bestimmen.
  • inherit
  • - Werte des Elternelements werden übernommen.
  • CSS style sheet:
  • body { word-spacing: 2em; }
  • p { word-spacing: 0,4em; }
  • h1 { word-spacing: inherit; }
  • span { word-spacing: 3px; }
  • html element :
  • <h1>Vererbung von body</h1>
  • <p>alle p-Elemente haben den Wortabstand 0.4em.</p>
  • <p>alle span-Elemente haben den Wortabstand 3px.</p>
4- text-decoration
  • Mit der Eigenschaft text-decoration wird Text dekoriert. Mehrere Werte sind möglich und werden durch Leerzeichen getrennt.
  • Beachte : Der Wert blink wird nicht immer dargestellt.
  • Folgende Werte sind möglich:
  • underline - Text wird unterstrichen.
  • overline - Text wird überstrichen.
  • line-through - Text wird durchgestrichen.
  • blink - Text blinkt.
  • inherit - Werte des Elternelements (ab IE9/IE8 benötigt !DOCTYPE).
  • none - kein Wert (default).
  • CSS style sheet:
  • .achtung { text-decoration: underline; }
  • .faded { text-decoration: line-through; }
  • html element :
  • <p class="achtung">Text ist unterstrichen.</p>
  • <p class="faded">Text ist durchgestrichen.</p>
5- text-transform
  • Mit der Eigenschaft text-transform werden Buchstaben eines Textes manipuliert. Abweichend vom ursprünglichen Text wird der Status erzwungen.
  • Beachte : Ein für ein Element zugeordneter Wert der Text- Transformation wird automatisch an die Kindelemente vererbt.
  • Folgende Werte sind möglich:
  • capitalize - Anfangsbuchstaben der Worte werden gross geschrieben.
  • uppercase - alle Buchstaben werden grossgeschrieben.
  • lowercase - alle Buchstaben werden kleineschrieben.
  • inherit - Werte des Elternelements (ab IE9/IE8 benötigt !DOCTYPE).
  • none - kein Wert (default).
  • CSS style sheet:
  • h1 { text-transform: uppercase; }
  • h2 { text-transform: capitalize; }
  • .notiz { text-transform: lowercase; }
  • html element :
  • <h1>ALLE H1-HEADLINES IN GROSSBUCHSTABEN.</h1>
  • <h1> H2-Headlines Fangen Immer Mit Grossbuchstaben An.</h1>
  • <p class="notiz">alle texte dieser css-klasse werden in kleinbuchstaben dargestellt.</p>
5- text-align
  • Mit der Eigenschaft text-align wird die Ausrichtung eines Textes bestimmt. Innerhalb eines Blocklevel-Elementes kann die Eigenschaft kann auch auf Inline-Elemente, wie <img> und <iframe> angewendet werden.
  • Beachte : Defaultwert ist inherit. Der Defaultwert des Wurzelelements ist von der Schreibrichtung abhängig. Das Blocksatz-Verhalten hängt auch von anderen Eigenschaften wie white-space, letter-spacing und word-spacing ab.
  • Der Standard sagt nicht explizit, wie die letzte Zeile bei justify zu behandeln ist. Die aktuellen Browser stellen diese der Schreibrichtung folgend dar, als ob eine Eigenschaft text-align-last:start definiert sei.
  • Folgende Werte sind möglich:
  • left - linksbündig.
  • right - rechtsbündig.
  • center - zentriert.
  • justify - Blocksatz.
  • inherit - vererbt.
  • CSS style sheet:
  • test.rechts { text-align: right; }
  • p.links { text-align: left; }
  • .mittig { text-align: center; }
  • news.block { text-align: justify; }
  • html element :
  • <h1 class="mittig">Alle h1 Headlins stehen auf Mittelachse.</h1>
  • <p class="links> Alle p-Elemente sind linksbündig.</p>
  • <test class="rechts">alle test-Elemente sind linksbündig.</p>
  • <news class="block">alle news-Elemente sind im Blocksatz.</p>

Listen

Zur Erstellung von Listen gibt es folgende Eigenschaften:

1- list-style-type
  • Die Eigenschaft list-style-type definiert das Listenvorzeichen bzw. die Art der Nummerierung.
  • Man unterscheidet grundsätzlich zwischen ungeordneten <ul> und geordneten Listen <ol>.
  • Bullets für ul:
  • -disc: gefüllter Kreis, default.
  • -circle: leerer Kreis.
  • -square: Quadrat.
  • -none: kein Vorzeichen.
  • -inherit: vererbt.
  • Bullets für ol:
  • -decimal: 1., 2., 3., 4. ...
  • -decimal-leading-zero: 01., 02. ...
  • -lower-roman: i., ii., iii., iv. ...
  • -upper-roman: I., II., III., IV. ...
  • -lower-alpha: a., b., c., d. ...
  • -upper-alpha: A., B., C., D. ...
  • -none: keine Nummerierung
  • -inherit: vererbt.
  • Durch das Attribut start im Starttag einer geordneten Liste wird der Anfang der Nummerierung definiert; der Wert reversed bewirkt eine Umkehrung der Zählrichtung.
  • CSS style sheet:
  • ul.frst { list-style-type: disc; }
  • ul.sec { tlist-style-type: circle; }
  • ul.thrd { list-style-type: decimal; }
  • ul.frth { list-style-type: lower-romn; }
  • html element :
  • <ul class="frst">
  • <li>Liste mit Vorzeichen Punkt</li>
  • </ul>
  • <ul class="sec">
  • <li>Liste mit Vorzeichen Kreis</li>
  • </ul>
  • Eine Grafik als Bullet :
  • CSS style sheet:
  • ul { list-style-image:url('name.gif'); }
  • html element :
  • <ul>
  • <li>Liste mit Vorzeichen name.gif</li>
  • </ul>
2- list-style-position
  • Die Eigenschaft list-style-position bestimmt, ob das Listenvorzeichen innerhalb oder ausserhalb des Contents steht.
  • CSS style sheet:
  • ul { list-style-position:inside; }
  • ul { list-style-position:outside; }

Tabellen

Der grundlegende Aufbau einer Tabelle passiert in HTML. Die Elemente zur Erzeugung von Tabellen sind table - die Tabelle selbst,
caption - die Tabellenüberschrift, thead, tbody, tfoot Zeilengruppen, colgroup, col - Spaltengruppen, tr - Tabellenzeilen und th, td - Tabellenzellen.

Zur Formatierung von Tabellen wird den einzelnen html-Elementen im CSS folgende Eigenschaften zugewiesen:

1- <table>
  • Für das html-Element <table> gibt es folgende Eigenschaften:
  • border, width, height, margin, collapse.
  • Beachte :
  • <table> ist das einzige Element einer Tabelle, welches einen über margin steuerbaren Aussenabstand besitzt.
  • CSS style sheet:
  • table {
  • border: 1px solid black;
  • width: 100%;
  • height: 50px;
  • margin: 5px;
  • border-collapse: collapse; }
  • html element :
  • <table>
2- <caption>
  • Für das html-Element <caption> gibt es folgende Eigenschaften:
  • top, bottom, top-outside, bottom-outside.
  • Beachte :
  • <caption> ist die Hauptüberschrift einer Tabelle, und kann nur einmal positioniert werden, auch wenn die Tabelle aus mehreren <tbody>- Elementen aufgebaut ist.
  • Die outside-Eigenschaften werden nur von gecko-basierten Browsern interpretiert (Firefox).
  • CSS style sheet:
  • caption {
  • caption-side: top;
  • caption-side: bottom; }
  • html element :
  • <caption>

Das CSS Box-Modell

Für jedes Element einer Seite wird nach den CSS-Regeln ein rechteckiger Bereich reserviert, der im sogenannten Boxmodell beschrieben ist. Dieser Bereich besteht aus dem eigentlichen Inhalt, einem Innenabstand zu dem Rahmen des Elements, dem Rahmen und dem Abstand zu anderen Elementen, die auf einer Seite zu finden sind.

Box Content

Die Fläche des Contents wird durch Texte und Bilder oder Eigenschaften wie width und height vorgegeben.

Innenabstand

Der Innenabstand, also der Abstand des Contents zum Rahmen wird durch die Eigenschaft padding definiert.

Rahmen

Der Rahmen um den Content wird durch die Eigenschaft border definiert.

Aussenabstand

Der Aussabstand, also der Abstand um den Rahmen wird durch die Eigenschaft margin definiert.

Help ! aus dem Netz

Weitere Infos zu diesen Themen gibt es hier :