Cascading Style Sheets w3c-at.org CSS http://www.w3c-at.org CSS Stylesheets Tue, 17 May 2011 11:25:19 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 CSS3 http://www.w3c-at.org/css/css3/ http://www.w3c-at.org/css/css3/#comments Tue, 17 May 2011 07:59:06 +0000 admin http://www.w3c-at.org/?p=86 Das Problem der Browser-Unterstützung verabschiedet sich allmählich.

Während die Browserhersteller noch dabei sind, CSS2 (Cascading Style Sheets, Level 2) zu integrieren, steht schon die nächste CSS-Generation vor der Tür =>CSS3. Microsoft hat noch viel Arbeit vor sich damit neue Versionen des IE den CSS2 Standard komplett unterstützen.

Das W3C arbeitet derzeit an CSS3, das im Jahr 2004 noch fertiggestellt werden soll. In CSS3 wird die Sprache in verschiedene Module aufgeteilt, was eine schnellere Weiterentwicklung der einzelnen Module ermöglicht, ohne den Standard zu ändern. Browserhersteller haben es einfacher, die einzelnen Module Schritt für Schritt zu implementieren.

CSS beschränkt sich allerdings nicht auf die Präsentation von HTML, XHTML und XML Dokumente, auch andere Webstandards wie SVG Vektor Grafiken oder SMIL Multimedia Präsentationen machen Gebrauch von CSS.

Spaltenlayout : für mehrspaltiges Layout musste man sich mit unflexiblen Tabellen und Verschachtelungen als Notlösung behelfen. W3C bietet nun im Modul “Multi-column layout” eine Reihe von Eigenschaften an, die ein Spaltenlayout leichter möglich machen. Der Code ist schlanker als bei Tabellenlösungen, die CSS-Lösung ist auch flexibler. Spalten können dem vorhandenen Platz angepasst werden und der Text fließt automatisch von einer Spalte in die nächste. Außerdem ist es möglich, ein Element über mehrere Spalten zu strecken.

Natürlich geht das erst mit CSS3 fähigen Browsern wie der FireFox 1.5.

CSS war am Anfang die Sprache des font-Tag Ersatzes. Unterdessen hat sie sich zu einer mächtigen Layoutsprache entwickelt. Mit dem Wissen, dass immer noch Browser der Generation 4 am Leben sind, kann man nur hoffen, dass die Browser-Hersteller nicht 6 Jahre zum Implementiern von CSS3 benötigen werden.

]]> http://www.w3c-at.org/css/css3/feed/ 0 CSS einbinden http://www.w3c-at.org/style/css-einbinden/ http://www.w3c-at.org/style/css-einbinden/#comments Mon, 16 May 2011 14:04:05 +0000 admin http://www.w3c-at.org/?p=83 Stylesheets können im Kopf der HTML- Datei definiert werden, als externe Datei verlinkt oder importiert werden. Man kann Styles auch direkt im betreffenden <Tag> angeben. Dies ist allerdings nur für kurzfristige Änderungen empfehlenswert. Auf diese Definition wird hier nicht näher eingegangen, denn sie entspricht nicht dem Konzept der Trennung von Inhalt und Layout. Die anderen Einbindungsmöglichkeiten bringen die Vorteile von CSS besser zur Geltung.

Im Kopf der HTML- Datei

Die Definition wird eingeleitet mit dem Tag <style>, dem Attribut type und dem Parameter “text/css”

<head>  <title>MONOROM.TO</title>
<style type=”text/css”>
<!–body {background-color:#f5f5f5; color:#a52; font-size:11px; font-family: Verdana,Arial,SunSans-Regular,Sans-Serif;}–>
</style>

Externes CSS

wird über das Tag-Element “link” eingebunden. Bei externen Stylesheets kann die Definition der einzelnen Tag-Style-Attribute direkt erfolgen.

<link rel=”stylesheet” type=”text/css”   media=”screen” href=”style.css”>

@Import

Sollen Stylesheets für verschiedene Ausgabemedien definiert werden, so kann man die Einbindung auch so vornehmen:

<link rel=”stylesheet” type=”text/css”   media=”screen” href=”style.css”>

oder, wenn die Ausgabemedien in verschiedenen Stylesheets definiert sind:

<style type=”text/css”><!–  @import url (print.css);  @import url (name_des_styles.css);  –></style>

Attribut Media

CSS2 bietet die Möglichkeit, Stylesheets für verschiedene Medien wie Bildschirm, Drucker oder Handheld zu definieren. Das Attribut Media media=”screen” notiert das Medium. Ein Stylesheet kann durch Kommata getrennt mehreren Medien zugewiesen werden.

CSS2 unterscheidet folgende Medien

all => Alle Ausgabegeräte
aural => Aurale Ausgabegeräte ZB Screenreader
braille => Blindenschrift fähige Drucker
handheld => Handheld (Palmtops PDA’s WinCE-Geräte)
print => Drucker
projection => Video-Beamer, Overhead-Projektoren
screen => Bildschirme
tty => Geräte mit Terminalfenster
tv => TV-Geräte

]]> http://www.w3c-at.org/style/css-einbinden/feed/ 0 Cascading Style Sheets Darstellungsfehler http://www.w3c-at.org/style/cascading-style-sheets-darstellungsfehler/ http://www.w3c-at.org/style/cascading-style-sheets-darstellungsfehler/#comments Sat, 14 May 2011 16:09:40 +0000 admin http://www.w3c-at.org/?p=80 Darstellungsfehler: Welche Fehler kann man akzeptieren?

Es gibt zwei Arten von Darstellungsfehlern:
Solche, die die optische Gestalt Ihrer Seite behindern, und solche, die die Zugänglichkeit Ihrer Seite beeinträchtigen. Fehler der zweiten Art sind für eine Webseite auch für den NN4 nicht zu vertreten!

Eine Webseite sollte so geschrieben werden, dass alle Besucherinnen und Besucher Ihrer Seite Zugang zu den gebotenen Informationen erhalten!

Die Frage ist nun:
Inwiefern lege ich auf korrekte (oder optisch ansprechende) Darstellung im NN4 heute noch Wert? CSS bietet sehr viele Möglichkeiten zur Gestaltung des Layouts Ihrer Homepage. Die Gestaltung einer Homepage ist jedoch nur sekundär. Ihre Homepage sollte auch ohne CSS- oder Javascript-Unterstützung funktionieren. Wenn Sie dies sichergestellt haben, kann es egal sein, ob ein Browser Ihre Layoutvorstellungen übernimmt. Tut also der NN4 das nicht, ist es nicht weiter schlimm. An dem NN4 nagt der Zahn der Zeit.

Verschwenden Sie nicht zuviel Ihrer Zeit, die optische Darstellung für den NN4 zu verfeinern!

Im Zweifelsfalle ist ein korrekter Code wichtiger als die optische Sauberkeit mit bestimmten, in der Regel älteren Produkten. Die wichtigste Regel darf aber auch dabei nie aus den Augen verloren werden. Webseiten werden für Menschen gemacht, nicht für Browser

]]> http://www.w3c-at.org/style/cascading-style-sheets-darstellungsfehler/feed/ 0 Cascading Stylesheets Doctype http://www.w3c-at.org/style/cascading-stylesheets-doctype/ http://www.w3c-at.org/style/cascading-stylesheets-doctype/#comments Sat, 07 May 2011 13:50:32 +0000 admin http://www.w3c-at.org/?p=74 Jedes Dokument muss mit einer Doctype-Deklaration (DTD) beginnen. Sie gibt an, welcher HTML-Standard verwendet wird. Die DTDs, Document Type Definitions, sind fester Bestandteil von HTML und XHTML. Der Doctype steht am Anfang der HTML-Datei vor dem <html> Tag.
Auf HTML Versionen vor HTML 4.01 wird hier nicht eingegangen. Sie sollten nicht mehr verwendet werden, da es bereits neuere Versionen gibt. XHTML ist noch immer abwärtskompatibel zu älteren Browsern.
Wie schon die HTML 4.01, kennt auch XHTML 1.0 drei verschiedene DTDs. Im Gegensatz zu HTML 4.01 ist es aber absolut notwendig, dass jedes Dokument mit einer Doctype-Deklaration eingeleitet wird.
Diese Site verwendet:
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

Transitional bedeutet, dass diese Seite Stylesheets verwendet.
//EN bezieht sich auf die Sprache der HTML-Tags, die ist immer Englisch, unabhängig davon, in welcher Landessprache das Dokument geschrieben wurde.

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”  “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”  “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”  “http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”  “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

]]> http://www.w3c-at.org/style/cascading-stylesheets-doctype/feed/ 0 Hintengrundbilder http://www.w3c-at.org/style/hintengrundbilder/ http://www.w3c-at.org/style/hintengrundbilder/#comments Wed, 04 May 2011 13:26:59 +0000 admin http://www.w3c-at.org/?p=72 Cascading Style Sheets Hintergrundbilder

Der Hintergrund eines Elements kann als Farbe oder als Hintergrundbild festgelegt werden. Mit CSS kann man Hintergrundbilder horizontal oder vertikal repetieren, oder gar einzeln plazieren. Hintergründe werden nicht vererbt.

background-image (Hintergrundbild)

background-image:url(blumen.gif);   Werte: none, url()

background-repeat (Wiederholungs-Effekt)

background-image:url(blumen.gif);
background-repeat:repeat-y background-image:urlblumen.gif);
background-repeat:repeat-x; Werte: background-repeat: no-repeat, repeat, repeat-x, repeat-y

background-attachment (Wasserzeichen-Effekt)

body {  background-color: #f5f5f5;  background-image:url(blumen.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position: right bottom;  }
Wert: background-attachment: fixed, scroll  Werte: background-position: left, center, right, top,bottom

]]> http://www.w3c-at.org/style/hintengrundbilder/feed/ 0 CSS History http://www.w3c-at.org/css/css-history/ http://www.w3c-at.org/css/css-history/#comments Mon, 02 May 2011 04:36:28 +0000 admin http://www.w3c-at.org/?p=70 Cascading Style Sheets History

Wie HTML wird auch CSS vom W3-Konsortium normiert. Es handelt sich um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard. Für CSS gibt es wie für HTML eine Arbeitsgruppe beim W3-Konsortium, die sich um die Weiterentwicklung der Sprache kümmert. Sie halten sich an ein Regelwerk zur Entstehung der Recommendations (Empfehlungen) des W3-Konsortiums.

Wie bei HTML, so gibt es auch bei CSS Sprachversionen, die auf den Neuauflagen der Recommendations basieren. 1996 wurde vom W3C die Cascading Style Sheets Level1 (CSS1) empfohlen, 1999 wurden sie nochmals überarbeitet. Diese Empfehlung umfasst eine Beschreibung der Verwendungsmöglichkeiten von CSS. Im Mai 1998 wurde die Empfehlung zu CSS2 ausgesprochen, die auf CSS1 aufsetzt und Unterstützung für verschiedene Ausgabemedien bietet. CSS3 ist derzeit noch in der Entwicklungsphase und wird (wie die nächste XHTML Version) eine Aufteilung in verschiedene Module bringen. Version 3.0 sollte noch dieses Jahr erscheinen.

Die Idee dahinter war, das Layout vom Inhalt einer Webseite zu trennen. Das hat den Vorteil, dass bei Updates oder änderungen am Layout nur mehr eine einzige Datei (das Stylesheet) geändert werden muss, um alle Seiten, die sich darauf beziehen, im neuen Design darzustellen. Besonders bei grossen Seiten erspart man sich so sehr viel Arbeit. W3C hat die <font> Tags bereits im HTML 4.0 als “deprecated” (also nicht mehr empfohlen, aber noch toleriert. Künftige (X)HTML Versionen werden dieses Tag nicht mehr enthalten.) gekennzeichnet.

CSS Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente.
HTML in seiner bisherigen Form hat ausgedient und wird nicht mehr weiterentwickelt. XHTML ist der neue Standard, eine Kombination aus HTML mit der Syntax von XML . Ein Merkmal von XHTML ist die saubere Trennung von Inhalt und Gestaltung einer Webseite. Ein XHTML-Dokument enthält nur noch das, was auf der Seite erscheinen soll; ein dazugehöriges CSS-Stylesheet beschreibt, wie es dargestellt wird. Soll das Dokument jetzt vorgelesen, gedruckt oder auf einem kleineren (und eventuell nicht grafikfähigen) Ausgabegerät erscheinen, muss nur das Stylesheet ausgetauscht werden. Suchmaschinen wollen keinen Layout-Code zwischen dem Inhalt “sehen”.

Änderungen/Neuheiten in CSS2

Alle validen CSS1 Stylesheets sind auch valide CSS2 Stylesheets. Man muss also keine alten Stylesheets umschreiben, um CSS2 zu erfüllen. CSS2 bringt die Erweiterung der verschiedenen Medientypen. Hier kann bestimmt werden, welcher Style von welchem Medium verwendet werden soll (Drucker, TV, Projektionsgerät, Monitor, Blindenlesegerät, um nur einige zu nennen). Ausserdem wurden neue Pseudo-Klassen und einige neue Gestaltungselemente für Tabellen, Schriftformatierungen, Farben und Positionierungen eingeführt.

CSS werden von allen Browsern ab Version 4 (Internet Explorer teilweise schon ab 3.0) unterstützt. Leider halten sich wenige an den gesamten Vorschlagskatalog. So kann es in Browsern verschiedener Hersteller und mit verschiedenen Versionen zu Darstellungsunterschieden kommen. Viele Browser bieten unterdessen auch die Möglichkeit, ein eigenes Stylesheet zur Formatierung der Seiten anzuwenden, die man ansurft.

]]> http://www.w3c-at.org/css/css-history/feed/ 0 iFrame http://www.w3c-at.org/style/iframe/ http://www.w3c-at.org/style/iframe/#comments Sun, 01 May 2011 06:32:12 +0000 admin http://www.w3c-at.org/?p=59 Cascading Style Sheets iFrame

Seit HTML 4.0 gehören iFrames zum HTML-Standard. iFrames sind ein eigenständiges Gestaltungsmittel, das anders funktioniert als “normale” Frames. iFrames teilen den Bildschirms nicht auf, sondern sind funktionieren eher wie Layer innerhalb der HTML-Datei. in denen über Links, vor allem andere HTML-Dateien angezeigt werden können.

Mit einem iframe-Element in der HTML-Datei, muss man die DTP Doctype-Deklaration “Transitional” wählen. iFrames gehören nicht zur “reinen Lehre”. wie man beim selfhtml lesen kann.

WERTE

align=”left” = richtet das iFrame links aus
Werte: left, right, Dieses Angabe ist als deprecated eingestuft. Die CSS-Eigenschaft text-align ersetzt sie.
scrolling=”yes” = kann man Scrollbars bei iFrame erzwingen
Werte: yes, no, auto (default Angabe)
frameborder=”0″ = muss eingestellt sein demit der default Rand von 1px verschwindet.

]]> http://www.w3c-at.org/style/iframe/feed/ 0 Mauszeiger wechseln http://www.w3c-at.org/style/mauszeiger-wechseln/ http://www.w3c-at.org/style/mauszeiger-wechseln/#comments Sun, 01 May 2011 06:28:31 +0000 admin http://www.w3c-at.org/?p=57 Cascading Style Sheets Mauszeiger wechseln

Mit CSS lassen sich in neueren Browsern die Cursor auswechseln. Leider sehen die Browser das Ganze zum Teil extrem unterschiedlich. IE 6 bietet die Möglichkeit, eigene Cursor im Browser anzuzeigen. Für systemübergreifendes Webdesign sind aber nur Standards zu wählen. Safari unterstützt dies im Moment noch gar nicht. Um den Mauszeiger zu ändern, genügt eine einfache Style-Angabe, die nicht nur auf Links, sondern auch auf Text oder Bilder angewendet werden kann.

WERTE

cursor: auto = Normaleinstellung).
cursor: default = Plattformunabhängiger Standard-Cursor.
cursor: pointer = Cursor in Form eines Zeigers.
cursor: crosshair = Fadenkreuz
cursor: hand = Hand
cursor: move = Kreuz zum Bewegen von Elementen
cursor: e-resize = Pfeil, der nach rechts [e = Osten] zeigt
cursor:ne -resize = Pfeil, der nach rechts oben [ne = Nordost] zeigt
cursor: nw-resize = Pfeil, der nach links oben [n = Nordwest] zeigt
cursor: n-resize = Pfeil, der nach oben [n = Norden] zeigt
cursor: se-resize = Pfeil, der nach rechts unten [se = Südost] zeigt
cursor: sw-resize = Pfeil, der nach links unten [sw = Südwest] zeigt
cursor: s-resize = Pfeil, der nach unten [s = Süden] zeigt
cursor: w-resize = Pfeil, der nach links [w = Westen] zeigt
cursor: text = Texteingabe
cursor: wait = Wartezustand / Uhr oder Sanduhr
cursor: help = Pfeil und Fragezeichen für Hilfe
cursor: url = *.ico *.gif *.jpg können als Variante angezeigt werden.

Diese Angabe sollte wohl überlegt eingesetzt werden. Ansonsten kann dies den User sehr verwirren.

]]> http://www.w3c-at.org/style/mauszeiger-wechseln/feed/ 0 Print CSS http://www.w3c-at.org/style/print-css/ http://www.w3c-at.org/style/print-css/#comments Sun, 01 May 2011 04:40:52 +0000 admin http://www.w3c-at.org/?p=53 Cascading Style Sheets Print CSS

Einige Elemente einer Webseite sind auf Papier überflüssig. Suchfeld oder Navigationsleiste sowie Werbebanner sind nur einige davon. Zudem werden längere Texte in der Regel lieber auf Papier gelesen. Es gibt viele Gründe Webseiten auszudrucken. Zeitungen bieten längst spezielle Printversionen zu den Artikeln an. Diese erfordern aber meist eine Serverseitige Verwaltung der Inhalte (Content Management System). Die Druckversion muss zudem extra vom Server angefordert werden, das führt zu mehr Traffic, und lohnt sich meist nur für grosse Sites. Mit einem Print CSS und einem neuern Browser, gibts eine einfachere, schnellere Möglichkeit Websites für den Druck gut aussehen zu lassen, die zudem keinen Traffic generiert. Hier die Schritte zu einem print.css

media=”print” (media-Attribut )

Das Bildschirm-Stylesheet muss es auf “screen” gesetzt werden,
das Druck-Stylesheet auf “print”. Siehe auch CSS einbinden.

<link rel=”stylesheet” type=”text/css”   href=”print.css” media=”print”>

font und background-color (Schrift- und Hintergrundfarbe)

Serifen Schriften eigenen sich in der Regel besser als Laufschrift für den Ausdruck. Titel können in anderen Standartschriften dargestellt werden. Die Schriftgrösse sollte für den Drucker auf points eigestellt werden. Die Schriftfarbe sollte schwarz und die Hintergrundfarbe transparent sein.

body {  background-color: transparent;  font-size: 12pt;  font-family:’Times New Roman’,Times,serif;  color:#000000; }

display (Navigationen ausblenden)

Beim Ausdruck sind Hintergrundbilder sowie Werbebanner und search Buttons unerwünscht. Lesbarkeit und Tintenverbrauch sind 2 der Gründe. Elemente (div) können mit display:none; ausgelendet werden.

#navi   {   background-color:transparent;  padding-top: 10px;  display:none;}

padding und margin (Ränder)

Wenn padding und margin auf 0px eingestellt sind, wird sichergestellt, dass der Text die ganze Breite des Papiers nutzt. Beim Bildschirm wäre das sinnlos.

#content   {   background-color:transparent;  padding: 0px;  margin: 0px;  }

a:visited:after (Links)

Damit ein Link auch im ausdruck Sinn macht setzt man mit den Pseudo-Element:after und der Eigenschaft:content die komplete URL des Hyperlins neben den Verweis. Diese Eigenschaft geht zur zeit im Mozilla und im Safari, sollte aber dafür auch eingesetzt werden.

a:after, a:link:after  {   color: #000000;  background-color:transparent;   content: ” * Link ” attr(href) “* “; }  }
a:visited:after {  color:#000000;   background-color:transparent;  content: ” * Link ” attr(href) “* “; }

page-break (Seitenumbruch)

Mit page-break-after:always; kann man einen Seitenumbruch erzwingen. Mit avoid verhindert man einen Seitenumbruch.

page-break-after:always;  page-break-before:always;  page-break-after:avoid;  page-break-before:avoid;

]]> http://www.w3c-at.org/style/print-css/feed/ 0 Schrift Definitionen http://www.w3c-at.org/style/schrift-definitionen/ http://www.w3c-at.org/style/schrift-definitionen/#comments Fri, 29 Apr 2011 15:36:05 +0000 admin http://www.w3c-at.org/?p=46

Schriftformate

Schriftfamilien: font-family: Verdana, Arial, Helvetica, Sans-Serif;
Schriftgröße: font-size:18px; (px / em)
Schriftstärke: font-weight:bold;;
Schriftstile: font-style:”….”;
Schriftfarbe: color:#ff6600;

Textlauf

Abstand zwischen Buchstaben: letter-spacing:10px;
Abstand zwischen Wörtern: word-spacing:10px;
Zeilenhöhe: line-height:10px; ACHTUNG line-height wird in die td vererbt.
Bei allen Angaben sind auch negative Werte möglich.

Textauszeichnungen

text-decoration:none;
Werte: underline, overline, line-through, none
text-transform:uppercase;
Werte: uppercase, lowercase, capitalize

Text Ausrichtung

Mit text-align: center; wird der Text im Absatz zentriert
h1 { text-align:center; }
Werte: left, right, center und justify

Vertikale Ausrichtung:

Mit der Eigenschaft vertical-align lassen sich Abschnitte auch vertikal ausrichten. Dies kann z. B. innerhalb von Tabellenzellen verwendet werden.

.menu { vertical-align:top; }
Werte: top (oben), middle (mittig), bottom (untenbündig), baseline (an der Basislinie), sub (tiefergestellt) und super (höhergestellt).

Textumbruch

white-space kann das Zeilenumbruchverhalten von Textabschnitten bestimmen.

.nobr { white-space:nowrap; }
Werte: nowrap (kein automatischer Zeilenumbruch),

pre Umbrüche wie im Editor eingegeben, entspricht dem HTML-Tag pre
normal (normale Umbrüche)

Schriftfamilien: font-family: Verdana, Arial, Helvetica, Sans-Serif;
Schriftgröße: font-size:18px; (px / em)
Schriftstärke: font-weight:bold;;
Schriftstile: font-style:”….”;
Schriftfarbe: color:#ff6600;

Textlauf

Abstand zwischen Buchstaben: letter-spacing:10px;
Abstand zwischen Wörtern: word-spacing:10px;
Zeilenhöhe: line-height:10px; ACHTUNG line-height wird in die td vererbt.
Bei allen Angaben sind auch negative Werte möglich.

Textauszeichnungen

text-decoration:none;
Werte: underline, overline, line-through, none
text-transform:uppercase;
Werte: uppercase, lowercase, capitalize

Text Ausrichtung

Mit text-align: center; wird der Text im Absatz zentriert
h1 { text-align:center; }
Werte: left, right, center und justify

Vertikale Ausrichtung:

Mit der Eigenschaft vertical-align lassen sich Abschnitte auch vertikal ausrichten. Dies kann z. B. innerhalb von Tabellenzellen verwendet werden.

.menu { vertical-align:top; }
Werte: top (oben), middle (mittig), bottom (untenbündig), baseline (an der Basislinie), sub (tiefergestellt) und super (höhergestellt).

Textumbruch

white-space kann das Zeilenumbruchverhalten von Textabschnitten bestimmen.

.nobr { white-space:nowrap; }
Werte: nowrap (kein automatischer Zeilenumbruch),

pre Umbrüche wie im Editor eingegeben, entspricht dem HTML-Tag pre
normal (normale Umbrüche)

]]> http://www.w3c-at.org/style/schrift-definitionen/feed/ 0 Cascading Style Sheets Selectors http://www.w3c-at.org/style/cascading-style-sheets-selectors/ http://www.w3c-at.org/style/cascading-style-sheets-selectors/#comments Thu, 28 Apr 2011 14:47:35 +0000 admin http://www.w3c-at.org/?p=43 Die Selektoren legen fest, auf welche Elemente ein Style angewendet werden soll.

Elementselektoren

Dieser Style gilt für genau dieses Element.

h1 { color: green; }
color setzt hier die Schriftfarbe des Elementes h1 auf den Wert grün.
body { background-color: gray; }
background-color setzt die Hintergrundfarbe des ganzen Dokuments auf den Wert grau.

Gruppenselektoren

Style gilt für eine Reihe von Elementen. Die einzelnen Selektoren sind durch Kommas getrennt.

h2, h3 { color:gray; }
zeigt die Elemente h2 und h3 in grau an.

Kontextsensitive Selektoren

Style gilt für ein Element, wenn es innerhalb eines anderen Elementes liegt.

h1 { color: red; }
h1 a { color: blue; }
das a-Elemente innerhalb des h1 -Elementes wird blau angezeigt. h1-Elemente sonst werden in rot angezeigt.

Klassenselektoren

Mit dem Attribut class wird einem Element einen bestimmten Style zugewiesen. Man kann allgemeine Klassen oder elementspezifische Klassen erstellen. In der CSS-Syntax wird ein Punkt vor den Namen der Klasse gesetzt.

.blau { color:blue; } kann jedem Elementen zugewiesen werden
<p> dieser Text wird blau </p>
h2.rot { color:red; } ist nur für das Element h2
<h2> rote Überschrift </h2>

ID-Selektoren

Mit dem Attribut id wird einem Element einen Bezeichner zugewiesen. ID’s werden nur einmal vergeben. Sie sind universell.
ID-Selektoren wird das Rauten-Zeichen #vorangestellt.

<div id=”logo”> LOGO IMAGE </div>
#logo { background-color: green; }
zeigt das Element mit dem id -Wert logo, mit grünem Hintergrund an.

Pseudoelement-Selektoren

Das a-Element kann durch in CSS definierte Pseudoklassen unterschiedlich angezeigt werden. Wichtig ist die richtige Reihenfolge

a:link = normaler Hyperlink  a:visited = besuchter Hyperlink  a:hover = Mauszeiger befindet sich gerade über dem Hyperlink  a:active = beim Klick auf den Hyperlink

Achtung: Pseudoelement-Selektoren werden von Browsern ab Version 5 unterstützt. Aeltere Browser (Versionen NS4.x oder IE4 und älter) unterstützen diese Pseudoelement-Selektoren nicht. Dies spielt aber insofern keine Rolle, da diese Browser keine Fehler anzeigen, sondern sie einfach ignorieren.

]]> http://www.w3c-at.org/style/cascading-style-sheets-selectors/feed/ 0 Cascading Style Sheets vererbung http://www.w3c-at.org/style/cascading-style-sheets-vererbung/ http://www.w3c-at.org/style/cascading-style-sheets-vererbung/#comments Thu, 28 Apr 2011 14:34:26 +0000 admin http://www.w3c-at.org/?p=41 Cascade

Stylesheet bietet eine weitere wichtige Eigenschaft, die Cascade (stufenförmiger Wasserfall; wasserfallähnliches Feuerwerk; Anordnung von hintereinander geschalteten Bauteilen). Sie beschreibt, in welcher Reihenfolge Style-Angaben überschrieben werden.
Die Regeln werden in der folgenden Reihenfolge abgearbeitet.
1. Als !important markierte Anweisungen wichtiger als andere.
2. Spezifische Anweisungen sind wichtiger als allgemeine.
3. Anweisungen des Users sind wichtiger als die des Dokumentes. Diese sind wiederum wichtiger als die des Browsers.
4. Später definierte Anweisungen sind bei gleichem Wert wichtiger als früher definierte. Das heisst, dass im selben CSS etwas mit gleichem Wert weiter unten im file wichtiger ist.

CSS-Definitionen werden innerhalb der Dokumentenstruktur weitervererbt. Kinder von HTML-Tags übernehmen die meisten Formatierungen. Elemente können Werte von ihrem übergeordneten Element (Eltern) erben. In CSS2 ist der Wert “inherit” erlaubt. inherit gibt an, dass eine Eigenschaft eines Elementes den Wert des Elternelementes erben soll. Wenn “inherit” angegeben ist, wird der berechnete Wert des übergeordneten Elements verwendet.

Beispiel

Hier wird im <body> -Tag die Schriftart und -größe festgelegt. Diese Angaben werden an das <p> <h1> Tag usw. vererbt. Dies garantiert für das ganze Dokument eine einheitliche Schrift.

body {   font-family: Verdana, SunSans-Regular, Sans-Serif;   font-size: 11px;  color: #000;   background-color: #fff;   }

Oben wurde die Schriftart und Farbe definiert. Das Elements <h1> wird hier unten mit der Farbe Rot überschrieben.

h1 {   color: #f00;   background-color: transparent;   }

Taucht im Element <h1> ein mit <em> hervorgehobenes Wort auf, und <em> keine Farbe zugewiesen wurde, so erbt dieses vom übergeordnetem Element die Farbe Rot.

<h1>Dieses Wort rot, <em>schräg</em> und schön</h1>

Es gibt Werte, die nicht vererbt werden, so z.B. die background-color. transparent kann neu ebenfalls als Wert angegeben werden, muss sogar, wenn man Wert darauf legt, dass das CSS valid ist. Denn eine color Angabe braucht immer auch eine background-color:transparent; Angabe.

!! IE-PROBLEME !!

Die font-size wird auf PC nicht vom<body> in die <td> vererbt. Das bedeutet, dass die font-size nochmals separat in die <td> angegeben werden muss.

!important -Regel

!important gekennzeichnete Definitionen überschreiben normale Angaben. Autoren- so wie User-Stylesheet können !important -Regeln enthalten. !important -Regeln des Users überschreiben dabei !important -Regeln des Autoren.
Dies wurde erst in CSS 2 festgelegt. In CSS 1 überschreiben die !important -Regeln des Autoren die des Users. Browser, die nur den CSS 1-Standard beherrschen, interpretieren die !important -Regeln nach heutiger Sichtweise falsch. Die Accessibility der Seiten wird durch CSS2 wesentlich verbessert, beispielsweise für sehbehinderte Menschen, die auf eine Mindestschriftgrösse angewiesen sind.

p { font-size: 20px !important; }

]]> http://www.w3c-at.org/style/cascading-style-sheets-vererbung/feed/ 0 Cascading Style Sheets XHTML http://www.w3c-at.org/style/cascading-style-sheets-xhtml/ http://www.w3c-at.org/style/cascading-style-sheets-xhtml/#comments Thu, 28 Apr 2011 14:27:33 +0000 admin http://www.w3c-at.org/?p=38 HTML 4.01 ist die letzte HTML-Version. W3C lenkt die Entwicklungen von Webseiten völlig auf die Datenformatsprache XML (XML = Erweiterbare Auszeichnungssprache) mit allen Erweiterungen. XML ist universell. Ein Programmierer kann sich über XML ein “eigenes” HTML erstellen. Er kann definieren, welche Elemente und Attribute es geben soll und wie diese im Browser dargestellt werden sollen.
XHTML, der Nachfolger von HTML, basiert direkt auf XML. XML stammt wie auch HTML direkt von SGML ab. SGML ist die komplexeste aller Auszeichnungssprachen. XHTML ist also nicht mehr von SGML, sondern direkt von XML abgeleitet worden.
XHTML ist keine neue Sprache, es enthält noch die Elemente, die es zuvor auch in HTML gegeben hat.

Von HTML zu XHTML

Doctypes sind eine Schlüsselkomponente von gültigen Websites: ohne sie validiert der Code und das CSS nicht.

!DOCTYPE-Tag muss am Anfang einer XHTML-Datei notiert werden.

Alle Tags werden in XHTML klein geschrieben.

Attribute werden in Hochkommas gesetzt. Die Kurzfassungen für Attribute wie “checked” sind nicht mehr erlaubt, statt dessen muss checked=”checked” oder selected=”selected” geschrieben werden.

In allen Tags muss etwas stehen, z.B: <td> #160 </td>, um eine leere Tabellenzelle zwangsweise mit einem Leerzeichen zu füllen.

Alle Tags in XHTML werden geschlossen, und zwar nicht nur die Classic-Tags wie <p></p> und <td></td>, die einen Inhalt enthalten, sondern auch die typischen Solisten aus HTML wie <hr> und <br>:
<hr />
<br />
<input … />
<meta … /> …

Die Sonderzeichen aus dem Windows-Zeichensatz zwischen #129 und #159 werden durch Unicode ersetzt. Aus &#151; wird &#8212;.

Die kurzen <b>- und &<i>-Tags werden bei der Validierung noch akzeptiert. Vom W3C wird hingegen emfohlen, schon jetzt <strong>- und <em>-Tags zu benutzen.

]]> http://www.w3c-at.org/style/cascading-style-sheets-xhtml/feed/ 0 CSS Browser http://www.w3c-at.org/css/css-browser/ http://www.w3c-at.org/css/css-browser/#comments Thu, 28 Apr 2011 12:15:46 +0000 admin http://www.w3c-at.org/?p=31 Der einfachste Weg um mit Style Sheets zu experimentieren ist das Herunterladen eines Browsers mit CSS Unterstützung. Nicht alle Browser haben alle Spezifikationen implementiert – aber neue Versionen werden in der Regel schnell veröffentlicht so dass sich die Featuredichte jederzeit ändern kann. Viele Seiten beschreiben auch sinnvolle Bugs und Work-Arounds

2007-04-19 iCab, ein Mac Browser, unterstützt CSS2 und kann dabei behilflich sein Fehler in HTML oder CSS Dateien zu lokalisieren. (kostenlose Standardversion, Pro-Version kostet Geld)

2006-11-24 Microsoft veröffentlich den Internet Explorer Version 7 Web Browser, mit Unterstützung für CSS2 , transparente PNGs und mehr. (Windows, kostenlos)

2006-01-16 Oregan Networks veröffentlich den Oregan TV Browser, mit Unterstützung für CSS2, XHTML, XML, etc. (verschiedene embedded Plattformen)

2005-12-07 KDE (K Desktop Environment) veröffentlicht Version 3.5. Der enthaltene Konqueror Browser besteht den Acid2 Test. (Unix/X, Open Source)

2005-12-01 Mozilla veröffentlicht Version 1.5 des Firefox Browsers. (Viele Plattformen, Open Source)

2005-09-20 Opera veröffentlicht Version 8.50 seines Browsers. Inkl. Handy Modus, Unterstützung für SVG, alternativen Styles etc. (viele Plattformen einschliesslich Handys, kostenlos)

2005-04-26 Cultured Code veröffentlicht Xyle Scope, ein Browser welcher dabei hilft den HTML Code oder die CSS Struktur einer Websseite zu analysieren.(Mac OS X, Deutsch & Englisch, kostenlose Testversion)

2005-02-11 ANT veröffentlicht Galio und Fresco, kleine embedded Browser für IPTV und digitale Home Entertainment Produkte. Sie unterstützen CSS 2.1, CSS TV Profile 1.0 und Teile von CSS3.

2004-07-26 Bimesoft veröffentlicht SurfOffline 1.4, ein Offlinebrowser mit CSS2 Unterstützung. Dieser Browser kann Webseiten vollständig oder teilweise herunterladen um sie Offline zu browsen. (Windows, shareware)

2004-01-16 Mozilla veröffentlicht Mozilla 1.6, ein Web Browser, Mail Client, News Reader, HTML Editor und IRC Client. (Windows, Mac, Linux, anderer Plattformen, Open Source)

2004-01-14 Tao veröffentlicht den Qi Browser für tragbare Geräte (PDAs, phones, etc.). Er unterstützt CSS1 und teilweise CSS2.

2003-07-09 Apple hat Version 1.0 des Safari Web browser veröffentlicht. Er verwendet KHTML (von KDE project) als rendering Engine. (kostenlos, Mac OS X)

2003-07-03 Netscape veröffentlicht Netscape 7.1, basierend auf Mozilla 1.4. (Windows, Mac, Linux, kostenlos),

2003-04-21 InDelv XF Framework, sehen Sie auch Editoren.

2002-07-24 Das Chimera Projekt veröffentlicht Version 0.4. Chimera ist en Mac-Browser basierend auf Mozilla’s Gecko Layout Engine. (Mac, Open Source)

2002-01-22 Das X-Smiles Team hat Version 0.5 (“Oulu”) seines X-Smiles XML Browser veröffentlicht, welcher unter anderem XHTML, SMIL, XForms und das CSS Mobile Profile unterstützt. (Java, Open Source)

2002-01-08 NetClue veröffentlicht den Clue Browser v4.1.1. Er unterstützt HTML, XML/XHTML, Namespaces, CSS (Level 1 und teilweise Level 2), DOM, Javascript, etc. (Java)

2001-12-19 Microsoft veröffentlicht den Internet Explorer Mac 5.1, mit Bugfixes und verbesserter Performance. Er unterstützt CSS1 und teilweise CSS2. (Der Mac IE 5 war der erste Browser welcher mehr als 99% Unterstützung für CSS1 bot, im März 2000.) (kostenlos für Mac OS 8, 9 & X)

2001-12-18 OmniWeb 4 ist ein Web Browser für den Mac (OS X) und bietet einen eingebauten Quelltext Editor (mit HTTP PUT Support). (Shareware)

2001-11-28 Galeon 1.0 ist ein Web Browser für Gnome. Er nutzt die Gecko Rendering Engine von Mozilla. (Open Source, Unix)

2001-11-07 Adobe veröffentlicht ein SVG Plugin für Mac – und Windows Browser und für Mozilla 0.9.1 unter Linux & Solaris. Unterstützt SVG mit CSS. (kostenlos)

2001-10-31 K-Meleon wird veröffentlicht, ein leichtgewichtiger Browser basierend auf der Gecko Rendering Engine von Mozilla (Windows, Open Source)

2001-05-15 Espial’s Escape 4.7 Browser bietet CSS Support für HTML, XML und XHTML. Geschrieben in Java für den embedded Software Markt.

2001-03-26 Openwave’s mobiler Browser unterstützt XHTML und CSS und soll ab der zweiten Hälfte 2001 für Handys verfügbar sein. Sehen Sie auch den Data Sheet [PDF].

2001-03-26 Nokia wird 2001 damit beginnen Handys mit Support für XHTML und CSS auf den Markt zu brignen. Schauen Sie sich die Demo [Flash] an, den Presse Bericht und das white paper [PDF].

2001-01-23 Der Arachne WWW Browser für DOS und Linux unterstützt CSS1 seit Version 1.70. (kostenlos für nicht-kommerzielle Nutzung).

2000-12-11 CSIRO veröffentlicht das CSIRO SVG Toolkit, mit einem Viewer für SVG + CSS und anderen Utilities. (Java, Open Source)

2000-08-01 IONIC bietet das Ionic SVG Toolkit an, mit einem Viewer für SVG + CSS und anderen Tools. (Java)

2000-06-29 The Koala hat Jackaroo geschrieben, ein SVG + CSS Viewer. (Jackaroo wurde jetzt mit Batik verknüpft und wird nicht länger supported.) (Java, Open Source)

2000-03-27 Microsoft veröffentlicht den Internet Explorer 5 für den Macintosh. Er bietet vollen CSS1 Support, der erste Browser überhaupt der die schafft.

1999-12-02 Closure ist ein Web Browser in Common Lisp geschrieben; unterstützt CSS1.

1999-10-22 Hewlett Packard veröffentlich seinen “embedded Microbrowser” ChaiFarer, mit Unterstützung für CSS1 Support. CSS2 soll später folgen.

1999-09-24 ICE Soft veröffentlich v.5 seiner zwei embedded Browser: die “Basisversion” ist ein Betrachter für HTML/XML+CSS2, die “Pro Version” bietet Networking und mehr. Beide sind in Java geschrieben. Unterstützt auch MathML.

Silicon Graphics hat einen um CSS erweiterten Web Browser welcher in einer Reihe von Anwendungen Verwendung findet, inkl. dem Haus eigenen Desktop.

Arena, W3C’s ursprünglicher Test Browser wird nun von Yggdrasil weiter entwickelt. Er bietet eine teilweise Implementation von CSS1.

Emacs-w3, a.k.a. Gnuscape Navigator, unterstützt etwas CSS1.

Diese Quellen dokumentieren den Funktionsumfang der verschiedenen Web Browser:

2003-10-30 Quirksmode (Peter-Paul Koch) bietet Tests und Informationen, einschliesslich einer Kompatibilitäts Übersicht, und betrachtet einige der Features welche in CSS3 angekündigt sind.

2002-09-27 Johannes Koch besitzt eine Seite mit Work-Arounds für zahlreiche Browserbugs.

2002-04-09 Die SVG Arbeitsgruppe veröffentlicht einen detaillierten Funktionsüberblick (einschl. CSS Support) von verschiedenen SVG Lösungen.

2000-03-28 RichInStyle.com präsentiert eine Liste mit Bugs verschiedener Browser. (Vorsicht: zur Zeit – Okt. 2001 – enthält die Liste selbst leider auch eine Menge Bugs)

1999-09-09 Western Civilisation vergleicht den CSS1 Support in Netscape, Internet Explorer und Opera.

1999-04-12 Haben Sie Angst vor Style Sheets? Jeffrey Zeldman bietet ein Therapie.

The CSS Pointers Group dokumentiert CSS Bugs in gängigen Browsern.

ProjectCool dokumentiert CSS Eigenschaften und verät was in welchem Browser funktioniert.

Das ehemalige WebReview [link back to 2001]‘s Browser Compatibility Chart (the “mastergrid”) ist ein vollständiger Rückblick des Jahres 2001 wie Browser-CSS-Implementierungen den CSS1 Spezifikationen gerecht wurden.

]]> http://www.w3c-at.org/css/css-browser/feed/ 0 CSS Editoren http://www.w3c-at.org/style/css/ http://www.w3c-at.org/style/css/#comments Thu, 28 Apr 2011 11:15:52 +0000 admin http://www.w3c-at.org/?p=24 CSS Editoren

Heutzutage bieten die meissten Editoren irgendeine Art der CSS Style Sheet Unterstützung. Die folgende Liste ist bei weitem nicht vollständig, enthält aber alle (in chronologischer Reihenfolge) Tools welche uns bisher gemeldet wurden.

  • Version 2 vom XStandard XHTML WYSIWYG Editor für Content Management System wurde veröffentlicht. Diese Version unterstützt zusätzliche CSS Eigenschaften. (Für Windows und Mac, “Lite” Version ist kostenlos)
  • Panic veröffentlichte Coda, einen HTML & CSS Editor mit Unterstützung für webdav, ssh, preview, HTML/CSS references, gemeinsamen Editiermodi und mehr. (Mac, kostenlose Testversion)
  • <oXygen/> XML Editor version 8 wurde veröffentlicht. Er bietet die Möglichkeit CSS zu editieren und zu validieren XML Schemas, XSLT, XQuery, SVN und Webdav Clients und mehr
    (Java, kostenlose Testversion)
  • Macrabbit veröffentlich Version 2 von CSSEdit, einem CSS Editor mit Vorschaufunktion (auch für dynamische Webseiten), CSS-Validierung, Struktur Analyse usw. (MAC, kostenlose Testversion)
  • Westciv veröffentlicht den Style Master 4.5, ein CSS Editor mit Vorschaufunktion, Informationen über Browser-Kompatibilitäten, einer CSS Referenz, “X-ray” (CSS Inspektor), Wizards, etc. (Mac und Windows, kostenlose Testversion)
  • Belus Technology veröffentlich Version 1.7.1 von XStandard, einem WYSIWYG XHTML/CSS Editor mit Unterstützung für CSS 2.1 (Windows, kostenlose “Lite” Version, kostenlose Demo der “Pro” Version)
  • Appel à discussion pour un nouveau forum fr.­comp.­infosystemes.­www.­auteurs.­css pour des questions et discussions concernant les mises en formes de sites internet par les CSS. (eine Diskussion wurde eröffnet um den Sinn einer neuen französisch sprachigen CSS-Newsgroup zu klären.)
  • Disruptive Innovations und Linspire veröffentlichen Version 1.0 von Nvu, einem WYSIWYG Web Seiten Editor, basierend auf Gecko (Windows, Mac, Linux/X, Open Source)
  • Adobe veröffentlicht GoLive CS2, einem Webseiten Authoring und Management Tool, mit CSS Tools, Layout Templates, Unterstützung für tragbare Geräte usw. (Mac OS X &
    Windows, kostenlose Testversion)
  • TARI veröffentlicht GoodPage Version 1.0.2, ein HTML/CSS Editor mit mehrern Bearbeitungsfenstern, Code-Prüfung usw.(Mac OS X, kostenlose Testversion)
  • Evrsoft veröffentlicht 1st Page 2000, ein HTML Editor mit mehreren Vorschaumöglichkeiten, einer CSS Referenz, Wizards usw. (Windows, kostenlos)
  • eLeDo veröffentlicht Eledicss 0.1, ein CSS Ediror welcher mit PHP Serverseitig realisiert wurde. Er erlaubt die CSS Bearbeitung im Browser. (Unix, Open Source)
  • Price Media veröffentlicht Version 4.0, einer kompletten Neuauflage von Cascade DTP, einem Webseiten Kompositionstol zur Erstellung von HTML + CSS Seiten mit speziellem Support für das absolute Positionieren von den Elementen einer Seite. (kostenlos, Windows)
  • Maxro Software veröffentlicht den CSS Designer 2.0, einen Editor für CSS2 mit eingebauter Vorschaufunktion. Verfügbar in Deutsch und Englisch. (Windows, Shareware)
  • CreaText 1.5pr3, von Marius Soutier ist ein HTML Quelltexteditor mit einem CSS2 Editor – ist jetzt als OpenSource erhältlich (Mac, Open Source)
  • HighDots.com veröffentlicht Style Studio v3.76, ein CSS Editor der auch nicht-CSS Seiten zu CSS konvertieren kann. (Windows, kostenlose Testversion.) HighDots.com bietet auch einen kostenlosen Offline CSS Validator.
  • QuickShow ist ein Programm zum Erstellen von Präsentationen. Die Präsentationen werden als HTML/CSS gespeichert und können auch in Browsern betrachtet werden welche ‘projection’ media verstehen, (so wie Opera). (Windows, Shareware)
  • cssed ist ein Syntax-orientierter Editor für CSS Dateien. Mit einer graphischen Oberfläche für GTK2, Syntax highlighting und mehr. (Linux, Open Source)
  • HostM.com Web Hosting veröffentlicht Simple CSS 1.0, einen einfach zu bedienenden CSS Editor. Sie können mehrere CSS Projekte verwalten und existierende Stylesheets importieren. Unterstützt CSS2. (Windows & Mac, Freeware)
  • Abstract thought Lab. veröffentlicht Version 2.0 von Astyle, einem “fairly easy to use” (ihre eigenen Worte) Editor für CSS2. (Windows, Shareware)
  • Macromedia’s WYSIWYG HTML Editor und Web-site development Tool Dreamweaver MX unterstützt teilweise CSS2 und integriert TopStyle (Windows & Mac, kostenlose Testversion)
  • Das W3C veröffentlicht Version 8.0 von Amaya, einem WYSIWYG Editor/Browser für (X)HTML, SVG, MathML und CSS. (Open Source, Solaris, Linux, Mac, Windows)
  • InDelv Software veröffentlicht das XF Framework 0.8.1. XF erstellt und rendert XSL, XML, CSS und XHTML Inhalte sowohl als Stand-alone Version wie auch in Form von Bibliotheken. Das Ergebnis kann am Bildschirm ausgegeben, gedruckt oder als PDF exportiert werde. (.NET und Java Plattformen, kostenlose Demo)
  • HTML-Kit ist ein HTML, XHTML und XML Editor mit Plugins welche, neben anderen Dingen, CSS und CSS Hilfen bereitstellen.(Windows, free)
  • Bradbury Software veröffentlicht Version 3.10 von TopStyle Pro, einem CSS1 & 2 Editor. Neu in dieser Version: Unterstützung für Opera 7, den W3C HTML & CSS Validatoren und Bobby. (Windows, kostenlose Demo)
  • Graphic-Group veröffentlicht G-G CSS, ein CSS Editor. Er ist Browser-basierend und beinhaltet eine eingebauten Webserver http/1.1 um das Ergebnis (HTML, ASP, XML) als Vorschau betrachten zu können. (Windows. kostenlose Demo)
  • Daniel Glazman (daniel @glazman.org) veröffentlicht ein CSS Editor Add-on für Composer, den Content Editor von Mozilla/Netscape 6. Der CSS Editor ist ein OpenSource Projekt und kann
    kostenlos herunter geladen werden.
  • Westciv veröffentlicht Version 1.1 vom Layout Master, einem HTML + CSS Seiteneditor (Win & Mac, kostenlose Testversion)
  • “Uncle Wingnut” schrieb etwas dass ursprünglich als simpler CSS Editor begann, jetzt aber auch Objekte für MOO erstellen kann.
  • Der Mozilla Composer ist ein WYSIWYG Editor für HTML. Er generiert vaildes HTML 4.01. Eine Einstellung der Konfiguration erlaubt den Wechsel von veralteten HTML Elementen zu inline CSS.
  • JustStyle CSS Editor (Version 1.2.2) ist ein Editor für CSS1 Style Sheets. (30-Tage Testversion, Java)
  • BrowserEdit ist ein HTML Editor welcher innerhalb des IE funktioniert. Er verwendet CSS zur Positionierung der Elemente.
  • Morphon Technologies veröffentlicht eine Betaversion vom Morphon Standalone CSS Editor, nun mit CSS2 Unterstützung (Java, kostenlose Testversion)
  • Visicom Média veröffentlicht Version 4.30.0 von WebExpert 2000, einem HTML Editor mit Unterstützung von CSS2, in Französisch.
  • Thomas Meinike veröffentlicht den StyleAssistant (Deutsche Seite), einem Programm zum Schreiben von CSS1 Style Sheets. (Freeware,Windows)
  • Quanta ist ein HTML Editor für den KDE Desktop. CSS1 und 2 Support ist in der Beta für KDE2 enthalten. (Unix, Open Source)
  • Software602 veröffentlicht ein Officepaket 602 Pro Suite für Windoes mit einem HTML und CSS Editor. (freeware).
  • Lunatech Research veröffentlicht eine Beta Version 7 vom Morphon XML editor, welcher auch einen CSS Editor beinhaltet. In Java geschrieben.
  • AceHTML 4 von Visicom Media ist ein HTML/CSS Editor für Windows. Es ist eine freie und eine kostenpflichtige Version verfügbar.
  • Justsystem (auch in Englisch) haben ihren Java-basierenden, mehrsprachigen Wordprozessor ICHITARO Ark veröffentlicht. Er nutzt HTML/CSS als Datenformat (Screenshot).
  • Bluefish ist ein Open Source HTML Editor für Unix mit Support für CSS1.
  • Cascade und Cascade Light sind CSS Editoren für den Mac.
  • En Vogue ist ein (non-WYSIWYG) Editor für den Atari ST. Er unterstützt CSS 1 & 2.
  • SoftQuad’s XMetaL stellt XML Dokumente mit Stylesheets dar.
  • Corel’s CorelDraw 9 unterstützt HTML + CSS.
  • SoftQuad’s HoTMetaL PRO 5.0 stellt ebenfalls CSS und HTML dar.
  • Lewis Gartenberg veröffentlicht Version 2 seines Shareware Tools, W2CSS welches MS Word Dokumente in HTML und CSS umwandelt.
  • Prime Style wurde zu Shareware und Version 2.0 ist jetzt verfügbar.
  • CSS Mill von Patrick Corcoran ist ein visuelles Tool zur Erzeugung von CSS und HTML.
  • EDF veröffentlicht CSSize, ein Tool welches HTML Dokumente in HTML+CSS Dokumente umwandeln kann…
  • Hexmac veröffentlicht HexWeb CSS Edit als Plugin für BBEdit und als Mac Version.
  • Cascade ist ein CSS Editor für den Mac. Es existiert auch eine kostsenlose Version Cascade Light.
  • Ein CSS Modus für Alpha, einem Mac Programm Editor, ist verfügbar.
  • Anansi unterstützt

    • CSS.

  • Coffeecup Software’s StyleSheet Maker++ ist ein Anwendung zur Erzeugung von CSS Style Sheets.
  • mBED’s Interactor 1.1 unterstützt CSS-Positionierung und die Erzeugung von Animationen in Verbindung mit Javascript.
  • Danere veröffentlich eine neue Version des StyleMakers welcher CSS Positionierung über ein drag-n-drop Interface unterstützt.
  • Optima System’s PageSpinner ist ein Shareware HTML Editor für den Mac mit Support für CSS.
  • Microsoft’s Beta Version von FrontPage98 bietet teilweisen Support für CSS.
  • Sheet Stylist ist eine Active-X Anwendung welche es unter Windows 95 erlaubt CSS Styles zu erstellen und zu bearbeiten.
  • Astrobyte kündigt BeyondPress 3.0 an welches QuarkXPress Dokumente in HTML und CSS konvertieren kann.
  • Das Interaction Seiten Management System beinhaltet nun auch einen Macintosh CSS Editor.
  • Sausage Software’s HotDog Editor unterstützt un CSS.
  • Allaire’s HomeSite Editor (v. 2.5 und besser) unterstützt nun CSS.
  • JoyHTML ist ein schwedischer Sharware HTML Editor mit CSS Support.(Download jh99sv.exe)
  • Adobe FrameMaker unterstützt seit Version 5.5 HTML+CSS Export.
]]> http://www.w3c-at.org/style/css/feed/ 0 Amaya http://www.w3c-at.org/amaya/amaya/ http://www.w3c-at.org/amaya/amaya/#comments Thu, 28 Apr 2011 09:15:25 +0000 admin http://www.w3c-at.org/?p=15 Amaya Übersicht

Amaya ist ein vollständige Kombination aus Browser und Webeditor.

Amaya erlaub das gleichzeitige Browsen und Bearbeiten von Webseiten Mit Hilfe von Amaya können Sie Webseiten erstellen und auf Ihren Webserver hochladen. Autoren können eine Internetseite von Grund auf neu erstellen, sie können nach allen benötigten Informationen im Web suchen und diese per Copy’n'Paste in ihre Seiten einfügen und Verlinkungen zu anderen Seiten erstellen. All das kann auf einfache Weise in einer einzigen Arbeitsumgebung realisiert werden. Browsen und Editieren ist in einem Tool vollständig miteinander verknüpft.

Amaya besitzt ein konstistentes integriertes Dokumentenmodell basierend auf den DTD Amaya stellt ein Dokument intern immer in strukturierter Weise streng nach den Document Type Definitionen (DTD) dar. Ein ordentlich strukturiertes Dokument erlaubt es anderen Anwendungen dieses problemlos weiter zu verarbeiten. Amaya erlaubt die Darstellung dieser Struktur zeitgleich mit der formatierten Ausgabe welche als Diagramm am Bildschirm dargestellt werden kann.

Mit Amaya kann zeitgleich an mehreren Dokumenten gearbeitet werden Mehrere (X)HTML, native MathML (.mml) und SVG (.svg) Dokumente können zur gleichen Zeit dargestellt und bearbeitet werden.

Amaya erlaubt das Erstellen von Hypertextlinks Der Editor hift Ihnen beim Erstellen von Textlinks zu anderen Dokumenten im Web vom aktuell bearbeiteten Dokument. Sie können diese Links betrachten und ein Gefühl dafür bekommen wie die Informationen miteinander verbunden sind. Dieses Feature ist nicht nur auf HTML Anker beschränkt. Mit XLink kann zu jedem MathML und SVG Element gelinkt werden.

Amaya beinhaltet ein Modul zum kommentieren Ihrer Dokumente Externe Kommentare, Notizen und Hinweise können zu jedem Webdokument oder Teildokument hinzugefügt werden.

]]> http://www.w3c-at.org/amaya/amaya/feed/ 0