W3C: "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents".
CSS gilt heute als die Standard-Design-Sprache für das Gestalten von Webseiten ( siehe z.B. de.wikipedia Cascading Style Sheets , w3.org CSS , Mozilla Web-Tutorials , "ich-lerne-css.de" Tips , de.Wikipedia: Layout , CSS , CSS Quick Reference für CSS-Propertys )
Zu Darstellungen von Informationen gehören u.a. ästetische Merkmale. Zu den Schriften gehören ästetische Merkmale Schrift , Dokument-Strukturen . Zu den Schriften gehören Schriftklassifikationen Schriftklassifikation Geschriebene Sprache, Handschrift, Manuskript, Notenschrift, Notation von Musik, Medientheorie.
Einige Weblinks zu "Schrift": de.wikipedia Schrift , Typografie, Blindenschrift ,
Es gibt Regeln für das bedruckten von Materialien, wie z.B. Plakatwänden , Litfaßsäulen, Schriftklassifikation , Papier, Stoff, Bitmuster, Screen, usw.
In den Webtechniken ( Web-Design ) gehören zum Front-End-Management ( clientseitig ) gehören z.B. API-Urheber, Vertrieb und Verleger ( API Front-End-Manager, Ersteller, Publisher, Manager ). Es gibt Modifikationsregeln, wie z.B.
► Design gestalten ► Design veröffentlichen ► Design verwalten ► Design überwachen :| ( engl. Design, Publish, Manage, Monitor )Es gibt Entwicklerportale und interessierte API-Konsumenten, die sich z.B. interessieren und
► Entdecken ► Erforschen ► Testen ► Abonnieren ► Monitor :|
Mit Hilfe von HTML kann der Inhalt ( Content ) einer Webseite strukturiert werden. Es gibt Tags für ...
Zu HTML 5 gehören Webtechnologien.
Spezifikations-Übersicht |
Beispiel: HTML 5 legt die Tags nav, section, header, article, footer, article fest. Siehe z.B. W3C: the-nav-element Zu HTML gehört eine default-Formatierung, die das grundlegende Aussehen von Tags ( browser-abhängig! ) festlegt. HTML wird ( überwiegend ) zur Content-Strukturierung von Webseiten verwendet. Cascading Style Sheets dienen ( überwiegend ) der Gestaltung der optischen Präsentation von Webseiten, der grafischen Text-Formatierung ( Fonts ) und der Gestalten des Layout von Webseiten ( Web-Design ). Zur Webpräsentation von Unternehmen gehört ein wiedererkennbarer Stil und Identität CSS-Stilvorlagen dienen dem Corporate Identity, Corporate Design. |
CSS entspricht einer deklarative Sprache für geschachtelte Gestaltungsvorlagen, die für strukturierte Dokumente ( XML, SVG, HTML, XHTML, usw.) verwendet werden. Oft beruht das optische Design von HTML-Seiten auf CSS-Stilvorlagen (siehe z.B. W3C: Cascading Style Sheets , de.Wikipedia: Cascading Style Sheets , http://www.webmeister.at/Style/CSS/ ).
Das Design einer Homepage hat vielschichtige, inhaltliche, funktionale, ästetische Komponenten. Es gibt Base styles, General Styles, Header Styles, Navigation Styles, Link Styles, Content Styles, Footer Styles, Typography Styles, IE Styles, CSS Templates, usw.
Ein Web-Präsentation kann versuchen, gerätespezifische Sonderheiten zu nutzen. Es kann spezielle Gründe geben, die es wünschenswert erscheinen lassen, das Design und die Styles möglichst optimal an das Gerät anzupassen ( building smartphone-optimized websites ). Hierzu werden Geräte-Daten, wie max-device-width oder maximum-scale gebraucht. Die Style-Anpassung kann für ein spezielles Gerät optimiert werden. Siehe z.B. de.wikipedia: Responsive Design , de.wikipedia: Cascading Style Sheets ( Selectoren ) und w3.org: CSS3 ( u.a. 4.1 Property Index und 4.2 Selector Index ), CSS21 Media types ( all, braille, embossed, handheld, print, projection, screen, speech, tty, tv ), CSS3-Mediaqueries .
Wie werden manchmal CSS-Kenntnisse und Mediengestalter-Dienste angepriesen? Beispiele: "Build Website in 10 Minutes, Wir bauen kostenlos ihre Homepage mit unsererm CSS-Frameworks, Intelligente Gestaltung deiner Website mit unserem Intelligator, 10 Best CSS Practices, Sie haben den Profit, wir kümmern uns um die Cross-Browser-CSS-Hacks, usw."
Beschreibung aller CSS Spezifikationen ( www.w3.org )
Zur Präsentation eines HTML-Dokumentes auf dem Bildschirm wird eine Seite gerendert, d.h. aus vielen elementaren grafischen Grundelementen wird im Grafikspeicher das optisch sichtbare Bild als Bitmap erzeugt. Bei True-Type-Fonts sind z.B. "grafische Vektoren" ( Pixel längs einer Linie, Bresenham-Algorithmus ) ein elementares Grundelement. Wenn z.B. 10 000 Buchstaben gezeichnet werden und ein Buchstabe ca. 20 Polygonpunkte hat, so ergeben sich ca. 200 000 "grafische Vektoren", die das Bitmap-Schriftbild ergeben . Zu den elementaren grafischen Grundelementen gehören auch der Device-Kontext ( Hintergrundfarben, Strichstärken, Ränder, Abstände, Füllmuster, Bitmaps, usw. ).
Beim Renderprozess ohne CSS wird die Seite mit den browserinternen Defaultstyles der Tags gerendert. Beim Renderprozess mit CSS überschreiben vor dem Rendern die CSS-Styles die zugehörigen browserinternen Defaultstyles. Ein "CSS-Reset setzt als vereinheitlichte Startsituation" zunächst alle browserinternen Defaultstyles "auf Null".
Die herstellerabhängigen default-Styles sind bei Browser durchaus unterschiedlich. So kann z.B. eine <ul>-Liste in unterschiedlichen Browsern verschiedene Abstände haben (siehe unten).
Was meint CSS-Reset?
Ein CSS-Reset setzt alle default Style-Informationen 'auf Null'.
Siehe z.B.
Reset-Stylesheet
und
global-css-reset
Was meint CSS-Normalize?
Normalize versucht eine Cross-Browser-Übereinstimmung zu erreichen, indem z.B.
sinnvolle default Vorgaben erhalten bleiben,
möglichst alle HTML-Elemente im Aussehen angeglichen werden und
Browser-Inkompatibilitäten soweit möglich verbessert und ausgeglichen werden.
Wie geht die Webdesign-Praxis mit CSS-Reset bzw. CSS-Normalize um? Es wird versucht, den unvollkommenen und unterschiedlichen Implementierungsstand (Crossbrowser, Standardkonformität) von CSS-Versionen zu meistern (siehe z.B. style-sheet-defaults , browser-support-pseudo-elements , browser-support-css-contents ).
Hier ist der W3C-CSS-Validator: CSS-Source validieren ◥
Die CSS-Syntax (Selectoren, Property, Value) hat den folgenden Aufbau: Selektor { Eigenschaft:Wert; }
Selector | | Property | | | Value | | | | | h1 { background: snow; } ————————————————— | | Declaration
Die CSS-Schreibweise (Selector, Property, Value) wird innerhalb des style-Tags definiert und in XHTM verwendet:
CSS-Definition{ ... } XHTML (Tag mit Attribut) | | #xyz {...} <tag id="xyz" ... .xyz {...} <tag class="xyz" ... tag {...} <tag ... >
Wo können Styles-Direktiven stehen?
Styles-Direktiven können Tag-intern und/oder Seiten-intern im HTML-Header und/oder in externen .css-Dateien stehen (includieren).
CSS-Selektoren sind ein mächtiger Mechanismus zur Formatierung von XHTML-Seiten. CSS-Styles mit Selektoren können untersucht werden mit Selektoren-analysieren .
| Selektoren | ||
|---|---|---|
| Selektor | findet ... | Beispiel |
| Universal Selector |
'*'-Operator findet jedes Element
|
div * p {margin: 0; padding:0;}
div * [href] {color: #00f;} |
| Type Selector | findet das angegeben Tag-Element | h1 {color:red;} |
| Descendant Selector | findet absteigend |
h1 {color: green;}
em {color: green;} finde alle em's, die in h1 enthalten sind: h1 em {color: blue;} |
| Child Selector |
'>'-Operator findet direkte Kind-Elemente
|
body > p { line-height: 1.3; }
p > q > strong {color: red;} div ol > li p {background: #ccc;} |
| Adjacent Sibling selector | findet unmittelbar nach-folgendes |
h1 + h2 {margin-top: -0.5em;}
h1.uvw + h2 {text-indent: 0px; } |
|
Attribute Selector ('=', '~=', '|=' , ...) |
findet Tag-Attribute |
a[title] {color: #008;}
a[href^=http] {color: #00f;} * [lang='fr'] { display : none; } |
| Class Selector | findet Element mit Klasse |
em.myClass {color: blue;}
wobei em.myClass entspricht em~=myClass p.myClass1.myClass2 { color: green } (z.B. für <p class="xxx myClass1 yyy myClass2">...</p> |
| ID Selector | findet Element mit gegebener id | #chapter1 {color: #0f0;} |
Selectoren, siehe z.B. Selectoren (W3C) ◥
| Pattern | Meaning | ab CSS |
|---|---|---|
| * | any element | 2 |
| E | an element of type E | 1 |
| E[foo] | an E element with a "foo" attribute | 2 |
| E[foo="bar"] | an E element whose "foo" attribute value is exactly equal to "bar" | 2 |
| E[foo~="bar"] | an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "bar" | 2 |
| E[foo^="bar"] | an E element whose "foo" attribute value begins exactly with the string "bar" | 3 |
| E[foo$="bar"] | an E element whose "foo" attribute value ends exactly with the string "bar" | 3 |
| E[foo*="bar"] | an E element whose "foo" attribute value contains the substring "bar" | 3 |
| E[hreflang|="en"] | an E element whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en" | 2 |
| E:root | an E element, root of the document | 3 |
| E:nth-child(n) | an E element, the n-th child of its parent | 3 |
| E:nth-last-child(n) | an E element, the n-th child of its parent, counting from the last one | 3 |
| E:nth-of-type(n) | an E element, the n-th sibling of its type | 3 |
| E:nth-last-of-type(n) | an E element, the n-th sibling of its type, counting from the last one | 3 |
| E:first-child | an E element, first child of its parent | 2 |
| E:last-child | an E element, last child of its parent | 3 |
| E:first-of-type | an E element, first sibling of its type | 3 |
| E:last-of-type | an E element, last sibling of its type | 3 |
| E:only-child | an E element, only child of its parent | 3 |
| E:only-of-type | an E element, only sibling of its type | 3 |
| E:empty | an E element that has no children (including text nodes) | 3 |
| E:link E:visited |
an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) | 1 |
| E:active E:hover E:focus |
an E element during certain user actions | 1 and 2 |
| E:target | an E element being the target of the referring URI | 3 |
| E:lang(fr) | an element of type E in language "fr" (the document language specifies how language is determined) | 2 |
| E:enabled E:disabled |
a user interface element E which is enabled or disabled | 3 |
| E:checked | a user interface element E which is checked (for instance a radio-button or checkbox) | 3 |
| E⁝first-line | the first formatted line of an E element | 1 |
| E⁝first-letter | the first formatted letter of an E element | 1 |
| E⁝selection | the portion of an E element that is currently selected/highlighted by the user | 3 |
| E⁝before | generated content before an E element | 2 |
| E⁝after | generated content after an E element | 2 |
| E.warning | an E element whose class is "warning" (the document language specifies how class is determined). | 1 |
| E#myid | an E element with ID equal to "myid". | 1 |
| E:not(s) | an E element that does not match simple selector s | 3 |
| E F | an F element descendant of an E element | 1 |
| E > F | an F element child of an E element | 2 |
| E + F | an F element immediately preceded by an E element | 2 |
| E ~ F | an F element preceded by an E element | 3 |
DOM meit das Document-Object-Model, das eine Programmierschnittstelle (API) für HTML/XHTML/XML-Dokumente ist. ECMAScript ( umgangssprachlich JavaScript ) ist eine standardisierte Skriptsprache ( modern, schlank, dynamisch typisierte, objektorientiert aber klassenlos, Prototypen; kann prozedural, funktional, objektorientiert ), die fuer DOM-Scripting in Web-Browsern genutzt werden.
| ECMAScript | CSS |
|---|---|
var n = document.getElementById('nav');
if(n) {
var as = n.getElementsByTagName('a');
if(as.length > 0) {
for(var i=0; as[i]; i++){
as[i].style.color = '#369';
as[i].style.textDecoration = 'none';
}
}
}
|
#nav a{
color: #369;
text-decoration: none;
}
|
Ein Web-Präsentation kann versuchen, gerätespezifische Sonderheiten zu nutzen. Es kann spezielle Gründe geben, die es wünschenswert erscheinen lassen, das Design und die Styles möglichst optimal an das Gerät anzupassen ( building smartphone-optimized websites ). Hierzu werden Geräte-Daten, wie max-device-width oder maximum-scale gebraucht. Die Style-Anpassung kann für ein spezielles Gerät optimiert werden. Siehe z.B. de.wikipedia: Responsive Design , de.wikipedia: Cascading Style Sheets ( Selectoren ) und w3.org: CSS3 ( u.a. 4.1 Property Index und 4.2 Selector Index ), CSS21 Media types ( all, braille, embossed, handheld, print, projection, screen, speech, tty, tv ), CSS3-Mediaqueries , Mediaqueries Browser-Support
| Media Types | Media Groups | |||
|---|---|---|---|---|
| continuous/paged | visual/audio/speech/tactile | grid/bitmap | interactive/static | |
| braille | continuous | tactile | grid | both |
| embossed | paged | tactile | grid | static |
| handheld | both | visual, audio, speech | both | both |
| paged | visual | bitmap | static | |
| projection | paged | visual | bitmap | interactive |
| screen | continuous | visual, audio | bitmap | both |
| speech | continuous | speech | N/A | both |
| tty | continuous | visual | grid | both |
| tv | both | visual, audio | bitmap | both |
Ohne (explizite) Benutzung von CSS-Styles wirken die Default-Styles, d.h. die Browser-abhängigen Einstellungen.
Browser: msie font font font font font -style -variant -weight -size/l-height -family -------------------------------------------------------------- P normal normal 400 16px/normal Times New Roman; PRE normal normal 400 13px/normal Courier New; UL normal normal 400 16px/normal Times New Roman; LI normal normal 400 16px/normal Times New Roman; OL normal normal 400 16px/normal Times New Roman; LI normal normal 400 16px/normal Times New Roman; DL normal normal 400 16px/normal Times New Roman; DT normal normal 400 16px/normal Times New Roman; DD normal normal 400 16px/normal Times New Roman; H1 normal normal 700 32px/normal Times New Roman; H2 normal normal 700 24px/normal Times New Roman; H3 normal normal 700 18px/normal Times New Roman; H4 normal normal 700 16px/normal Times New Roman; H5 normal normal 700 13px/normal Times New Roman; H6 normal normal 700 10px/normal Times New Roman; P margin:auto auto auto auto; padding: 0px 0px 0px 0px; PRE margin:auto auto auto auto; padding: 0px 0px 0px 0px; UL margin:auto auto auto 40px; padding: 0px 0px 0px 0px; LI margin:auto auto auto auto; padding: 0px 0px 0px 0px; OL margin:auto auto auto 40px; padding: 0px 0px 0px 0px; LI margin:auto auto auto auto; padding: 0px 0px 0px 0px; DL margin:auto auto auto auto; padding: 0px 0px 0px 0px; DT margin:auto auto auto auto; padding: 0px 0px 0px 0px; DD margin:auto auto auto 40px; padding: 0px 0px 0px 0px; H1 margin:auto auto auto auto; padding: 0px 0px 0px 0px; H2 margin:auto auto auto auto; padding: 0px 0px 0px 0px; H3 margin:auto auto auto auto; padding: 0px 0px 0px 0px; H4 margin:auto auto auto auto; padding: 0px 0px 0px 0px; H5 margin:auto auto auto auto; padding: 0px 0px 0px 0px; H6 margin:auto auto auto auto; padding: 0px 0px 0px 0px;
Browser: mozilla font font font font font -style -variant -weight -size/l-height -family -------------------------------------------------------------- P normal normal 400 16px/normal serif PRE normal normal 400 13px/normal monospace UL normal normal 400 16px/normal serif LI normal normal 400 16px/normal serif OL normal normal 400 16px/normal serif LI normal normal 400 16px/normal serif DL normal normal 400 16px/normal serif DT normal normal 400 16px/normal serif DD normal normal 400 16px/normal serif H1 normal normal bold 32px/normal serif H2 normal normal bold 24px/normal serif H3 normal normal bold 18.73px/normal serif H4 normal normal bold 16px/normal serif H5 normal normal bold 13.27px/normal serif H6 normal normal bold 10.73px/normal serif P margin: 16px 0px 16px 0px; padding: 0px 0px 0px 0px; PRE margin: 13px 0px 13px 0px; padding: 0px 0px 0px 0px; UL margin: 16px 0px 16px 0px; padding: 0px 0px 0px 40px; LI margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; OL margin: 16px 0px 16px 0px; padding: 0px 0px 0px 40px; LI margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; DL margin: 16px 0px 16px 0px; padding: 0px 0px 0px 0px; DT margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; DD margin: 0px 0px 0px 40px; padding: 0px 0px 0px 0px; H1 margin: 21.47px 0px 21.47px 0px; padding: 0px 0px 0px 0px; H2 margin: 19.93px 0px 19.93px 0px; padding: 0px 0px 0px 0px; H3 margin: 18.73px 0px 18.73px 0px; padding: 0px 0px 0px 0px; H4 margin: 21.27px 0px 21.27px 0px; padding: 0px 0px 0px 0px; H5 margin: 22.13px 0px 22.13px 0px; padding: 0px 0px 0px 0px; H6 margin: 25px 0px 25px 0px; padding: 0px 0px 0px 0px;
Browser: opera font font font font font -style -variant -weight -size/l-height -family -------------------------------------------------------------- P normal normal 400 16px/normal "Times New Roman" PRE normal normal 400 13px/normal "Courier New" UL normal normal 400 16px/normal "Times New Roman" LI normal normal 400 16px/normal "Times New Roman" OL normal normal 400 16px/normal "Times New Roman" LI normal normal 400 16px/normal "Times New Roman" DL normal normal 400 16px/normal "Times New Roman" DT normal normal 400 16px/normal "Times New Roman" DD normal normal 400 16px/normal "Times New Roman" H1 normal normal 700 28px/normal "Times New Roman" H2 normal normal 700 22px/normal "Times New Roman" H3 normal normal 700 18px/normal "Times New Roman" H4 normal normal 700 16px/normal "Times New Roman" H5 normal normal 700 14px/normal "Times New Roman" H6 normal normal 700 12px/normal "Times New Roman" P margin: 16px 0px 16px 0px; padding: 0px 0px 0px 0px; PRE margin: 13px 0px 13px 0px; padding: 0px 0px 0px 0px; UL margin: 16px 0px 16px 0px; padding: 0px 0px 0px 40px; LI margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; OL margin: 16px 0px 16px 0px; padding: 0px 0px 0px 40px; LI margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; DL margin: 16px 0px 16px 0px; padding: 0px 0px 0px 0px; DT margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; DD margin: 0px 0px 0px 40px; padding: 0px 0px 0px 0px; H1 margin: 18px 0px 18px 0px; padding: 0px 0px 0px 0px; H2 margin: 18px 0px 18px 0px; padding: 0px 0px 0px 0px; H3 margin: 18px 0px 18px 0px; padding: 0px 0px 0px 0px; H4 margin: 16px 0px 16px 0px; padding: 0px 0px 0px 0px; H5 margin: 23px 0px 23px 0px; padding: 0px 0px 0px 0px; H6 margin: 28px 0px 28px 0px; padding: 0px 0px 0px 0px;
<script type="text/javascript">
function css_browser() {
var s="<br />Browser: ";
if($.browser.msie) s +="msie";
if($.browser.mozilla) s +="mozilla";
if($.browser.opera) s +="opera";
return s;
}
function css_font( obj ) {
var s="<pre>"; if(!obj)return "";
if(obj[0]) s += obj[0].tagName; //oder obj[0].nodeName;
else s += obj.tagName; //oder obj[0].nodeName;
s +=" font-style:"+obj.css("font-style");
s +="; |-variant:"+obj.css("font-variant");
s +="; |-weight:"+obj.css("font-weight");
s +="; |-size:"+obj.css("font-size");
s +="/line-height:"+obj.css("line-height");
s +=" |-family:"+obj.css("font-family");
s += ";"; return s;
}
function css_em_px_umrechnung( obj ) {
var s="<br />"; if(!obj)return "";
if(obj[0]) s += obj[0].tagName; //oder obj[0].nodeName;
else s += obj.tagName; //oder obj[0].nodeName;
s += ":<pre>em-px-Umrechnung:";
var sem="em: ", spx="px: ";
for (var em=0.5; em < 2.01; em += 0.1){
obj.css("font-size", em+"em");
sem += " | " + em.toFixed(1);
var oo = obj.css("font-size");
oo = parseInt(oo.substring(0,oo.length-2)).toFixed(1);
spx += (oo<10)?" | " + oo:" |" + oo;
} return (s+"<br />"+sem+"<br />"+spx+"</pre>");
}
function css_em_px_umrechnung( obj ) {
var s="<br />"; if(!obj)return "";
if(obj[0]) s += obj[0].tagName; //oder obj[0].nodeName;
else s += obj.tagName; //oder obj[0].nodeName;
s +=" margin:"+obj.css("margin-top");
s +=" "+obj.css("margin-right");
s +=" "+obj.css("margin-bottom");
s +=" "+obj.css("margin-left");
s +="; padding:"+obj.css("padding-top");
s +=" "+obj.css("padding-right");
s +=" "+obj.css("padding-bottom");
s +=" "+obj.css("padding-left");
s +=";"
return s;
}
s="";
s += css_browser();
s += css_font($("p")); s += css_font($("pre"));
s += css_font($("ul")); s += css_font($("ul li"));
s += css_font($("ol")); s += css_font($("ol li"));
s += css_font($("dl")); s += css_font($("dl dt"));
s += css_font($("dl dd"));
s += css_font($("h1")); s += css_font($("h2"));
s += css_font($("h3")); s += css_font($("h4"));
s += css_font($("h5")); s += css_font($("h6"));
s += "<pre>";
s += css_em_px_umrechnung($("p")); s += css_em_px_umrechnung($("pre"));
s += css_em_px_umrechnung($("ul")); s += css_em_px_umrechnung($("ul li"));
s += css_em_px_umrechnung($("ol")); s += css_em_px_umrechnung($("ol li"));
s += css_em_px_umrechnung($("dl")); s += css_em_px_umrechnung($("dl dt"));
s += css_em_px_umrechnung($("dl dd"));
s += css_em_px_umrechnung($("h1")); s += css_em_px_umrechnung($("h2"));
s += css_em_px_umrechnung($("h3")); s += css_em_px_umrechnung($("h4"));
s += css_em_px_umrechnung($("h5")); s += css_em_px_umrechnung($("h6"));
s += "</pre>";
alert(s); //document.write(s)
</script>
Es gibt CSS-Bezeichnungen. So entspricht z.B. die benannte Farbe snow der "rrggbb"-Schreibweise: #fffafa oder der Schreibweise: rgb( 255, 250, 250)
Bei HTML5 gibt es das Tag
<input type="color" value="" onchange="" />
das hervorragend geeignet wäre, aber zur Zeit ( 2012 ) von zu wenigen Browsern unterstützt wird. Deshalb wird hier ein anderer Weg gewählt.
In der Vollversion von SVG 1.1 werden Farbnamen unterstützt.
var col = daten.get('color-array');entspricht im nachfolgenden Code col = ["#ffffff","White","#fffff0","Ivory",...]; Die Farbnamen kommen in die option-Tag's einer Select-Box. Wegen der mehr als 200 Namen ist die Erstellung der option-Tag's von Hand umständlich und einfacher mit Hilfe von t = doc.createElement("option").
function insert_color_options(id_sel, att) { // att ist z.B. "border-color: "
var k, kk, t, c, col = daten.get('color-array'), sel = dom.get_node(id_sel);
for (k = 0; k < col.length; k += 2) { c = col[k];
t = doc.createElement("option");
t.innerHTML = c + " " + col[k + 1];
t.value = att + c + ";";
if (k < 70) { t.style.color = '#000'; } else { t.style.color = '#fff'; }
t.style.backgroundColor = c;
sel.appendChild(t); // sel werden nacheinander die option's angefügt
}
}
Bei einer Modifikation eines input-Wertes per Hand möchte der User gerne sofort die visuelle Wirkung sehen. Hierzu sind alle input-Tags mit Event-Handlern zu versehen. Hierzu dient
function init(id_form, id_ta, id_div) { // setze alle Event-Handler
var ta = dom.get_node(id_ta),
form = dom.get_node(id_form),
inp = form.getElementsByTagName('input'), i;
for (i = 0; i < inp.length; i += 1) {
if (inp[i].type === 'text') {
inp[i].onkeyup = function () { return on_select_change(false, id_form, id_ta, id_div, false); };
}
} ta.onkeyup = function () { return on_select_change(false, false, id_ta, id_div, false); }
}
Das Setzen der Event-Handler erfolgt, wenn die Seite geladen ist mit
window.onload = function () {
css.init('FORM_BORDER_STYLES','TA_BORDER_STYLES','DIV_BORDER_STYLES');
}
XHTML-Tags können mit Hilfe des tag-style-Attribut css-Properties erhalten, etwa
<h1 style="display:inline;background-color:#229;color:#fff;border:1px solid #888;text-shadow:none;box-shadow:none;margin:0;padding:0;"> Titel </h1> <p style="display:inline;font-size:small;"> Lorem ipsum dolor ... </p>
ergibt:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed euismod nunc. Vestibulum eu nulla nec lacus hendrerit lobortis. Nam urna neque, pharetra id tempus vel, sodales consequat odio.
Seiten-interne Styles werden im (head)-Tag der Seite definiert. Beispiel:
<style type="text/css" media="screen">
body {
background-color: #e8e0d8; color: #448;
font: bold 0.9em/0.95em "Times New Roman", serif;
padding: 0.5em 2.5em 0.5em 2.5em;
margin: 0.0em 2.5em 0.0em 2.5em;
}
p {
background: #8b4513; color:#fff;
padding: 0.5em 0.5em 0.5em 2.5em;
margin: 0.0em 2.0em 0.0em 2.0em;
border: 1px solid #0af;
}
</style>
Eine externe CSS-Style-Datei mycss.css enthält die CSS-Anweisungen, aber nicht die <style ...> ...</style> -Klammerung.
Der mycss.css-Code wird mit im head)-Tag mit Hilfe von <link type="text/css" rel="stylesheet" href="mycss.css" /> includiert.
/* Beispiel: externes CSS-Dokuments */
body {
background-color: #e8e0d8; color: #448;
font: bold 0.9em/0.95em "Times New Roman", serif;
padding: 0.5em 2.5em 0.5em 2.5em;
margin: 0.0em 2.5em 0.0em 2.5em;
}
p {
background: #8b4513; color:#fff;
padding: 0.5em 0.5em 0.5em 2.5em;
margin: 0.0em 2.0em 0.0em 2.0em;
border: 1px solid #0af;
}
.braun {background:#fff; color:#8b4513;}
a {
display: inline;
font: bold 0.8em/0.9em "Times New Roman", serif;
background: #800; color: #fff;
border: 4px outset #0af;
margin: 0.0em 0.1em 0.0em 0.1em;
padding: 0.0em 0.1em 0.0em 0.1em;
}
a:link { text-decoration:none;}
a:visited { text-decoration:none;}
a:focus { text-decoration:none;}
a:hover { text-decoration:underline; background:#e8e0d8 }
a:active { text-decoration:none;}
Wie bei einer Uhr folgen 0Uhr 3Uhr 6Uhr 9Uhr, was oben rechts unten links bedeutet. Beispiele:
padding: 0.2em 1.0em 0.2em 1.0em; /* padding-Werte dürfen nicht negativ sein */ margin: -0.2em 0.1em -0.2em 0.1em;
Beispiel margin-left und padding-left für ul, li:
Default Default
bei msie: bei mozilla, opera:
------------- --------------
| | | |
2.5em |ul | 0|ul |
| | | |
| -----------| | ------|
|0|LI | | 2.5em |LI |
| -----------| | ------|
| |
| |
Vierlfach ist die em-Angabe günstig (Vergrößerungsinvarianz).
| em-px-Umrechnung: | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| em: | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 1.6 | 1.7 | 1.8 | 1.9 | 2.0 |
| px: | 8.0 | 9.0 | 11.0 | 12.0 | 14.0 | 16.0 | 17.0 | 19.0 | 20.0 | 22.0 | 24.0 | 25.0 | 27.0 | 28.0 | 30.0 | 32.0 |