Comelio Css Referenz Web

Cascading Stylesheets (CSS) —- Kurzreferenz
Grundlegende Syntax Links Fonts

selector {property: value;} Z.B.: Standardformatierung mit HTML-Redefinition: > font-family
body {background-color: #669900; a {color: red; Liste der Zeichensätze, die verwendet werden soll (Angabe der
} }
selector bestimmt, welchem HTML-Tag die Eigenschaft zugeordnet wird (z. B. body) Pseudoklassen Schriftart und/oder generischen Schriftfamilie - s. u.).
property ist
die Eigenschaft (z. B. Hintergrundfarbe) Pseudoklassen erlauben die Unterscheidung von Zuständen und Ereig- Schriftarten sind z. B. „Times New Roman“, „Arial“ „Trebuchet“.
value ist der Wert der Eigenschaft (z. B. grün) nissen. Links Können verschiedene Zustände haben (besucht, aktiv UsW.): Generische Familien sind Gruppen von Schriftarten mit ähnlichen
Eigenschaften:
a:link unbesuchter Link
CSS im HTML-Dokument a:visited besuchter Link
serif Schriftarten mit Serifen (z. B. „Times New Roman“,
Als Attribut-Stil (Inline-Formatierung) a:active aktiver Link, der gerade angeklickt wird „Garamond“, „Georgia“)
<body style=“background-color: #669900; “>
a:hover Link, auf dem gerade der Mauszeiger steht sans-serif Schriftarten ohne Serifen (z. B. „Verdana“, „Arial“,
<p style=“color:#ff0000;“>Ein Absatz in Rot</p> Beispiel: „Trebuchet“)

monospace Schriftarten mit einheitlicher Dickte, jedes Zeichen
<h1 style=“color:#ffffff;“>Eine weiße Überschrift</hl> a:link color: red;
{
text-decoration:none; benötigt denselben Platz (z. B. „Courier New“)

Intern im <head>-Bereich deklarieren
}
<style type=“text/css“> a:visited color: biacks {

Die Kombination der Angabe von Schriftarten und -familien ist
text-decoration:none; } Maßeinheiten möglich. Wenn die konkrete Schriftart nicht gefunden wird, greift
body {background-color: #669900;
a:active background-color: blue;
}
p {colöor: #ff0000; }
{
Eigenschaft: WC der Browser auf dieerste in der generischen Liste zurück.

hl {color: #ffffff;} text-decoration:none; }
pt Punkt, 1pt = 1/72 Inch hl {font-family: fantasy, “Brush Script“, serif;}

a:hover color:green;
{
Pica, 1pc = 12 Punkt
</style> pc > £font-style
text-. decoration:overline;} in Inch, 1in = 2,54 cm
Verweis im <head>-Bereich auf externe CSS-Datei Stile für Text-Elemente:
Millimeter
<link rel=“stylesheet“ type=“text/css“ href=“style.css“>
mm
cm Zentimeter
normal (kein Stil),
italic (kursiv), ob1ique (schräg).
Ein externes Stylesheet ist eine Textdatei mit der Dateierweiterung .css. em rel. zur Schriftgröße des Elements h2 {font-family: “Georgia“, “Times New Roman“,
ex rel. zur Höhe des Buchstaben serif; font-style: oblique;}
px Pixel, rel. zur Auflösung > £font-variant
Text % Prozent Auswahl zwischen normal (keine Kapitälchen) und smal1-caps
Tabellen und Listen (Kapitälchen). Besitzt die Schriftart keine Kapitälchen, wird der
text-indent
LES
>
Wert: Text in Großbuchstaben angezeigt.
Einzug der ersten Zeile:
p {text-indent: 25px;} border-spacing Längenangabe h3 {font-variant: small-caps;}
caption-side top, bottom
> text-align empty-cells show, hide Farben und Hintergründe > font-weight
bestimmt, wie fett ein Text dargestellt wird:
ELTA
Textausrichtung: 1e£ft (links), table-layout auto, fix
right (rechts), center (zentriert), justify list-style Werte für Eigenschaft: bold (fett), bolder (extra-fett), 1ight (extra-dünn), Werte von
(Blocksatz). list-style-image color Vordergrundfarbe (meist Schriftfarbe) 100 bis 900 (extra-dünn bis extra-fett)
pP
{text-align: justify;} list-style-position, background-color Hintergrundfarbe von Elementen h4 {£ont-weight: bold;}
list-style-type background-image Fügt ein Hintergrundbild ein
> text-decoration list-style-image none, url () (background-image: url (“bilder/bg.gif“);)
> font-size
Unterstreichen (under1 ine), Durchstreichen list-style-position inside, outside Schriftgröße (Angabe in verschiedenen Maßeinheiten möglich):
Standardmäßig wird das Bild im Browserfenster gekachelt
(1ine-through) oder „Überstreichen“ list-style-type none, circle, square h5 {font-size: 12px;}
(overline). disc, decimal, Eigenschaften von background- image h6 {font-size: 0.8em;}
{text-decoration: line-through; lower-alpha background-repeat kontrolliert die Wiederholung des Hintergrundbildes im Fenster. Werte sind: xx-sma11 (winzig), x-sma11l (sehr
pP }
Weitere mögliche
> letter-spacing
upper-alpha, .. klein), sma11 (klein), smaller (sichtbar kleiner als normal), medi-
Variation der Laufweite (Abstand zwischen Fepeab=xs horizontale Wiederholung des Bildes um (mittel), 1arge (groß), x-1arge (sehr groß), xx-1arge (riesig),
background-repeat:
den Buchstaben): Vertikale Wiederholung des Bildes larger (sichtbar größer als normal).
background-repeat: repeat-y;
p {letter-spacing: 6px;} background-repeat: horizontale u. vertikale Wiederholung des Bildes
repeat; > font-stretch
> text-transform background-repeat: no-repeat; keine Wiederholung des Bildes Schriftlaufweite: wider (weiter als normal), narrower (enger
Groß- /Kleinschreibung: capitalize (der
Farbangaben kontrolliert das Verhalten des Bildes beim Scrollen.
als normal), condensed (gedrängt), semi-condensed (halb
SEE
erste Buchstabe jedes Wortes wird groß Kackgröund-attachment gedrängt), extra-condensed (stark gedrängt), ult ra-condensed
geschrieben), uppercase (alle Buchstaben WA bi (extra-stark gedrängt), expand (geweitet), semi-/extra-/ultra-
werden groß geschrieben), 1owercase (alle #rrggbb Hexadezimale RGB-Angabe
background-attachment Scro11; das Bild ist nicht fixiert und scrollt mit der Seite
{
Hexadezimale RGB-Angabe,
:
expand (halb, stark/extra-stark geweitet)
Buchstaben werden klein geschrieben), #rgb background-attachment: fixed; das Bild ist an seinem Platz fixiert
z.B. #C09 anstelle von #cc0099
none (der
Text wird dargestellt, wie er in der
Farbnamen Positionierung des Bildes.
HTML-Datei steht) wie bei HTML background-position — freie
rgb (R,G,B) RGB-Werte dezimal Wertzuweisung erfolgt mithilfe von Koordinaten (als Prozentwert der Fensterbrei-
Die
> line-height (0-255,0-255,0-255) te, als feste Größen wie z.
B. Pixel oder Millimeter oder mit den Werten top
Zeilenabstand (Angabe in verschiedenen RGB-Anteile prozentual bottom (unten), center (zentriert), 1e£t (links).
(OBEN
Maßeinheiten möglich).
(0-100%, 0-100%, 0-100%) ion von Hintergr Aa haft, mit background
gl
> text-shadow background: #aadd99 url (”bilder/bg.gif”) no-repeat fixed right top;
Schattierung des Textes
terrashop.de
Gruppierung von Elementen - class Gruppierung von Elementen mit <span> Positionierung
Klassen dienen zur Zusammenfassung der Eigenschaften <span> ist
ein neutrales HTML-Element, das im Zusammenspiel mit CSS bestimm- position bestimmt, wie ein Element positioniert wird. Mögliche Werte sind:
mehrerer Elemente. ten Stellen im Text ein besonderes Erscheinungsbild verleihen kann. static (Element wird an einem festen Platz positioniert)
Formate für Klassen <p> absolute (Platzierung im Verhältnis zum Browserfenster)
<span class=“gruen“>Comelio</span> ist unser kleiner relative (relative Positionierung im Verhältnis zum Platz)
Eigenschaft: Wert:
<span class=“gruen“>grüner Drache</span>, fixed (Platzierung im Verhältnis zum Browserfenster, Position bleibt beim
Element.Klassenname {CSS-Eigenschaft: Wert;...}, der in eine Reihe von Kostümen durch unsere Scrollen fest)
HTML-Element z.
strongB.
<span class=“blau“>Verö ffentlichungen</span> geistert.
* .Klassenname {CSS-Eigenschaft: Wert;...}, </p> left, right, top, bottom - Positionen können in Prozent, fester Größe
* = alle HTML-Elemente
oder mit auto angegeben werden.
Dazugehöriges CSS:
span.gruen {color:green;} hl {position:absolute; top: 100px; left: 200px;}
.Klassenname {CSS-Eigenschaft: Wert;...}, #bild {position:absolute; bottom: 50px; right: 50px;}
‚klein in span.blau {color:blue;}
<p class="”klein”>...</p> overflow bestimmt die Darstellung des Inhalts, wenn der Platz in der Box nicht
ausreicht. Mögliche Werte sind:
{CSS-Eigenschaft: Wert;...},
#a in <div id="a">...</div> Identifikation von Elementen - id visible (gesamter Inhalt wird angezeigt, unabhängig von der Höhe der Box)
Jede darf innerhalb eines Dokuments nur einmal vergeben
ID hidden (nur der Inhalt, der in die Box passt wird angezeigt)
werden. Bei gleichzeitiger Verwendung von Klassen und IDs scrol11 (zeigt horizontale und vertikale Scrollbalken an)
in einem Element, überschreibt die ID die Klasse. auto (vertikaler Scrollbalken, wenn der Inhalt zu groß ist)
Das Box-Modell Eigenschaft: Wert: z-index bestimmt die Stapelreihenfolge der Elemente. Das Element mit dem
{CSS-Eigenschaft: Wert;...}, höheren z-index wird zuoberst angezeigt.
Jedes Element eines Dokumentes entspricht einer Box, #1D
die sich wie folgt zusammensetzt: #a in <div id="a">...</div> #block {
z-index: 1;
margin Außenabstand
—
position: absolute;
padding — Innenabstand width:150px;
Eigenschaft: Wert: Beisp!
Gruppierung von Elementen mit <div>
height:150px;
top:50px;
Elementfluss mit float
margin aLP margin: 15px; allgemein Mit float
kann ein Element auf der linken oder
margin-bottom aLP margin-bottom: 0.7cm; unten <div> ist ein Block-Level-Element, teilt den Inhalt in mehrere Abschnitte left:50px;
und kann mehrere Block-Level-Elemente gruppieren. background-color: gray; rechten Seite des Dokuments/der Box positioniert
margin-left aLP margin-left: 10mm; links
werden. Nachfolgende Elemente umfließen es.
rechts <div id=“gruen“>
margin-right aLP margin-right: 5px;
oben Comelio ist unser kleiner grüner Drache, der in eine Mögliche Werte: 1e£t (links), right (rechts), none
margin-top aLP margin-top: 10pt; Reihe von Kostümen durch unsere Veröffentlichung #bild {
(ohne)
padding LP padding: 15px; allgemein
z-index: 2;
padding-bottom LP padding-bottom: 0.7cm; unten engeistert. <div id=“float“>
</div> position: absolute; <img src=“bild.jpg“ />
padding-left LP
padding-left: 10mm; links
<div id=“blau“> Comelio Medien gehört zur Comelio GmbH, width:150px;
rechts </div>
padding-right LP
padding-right: 10px; einem in D, A und CH arbeitenden IT-Haus. height:100px;
padding-top oben <p>Dieses Bild wird vom Text umflossen.
LP
padding-top: 10pt; </div top:80px; Dieses Bild wird vom Text umflossen.
Dazugehöriges CSS:
left:80px; Dieses Bild wird vom Text umflossen...
Legende:
aLlP = auto, Längen-, Prozentangaben; #gruen {color:green;} </p>
LP = Längen-, Prozentangaben #blau {color:blue;} Dazugehöriges CSS:
#float {float:left; width:150px;}
top
margin Aufhebung des Flusses mit clear
borde Rahmeneigenschaften - border clear dient der Kontrolle nachfolgender Elemente.
Eigenschaft: Wert:
padding Werte für border-color, border-style, border-width, inherit Mögliche Werte: 1e£t (links), right (rechts), both
border
(beides), none (ohne)
border-style none, dotted, dashed, solid, double, groove, ridge, inset, outset
Werte für border-bottom-color, border-bottom-style, border-bottom-width <div id=“float“>
Inhalt
height—
border-bottom <img src=“bild.jpg“ />

border-bottom-color Farbangabe
</div>
border-bottom-style none, dotted, dashed, solid, double, groove, ridge, inset, outset <h1>Überschrift</hl>
border-bottom-width thin, medium, thick, Längenangabe <p class=“clear“>Dieser Text umfließt das
border-color transparent, Farbangabe Bild nicht mehr. Dieser Text umfließt das
border-left Werte für border-left-color, border-left-style, border-left-width
Bild nicht mehr. Dieser Text umfließt das
Bild nicht mehr...
bottom border-right Werte für border-right-color, border-right-style, border-right-width </p>
Dazugehöriges CSS:
width border-top Werte für border-top-color, border-top-style, border-top-width
#float {float:left; width:150px;}
‚Clear {clear:both;}
EC RC ISBN 978-3-939701-56-9
AMT
Zusammengestellt von Nadine Kilian und Marco Skulsch (IE Comelio GmbH
Zee] Nadine Kilian Goethestr. 34, 13086 Berlin Lise-Meitner-Str. 8
SG
:
Web: www.comelio.com WARNEN 83939-701569

Comelio Css Referenz Web

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Comelio Css Referenz Web

Hochgeladen von

Copyright:

Verfügbare Formate

Cascading Stylesheets (CSS) —- Kurzreferenz

Grundlegende Syntax Links Fonts

<p style=“color:#ff0000;“>Ein Absatz in Rot</p> Beispiel: „Trebuchet“)

text-decoration:none; benötigt denselben Platz (z. B. „Courier New“)

<style type=“text/css“> a:visited color: biacks {

Eigenschaft: WC der Browser auf dieerste in der generischen Liste zurück.

pt Punkt, 1pt = 1/72 Inch hl {font-family: fantasy, “Brush Script“, serif;}

border-bottom <img src=“bild.jpg“ />

Web: www.comelio.com WARNEN 83939-701569

Das könnte Ihnen auch gefallen