TIPS
by
NETtMAN

CSS Schlüsselwörter - eine Gesamt-Übersicht als Bibliothek


 
 
 
 
 
 
 
 
 

Elemente, Klassen für Elemente und ID´s für Elemente



Die zu stylenden Elemente sind die HTML-TAG´s. Diese jedoch können mit einer Klasse oder einer Identifikation (ID) eingeschränkt werden. Dadurch werden dann z. B. nicht gleich alle LINK´s gestylt, sondern nur diejenigen, welche mit dieser Klasse oder / und ID gekennzeichnet sind. Alle LINK´s zu vereinheitlichen ist meist nicht sinnvoll. Daher können Klassen oder ID´s eine Sonderregelung für bestimmte TAG´s erwirken. Beispiel :

<a href="#" class="rot rahmen" id="nurdieser"> Einzigartig </a>

Die Klasse, welche auch in anderen TAG´s verwendet werden kann, und die ID, welche nur einmal eingesetzt werden kann, werden so ähnlich definiert wie das Element selbst. Beachten Sie den Punkt (Klasse), bzw. die Raute (ID) vor den frei erfundenen Bezeichnungen. Beispiel :

.rot
{
color:red;
}
.rahmen
{
border:3px inset red;
padding: 5px;
}
#nurdieser
{
background-color:yellow;
}

Nur dieser eine LINK sieht so aus : Einzigartig

Beachten Sie : Jedem Element können mehrere Klassen zugewiesen werden. Sie werden im "class"-Attribut, durch Leerzeichen voneinander getrennt, eingesetzt. Klassen-Bezeichnungen werden frei, möglichst informell, benannt. Ebenso werden auch ID´s frei benannt mit Bezeichnungen Ihrer Wahl. Die Bezeichnungen müssen jedoch mit einem Buchstaben beginnen, dürfen danach Ziffern enthalten und keinerlei Sonderzeichen ausser dem Unterstrich : "_".


 
 
 
 
 
 
 
 
 Elemente sind alle HTML-TAG´s. Alle HTML-Tag´s sind im folgendem aufgelistet :

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd , del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object , ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub , sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var

TAG´s werden im Gegensatz zu Klassen und ID´s im Klartext benannt. Etwa wie folgt :

a
{
text-decoration:none;
}
Dieser Eintrag bewirkt, das a-TAG´s, also LINK´s, ihre übliche Unterstreichung verlieren. Sie könnten z. B. eine Klasse hinten dran schreiben, so das nur die LINK´s ihre Unterstreichung verlieren, die ausser Ihrer Anwesenheit ein Attribut class="Klasse" haben. Beispiel :

a .Klasse
{
text-decoration:none;
}

Und - ausserdem können auch noch weitere Einschränkungen benannt sein. Beispiel :

a .Klasse #Identifikation
{
text-decoration:none;
}

Dieser Eintrag bedeutet : alle LINK-TAG´s (a), die ein Attribut class="Klasse" und ein Attribut id="Identifikation" in sich tragen. Aber eben auch nur diese. Zusätzlich kann auch eine Folge von TAG-Bezeichnungen aufgeführt werden. Dabei ist zu beachten, das deren Verschachtelung im HTML-Code der Reihenfolge im CSS entspricht. TAG´s werden oft mit anderen TAG´s gefüllt und diese anderen TAG´s sind oft wiederum gefüllt mit noch anderen TAG´s. Beispiel :

menu div span em a
{
text-decoration:none;
}

Diese Reihenfolge bedeutet : Die a-TAG`s welche sich in einem em-TAG befinden, der sich wiederum in einem span-TAG befindet, der sich wiederum in einem div-TAG befindet, der sich wiederum in einem menu-TAG befindet, werden gestylt. Und nur diese. Gewöhnliche menu-TAG´s, die keinen div-TAG enthalten, sind nicht betroffen.


 
 
 
 
 
 
 
 
 

Attribut - Selektor



Die Liste möglicher Attribute ist weiter unten aufgeführt.
Weitere Einschränkungen, außer Klassen oder ID´s, können auf "Attribute" in den TAG´s filtern. Ein solcher Filter sieht wie wolgt aus :

[title]

Beispiel :

span a[title] {color:green;}

die "a" TAG´s innerhalb von "span" TAG´s werden nach dem vorhandensein eines Attributes "title" gefiltert. Nur wenn ein Title-Attribut angegeben ist, ändert sich die Textfarbe des LINK´s zu : Grün.
Das HTML dazu sieht also so aus :
<span> <a title="Ich bin der Titel" href="#">LINK</a> </span> EFFEKT : LINK

weiteres Beispiel :

span a[title="Ich bin der Titel"] {color:green;}

Dieser Filter wird nur dann wirksam, wenn das Title-Attribut exakt dem genannten Wert : "Ich bin der Titel" entspricht.

Glücklicherweise läßt sich der Wert des Attributes auch noch aufsplitten in : "beginnt mit", "enthält dieses Wort", "enthält diese Zeichen" und "endet mit". Beispiele :

span a[title ^ ="Ich"] {color:green;}
span a[title ~ ="bin"] {color:green;}
span a[title * ="d"] {color:green;}
span a[title * ="er"] {color:green;}
span a[title $ ="Titel"] {color:green;}


 
 
 
 
 
 
 
 
 

Wenn & Aber´s - Pseudo-Elemente und Pseudo-Klassen



Eine ganz andere Art von Selektoren sind die PSEUDO´s. Diese berücksichtigen "Teile von Elementen", "Zustände" und/oder auch "Bedingungen". Es können mehrere von ihnen an den Selektor angefügt werden. In so einem Fall werden Sie nur wirksam, wenn alle zutreffen.

Beispielsweise gibt es das Teilelement : ":first-letter" und den Zustand : ":hover" und die Bedingung : ":not()". Das Style-Statement :

body p:first-letter:hover:not(div) {color:green;}

lässt nur das erste Zeichen eines Absatzes in grüner Farbe erscheinen, wenn sich der Mauszeiger darüber befindet und wenn es sich nicht innerhalb eines div-TAG´s befindet. Kompliziert ? Eigentlich nicht. Man müsste nur wissen, welche Elemente mit Teil-PSEUDO´s versehen sind, welche allgemeinen Pseudo-Klassen (Zustände) es gibt und welche Bedingungen als PSEUDO´s definiert sind.

Teil-Pseudo-Klassen gibt es für den a-TAG, den p-TAG und den input-TAG.
Der a-TAG kann folgende vier Werte (in genannter Priorität) verstehen :

a
:link {color: blue;}
a
:visited {color:red}
a
:hover {color:red}
a
:active {color:red}

:visited soll vor :hover und :active benannt sein, weil CSS diese Eigenschaft zuletzt umsetzt und dabei die anderen Werte überschreibt. Nennt man also :hover und :active hernach, so überschreiben diese wiederum :visited wegen des "cascading" : die letzte Änderung ist die gültige.

Der p-TAG (Absatz bei Texten) kann noch einige mehr Teile Pseudieren :
:hover / :before / :after / :first-letter / :first-line / :last-line / :first-child / :last-child

Der input-TAG hat folgende speziellen Pseudo-Elemente :
:enabled / :disabled / :checked

Alle Elemente können diese Klassen auswerten :

:nth-child() / :first-of-type / :last-of-type / :target / :before / :after / :hover

Wobei innerhalb der, obig leer gesetzten Klammern, ein mathematischer Ausdruck eingesetzt wird. Der Ausdruck kann even oder odd lauten, er kann einfach eine Nummer sein und er kann auch jedes "n´te + x" Element bezeichnen. Beispiele :

li:nth-child(3n + 4) {border: 1px solid gray;}
Jedes dritte im li-TAG enthaltene Element, ab dem vierten der Elemente, erhält einen grauen Rahmen.

li:nth-child(4) {border: 1px solid gray;}
Element Nummer : 4 innerhalb eines li-TAG´s erhält einen grauen Rahmen.

li:nth-child(odd) {border: 1px solid gray;}
Jedes Element mit einer ungeraden Nummer innerhalb eines li-TAG´s erhält einen grauen Rahmen.

li:first-of-type {border: 1px solid gray;}
Der erste li-TAG, innerhalb von li-TAG´s, erhält einen grauen Rahmen.

li:last-of-type {border: 1px solid gray;}
Der letzte li-TAG, innerhalb von li-TAG´s, erhält einen grauen Rahmen.

form:target {border: 1px solid gray;}
Der form:tag mit einem Attribut : target="...", erhält einen grauen Rahmen. Zugegeben, ein ":target" macht nur Sinn bei form-, a-, frame- und iframe-TAG´s. Aber : tatsächlich können Sie den überall einsetzen.

p:before {content: "irgendein Text";}
p-TAG´s erhalten, vor ihrem mittels HTML eingesetztem Inhalt (evtl. nichts), den zusätzlichen Inhalt : "irgendein Text". Weitere Eigenschaften können folgen.

p:after {content: "irgendein Text";}
p-TAG´s erhalten, nach ihrem mittels HTML eingesetztem Inhalt (evtl. nichts), den zusätzlichen Inhalt : "irgendein Text". Weitere Eigenschaften können folgen.

Der "content" kann Sonder- und Steuerzeichen beinhalten. Diese müssen zuvor ´escaped´ werden mit dem Zeichen "\". Auf dieses Zeichen folgt dann ein Hexa-dezimaler Wert entsprechend der Norm : Unicode. Als HTML-Entity werden die Sonderzeichen nur erkannt, wenn das Text-Dokument auf der Basis "UTF-8" gespeichert wurde und ein entsprechender meta-TAG dies dem Browser signalisiert.


Elemente können ausserdem mit diesen Strukturpseudoklassen selektiert werden :

* / :root / :hover / : empty: / :not()

"*" steht für alle Elemente. ":root" bezeichnet das oberste eröffnende Element im gesamten HTML-Dokument. ":hover" kennzeichnet das Element, über welchem sich gerade der Mauszeiger befindet. ":empty" steht für Tabellenzellen ohne Inhalt. Mit ":not()" werden Elemente definiert, welche nicht betroffen sein sollen. Beispiel:

html:not(a#id, p, table.dunkel, form) {display:block;}
Dies bedeutet : Innerhalb des gesamten HTML werden weder a-TAG´s mit der ID : "id", noch p-TAG´s, noch table-TAG´s mit der Klasse : "dunkel" und auch keine form-TAG´s mit der Darstellungsart : "block" versehen. Alle anderen Elemente sehr wohl. Oder, etwas einfacher :

:not(p) {display:block}
Bedeutet : Ausser p-TAG´s wird alles andere mit der Darstellungsart "block" versehen.


 
 
 
 
 
 
 
 
 

Eigenschaften nach Bezug vergeben - Eltern, Kinder oder Nachbarn



An dieser Stelle sollten auch gleich die Bezüge geklärt werden. Im obigen Beispiel wurde durch Trennung der Bezeichnungen mit einem Leerzeichen der Bezug : "Inhalt" gesetzt. Es gibt auch die Bezüge "Nachbar-direkt", "Nachbar-alle", "Kind" und "Alle". Diese Bezüge nennen sich auch : Kombinatoren. "Eltern" kann nicht eingesetzt werden, denn dann müsste CSS rückwärtig wirksam sein, wes aber nun Mal nicht so ist. Statt "Eltern" anzusprechen kann man allerdings das HTML umbauen, so das Kind-Elemente in der Hierarchie des HTML zu Eltern-Elementen werden.Wie ist denn überhaupt die Hierarchie des HTML beschaffen?

HTML-Elemente, die einen Inhalt aufnehmen können, bestehen immer aus einem Öffnendem und einem schließenden TAG derselben Art: Beispiel :

<body> _ </body>

Man beachte das Abschluß-Zeichen : "/". Innerhalb des TAG´s, also zwischen Öffnen und Schließen befindet sich diverser _-Inhalt. Ein NACHBAR-TAG ist ein weiterer TAG neben dem abgeschlossenem TAG im Beispiel oben. Angenommen es wäre ein LINK, so würde das HTML wie folgt aussehen :

<body> _ </body> <a> _ </a>

Ein KIND-TAG ist ein weiterer TAG welcher sich innerhalb des TAG´s als _-Inhalt befindet. Denn - der Inhalt von TAG´s kann sowohl aus Texten als auch aus weiteren TAG´s bestehen. Solche TAG´s nennt man auch Untergeordnete TAG´s - sie sind dem tragendem Element untergeordnet. Ausserdem können sie einige Eigenschaften erben. Ob sie erben, hängt von 3 Komponenten ab : Ist das tragende Element Vererbungsfähig ?, ist das Kind-Element Erbannahmefähig ? und : ist die zu vererbende Eigenschaft überhaupt vererbbar ? Dies ist nämlich z. B. nicht der Fall, wenn es sich bei der Eigenschaft um ein Hintergrundbild handelt. Wäre ja auch furchtbar, wenn alle inneren folgenden Elemente mit diesem speziellem Hintergrundbild herumlaufen müssten. Anders bei der Eigenschaft "display". Eine Darstellungsart kann sich auf KIND-TAG´s übertragen, kann "vererbt" werden. Das HTML für ein Kind-Element sieht wie folgt aus :

<body> _ <a> _ </a> </body>

Das a-TAG befindet sich innerhalb des body-TAG´s und wird deshalb Kind-Element (child) genannt.

Diese Unterscheidung kann ebenfalls als Selektor für Elemente angegeben werden. Dies geht nicht nur mit dem Pseudo-Element : ":nth-child()", sondern auch mit Hilfe von Signal-Zeichen (Kombinatoren), nämlich :

*
+
>
~

Beispiel :

a * input {width: 99px;} "alle input-TAG´s (Kinder) innerhalb eines a-TAG´s"
* + * {width: 99px;} "alle TAG´s denen irgendein direkt benachbartes TAG vorausgeht."
a + input {width: 99px;} "der direkt benachbarte input-TAG eines a-TAG´s"
a ~ input {width: 99px;} "alle benachbarten input-TAG´s als Kinder (innerhalb) eines a-TAG´s"
a > input {width: 99px;} "alle input-TAG´s (Kinder) innerhalb eines a-TAG´s" identisch mit dem "*"-Beispiel

Eltern-Kombinatoren sind nicht vorgesehen. Jedoch, wie angedeutet, implementierbar. Man kann das HTML evtl. umkrempeln.
Beispiel :

<div> oben <br> <span> unten </span> </div>

Ergibt :
oben
unten


Wenn nun erreicht werden soll, das bei Überfahren des Textes "unten" mit der Maus, der Text : "oben" aufleuchtet, müsste ein ":hover" auf den "span" und die Eigenschaft "{background-color:pink;}" mit dem Kombinator ">" auf den "div" gesetzt werden. Leider funktioniert das nicht, weil das Eltern-Element "div" vor dem "span" gesetzt wurde. Es ist weder ein folgender Nachbar noch Kind. Es ist nicht kaskadierend. Es wird einfach nicht mehr vom CSS berücksichtigt.

Kehrt man das HTML um und positioniert die Anzeige des "möchte gern Eltern-Element" weiter nach oben, kann das Ziel, wenigstens augenscheinlich, erreicht werden. Beispiel :


unten
oben


<style>
.hoeher {margin-top:-36px;}
.unten:hover div {background-color:pink;}
</style>
<span class="unten"> unten
<div class="hoeher"> oben </div>
</span>


 
 
 
 
 
 
 
 
 

Welche Eigenschaften gibt es denn ?



Schrift/Text :
color, line-height, font, font-family, font-size, font-weight, font-style, font-variant, letter-spacing, text-indent, text-align, text-decoration, text-transform, text-shadow, text-overflow, word-spacing, white-space, vertical-align

Listen :
list-style (-image, -position, -type)

Tabellen :
border-collapse, border-spacing, caption-side, empty-cells, table-layout

Darstellung :
display, visibility, overflow (-x, -y), opacity, box-sizing, clip, width, min-width, max-width, height, min-height, max-height, backface-visibility, transform (-origen, -style), perspective (-origin)

Textfluß :
float, clear

Positionierung :
position, left, top, right, bottom, z-index

Außen-/Innenabstand :
margin, padding, margin-left (-top, -right, -bottom), padding-left (-top, -right, -bottom)

Rahmen/Konturen :
border (-color, -style, -width, -radius, -image), outline(-color, -style, -width, -offset)

Hintergrund :
background (-color, -image, -size, -position, -clip, -repeat, -attachement, -origin)

Generierte Inhalte :
content, quotes, counter (-reset, -increment)

User Interface :
cursor, resize

Animationen :
transition (-property, -duration, -timing-function, -delay), @keyframe {...}, animation-"Keyframe-Bezeichnung", animation (-direction, -timing-function, -iteration-count, -delay, -duration)
 
 
 
 
 
 
 
 
 

Wertangaben können nicht immer als Zahl angegeben werden.



Für, z. B., font-family muss eine Bezeichnung gesetzt werden. Weitere Konventionen folgen in Listenform, wobei die einzelnen optionalen Werte durch Kommata getrennt sind. "Z" steht für einen Zahl- oder Prozentwert, "#" steht für einen Farbwert :

color: Farbe (#)
font-family: Schriftart ("Courier New", Arial, Verdana, "Times New Roman", "Trebuchet MS", Impact, "Comic Sans MS", Georgia, Tahoma)
font-size: Schriftgröße (Z, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger)
font-style: Schrift-Stil ( italic, oblique, normal)
font-variant: Kapitälchen (small-caps, normal)
font-weight: Schriftstärke (bold, bolder, lighter, normal)
letter-spacing: Zeichenabstand (Z, normal)
text-indent: Texteinzug (Z)text-align: Ausrichtung (left, right, center, justify)
text-decoration: Textdekoration (none, underline, overline, line-through, blink)
text-transform: Texte transformieren (capitalize, uppercase, lowercase, none)
text-shadow: Schattenwurf [Farbe Versatz-X Versatz-Y Unschaerfe-Radius] (# Z Z Z)
word-spacing: Wortabstand (Z, normal)
white-space: Textumbruch steuern (normal, pre, nowrap, pre-wrap, pre-line)
vertical-align: Vertikale Ausrichtung innerhalb einer Zeile (Z, baseline, sub, super, top, text-top, middle, bottom, text-bottom)
list-style-image: Listengrafik (url(''), inherit, none)
list-style-position: Listenzeichen einrücken (outside, inside, inherit)
list-style-type: Listenart (none, circle, disc, decimal, lower-roman, upper-roman, decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian, inherit)
border-collapse: Rahmen bei Tabellenzellen verbinden (collapse, seperate)
border-spacing: Rahmenabstand bei Tabellenzellen (Z)
caption-side: Position der Tabellenüberschrift (top, bottom)
empty-cells: Umgang mit leeren Tabellenzellen (show, hide)
table-layout: Darstellung der Breite von Tabellenzellen (auto, fixed)
vertical-align: Vertikale Ausrichtung innerhalb einer Zelle (baseline, top, middle, bottom)
display: Anzeigeart von Elementen ( none, block, inline, inline-block, list-item, run-in, inline-table, table, table-caption, table-cell, table-column, table-columns-group, table-footer-group, table-header-group, table-row, table-row-group)
visibility: Sichtbarkeit von Elementen (visible, hidden, collapse)
width: Breite (Z)
height: Höhe (Z)
overflow:/overflow-x:/overflow-y: Behandlung von übergroßem Inhalt (auto, hidden, scroll, visible)
opacity: Transparenz/Deckkraft von Elementen (zwischen 0 und 1 als Nachkommazahl)
float: Element umfließen lassen (left, right, none)
clear: Umfließen abbrechen (left, right, both, none)
position: Positionierungsart (static, relative, absolute, fixed)
left/top/right/bottom: Position/Ausrichtung (Z) zuvor muß eine Positionierungsart angegeben sein
z-index: Rang/Überlappung (Z) - kann negativ sein - je höher um so obener
margin: Außenabstand/Links/Oben (Z Z)
margin: Außenabstand/Links/Oben/rechts/Unten (Z Z Z Z)
margin-left: (Z)
margin-top: (Z)
margin-right: (Z)
margin-bottom: (Z)
padding: Innenabstand/Links/Oben (Z Z)
padding: Innenabstand/Links/Oben/rechts/Unten (Z Z Z Z)
padding-left: (Z)
padding-top: (Z)
padding-right: (Z)
padding-bottom: (Z)
border: (Z) (0=ausblenden)
border: (Z # Stil)
border-color/border-left-color/border-top-color/border-right-color/border-bottom-color: (#)
border-style/border-left-style/border-top-style/border-right-style/border-bottom-style: (none, hidden, solid, dashed, dotted, double, groove, ridge, inset, outset)
border-width/border-left-width/border-top-width/border-right-width/border-bottom-width: (Z)
border-radius/border-left-radius/border-top-radius/border-right-radius/border-bottom-width/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius/border-top-left-radius: (Z)
border-image: Bilder als Rahmen verwenden (url(''), none)
outline-color/outline-left-color/outline-top-color/outline-right-color/outline-bottom-color: (#)
outline-style/outline-left-style/outline-top-style/outline-right-style/outline-bottom-style: (none, solid, dashed, dotted, double, groove, ridge, inset, outset)
outline-width/outline-left-width/outline-top-width/outline-right-width/outline-bottom-width: (Z)
outline-offset: (Z)
background: Kurzschreibweise für alle Hintergrundoptionen - Beispiel:
background: #EEE fixed url('Pfad/Datei.suffix') center repeat cover;
background-color: Hintergrundfarbe (#)
background-attachment: Scroll-Verhalten des Hintergrunds (scroll, fixed, inherit)
background-image: Hintergrundbild (url(''), transparent, inherit)
background-position: Position des Hintergrundbildes (Z, top, right, bottom, left, center, inherit)
background-repeat: Wiederholung des Hintergrundbildes (repeat, repeat-x, repeat-y, no-repeat, inherit)
background-size: Größe des Hintergrundbildes (Z, cover, contain)
resize: Vom User in der Größe Veränderbar (none, both, horizontal, vertical, inherit)
cursor: url(''), auto, default, inherit, crosshair, pointer, move, text, wait, help, n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize
Die "-resize" Angaben ergeben Pfeil-Icon´s in diverse Richtungen. Natürlich in amerikanischer Sprache. "n" steht beispielsweise für "Nord", "e" für "east".
 
 
 
 
 
 
 
 
 

Wertangaben für Farben :



Farbwerte mit einer Raute am Anfang bedeuten eine Angabe als Hexadezimalwert. Feinjustierung - 6-stellig, 2 für Rot, 2 für Grün, 2 für Blau. Grobjustierung - 3-stellig, je eine für Rot, Grün und Blau.

Farben können auch als Dezimal- oder Prozentwerte angegeben werden. Optional sogar mit Angabe einer Transparenz-Stärke (Durchsichtigkeit). Beispiele: color: rgb (Z, Z, Z); / color: rgba(Z, Z, Z, Z); Die Wertangaben (Z) können als Dezimalzahl zwischen 0 und 255 oder als Prozentzahl genannt werden. Im Falle einer Transparenz schwankt die Wertangabe zwischen 0 und 1 als Nachkommazahl oder 1 und 100 als Prozentzahl gefolgt von dem Prozentzeichen.

Desweiteren können Farben über amerikanische Schlüsselwörter angegeben sein. Beispiel: black, white, green. Es folgt eine Liste mit solchen Schlüsselwörtern nebst zugehörigen Hexadezimalwerten. In einigen Fällen lassen sich die Farbangaben nur schwer lesen, insofern diese zu wenig Kontrast zur Hintergrundfarbe bieten. Klicken Sie dann bitte darauf doppelt oder gar dreifach, denn, dann wird dieser Text mit einer Markierung unterlegt und hebt sich dadurch vom Hintergrund ab.

#f08080 lightcoral
#bc8f8f rosybrown
#cd5c5c indianred
#ff0000 red
#b22222 firebrick
#a52a2a brown
#8b0000 darkred
#800000 maroon
#ffe4e1 mistyrose
#fa8072 salmon
#ff6347 tomato
#e9967a darksalmon
#ff7f50 coral
#ff4500 orangered
#ffa07a lightsalmon
#a0522d sienna
#fff5ee seashell
#d2691e chocolate
#8b4513 saddlebrown
#f4a460 sandybrown
#ffdab9 peachpuff
#cd853f peru
#faf0e6 linen
#ffe4c4 bisque
#ff8c00 darkorange
#deb887 bustywood
#faebd7 antiquewhite
#d2848c tan
#ffdead navajowhite
#ffebcd blanchedalmond
#ffefd5 papayawhip
#ffe4b5 mocassin
#ffa500 orange
#f5deb3 wheat
#fdf5e6 oldlace
#fffaf0 floralwhite
#b8860b darkgoldenrod
#daa520 goldenrod
#fff8dc cornsilk
#ffd700 gold
#fffacd lemonchiffon
#f0e68c khaki
#eee8aa palegoldenrod
#bdb76b darkkhaki
#fffff0 ivory
#ffffe0 lightyellow
#f5f5dc beige
#fafad2 lightgoldenrodyellow
#ffff00 yellow
#808000 olive
#6b8e23 olivedrab
#9acd32 yellowgreen
#556b2f darkolivegreen
#adff2f greenyellow
#7fff00 chartreuse
#7cfc00 lawngreen
#8fbc88 darkseagreen
#f0fff0 honeydew
#98fb98 palegreen
#90ee90 lightgreen
#00ff00 lime
#32cd32 limegreen
#228b22 forestgreen
#008000 green
#006400 darkgreen
#2e8b57 seagreen
#3cb371 mediumseagreen
#00ff7f springgreen
#f5fffa mintcream
#00fa9a mediumspringgreen
#66cdaa mediumaquamarine
#7fffd4 aquamarine
#40e0d0 turquoise
#20b2aa lightseagreen
#4bd1cc medium turquoise
#f0ffff azure
#e0ffff lightcyan
#afeeee apleturquoise
#00ffff aqua
#00ffff cyan
#008b8b darkcyan
#008080 teal
#2f4f4f darkslategray
#5f9ea0 cadetblue
#b0e0e6 powderblue
#add8e6 lightblue
#008fff deepskyblue
#87ceeb skyblue
#87cefa lightskyblue
#4682b4 steelblue
#f0f8ff aliceblue
#1e90ff dodgerblue
#778899 lightslategray
#708090 slategray
#b0c4de lightsteelblue
#6495ed cornflowerblue
#4169e1 royalblue
#f8f8ff ghostwhite
#e6e6fa lavender
#0000ff blue
#0000cd mediumblue
#00008b darkblue
#191970 midnightblue
#0000bd navy
#6a5acd slateblue
#483d8b darkslateblue
#7b68ee mediumslateblue
#9370db mediumpurple
#822be2 blueviolet
#4b0082 indigo
#9932cc darkorchid
#9400d3 darkviolet
#ba55d3 mediumorchid
#d8bfd8 thistle
#dda0d0 plum
#ee82ee violet
#ff00ff fuchsia
#ff00ff magenta
#8b008b darkmagenta
#800080 purple
#da70d6 orchid
#c71585 mediumvioletred
#ff1493 deeppink
#ff69b4 hotpink
#fff0f5 lavenderblush
#db7093 palevioletred
#dc143c crimson
#ffc0cb pink
#ffb6c1 lightpink
#ffffff white
#fffafa snow
#f5f5f5 whitesmoke
#dcdcdc gainsboro
#d3d3d3 lightgray
#c0c0c0 silver
#a9a9a9 darkgray
#808080 gray
#696969 dimgray
#000000 black
ActiveBorderAktiver Fensterrahmen
ActiveCaptionHintergrundfarbe der aktiven Titelleiste
AppWorkspaceHintergrund der Anwendung
BackgroundDesktop-Farbe
ButtonFaceHintergrundfarbe für alle Schaltflächen
ButtonHighlightHeller Schatten für alle Schaltflächen
ButtonShadowDunkler Schatten für alle Schaltflächen
ButtonTextTextfarbe von Schaltflächen
CaptionTextTextfarbe der aktiven Titelleiste
HighlightHintergrund markierter Elemente
HighlightTextTextfarbe markierter Elemente
InactiveBorderInaktiver Rahmen
InactiveCaptionHingergrundfarbe einer inaktiven Titelleiste
InactiveCaptionTextTextfarbe einer inaktiven Titelleiste
InfoBackgroundHintergrund eines Tooltips
InfoTextTextfarbe eines Tooltips
MenuMenü-Hintergrund
MenuTextTextfarbe eins Menüs
WindowHintergrund eines Fensters
WindowFrameFarbe des Fenserrahmens
WindowTextTextfarbe eines Fensters

 
 
 
 
 
 
 
 
 

Was bedeuten "px", "%", "em", "#", "url" u.s.w.?



px, %, em, rem, ex, cm, mm, in, pt, pc, deg, rad, url(...), #000 - #FFF, #000000 - #FFFFFF, Farbnamen

"rem" ist eine Prozent-artige Angabe auf Basis einer Komma-zahl, wobei "1-komma-null" 100% entspricht. Sie bezieht sich auf die Größe des ROOT-Elementes (das Element des HTML welches zuoberst gesetzt wurde)
"em" ist ebenso eine Prozent-artige Angabe auf Basis einer Komma-zahl, wobei "1-komma-null" 100% entspricht. Sie bezieht sich, in bestimmten Fällen, auf die Ausmaße des Eltern-Elementes (width, right, margin, padding, font-size, text-indent), (line-height : bezieht sich auf die jeweilige Textgröße (font-size)).

PX (px) ist vermutlich die am häufigsten verwendete Einheit. Sie steht für Pixel und die sind die kleinstmöglichen Punkte aus denen sich das jeweilige Bild auf dem Monitor zusammensetzt. Eher für die Druckausgabe bestimmt, sind die Einheiten "cm, mm, pt, pc" = "Zentimeter, Millimeter, Points, Picas". Die Druckausgabe kann von CSS völlig anders gestaltet werden, als die Bildschirmausgabe. Für solche Besonderheiten des CSS greift eine der sogenannten @-Regeln (AT-Regeln).

In einigen Fällen können Daten aus einer externen Quelle als Wert angegeben werden. Beispielsweise werden Hintergrundbilder hinzugeladen. Da soll der Browser irgendwoher wissen, wo die Daten für diese Bilder sind. Es wird ein Pfad, ein Name und eine Dateiendung benötigt. Hierfür wird immer url('') verwendet. Beispiel:

background-image: url('protokoll://pfad/dateiname.suffix');

14.6.16 19:29
 


bisher 0 Kommentar(e)     TrackBack-URL

Name:
Email:
Website:
E-Mail bei weiteren Kommentaren
Informationen speichern (Cookie)



 Smileys einfügen
Myblog.de website reputation  Seitenreport - Die SEO und Website Analyse  Quality monitored by qualidator.com   Daisypath Friendship tickers OpenOffice

 responsive menu
 rauf
  runter