Hilfe

CSS-Bausteine 2
Links mit einen Rahmen markieren
Text mit farbigen Auszeichnungen markieren
Symbolische Links
Text und Bild auf Höhe der Bildmitte zentrieren
Flexible Bildgröße - Darstellung von Bildern an die jeweilige Fenstergröße automatisch anpassen.
Zeilenumbruch im Linktext verhindern - So vermeiden Sie das ein (langer) Linktext durch einen Zeilenumbruch geteilt wird.
Grafikrahmen um ein Bild legen
Linkrahmen von allen Bildern entfernen - Beim Verlinken von Bildern entstehen um die Bilder (hässliche) Rahmen. Mit dieser Anweisung können Sie diese Linkrahmen Dateiweit entfernen.
Eingabefelder und Buttons formatieren - Mit CSS ist es auch möglich, ohne das man eine extra Klasse (class) definieren muss, Eingabefelder und Buttons zu formatieren.
Tabellenzeilen einfärben - Jede zweite Zeile in einer Tabelle bekommt eine andere Hintergrundfarbe.
Aufzählungslisten einfärben - Jedes zweite Listenelement bekommt eine andere Hintergrundfarbe.
Mit import mehrere CSS-Dateien zusammenfassen
Mit ::selection markierten Text hervorheben

SiteMap - Alle 27 CSS Bausteine anzeigen

• Links mit einen Rahmen markieren [IE|M|O|G]

Die Links werden, in diesem Beispiel, mit einen roten Rahmen markiert.
Besuchte Links (Seiten) erhalten einen blauen Rahmen.


<style type="text/css">
/* Links mit einen Rahmen markieren */

a:hover {
 border-bottom: solid 1px #F00000;
}

a:visited:hover {
 border-bottom: solid 1px #0000CE;
}
</style>

• Text mit farbigen Auszeichnungen markieren [IE|M|O|G]


<style type="text/css">
/* Text mit farbigen Auszeichnungen markieren */

.text {
 color: red;
}

.text b {
 color: blue;
}

.text i {
 color: darkorchid;
}

.text u {
 color: green;
}
</style>

<div class="text"> <b>Das</b> <i>ist</i> <u>ein</u> Beispieltext. </div>

Das ist ein Beispieltext.

• Symbolische Links [IE|M|O|G]

Ab Firefox 2, Internet Explorer 7 und Opera 8.

Der I.Explorer 8 zeigt die Symbole nur an wenn die DOCTYPE-Definition auf strict steht!


<style type="text/css">
a[href^="http:"] {
    padding-right: 17px;
    background: url(extern.gif) right no-repeat;
}
</style>

Zeigt Symbolische Links bei allen Links die mit http: beginnen (^).

Demolink


<style type="text/css">
a[href$=".zip"] {
    padding-left: 15px;
    background: url(download.gif) left no-repeat;
}
</style>

Zeigt Symbolische Links bei allen Links die mit .zip enden ($).

Demolink


<style type="text/css">
a[href*="/glossar/"] {
    padding-right: 14px;
    background: url(glossar.gif) right no-repeat;
}
</style>

Zeigt Symbolische Links bei allen Links die /glossar/ enthalten (*).

Demolink

• Text und Bild auf Höhe der Bildmitte zentrieren [IE|M|O|G]

<div style="text-align: center;">
Apfel
<img src="apfel.jpg" style="vertical-align: middle;">
</div>

Apfel

• Flexible Bildgröße [IE|M|O|G]

Darstellung von Bildern an die jeweilige Fenstergröße automatisch anpassen.


<style type="text/css">
div.skalieren {
 width: 30%;  /* Breite des Bildes in Prozent */
}

div.skalieren img {
 width: 100%;
}
</style>

<div class="skalieren">
<img src="bildname.jpg">   <!-- Keine Größenangabe eintragen! -->
</div>

• Zeilenumbruch im Linktext verhindern [IE|M|O|G]

So vermeiden Sie das ein (langer) Linktext durch einen Zeilenumbruch geteilt wird.


<style type="text/css">
/* Zeilenumbruch im Linktext verhindern */

a {
 white-space: Nowrap;
}
</style>

• Grafikrahmen um ein Bild legen [IE|M|O|G]

<img src="foto.jpg"
 style="background: url(rahmen.png); padding: 12px;">

• Linkrahmen von allen Bildern entfernen [IE|M|O|G]

Beim Verlinken von Bildern entstehen um die Bilder „hässliche” Rahmen

.
Mit dieser Anweisung können Sie diese Linkrahmen Dateiweit entfernen.


<style type="text/css">
/* Linkrahmen von allen Bildern entfernen */

a img {
 border: 0;
}
</style>

• Eingabefelder und Buttons formatieren [IE 10|M|O|G]

Mit CSS ist es auch möglich, ohne das man eine extra Klasse (class) definieren muss,
Eingabefelder und Buttons zu formatieren.


<style type="text/css">
/* Eingabefelder und Buttons formatieren */

input[type="text"] {
 ...Anweisung...
}

input[type="password"] {
 ...Anweisung...
}

input[type="button"] {
 ...Anweisung...
}

input[type="submit"] {
 ...Anweisung...
}

input[type="reset"] {
 ...Anweisung...
}

textarea {
 ...Anweisung...
}
</style>

• Tabellenzeilen einfärben [IE 9|M|O|G]

Jede zweite Zeile in einer Tabelle bekommt eine andere Hintergrundfarbe.


<style type="text/css">
/* Tabellenzeilen einfärben */

tr:nth-child(even) {
 background-color: #FFFF00;
}

tr:nth-child(odd) {
 background-color: #FFCCCC;
}
</style>

<table>
 <tr>
  <td> Inhalt eins </td>
 </tr>
 <tr>
  <td> Inhalt zwei </td>
 </tr>
 <tr>
  <td> Inhalt drei </td>
 </tr>
 <tr>
  <td> Inhalt vier </td>
 </tr>
</table>

Demo:

Inhalt eins

Inhalt zwei

Inhalt drei

Inhalt vier

• Aufzählungslisten einfärben [IE 9|M|O|G]

Jedes zweite Listenelement bekommt eine andere Hintergrundfarbe.


<style type="text/css">
/* Aufzählungslisten einfärben */

li:nth-child(even) {
 background-color: #C1DFFF;
}

li:nth-child(odd) {
 background-color: #E8F3FF;
}
</style>

<ul>
 <li> Inhalt eins </li>
 <li> Inhalt zwei </li>
 <li> Inhalt drei </li>
 <li> Inhalt vier </li>
</ul>

Demo:

Inhalt eins
Inhalt zwei
Inhalt drei
Inhalt vier

• Mit import mehrere CSS-Dateien zusammenfassen [IE|M|O|G]


<style type="text/css">
/* Mit import mehrere CSS-Dateien zusammenfassen */

@import url("normal.css");
@import url("erweitert.css");
</style>

• Mit ::selection markierten Text hervorheben [IE 9|M 4|O|G]

Mit dieser Anweisung lässt sich ein markierter Text mit einer anderen Schrift.- und Hintergrundfarbe hervorheben.


<style type="text/css">
/* Mit ::selection markierten Text hervorheben */

::selection {
 background: #C8FF91;
 color: #000000;
}
</style>

CSS Bausteine 1 [2] CSS Bausteine 3