CSS-Einführung Was meint "Cascading Style Sheets"?

W3C: "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents".

Zu HTML 5 gehören Spezifikationen und Webtechnologien.
Übersicht zu Spezifikationen mit HTML5
  HTML5 Spezifikations-Übersicht
Zu CSS3 gehören Spezifikationen und Webtechnologien.
Übersicht zu Spezifikationen mit HTML5
  CSS3 Spezifikations-Übersicht

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 )

Informationen, Kunst, Ästetik ( Allgemeines ) ... für das Auge

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  :|

Cascading Style Sheets ( einführend ) Stilvorlagen

Mit Hilfe von HTML kann der Inhalt ( Content ) einer Webseite strukturiert werden. Es gibt Tags für ...

Zu HTML 5 gehören Webtechnologien.
Übersicht zu Spezifikationen mit HTML5
  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 als deklarative Sprache Was ist das?

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."

CSS3-Übersicht Taxometrie und Status

Beschreibung aller CSS Spezifikationen ( www.w3.org )


XHTML-Renderprozess mit CSS Wie läuft das?

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".

Cross-Browser-Lösungen Was meint CSS-Reset bzw. Normalize?

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 ).

Wie kann die CSS-Source validiert werden? W3C-CSS-Validator

Hier ist der W3C-CSS-Validator: CSS-Source validieren ◥

Wie ist eine CSS-Deklaration aufgebaut? Selectoren, Property, Value

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).
Welche CSS-Selektoren gibt es? W3C

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 und CSS -Selektoren ECMAScript

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;
}
Welche media-groups / media-types / media-queries gibt es?

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
print 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
⁝ Was sind Default-Styles? Browserinterna
Einige Default-Werte (Browser: msie)

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;
Einige Default-Werte (Browser: mozilla)
  
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;
Einige Default-Werte (Browser: opera)
  
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;
Wie können die Default-Werte ausgelesen werde?
Die jQuery-Bibliothek wird benötigt. Die obigen CSS-default-Werte wurden etwa wie folgt ermittelt:
<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>
Beispiel: Wie werden CSS-Farben angegeben? #fffafa, rgb( 255, 250, 250)

Es gibt CSS-Bezeichnungen. So entspricht z.B. die benannte Farbe snow der "rrggbb"-Schreibweise: #fffafa oder der Schreibweise: rgb( 255, 250, 250)

Beispiel: Wie können Farben ausgewählt werden? Farbnamen

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
}
}

Initialisierung bei window.onload

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');
}
Beispiel: CSS-Styles (Tag-intern) Wo kommt der CSS-Code hin?

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:


Titel

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.

Beispiel: CSS-Styles (Seiten-intern) Wo kommt der CSS-Code hin?

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>
Beispiel: CSS-Styles ( externe .css-Datei ) Wo kommt der CSS-Code hin?

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;}
Beispiel: Kann margin und padding kompakt geschrieben werden?

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: Was meintmargin und padding bei einer ul-Liste?
 
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    |
|  -----------|         |        ------|
|                       |
|                       |
Beispiel: Was bedeutet em und px?

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