Onlinemagazin: devmag.net » CSS http://www.devmag.net Regelmäßig neue Artikel rund um das Homepage Bauen mit HTML, CSS, AJAX, PHP und XML. Sun, 30 Oct 2011 18:38:15 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Verknüpfungen in CSS http://www.devmag.net/css/25-verknupfungen-in-css.html?utm_source=rss&utm_medium=rss&utm_campaign=verknupfungen-in-css http://www.devmag.net/css/25-verknupfungen-in-css.html#comments Wed, 22 Oct 2008 10:00:00 +0000 Thiemo http://www.devmag.net/?p=25

Verknüpfungen in CSS Durch Verknüpfungen in CSS Stylesheets lassen sich viele Operationen und Eigenschaften auf verschiedene Elemente oder Elementgruppen begrenzen. In diesem Artikel werden alle CSS 1 und CSS 2 Verknüpfungen kurz vorgestellt.

Verknüpfungen sind in CSS ein wichtiger Bestandteil. Bereits im Artikel "Einführung in CSS" haben Sie die "." Verknüpfung kennen gelernt. Doch es gibt noch weitere Formen solcher Verknüpfungen.

Verknüpfungen in CSS 1

In CSS 1 gab es noch nicht so einen großen Umfang an Verknüpfungen, da die Implementierung von CSS noch recht neu war. Die wichtigsten Verknüpfungen von CSS 1 haben Sie bereits im Artikel "Einführung in CSS" kennen gelernt.
Zu der "," und "." (Komma-, und Punktverknüpfung) gesellt sich noch die "#" Verknüpfung. Diese hat eine ähnliche Bedeutung wie die "." Verknüpfung, nur das über die "#" Verknüpfung die Elemente mit der jeweils entsprechenden ID im ID-Attribut angesprochen werden.

h1#rot {color: #ff0000}
h1#gruen {color: #00ff00}

Angesprochen wird das Element, wie gesagt durch die entsprechende ID.

<h1 id="rot">Erste Überschrift</h1>
<h1 id="gruen">Zweite Überschrift</h1>

Desweiteren gibt es noch die " " (Leerzeichen) Verknüpfung. Über diese Verknüpfung werden die entsprechenden Elemente angesprochen, sofern Sie ineinander verschachtelt vorkommen. So kann man z.B. alle Bilder ansprechen, die in einem Paragraph liegen usw.

p img {border: 1 solid black}

Diese Anweisung wird auf alle Bilder (img-Tag) angewendet, die innerhalb eines Paragraphen liegen. Hierbei wird dem jeweiligen Bild ein 1px dicker, schwarzer Rahmen gegeben.

Verknüpfungen in CSS 2

CSS 2 erweitert Funktionalität immens. So ist es nun möglich, Elemente mit CSS anzusprechen, die ein bestimmtes Attribut haben, oder einen bestimmten Attributswert.

Stern-Verknüpfung
Die * Verknüpfung spricht alle vorhandenen Elemente an.

* {color: #ff0000}
Es werden alle Elemente mit der Farbe "Rot" definiert.

*.rot {color: #ff0000}
Alle Elemente mit class="rot", sei es auch in wie weit sie verschachtelt sind, werden rot dargestellt.

Größer-als Verknüpfung
Ja auch teilweise logische Verknüpfungen sind mit CSS 2 möglich. Die Größer-als Verknüpfung spricht diejenigen Elemente an, die eine Ebene untergeordnet sind. So ist für Listen das Übergeordnete Element <ul>, das Untergeordnete Element ist <li>.

style.css
ul > li {color: #ff0000}

css_3.html
<html><head>
<title>
CSS - Beispiel 3
</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<ul>
<li>Erstes Element</li>
<li>Zweites Element</li>
<li>Drittes Element</li>
</ul>
</body>
</html>

Das Ergebnis im Netscape 6.1
Die Größer-als Verknüpfung in CSS 2
Die Größer-als Verknüpfung in CSS 2


Plus-Verknüpfung
Mit der Plus-Verknüpfung werden in CSS 2 weitere Möglichkeiten wahr. Über die Plus-Verknüpfung kann man Elemente ansprechen, die direkt aufeinandern folgen.

p + strong {color: #ff0000}

Hierbei wird das <strong> Element angesprochen, wenn es direkt nach dem <p> Element folgt.
Z.B.
<p><strong>Text</strong></p>

Attributverknüpfungen mit CSS 2

Völlig neu sind die Attributverknüpfungen in CSS 2. Hiermit kann man CSS Formatierungen z.B. nur für Elemente möglich machen, die ein bestimmtes Attribut gesetzt haben.

Attributverknüpfung
Eine einfache Attributverknüpfung wird hinter dem Element, oder der definierten Klasse in [] Klammern angegeben.

a[target] { color: #0000ff}

Diese Anweisung stellt alle Links, die ein target="" Attribut haben, blau dar.

Attributwert-Verknüpfung
Eine andere Möglichkeit ist es, direkt die Attributwerte anzusprechen. Ist bei einem Link, z.B. das target-Attribut auf "_blank" gesetzt, dann wird der Links blau dargestellt.

style.css
a[target="_blank"] { color: #0000ff}

css_4.html
<html><head>
<title>
CSS - Beispiel 3
</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<a href="http://www.devmag.net" target="_blank">devmag.net</a><br>
<a href="http://www.pckrieg.de">PC-Krieg</a>
</body>
</html>

Wie Sie sehen hat ein Link das Target-Attribut, der andere nicht. Das Ergebnis, wiederum nur im Netscape oder Opera zu sehen:
Attributverknüpfungen mit CSS 2
Attributverknüpfungen mit CSS 2

Was natürlich auch vorkommt ist, das Sie alle Links, entweder mit einem target="_blank", oder mit einem target="_top" Attribut ansprechen möchten. Auch das ist möglich, es werden einfach mehrere Attributwerte in der CSS Styleanweisung angegeben.

a[target~="_top _blank"] {color: #336699}

So, im zweiten Teil des CSS Kurses wurden ihnen die CSS Verknüpfungen vorgestellt. In der praktischen Anwendung von CSS kann und muss auf diese sehr oft zurückgegriffen werden.
CSS Verknüpfungen kann man beliebig kombinieren, es gilt: einfach ausprobieren.

No related posts.

]]> http://www.devmag.net/css/25-verknupfungen-in-css.html/feed 0 Einstieg in CSS http://www.devmag.net/css/21-einstieg-in-css.html?utm_source=rss&utm_medium=rss&utm_campaign=einstieg-in-css http://www.devmag.net/css/21-einstieg-in-css.html#comments Fri, 22 Aug 2008 10:00:00 +0000 Thiemo http://www.devmag.net/?p=21
  • HTML Kurs – Der Einstieg
  • PHP Kurs – Der Einstieg für Anfänger
  • Schatten mit CSS
    • ]]>     Einstieg in CSS CSS ist nunmehr auch schon etwas älter. CSS läuft jedem Surfer täglich über den Weg. In dieser CSS Einführung wollen wir Sie ein wenig in die Technik, bzw. die Arbeitsweise mit CSS einführen.

    CSS steht für Cascading Style Sheets, und sollen das Leben eines jeden Webmasters zumindest ein wenig erleichtern. CSS 1 wird von Netscape und dem IE in etwa komplett in den Versionen 5 unterstützt. CSS 2 wird bereits (fast komplett) von dem Netscape 6 unterstützt. Der IE 6 hängt noch ein wenig nach.
    Über CSS kann man das Aussehen von bestimmten HTML Elementen definieren.

    Ein einfaches Beispiel:

    <p><font color="#ff0000">Ein Text</font></p>
    Nehmen wir an, das Sie diesen Code auf ca. 10 Unterseiten verwenden, z.B. in einem Menü, oder einem anderen Element. Möchten Sie nun, das der Text blau dargestellt wird, dann müssten Sie in ihren 10 Unterseiten jeweils die Farbangabe auf blau ändern.
    Dies ist schon viel Aufwand, doch stellen Sie sich das einmal bei 100, 200 oder gar 300 Unterseiten vor?

    Die Lösung bringt CSS mit sich. Über CSS kann man, wie bereits erwähnt das Aussehen, also die Formatierung von Elementen definieren. Folgende CSS Anweisung würde das oben beschriebene Problem lösen:

    p {color: #0000ff }

    Diese CSS Anweisung wird in einer Datei *.css gespeichert, und in die jeweiligen HTML Dateien über eine Anweisung im <head> Bereich (siehe unten) eingebunden. Sie definiert, das alle <p> Tags blau dargestellt werden.

    Stylesheets einbinden

    Eine CSS Style Definition kann auf zwei Möglichkeiten in eine HTML Datei eingebunden werden. Zum einen, wie im obigen Fall, das die Stylesheet-Anweisungen in einer ausgelagerten *.css Datei vorliegen, oder, das die Styleanweisungen im <head> Bereich jeder Seite definiert werden.
    Eine weitere Möglichkeit, ist die Verwendung des style-Attributes bei HTML Tags, die auf diese Weise direkt formatiert werden.

    1. Einbindung einer ausgelagerten CSS Datei:
    <link rel="stylesheet" href="style.css" type="text/css">
    Diese Anweisung kommt in den Head-Bereich jeder HTML Seite, die die Style-Definitionen verwenden soll. Über das href-Attribut wird auf die Adresse der Stylesheet Datei verwiesen.

    2. Styledefinition im head-Bereich
    Die Styledefinitionen im <head> Bereich werden durch den <style> Tag umschlossen. Das obere Beispiel würde wie folgt eingebunden werden:

    <style type="text/css">
    p {color: #0000ff}
    </style>

    Hierbei steht man natürlich wiederum vor der Problematik, dass das Stylesheet bei einer Änderung in jeder Datei geändert werden muss.

    3. Styledefinitionen bei einem Element
    Man kann CSS Style, durch das style-Attribut direkt bei einem Element definieren. Das obere Beispiel würde wie folgt aussehen:
    <p style="color: #0000ff">Der Text</p>

    Elemente und Klassen

    Nun, wenn Sie nach dem beschriebenen Schema vorgehen, können Sie jeden HTML Tag (jeden sichtbaren) über CSS vordefinieren. So definiert folgende CSS Anweisung, das alle Überschriften (<h1>) Rot sein sollen.

    h1 { color: #ff0000 }

    Was ist nun, wenn Sie mehrere Farben für <h1>-Überschriften definieren möchten. So soll z.B. eine Überschrift grün, die andere Rot sein.
    Auch hierfür hat CSS eine Lösung. Man kann einzelne Klassen definieren. Diese Klassen sind ebenfalls Styledefinitionen (wie gewohnt), nur muss von dem HTML-Befehl direkt auf die Klasse verwiesen werden, wenn dieses Element über die jeweilige Klasse definiert werden soll.

    Ein Beispiel veranschaulicht dies:

    style.css
    .rot {color: #ff0000}
    .gruen {color: #00ff00}

    css_1.html
    <html><head>
    <title>
    CSS - Beispiel 2
    </title>
    <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
    <h1 class="rot">Rote Ueberschrift</h1>
    <h1 class="gruen">Gruene Ueberschrift</h1>
    </body>
    </html>

    Das Ergebnis im Browser (kann man sich schon vorstellen):
    CSS Klassen anwenden
    CSS Klassen anwenden

    Über die class-Attribute muss also auf die Klassendefinition in der CSS Datei verwiesen werden. Eine Klasse erster Ebene beginnt mit einem Punkt, in geschweiften Klammern kommt die CSS Definition.

    Was ist nun eine Klasse erster Ebene?
    Eine Klasse erster Ebene ist für alle HTML Tags, die sich im <body> Bereich befinden, anwendbar.
    Man kann auch Klassen definieren, die sich nur auf einen HTML Tag beschränken. Die Klasse kann dann von anderen Tags nicht mehr aufgerufen werden.
    Diesen Sachverhalt kann man auf unser 2. Beispiel übertragen. Dabei müssen Sie die Klassendefinitonen wie folgt verändern.

    style.css
    h1.rot {color: #ff0000}
    h1.gruen {color: #00ff00}

    Es werden wie Sie sehen, wiederum zwei Klassen definiert. Diese Klassen können jedoch nur von <h1> Tags aufgerufen werden. Ein Aufruf z.B. über <p class="rot"> würde nicht "funktionieren".

    Mehrere HTML Befehle "gleichzeitig" definieren

    Man kann auch mehrere HTML Befehle "in einem" über CSS definieren. So haben Sie z.B. eine Standardfarbe, allgemein für Überschriften. Folgende CSS Definition definiert, das die h1-h6 Tags alle Grün dargestellt werden sollen.

    h1, h2, h3, h4, h5, h6 {color: #00ff00 }

    Nun, wenn man jetzt einen Überschriftstyp noch genauer definieren möchte, z.B. die Schriftart, dann kann man diese Definition einfach darunter setzten.

    style.css
    h1, h2, h3, h4, h5, h6 {color: #00ff00 }
    h2 {font-family: Arial}

    css_2.html
    <html><head>
    <title>
    CSS - Beispiel 3
    </title>
    <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
    <h1>Überschrift 1</h1>
    <h2>Überschrift 2</h1>
    </body>
    </html>

    Das Ergebnis sieht im Browser wie folgt aus:

    Verschachtelte CSS Anweisungen
    Verschachtelte CSS Anweisungen

    Zunächst werden alle Überschriften so definiert, das die Textfarbe Grün sein soll. In der zweiten Zeile bekommt speziell die Überschrift h2 noch die Eigenschaft, das Sie von der Schriftart Arial sein soll.

    Kommentare in CSS

    Ja, innerhalb einer Styledefinition können Sie Kommentare verwenden, diese dienen dem besseren Verständnis des CSS Codes. Kommentare werden vom Browser, der den CSS Code interpretiert einfach übersehen.

    h1 { color: #ff0000 } /* dies ist ein Kommentar */

    So, jetzt haben Sie einen Einblick in die Arbeit mit CSS bekommen. Mit unserer CSS Referenz können Sie bestimmt bald CSS richtig anwenden.

    Weiterführende Links:

    1. HTML Kurs – Der Einstieg
    2. PHP Kurs – Der Einstieg für Anfänger
    3. Schatten mit CSS

    ]]>     http://www.devmag.net/css/21-einstieg-in-css.html/feed 0     Pseudo-Klassen in CSS http://www.devmag.net/css/24-pseudo-klassen-in-css.html?utm_source=rss&utm_medium=rss&utm_campaign=pseudo-klassen-in-css http://www.devmag.net/css/24-pseudo-klassen-in-css.html#comments Sun, 22 Jun 2008 10:00:00 +0000 Thiemo http://www.devmag.net/?p=24
  • PHP – Klassen in Klassen – Class Nesting
  • PHP und OOP – Klassen und Objekte mit PHP
  • PHP und OOP – Vererbung von Klassen
    • ]]>     Pseudo-Klassen in CSS Pseudo, das hört sich schlimmer an als es ist. Pseudo-Klassen beschreiben in einer besonderen Form den Zustand eines Elementes. Hier erfahren Sie, welche Pseudo Klassen es in CSS 1 und CSS 2 gibt, und wie man diese anwendet.

    Pseudoklassen sind eine besondere Form einer CSS Klasse. Sie beschreiben den Zustand eines Elementes. Dieser Zustand kann z.B. dynamisch sein, dies ist bei Links der Fall. So gibt es bei Links, wie im Artikel "CSS - Links gestalten" beschrieben wurde, die unterschiedlichen Zustände. Diese können mit CSS formatiert werden. Neben den Pseuo-Klassen für Links gibt es jedoch noch weitere Pseudo-Klassen, die mit CSS 2 erst das Licht des Webs entdeckt haben.

    Syntax von Pseudo-Klassen

    Die Anwendung von Pseudo-Klassen erfolgt in CSS nach einem festen Schema. Zunächst wird die Klasse, oder das Element definiert, und dann, getrennt von einem Doppelpunkt kommt die Pseudo-Klasse die den jeweiligen Zustand, oder die Eigenschaft beschreibt.

    .a:focus {color: #ff0000}

    Dieses Beispiel definiert eine Klasse "a". Das Element, das sich auf diese Anweisung bezieht befindet sich gerade im fokussierten Zustand.
    Ein anderes Beispiel definiert das <input> Element bei HTML Formularen:

    input:focus {color: #ff0000}

    Die Pseudo-Klassen an sich

    :focus
    Wie schon im oberen Beispiel wird durch diese Pseudo-Klasse der fokussierte Zustand eines Elementes beschrieben. Das ist z.B. der Zustand, wenn man sich mit einem Cursor in einem Eingabefeld befindet. Das Element ist ausgewählt.

    :lang()
    Diese Pseudo-Klasse ist noch recht jung. Hierbei werden die Elemente angesprochen, die sich auf eine bestimmte Sprache beziehen. In den Klammern wird der Sprachcode angegeben. Dieser entspricht dem Länderkürzel.

    Beispiel:
    p:lang(de) {color: #00ff00}
    p:lang(en) {color: #ff0000}
    p:lang(fr) {color: #0000ff}

    Hierbei wird das Aussehen der Paragraphen definiert, die eine deutsche, englische, oder französische Sprachdefinition haben.

    :first-child
    Die Pseudo-Klasse first-child beschreibt das erste Element eines Baumes. Bei einer Liste ist dies der erste Listenpunkt.

    style.css
    li:first-child {color: #ff0000}

    css_4.html
    <html><head>
    <title>
    CSS - Beispiel 4
    </title>
    <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
    <ul>
    <li>Erste Element</li>
    <li>Zweite Element</li>
    <li>Dritte Element</li>
    </ul>
    </body>
    </html>

    Das Ergebnis, wiederum nur mit Netscape 6 oder Opera zu sehen:
    CSS Pseudo-Klasse first-child
    CSS Pseudo-Klasse first-child

    Pseudo-Klassen für den Ausdruck...

    Neu in CSS 2 sind einige Pseudo-Klassen, über welche man das Dokument an sich beschreiben kann, bzw. wie es in verschiedenen Medien aussehen soll (als Beispiel verwenden wir die gedruckte Ausgabe eines Textes).

    :left     und :right
    Diese Pseudo-Klassen geben an, wie ein ausgedrucktes Dokument "aussehen" soll. Hierbei wird nicht auf Formatierungen Wert gelegt, sondern auf Positionierung. Sie geben an, wie das Dokument, sofern es auf der linken Seite eines Heftes gedruckt wurde, positioniert wird, und andersherum.
    So können Sie das Format so definieren, das der ausgedruckte Text ohne Probleme gelocht und abgeheftet wird.
    Soll eine Seite z.B. gelocht werden, so muss man die Abstände zum Rahmen ein wenig vergrößern, da man sonst in den Text "locht".

    Das waren soweit alle Pseudo Klassen in CSS 1 und CSS 2.

    Weiterführende Links:

    1. PHP – Klassen in Klassen – Class Nesting
    2. PHP und OOP – Klassen und Objekte mit PHP
    3. PHP und OOP – Vererbung von Klassen

    ]]>     http://www.devmag.net/css/24-pseudo-klassen-in-css.html/feed 0     CSS – Textfelder formatieren http://www.devmag.net/css/27-css-textfelder-formatieren.html?utm_source=rss&utm_medium=rss&utm_campaign=css-textfelder-formatieren http://www.devmag.net/css/27-css-textfelder-formatieren.html#comments Wed, 28 May 2008 10:00:00 +0000 Thiemo http://www.devmag.net/?p=27
  • CSS – Hübsche Textfelder
  • Listen-Menüs mit CSS formatieren
  • Tabellenrahmen mit Gif
    • ]]>     CSS - Textfelder formatierenMit CSS lassen sich Textfelder auf eine Vielfalt formatieren. Neue Hintergrundfarbe, anderer Rahmentyp, Festlegung der Schriftart und vieles mehr...

    Zunächst wollen wir ein Textfeld generieren, welches einen blauen Hintergrund hat, und einen weißen Rahmen. Wir benötigen eine CSS-Definition, die wie folgt aussieht.

    <input type="text" value="Textfelder" style="border: 1 solid white; background-color: blue;">

    Das Ergebnis auf schwarzen Hintergrund:



    Verantwortlich für diese Veränderung ist das Styleattribut, welches dem <input>-Tag hinzugefügt worden ist.

    Für die Veränderung des Rahmens ist der Teil:

    border: 1 solid white;

    verantwortlich. In ihm wird angegeben, das der Rahmen, 1px stark sein soll. Die zweite Angabe veranlasst, dass der Rahmen eine durchgezogene (solid) weiße Linie sein soll.

    Der Hintergrund:

    background-color: blue;

    Mit diesem Teil wird festgelegt, das die Hintergrundfarbe Blau sein soll.

    Das nächste Beispiel ist ein Textfeld mit rotem Hintergrund, weißer Textfarbe, sowie einem gestrichelten Rahmen. Das Textfeld muss wie folgt verändert werden:

    <input type="text" value="Textfelder" style="border: 1 dashed black; background-color: red; color:#FFFFFF">

    Das Ergebnis, diesmal auf weißem Hintergrund:



    Hier wurde für den Rahmen ein anderes Attribut verwendet. Der Rahmen ist hier gestrichelt. Dies resultiert aus der Angabe border: 1 dashed black bei der Styledefinition. Zudem wurde eine Textfarbe, mit dem Attribut color: #FFFFFF festgelegt.

    Man kann auch den Text, welcher in das Feld eingegeben wird, formatieren. Es soll festgelegt werden, das der Eingegebene Text von der Schriftart Verdana ist, und dieser Text fettgedruckt sein soll.

    Der Code sieht wie folgt aus:

    <input type="text" value="Textfelder" style="border: 1 dashed black; background-color: orange; color:#FFFFFF; font-face:Verdana; font-weight:bold; font-size:8pt">

    Das Ergebnis:

    Die Definition wurde um einige Attribute erweitert. Für die Textveränderung sind folgende Attribute verantwortlich:

    color:#FFFFFF;
    Gibt die Farbe der Schrift an.

    font-face:Verdana;
    Gibt die Schriftart an.

    font-weight:bold;
    Gibt an, das der Text fettgedruckt sein soll.

    font-size:8pt
    Gibt die Schriftgröße in Punkten an.

    Weiterführende Links:

    1. CSS – Hübsche Textfelder
    2. Listen-Menüs mit CSS formatieren
    3. Tabellenrahmen mit Gif

    ]]>     http://www.devmag.net/css/27-css-textfelder-formatieren.html/feed 0     Hintergrund richtig setzten… http://www.devmag.net/css/33-hintergrnde-richtig-setzten.html?utm_source=rss&utm_medium=rss&utm_campaign=hintergrnde-richtig-setzten http://www.devmag.net/css/33-hintergrnde-richtig-setzten.html#comments Wed, 28 May 2008 10:00:00 +0000 Thiemo http://www.devmag.net/?p=33
  • Scrollender Hintergrund
  • Tabellenrahmen mit Gif
  • Bilder verstecken…
    • ]]>     CSS - Hintergründe richtig setzenMit CSS kann man leicht einer Seite einen grafischen Hintergrund geben, wie Sie diesen geschickt setzten und positionieren, erfahren Sie hier.

    Wer mit HTML beispielsweise einer Tabelle als Hintergrund ein Bild zuweist, der hat schnell ein Problem. Das Bild wiederholt sich immer und immerzu. Dieser Effekt zerstört schnell das Design einer Seite.
    Mit CSS kann man das Verhalten des Hintergrundes dank einiger Befehle besser beeinflussen.

    Inhalt der Tabelle
    Ohne Wiederholung
    Bei diesem Beispiel wird das Hintergrundbild nur einmal angezeigt, es wird nicht wiederholt.

    Die CSS - Anweisung:

    style="background-image: url(hintergrund.gif); background-repeat: no-repeat"

    Inhalt der Tabelle
    Horizontale Wiederholung

    Wie man sehen kann wird das Hintergrundbild nur in der horizontalen wiederholt.

    Die CSS - Anweisung:

    style="background-image: url(hintergrund.gif); background-repeat: repeat-x"

    Die Styleanweisung gibt an, dass das Bild in x-Richtung wiederholt wird. Die x-Richtung entspricht der Horizontalen. Möchte man das Bild in der Vertikalen wiederholen lassen, dann muss als Attribut background-repeat: repeat-y gesetzt werden.

    Inhalt der Tabelle
    Zentriert, ohne Wiederholung

    Bei diesem Beispiel ist der Hintergrund zentriert, und er wird nicht wiederholt.

    Die CSS - Anweisung:

    style="background-image: url(hintergrund.gif); background-repeat: no-repeat; background-position: center"

    Aus dem CSS Code folgt, das der Hintergrund zentriert ist. Sie können weitere Positionsangaben machen. Dabei können Sie folgende Befehle kombinieren:

    center - zentriert bzw. mittig
    left - links
    right - rechts

    bottom - unten
    top - oben
    middle - Mitte

    Die erste Angabe die gemacht wird gibt die Position von der horizontalen aus gesehen. Die zweite Angabe ist dann aus der vertikalen Sicht. Wird background-position: left center" gesetzt, dann ist der Hintergrund links und dort zentriert (in der Mitte) ausgerichtet.

    Weiterführende Links:

    1. Scrollender Hintergrund
    2. Tabellenrahmen mit Gif
    3. Bilder verstecken…

    ]]>     http://www.devmag.net/css/33-hintergrnde-richtig-setzten.html/feed 0     ACSS – Aural Cascading Style Sheets http://www.devmag.net/css/23-acss-aural-cascading-style-sheets.html?utm_source=rss&utm_medium=rss&utm_campaign=acss-aural-cascading-style-sheets http://www.devmag.net/css/23-acss-aural-cascading-style-sheets.html#comments Mon, 19 May 2008 10:00:00 +0000 Thiemo http://www.devmag.net/?p=23
  • SVG mit Style
  • CSS Links: Unsichtbar
  • Listen-Menüs mit CSS formatieren
    • ]]>     ACSS - Aural Cascading Style Sheets Sehbehinderte Menschen haben es im Internet nicht leicht. Das W3C hat mit ACSS nun eine Möglichkeit geschaffen, wodurch spezielle Browser Seiteninhalte vorlesen können, die mit Hilfe eines ACSS-Stylesheet "gestaltet" wurden.

    Vorweg muss leider erwähnt werden, dass bisher kein Browser diese Technik unterstützt. ACSS ist aber für alle Sehbehinderten eine große Hoffnung .
    Das Konzept der Aural Cascading Style Sheets sieht vor, dass spezielle Browser die Inhalte einer mit ACSS "gestalteten" Webseite vorlesen sollen. ACSS-Befehle werden ab der CSS-2-Version unterstützt. ACSS wird jedoch bisher noch von keinem Browser oder Ausleseprogramm unterstützt.
    Für das "normale" Auslesen von Texten gibt es jedoch bereits Programme, die diese Aufgaben übernehmen. Diese Programme können nicht betont lesen und bestehen meist aus nur einem Sprecher. So verliert ein Text an Charakter, er ist nicht mehr so "lesenswert".
    Mit ACSS ist es demgegenüber z.B. möglich, dass auf einer FAQ-Seite die Fragen von einer weiblichen Stimme vorgelesen und die Antworten von einer männlichen Stimme gegeben werden.
    Man kann bei Fachbegriffen wie "HTML" oder "CSS" definieren, dass diese Zeichenkette nicht als Wort, sondern Buchstabe für Buchstabe vorgelesen wird. Das alles ist mit modernen Auslesegeräten bisher noch nicht möglich. ACSS soll dementsprechend mit dafür sorgen, dass die Auslesegeräte noch benutzerfreundlicher werden und der Hörer auch das zu hören bekommt, was auf dem Bildschirm steht.

    Stimmen

    Die ACSS-Befehle werden wie normale CSS-Anweisungen verwendet. So definiert folgendes ACSS-Style, dass fett gedruckte Texte von einer männlichen Stimme und schräg gedruckte Texte, von einer weiblichen Stimme vorgelesen werden.

    <style type="text/css">
    B {voice-family: male;}
    I {voice-family: female;}
    </style>

    Für die Festlegung des Sprechers ist die Eigenschaft voice-family verantwortlich. Die möglichen Werte sind male für männlich und female für weiblich. Eine Kinderstimme kann durch child erzeugt werden.

    Sprechgestaltung mit ACSS

    Der speech-rate-Befehl gibt an, wie schnell der Inhalt ausgegeben werden soll. Es gibt dafür mehrere festgelegte Werte.

    <style type="text/css">
    B {voice-family: male; speech-rate: fast}
    I {voice-family: female; speech-rate: medium}
    </style>

    Weitere mögliche Werte:
    fast
    300 Wörter pro Minute
    faster
    Erhöht die Geschwindigkeit um 40 Wörter pro Minute
    medium
    180 bis 200 Wörter pro Minute
    slow
    120 Wörter pro Minute
    slower
    Verlangsamt die Geschwindigkeit um 40 Wörter pro Minute
    x-slow
    80 Wörter pro Minute
    x-fast
    500 Wörter pro Minute

    Außerdem kann man z.B. definieren, in welcher Tonhöhe ein Text ausgegeben werden soll. Hierfür gibt es in ACSS die pitch- Eigenschaft.

    <style type="text/css">
    B {voice-family: male; pitch: 10kHZ }
    I {voice-family: female; pitch: 14kHZ}
    </style>

    Die Angabe der Frequenz erfolgt in KHz. Der Hörbereich des Menschen liegt nach Wissenstand des Autors zwischen 2 und 20 kHz.

    Lautstärke

    Über die volume-Eigenschaft kann die Lautstärke angegeben werden. Somit können z.B. Schreie oder Flüstern modelliert werden. Zudem kann man z.B. eine Männerstimme im Vergleich zu einer Frauenstimme als lauter definieren.

    <style type="text/css">
    B {voice-family: male; volume: loud }
    I {voice-family: female; volume: medium}
    </style>

    loud
    Laut
    medium
    Normal
    silent
    Kein Klang
    soft
    Leise
    x-loud
    Sehr laut
    x-soft
    Sehr leise

    Die Lautstärke kann auch in % angegeben werden. Hierbei ist 100% die lauteste Lautstärke.

    <style type="text/css">
    B {voice-family: male; volume: 75% }
    I {voice-family: female; volume: 50%}
    </style>

    Es gibt weitere Eigenschaften, die angeben, wie ein Text ausgegeben werden soll. Über die speak-Eigenschaft kann definiert werden, ob ein Text z.B. buchstabiert oder fließend gesprochen werden soll.

    <style type="text/css">
    p { speak: normal }
    img { speak:none; }
    abbr { voice-family: male; volume: 50%; speak: spell-out}
    </style>

    Hiermit wird angegeben, dass Abkürzungen buchstabiert werden, die im HTML-Code durch den Tag <abbr> als Abkürzung ausgezeichnet wurden. Bilder werden gar nicht "ausgegeben", Blocksätze werden "normal" ausgegeben. Bei den Bildern steht man vor dem Problem, dass sie ein alt-Attribut haben, welches ausgegeben werden könnte.
    Die ACSS-Eigenschaft speak-punctuation gibt an, ob Satzzeichen mit ausgegeben werden sollen. Bei Quellcodes für Programmiersprachen ist dies notwendig. Quellcodes sollten deshalb immer mit dem HTML- Tag <code> ausgezeichnet werden. Die Eigenschaft speak-punctuation kann entweder auf code oder auf none gesetzt werden.

    <style type="text/css">
    code { speak: normal; speak-punctuation: code;}
    </style>

    Desweiteren kann festgelegt werden, wie Zahlen ausgegeben werden sollen. Zum einen können die Zahlen komplett ausgegeben werden, zum andern die einzelnen Ziffern hintereinander.
    Dies wird durch die ACSS-Eigenschaft speak-numeral erreicht.

    <style type="text/css">
    em.zahl { speak: normal; speak-numeral: continuous;}
    </style>

    Zahlen, die im HTML Code z.B. mit <em class="zahl">2002</em> ausgezeichnet sind, werden fließend ausgegeben. Möchte man die Ziffern hintereinander ausgeben, muss die Eigenschaft auf digits gesetzt werden.

    Betonungen und andere Auszeichnungen

    Auch betontes Sprechen kann mit ACSS gestaltet werden. Über die richness-Eigenschaft wird die Helligkeit einer Stimme beschrieben. Ein niedriger Wert gibt eine weiche, zarte Stimme an, ein hoher Wert eine rauhe, starke Stimme.
    Desweiteren gibt es in ACSS die stress-Eigenschaft. Über diese Eigenschaft kann man bestimme Texte oder Abschnitte stärker betonen.
    Beide Eigenschaften können Werte zwischen 1 - 100 annehmen.

    <style type="text/css">
    em { speak: normal; richness: 35;}
    strong { speak: normal; stress: 80;}
    </style>

    Bei diesem Beispiel werden emphatische Texte "weich" ausgelesen, fett gedruckte Texte werden stärker betont.

    Dies sind natürlich nicht alle ACSS-Befehle. Ziel dieses Artikels war es nur, auf die vielfältigen Möglichkeiten von ACSS hinzuweisen. Setzen Sie sich mit den Möglichkeiten auseinander, die ACSS zur akustischen Seitengestaltung bietet und bauen sie diese Elemente in Ihre Quelltexte ein. Damit ermöglichen Sie sehbehinderten Menschen in Zukunft einen besseren Zugang zu ihren Seiten.

    Weiterführende Links:

    1. SVG mit Style
    2. CSS Links: Unsichtbar
    3. Listen-Menüs mit CSS formatieren

    ]]>     http://www.devmag.net/css/23-acss-aural-cascading-style-sheets.html/feed 0     Listen-Menüs mit CSS formatieren http://www.devmag.net/css/26-listen-mens-mit-css-formatieren.html?utm_source=rss&utm_medium=rss&utm_campaign=listen-mens-mit-css-formatieren http://www.devmag.net/css/26-listen-mens-mit-css-formatieren.html#comments Sat, 26 Apr 2008 10:00:00 +0000 Thiemo http://www.devmag.net/?p=26
  • Mouse Over Buttons
  • CSS – Textfelder formatieren
  • Listen mit CSS
    • ]]>     Listen-Menüs mit CSS formatieren Normale DropdownMenüs, oder Listenmenüs sehen schäbig aus. Mit CSS kann man diese schnell, zu einem Highlight machen.

    Mit CSS kann man eigentlich jedes Formularelement zu etwas wirklich besonderem machen. So auch Listen-Menüs, die ja oft als normales Menü verwendet werden.
    Damit dieses nicht allzu "schäbig" aussieht, hier nun ein paar Beispiele mit Erklärungen, für das Design der Listen-Menüs.

    Dunkelblauer Hintergrund & weiße Schrift
    Dunkelblauer Hintergrund & weiße Schrift

    <select name="select" style="background: darkblue; color: white;">
    <option value="1">Eintrag</option>
    <option value="2">Eintrag</option>
    <option value="3">Eintrag</option>
    </select>

    Im Style-Attribut des <select> befinden sich die Anweisungen, die die Liste einfärben. background: darkblue; erzeugt den dunkelblauen Hintergrund, color: white; für die weiße Schriftfarbe.

    Sie können natürlich auch alle Select-Elemente, die das entsprechende Stylsheet haben so formatieren.

    <style type="text/css">
    select {background: darkblue; color: white;}
    </style>

    Weiteres Beispiel


    Inhalte ein wenig anders gestaltet

    <style type="text/css">

    select
    {
    font-family: monospace;
    font-size: 10px;
    font-weight: bold;
    background: #336699;
    color: #FFFFFF"
    }
    </style>

    Hierbei wird mit font-family: monospace; die Schriftart auf "monospace" festgelegt. Mit font-size: 10px; wird die Schriftgröße auf 10 Pixel gesetzt, font-weight: bold; gibt an, das der Text fett gedruckt werden soll.

    Auch die einzelnen Optionen formatiert
    Auch die einzelnen Optionen formatiert

    <select name="select" style="color:white">
    <option value="3" style="background: darkblue">Eintrag</option>
    <option value="1" style="background: darkgreen">Eintrag</option>
    <option value="2" style="background: darkred">Eintrag</option>
    </select>

    Bei diesem Beispiel sind auch die einzelnen Optionsfelder, also die Auswahlmöglichkeiten nach dem obigen Muster formatiert.
    Für diese Optionsfelder bietet es sich an, Klassen zu definieren, sodass man nur noch auf die Klasse verweisen muss, wenn man eine Option einer Liste dementsprechend formatieren will.

    <style type="text/css">
    option.typ1 {background: darkblue}
    option.typ2 {background: darkgreen}
    option.typ3 {background: darkred}
    </style>

    Der Verweis auf eine dieser Klasse aus dem <option> Element sieht jetzt so aus:
    <option value="2" class="typ2">Eintrag</option>

    Weiterführende Links:

    1. Mouse Over Buttons
    2. CSS – Textfelder formatieren
    3. Listen mit CSS

    ]]>     http://www.devmag.net/css/26-listen-mens-mit-css-formatieren.html/feed 0     CSS – Links gestalten http://www.devmag.net/css/29-css-links-gestalten.html?utm_source=rss&utm_medium=rss&utm_campaign=css-links-gestalten http://www.devmag.net/css/29-css-links-gestalten.html#comments Sun, 06 Apr 2008 10:00:00 +0000 Thiemo http://www.devmag.net/?p=29
  • Interne und externe Links mit CSS markieren
  • CSS Links: Glühende Links [IE]
  • CSS Links: Rahmeneffekte
    • ]]>     CSS - Links gestalten Links können Sie mit tollen Effekten dank ein wenig CSS ausstatten. Hier gibts das nötige Know-How, um die ersten Links selbst mit CSS zu gestalten.

    Für die Gestaltung von Links gibt es mit CSS keine Grenzen. Mit insgesamt vier CSS Anweisungen können Sie die Links in ihren verschiedenen Zuständen formatieren.
    Die Zustände sind

    • normaler Zustand
    • Link bereits besucht
    • Link gerade aktiv
    • Link bei MouseOver

    Das folgenden Beispiel formatiert alle Links, da keine CSS Klasse definiert wurde, sondern direkt der a-Tag definiert wird.

    <style type="text/css">
    a:link {color:red; text-decoration:none}
    a:visited {color:blue; text-decoration:none}
    a:active {color:black; text-decoration:none}
    a:hover {color:black; text-decoration:underline}
    </style>

    Hier der Ergebnislink:

    Ein Link

    Im Vergleich zu einem solchen Link können die "normalen" Links nicht mithalten.
    Der CSS Code ist eigentlich auch recht einfach. link ist der Zustand des normalen Links (wenn er noch unberührt ist). In den geschweiften Klammern { } steht die Definition der Eigenschaften des Linkes. Er soll in diesem Zustand rot sein, sie können anstatt der Farbangabe auch die Hexadezimale Schreibweise verwenden. Die CSS-Eigenschaft text-decoration: gibt an, wie der Text "dekoriert" sein soll, das bedeutet, ob er unterstrichen, überstriche usw. sein soll. Für diese Eigenschaft gibt es vier mögliche Werte.

    text-decoration:none
    Keine "Dekoration"

    text-decoration:overline
    Über dem Text ist eine Linie

    text-decoration:underline
    Unter dem Text ist eine Linie

    text-decoration:overline underline
    Über und unter dem Text ist eine Linie.

    Wobei die vierte Möglichkeit natürlich eine Kombination ist, und deshalb nicht als eigenstehende Eigenschaft bezeichnet werden kann.

    Jetzt zurück zu unserem Beispiel. visited definiert das Aussehen des Linkes, wenn dieser bereits einmal besucht wurde. Dieser ist blau, und ist nicht "dekoriert".
    active gibt den Zustand an, wenn auf den Link gerade geklickt wurde, und man sich jetzt auf der entsprechenden Seite befindet.
    Nun kommt der wohl interessanteste Zustand, der hover Zustand, er definiert das Aussehen, wenn man sich mit der Maus über dem Link befindet. Hier soll der Text schwarz sein, und unterstrichen sein.

    Diese Änderung betrifft alle Links auf allen Seiten, in denen das Stylesheet verwendet wird.
    Wollen Sie nur einzelne Links mit diesem Effekt ausstatten, dann empfiehlt sich die Definition einer Klasse für diesen Link. Das ganze sieht dann so aus:

    <style type="text/css">
    .menu:link {color:#ff0000; text-decoration:none}
    .menu:visited {color:#0000ff; text-decoration:none}
    .menu:active {color:#000000; text-decoration:none}
    .menu:hover {color:#000000; text-decoration:underline}
    </style>

    Die Klasse heißt in diesem Beispiel menu, auf diese muss in der Definition des Linkes hingewiesen werden, nämlich über das class-Attribut.

    <a href="http://www.devmag.net" class="menu">devmag.net</a>

    Das Ergebnis bleibt wie gehabt, nur das Sie sich jetzt die Links aussuchen können, die mit diesem Effekt ausgestattet werden sollen.

    Mit weiteren CSS Befehlen in den Definitionen der Links können Sie schnell aus ihren Links wahre Kunstwerke schaffen, einfach ausprobieren.
    Es gilt der Grundsatz "Schön ist, was gefällt".

    Weiterführende Links:

    1. Interne und externe Links mit CSS markieren
    2. CSS Links: Glühende Links [IE]
    3. CSS Links: Rahmeneffekte

    ]]>     http://www.devmag.net/css/29-css-links-gestalten.html/feed 0     Ebenen oder Tabellen http://www.devmag.net/css/30-ebenen-oder-tabellen.html?utm_source=rss&utm_medium=rss&utm_campaign=ebenen-oder-tabellen http://www.devmag.net/css/30-ebenen-oder-tabellen.html#comments Sat, 05 Apr 2008 10:00:00 +0000 Thiemo http://www.devmag.net/?p=30
  • Hintergrund richtig setzten…
  • Ebenen mit Dreamweaver
  • CSS – Hübsche Textfelder
    • ]]>     CSS - Ebenen oder Tabellen Tabellen sind starre Objekte, ihre Position kann kaum beeinflusst werden. Mit den Ebenen von HTML 4.0 gibt es einen gutes Gegenstück zu den Tabellen.

    Im Gegensatz zu Tabellen kann man Ebenen frei positionieren. Eine Ebene kann die andere überlappen. Ein solcher optischer Effekt lässt sich mit Tabellen nur unter Umständen erreichen.







    Eine Ebene ist schnell realisiert, eine Mischung aus HTML mit CSS verfeinert.

    <div style="position : absolute; width : 89px; height : 35px; top : 440px; left : 242px; background-color: #000099; border: none"></div>

    Hier sehen Sie bereits eine komplette Definition. Der Inhalt der Ebene wird von <div> Tags umschlossen, sie bildet eine Einheit, die sich mit CSS frei formatieren lässt. Die eigentliche Definition der Ebene befindet sich jedoch im Style-Attribut des <div> Tags. Mit position : absolute; wird der Ebene die Eigenschaft gegeben, das sie sich an kein Element bindet. Im Gegensatz dazu bindet sich ein Text, an eine Tabellenzelle, in welcher er steht.

    Nach dieser Angabe erfolgt die Größenfestlegung. In unserem Beispiel ist die Ebene 89 Pixel breit und 35 Pixel hoch. Die darauf folgende Angabe dient der Positionierung, sie ist mit zwei Angaben definiert. Die erste ist die Angabe der Entfernung in der Horizontalen (Links oder Rechts), die zweite Angabe ist die Position in der Vertikalen (oben oder unten). Weitere Angaben dienen lediglich der Festlegung des "Aussehens" der Ebene.

    Es gibt weitere Typen von Ebenen, speziell in Bezug auf die Positionierung. Definiert man die Position als absolute, dann hat sie keinen Bezugspunkt in der Seite, man kann die Ebene einfach überall positionieren.
    Wird als Positionstyp jedoch relative angegeben, dann bezieht sich die Position immer auf das nächstgelegenste Element. Ist das Element bereits in einer Tabellenzelle am Ende der Seite, dann beziehen sich alle Angaben in der Ebene auf diese Tabellenzelle.

    <div style="position : relative; width : 89px; height : 35px; top : 440px; left : 242px; background-color: #000099; border: none"></div>

    Gibt man jetzt eine Position an, dann bezieht sich die Ebene auf die Position der Zelle, und sieht diese als "Startpunk". Wird beispielsweise bei einem Absoluten Element die top: 110; gesetzt, dann ist die Ebene 110 px von oben entfernt, bei einer relativen Ebene ist diese 110px vom Element, auf welches es sich bezieht, entfernt.

    <div style="position : fixed; width : 89px; height : 35px; top : 440px; left : 242px; background-color: #000099; border: none"></div>

    Wenn Sie als Position fixed wählen, verhält sich die Ebene wie bei relative, nur das diese beim Scrollen an ihrer Position stehen bleibt. Diese Eigenschaft wird aber bisher von keinem Browser unterstützt.

    <div style="static : fixed; width : 89px; height : 35px;background-color: #000099; border: none"></div>

    static ist hierbei der Standardwert. Der Ebene wird keine Position gegeben. Sie fügt sich in den Kontext ein.

    Wie Sie im oberen Beispiel schon gesehen haben, können Sie Ebenen auch ineinander verschachteln. Mit der CSS Eigenschaft z-index können Sie die Lage der Ebene in der Gruppe bestimmen. Je höher der z-index ist, desto weiter oben liegt das Element.
    Das Beispiel von oben:

    <div style="position : absolute; width : 91px; height : 36px; top : 430px; left : 227px; border: none; background-color: #003366; z-index: 3; visibility: visible"></div>
    <div style="position : absolute; width : 92px; height : 35px; top : 425px; left : 277px; border: none; background-color: #0099FF; visibility: visible; z-index: 2"></div>
    <div style="position : absolute; width : 89px; height : 35px; top : 440px; left : 259px; background-color: #000099; layer-background-color: #000099; border: none; visibility: visible; z-index: 1"></div>

    Eine weitere Eigenschaft, die hier in dem Beispiel auch verwendet wurde, ist die visibility Eigenschaft, welch die Sichtbarkeit einer Ebene definiert.

    visibility: visible
    Die Ebene ist sichtbar

    visibility: hidden
    Die Ebene ist nicht sichtbar

    Ebenen machen jedoch immer noch Schwierigkeiten, da diese in den Browsern oftmals anders dargestellt werden. Vorerst werden Tabellen die einizigen, wirklichen Layoutelmente bleiben.

    Weiterführende Links:

    1. Hintergrund richtig setzten…
    2. Ebenen mit Dreamweaver
    3. CSS – Hübsche Textfelder

    ]]>     http://www.devmag.net/css/30-ebenen-oder-tabellen.html/feed 0     CSS – Hübsche Textfelder http://www.devmag.net/css/28-css-hubsche-textfelder.html?utm_source=rss&utm_medium=rss&utm_campaign=css-hubsche-textfelder http://www.devmag.net/css/28-css-hubsche-textfelder.html#comments Tue, 01 Apr 2008 10:00:00 +0000 Thiemo http://www.devmag.net/?p=28
  • CSS – Textfelder formatieren
    • ]]>     CSS - Hübsche TextfelderIn diesem Artikel haben wir für Sie ein paar Variationen an Textfeldern mit CSS erstellt - nur um Anregungen zu geben. Das Kopieren des CSS-Codes ist erlaubt...

    Variante 1:
     Der obere Rahmen ist offen, links und rechts hat das Formular
    Screenshot - CSS Textfeld Typ 1

    <style type="text/css">
    input {
    border: none;
    border-bottom: 2 dotted aqua;
    border-left: 2 dotted aqua;
    height: 18px;
    font-size: 13px;
    font-weight: bold;
    }
    </style>

    Zunächst wird definiert, das das Element keinen Rahmen haben soll. Die nächsten zwei CSS Anweisungen überschreiben diese Anweisunge, jedoch nur für den Unteren (bottom), und oberen Rahmen.

    Variante 2:
    Im Borrussia Dortmund Stil
    Screenshot - CSS Textfeld Typ 2

    <style type="text/css">
    input {
    border: 2 dotted yellow;
    background: black;
    height: 20px;
    width: 100px;
    color: yellow;
    font-size: 12px;
    font-weight: bold;
    }
    </style>


    Variante 3a:
    Hier bleiben die Seiten offen...
    Screenshot - CSS Textfeld Typ 3a
    <style type="text/css">
    input {
    border: none;
    border-left: 2 solid red;
    border-right: 2 solid red;
    background: #CCCCCC;
    color: red;
    font-size: 12px;
    font-weight: bold;
    }
    </style>

    Variante 3b:
    Screenshot - CSS Textfeld Typ 3b

    <style type="text/css">
    input {
    border: none;
    border-top: 2 solid red;
    border-bottom: 2 solid red;
    background: #CCCCCC;
    color: red;
    font-size: 12px;
    font-weight: bold;
    }
    </style>

    Variante 4:
     Mit dem Rahmentyp inset, wird ein Verlauf von Blau nach schwarz erreicht.
    Screenshot - CSS Textfeld Typ 4
    <style type="text/css">
    input {
    border: 2 inset blue;
    font-size: 12px;
    font-weight: bold;
    }
    </style>

    Weiterführende Links:

    1. CSS – Textfelder formatieren

    ]]>     http://www.devmag.net/css/28-css-hubsche-textfelder.html/feed 0