Anwendungsbeispiele und (unvollständige) Referenz
Werbung
(Cascading Style Sheets)
Unzählige ausgefeilte und moderne CSS-Attribute ermöglichen;
- die bedarfsgerechte Anpassung der bewährten HTML-Befehle
H1-Tag soll künftig haben:
Schriftfamilie: Arial;
Schrift-Größe immer : 20;
umrahmt mit Punktlinie;
H1
{ font-family:arial;
font-size:18pt;
border-style solid;
}
- die Definition eigener HTML-Tags
Gedichtvorgaben mit
Schrift-Familie: Arial;
Schrift-Stil: Kursiv ;
Schrift-Größe: 14;
Schrift-Farbe: Leicht graue Schrift;
Schrit-Ausrichtung: Zentriert
.Gedicht
{ font-family
font-style
font-size
color
text-align
: arial;
: italic;
: 14pt;
: #707070;
: center;
}
- und wiederum darauf aufbauend weitere kompliziertere Tags
(per Vererbung, aber hier nicht behandelt)
- zusätzliche neueGestaltungsmöglichkeiten per CSS
Beliebiges Logo soll
so auf Seite ausgegeben werden:
an Seitenposition fest (scrollt mit)
oben: 20 Pixel Abstand vom Seitenrand
links: 100 Pixel Abstand vom Seitenrand
.logo
{ position: absolute;
top: 39px; left: 80px;
background-color:#FFFF00;
}
Diese Möglichkeiten
- lassen sich direkt und unmittelbar auf genau ein HTML-Tag anwenden (S. 2)
- lassen sich im Kopf einer HTML-Seite vorgeben, damit man nicht jedes mal
beim Rückgriff darauf die CSS-Angaben erneut eintippen muss (S. 3)
- lassen sich einfach in einer beliebigen Datei zur Mehrfachverendung abspeichern (S. 4)
-lassen sich beliebig kombinieren
blabla
GleichesTag, aber unterschiedliche Attribute nötig
Definieren
h1.gepunktet
{font-family:arial;
font-size:18pt;
border-style dottet;
}
h1.durchgezogen
normal?
blabla
Spezifisch abrufen
....
<h1 class="gepunktet"> blabla <h1>
normal?
<h1 class="durchgezogen" > blabla <h1>
{font-family:arial;
font-size:18pt;
border-style solid;
}
(Seite 1 /10
)
Gedicht zur Erbauung
Tag- / bereichsbezogene (interne)
CSS-Definiton
Durch die Wüste
ging ein Gnu!
Nanu?
Einsatz
Die Definition wird "im Fluge" vorgenommen weil man eben gerade jetzt mal schnell die umfänglicheren Formatierungs- und Positionierungsmöglichkeiten von CSS nutzen möchte, ohne eine
zentrale Norm definieren zu wollen!
Diese CSS-Definition ist deswegen nur "micro"- lokal; nämlich nur in dieser Seite und nur in dem
Abschnitt oder noch kleiner in dem vom Tag eingerahmten Bereich verfügbar!
Allerdings gibt es eine Einschränkung:
"Im Fluge" geht nur bei HMTL-Elementen die aus sich heraus einen Block bilden (<p>, <Table>...)
und den dafür vorgesehenen mit <div> und <span> -Elementen
<head>
…..
</head>
<head>
</head>
<body>
<body>
[ HTML-Elemente ]…
Sofortige
Style - Formatierung
im HTML-TAG
<html-tagname
<h1
[ html-Attribut1="Wert1"]…
align ="right"
[ style ="styleName: styleWert;
style ="font-family : arial;
font-size
: 18pt;
[styleName: styleWert; ]" ]
border-style: dotted;"
>
>
[ HTML-Elemente ]
Gedicht zur Erbauung
</ html-tagname >
</h1
[ HTML-Elemente ]…
Sofortige
Style - Formatierung
im HTML-TAG
<html-tagname
<div
align="center"
[ html-Attribut1="Wert1"]…
style="font-family: arial;
font-style : italic;
font-size : 14pt;
[ style ="styleName: styleWert;
[styleName: styleWert; ]" ]
color
>
: #707070;"
>
[ HTML-Elemente ]
</ html-tagname >
Durch die Wüste<br />
ging ein Gnu, <br />
Nanu?
</div>
[ HTML-Elemente ]…
</body>
</body>
(Seite 2 /10
)
Gedicht zur Erbauung
Nur auf eine HTML-Seite bezogene
(interne) CSS-Definiton
Durch die Wüste
ging ein Gnu!
Nanu?
Einsatz
Die Definition wird in intern im Kopf vorgenommen und mit dieser Seite gespeichert.
Diese CSS-Definition ist deswegen nur lokal (also in dieser Seite) verfügbar!
<head>
<style type = "text/css">
html-tagname
Seitenbezogene
(Interne CSS Definition )
{ CSS-Attributname: Wert;
[CSS-Attributname: Wert;]…
}
…
im Kopf definieren
.eigentagname
{ CSS-Attributname: Wert;
[CSS-Attributname: Wert;]…
}
…
<head>
<style type = "text/css">
h1
{font-family : arial;
font-size
: 24pt;
border-style : dotted;
}
.Gedicht
{font-family
font-style
font-size
color
text-align
}
:
:
:
:
:
arial;
italic;
14pt;
#707070;
center;
</style>
</style>
Seitenbezogene
(Interne CSS Definition )
</head>
</head>
<body>
<body>
<h1
align="right"
>
< html-tagname
[ html-attribut1="Wert1"]…
>
in HTML-Seite nutzen
</HTML-TAGNAME>
Seitenbezogene
(Interne CSS Definition )
in HTML-Seite nutzen
Gedicht zur Erbauung
[ HTML-Elemente ]
<
span
div
class= "CSS-EigenTagName"
[html-attribut1="wert1"]…
<div
CLASS ="Gedicht"
>
>
[ HTML-Elemente ]
<
</h1>
/span
>
/div
</body>
Durch die Wüste<br/>
ging ein Gnu, <br/>
Nanu?
</div>
</body>
(Seite 3 /10
)
Gedicht zur Erbauung
Extern gespeicherter CSS-Definition
Durch die Wüste
ging ein Gnu!
Nanu?
Einsatz
Die Definition wird in einer externen CSS-Datei gespeichert und bei Bedarf kann die Definition
jeder beliebigen Seite individuell zugänglich gemacht werden !
html-tagname
CSS – Definitionen
EXTERN
{ CSS-Attributname:Wert;
[CSS-Attributname:Wert;] …
}
erstellen und in Datei
mit Endung ".CSS" speichern
.eigentagname
{ CSS-Attributname:Wert;
[CSS-Attributname:Wert;] …
}
.CSS
für diese HTML-Seite
zugänglich machen
.Gedicht
{font-family
font-style
font-size
color
text-align
}
:
:
:
:
:
arial;
italic;
14pt;
#707070;
center;
testit.css
testit.css
<head>
<head>
EXTERNE
CSS Definitionen
h1
{font-family : arial;
font-size
: 24pt;
border-style : dotted;
}
<link rel="stylesheet"
type = "text/css"
href="dateiangabe"
<link rel = "stylesheet"
type
= "text/css"
href
= "styletest.css"
/>
</head>
/>
</head>
<body>
EXTERNE
CSS Definitionen
in HTML-Seite nutzen
< html-tagname
[ html-attribut1="Wert1"]…
<body>
<h1
align="right"
>
>
Gedicht zur Erbauung
[ HTML-Elemente ]
</HTML-TAGNAME>
EXTERNE
CSS Definitionen
<
in HTML-Seite nutzen
span
div
class= "CSS-EigenTagName"
[html-attribut1="wert1"]…
>
[ HTML-Elemente ]
< /span >
/div
</body>
</h1>
<div
CLASS ="Gedicht"
>
Durch die Wüste<br/>
ging ein Gnu, <br/>
Nanu?
</div>
</body>
(Seite 4 /10
)
Abstandsattribute (Auswahl) per CSS
Text mit margin- Abstand
Marginbereich
Inhalt
Paddingbereich
geht erst hier weiter
Abstände Außen herum um das so formatierte Objekte
margin:
margin-top:
margin-righ:t
margin-bottom:
border-left:
css-Maßangabe ;
Rand zur Umgebung (äußerer Leerraum) zum Rest der
Seiteninhalte
margin: ein einheitlicher Wert für alle Seiten
Abstände der Inhalte INNEN zum Rand des so formatierten Objekts
padding:
padding-top:
padding-righ:t
padding-bottom:
padding-left:
css-Maßangabe ;
Rand von der Innenfüllung zur Äußeren Umgebung,
z.b. Rahmen usw..
padding: ein einheitlicher wert für alle Seiten
Ausrichtung und Absatzkontrolle per CSS
Vertikale Ausrichtung
von nebeneinanderstehenden Elementen mit unterschiedlicher Höhe, wie Tabellenzellen in einer Tabellenzeile
Werte
obenbündig ausrichten
top ;
mittig ausrichten
middle ;
untenbündig ausrichten
bottom ;
an der Basislinie ausrichten (oder untenbündig, wenn es keine Basislinie
baseline ;
vertical-align:
gibt)..
tieferstellen (ohne die Schriftgröße zu reduzieren)
sub ;
höherstellen (ohne die Schriftgröße zu reduzieren).
super ;
am oberen Schriftrand ausrichten.
text-top ;
text-bottom ; am unteren Schriftrand ausrichten
Horizontale Ausrichtung
von nebeneinanderstehenden Elementen mit unterschiedlicher Höhe, wie Tabellenzellen in einer Tabellenzeile
Werte
links
left
;
text-align:
rechts
right ;
mittig
center ;
Blocksatz
justify ;
Textumbruch kontrollieren
von nebeneinanderstehenden Elementen mit unterschiedlicher Höhe, wie Tabellenzellen in einer Tabellenzeile
Werte
wie von HTML her bekannt.
normal ;
white-space:
Zeilenumbruch wie im EDITOR eingegeben!
pre ;
kein automatischer Zeilenumbruch
nowrap ;
(Seite 5 /10
)
Hintergrundformatierung (Auswahl) per CSS
Farbe
Typ
color:
background-color:
background-image:
css-Farbangabe ;
Farbe eines Elements
css-Farbangabe ;
Hintergrund eines Elements
URL(pfadzurgrafik); .gif/.jpeg -Grafik wird in den Hintergrund eingebunden
Hintergrundgrafik
wiederholen bis Hintergrund des Objekts gefüllt ist!
nur horizontal wiederholen
repeat ;
background-repeat:
background-attachment:
repeat-x ;
repeat-y ;
no-repeat ;
scroll ;
nur vertikal wiederholen
nur einmal anzeigen!
fixed ;
linkspos toppos;
background-position:
top;
center;
middle;
left;
bottom;
right;
Hintergrundgrafik wird beim Scrollen mitbewegt
Benutzer scrollt, Hintergrundgrafik bleibt stehen!
Wo soll die linke obere Ecke der Hintergrundgrafik vom Browser positioniert werden. Bezugspunkt ist hierbei das HTMLElement in dem die Grafik definiert wird!
Positionsangaben gemäß CSS-Maßangabe;
Ausrichtung und Bündigkeiten eher
textuell
Rahmenattribute (Auswahl) per CSS
Rahmen-Typ
Beeinflusstes Rahmenteil
Border-Style:
border-top-style:
border-right-style:
border-bottom-style:
border-left-style:
Werte
hidden ;
none ;
dotted ;
dashed ;
solid ;
double ;
groove;
ridge ;
inset ;
outset ;
Wirkt auch auf Nachbarrahmen (selten implementiert)
kein Rahmen (bzw. unsichtbarer Rahmen)
gepunktet.
gestrichelt.
durchgezogen.
doppelt durchgezogen
3D-Effekt.
3D-Effekt.
3D-Effekt
3D-Effekt
Breite und Farbe
Beeinflusstes Rahmenteil
border-width:
border-top:
border-right:
border-bottom:
border-left:
border-color:
border-top-color:
border-right-color:
border-bottom-color:
border-left-color:
Werte
css-Maßangabe ;
Rahmenstärke
css-Maßangabe;
Rahmenfarbe
Einige spezielle Rahmenattribute unter >CSS-Tabellenformatierung!
(Seite 6 /10
)
Schriftformatierung per CSS
Schriftformatierung
font-family:
font-size:
font-style:
font-weight:
text-transform:
text-decoration:
color:
background-color
schriftname ;
serif ;
sans-serif ;
monospace ;
nnpt ;
normal ;
italic ;
nnn ;
normal ;
bold ;
uppercase ;
lowercase ;
konkrete Schrift (arial, courier...)
Schrift beim client mit Serifen
Schrift beim client OHNE Serifen
feste Schrittweite der Buchstaben
none ;
underline ;
overline ;
blink ;
capitalize ;
#farbangabe ;
#farbangabe ;
alles abgeschaltet(auch Standards des Clients!)
unterstrichen
Strich drüber
blinkend (und damit nervend)
Schriftgröße (besser ist pt, sonst z.B. px))
keine weiteres Attribut
italic (kursiv)
Fettfaktor von 100-900
nicht fett
fett
Alles in Großbuchstaben konvertieren
Alles in Kleinbuchstaben konvertieren
Anfangsbuchstabe im Wort sehr groß
Farbe des Textes
Hintergrundfarbe des Textes
Listen- Attribute (Auswahl) per CSS
List-Styles
disc ;
circle ;
square ;
normal ;
decimal ;
lower-alpha ;
upper-alpha ;
lower-roman ;
upper-roman;
list-style-type:
gefüllter Kreis
hohler Kreis
gefülltes Quadrat
kein Aufzählungzeichen
Voreinstellung (1,2,3....)
Kleinbuchstaben(a,b,c...)
Großbuchstaben(A,B,C)
kleine römische Zahlen(i,ii,ii,...)
größe römische Zahlen (I,II,III,...)
Tabellenformatierung per CSS
Werte
table-layout:
fixed ;
auto ;
border-collapse
separate ;
collapse
border-spacing
css-Wert ;
empty-cells:
show ;
collapse ;
- für <table> . Fixe Breite führt zum Abschneiden der Inhalte!
- normales HTML-Verhalten
(Achtung: auch bei Browsern ab 5er nicht sicher)
nebeneinanderliegende ZellRahmen wird eine Seite von dem
vorhergehenden Rahmen überdeckt
Zellenrahmen werden nicht überdeckt! (mehr Platzbedarf!)
Größenangabe für die Abstände der sichtbaren Rahmen zueinander! (10px, 1cm...)
Rahmen um leere Zellen werden angezeigt
normales HTML-Verhalten
(Seite 7 /10
)
Positions- und Größenangaben von Elementen
Einsatz
Will man positionierfähige HTML-Elemente auf einer HTML-Seite platzieren, so nimmt man dieses Attribut. Aus Kompatibilitätsgründen sollte POSITION aber nur i.V.m. >DIV eingesetzt werden (entweder in der
Seite direkt oder per eigener CSS-Tags) !
Aus einer Positionierung resultiert auch die mögliche Überlappung der einzelnen Elemente. Welches Element zuoberst liegt, regelt die neue Z-Index-Angabe ausdrücklich, ansonsten wird das zuerst erzeugte Element ggf. von dem nachfolgenden überdeckt! Gleiches gilt, wenn man einfach nur Größenbereiche festlegen möchte!
Ort: >CSS und >Body
Syntax
[position
:relative;
:absolute;
:static;
:fixed;
top :startpos_obenpx; left:startpos_linkspx; ]
[z-index:schichtebene_nr;] [visibility :hidden;
:visible;
width:breitepx;
[
[hight:höhepx;]
:left;
float :right;
:none;
:relative
:relative;
:absolute;
:static;
:fixed;
:absolute
:static
:fixed
top:startpos_obenpx;
]
]
[overflow :
:hidden;
:scroll;
]
genaue Positionieren bezogen auf die ursprüngliche
Startkoordinate des nun zu formatierenden Elements
positioniert in Abhängigkeit vorausgehende verschachtelter
Positionierungen (In einer positionierten Grafik wird dann ab
deren Rand positioniert)
setzt Positionierung außer Kraft, ergibt also normalen tagspezifischen Fluss
Das Element soll stehen bleiben beim scrollen(nicht realisiert)
Koordinate ab oberer Startposition (>px Pixel) (Beachte >ABSOLUTE >RELATIVE)
Koordinate ab linker Startposition (>px Pixel) (Beachte >ABSOLUTE >RELATIVE)
left:startpos_linkspx;
z-index:schichtebene_nr;
In welcher ausdrücklichen Reihenfolgen werden die Elemente auf dem Bildschirm übereinander dargestellt. Hieraus ergeben sich Überdeckungen !
[width:breitePX;]
[hight:höhePX;]
Höhen und Breitenangaben des Elements z.B.in Pixel, deswegen mit >PX beendet
Min-Höhe usw. wird derzeit nicht zuverlässig interpretiert: Abhilfe Tabelle!!!
[visibility
:hidden;
:visible;
:left;
[float :right;
]
]
]
Reserviert Platz, auch wenn das Element zunächst hidden=versteckt ist
Fluß der ggf. nachfolgenden Elemente um das betreffende Element
:none;
(Seite 8 /10
)
Verweise ( HTML- >Hrefs ) per CSS formatieren
Einsatz
Auch ohne Java-Skript kann man ein überzeugendes Dialogverhalten herstellen,
indem man die nachfolgenden CSS-Elemente-Eigenschaften einsetzt!
Ort: >Body >CSS
Syntax
[A:link
[A:visited
[A:hover
[A:active
[A:focus
{ CSS-Eigenschaft;... } ]
{ CSS-Eigenschaft;... } ]
{ CSS-Eigenschaft;... } ]
{ CSS-Eigenschaft;... } ]
{ CSS-Eigenschaft;... } ]
:link
:visited
:hover
:active
:focus
{ CSS-Eigenschaft;... }
{}
sind als Klammern einzugeben
NUR in nachfolgender Reihenfolge erfolgreich!
für Verweise zu noch nicht besuchten Seiten
für Verweise zu bereits besuchten Seiten
für Verweise, während der Anwender mit der Maus darüber fährt
für gerade angeklickte Verweise
für Verweise, die den Fokus erhalten, z.B. durch "Durchsteppen"
mit der Tabulatortaste
hier können die meisten css-Attribute zum Einsatz kommen!
Aber auch HTML-Attribute wie z.B. >TITLE (um eine kleine textuelle Hilfe
anzuzeigen)
verweise.css
a:link
{color:#003080;
text-decoration:underline;
}
a:visited
{color:#009F00;
}
a:hover
{color:#BF0000;
text-decoration:underline;
}
verweise_css_nutzen.html
<HTML>
<HEAD>
<LINK
REL = "stylesheet" TYPE = "text/css"
HREF = "verweise.css">
</head>
<BODY>
<H1>Linkverhalten</H1>
<BR>
<A href="http://www.google.de/">Hier gehts zu google</A> <BR>
<A href="http://www.IT-Pruefungshandbuch.de/">
IT-Pruefungshandbuch Updates lesen</A> <BR>
<A href="http://www.oszinddv.de/" title="Wichtige IT-Schule">
OSZ Industrie und manuelle DV, Deine Schule </A> <BR>
</BODY>
</HTML>
Tipps zu MouseOver-Effekten
http://selfaktuell.teamone.de/artikel/css/mouseover/index.htm
Für Absätze gilt ähnliches!
p:first-line
p:first-letter
usw.
(Seite 9 /10
)
Cursor
Einsatz
Auch ohne Java-Skript kann man ein überzeugendes Dialogverhalten herstellen,
indem man z.B. dem Cursor ein angepasstes Aussehen gibt!
Ort: >Body >CSS
Syntax
:
CURSOR
AUTO
:DEFAULT
:POINTER
:TEXT
:HELP
:URL(dateiname)
;
Cursortypen (Auswahl)
:AUTO
:DEFAULT
:POINTER
:TEXT
:HELP
:URL(dateiname)
automatischer Cursor (Normaleinstellung).
Plattformunabhängiger Standard-Cursor.
Cursor in Form eines Zeigers.
Cursor in einer Form, die normalen Text symbolisiert.
Cursor in Form des Betriebssystemspezifischen Symbols, das Hilfe zu dem Element
signalisiert.
Eigene Cursorgrafik! dateiname muss GIF- /JPG-Grafik sein.
Wird derzeit leider nicht unterstützt
Kommentar
Einsatz
Um die Anweisungszeilen in einer CSS-Datei optisch voneinander zu trennen
und für den CSS-Entwickler die Lesbarkeit zu erhöhen kann Kommentarzeilen
einfügen
Ort: >Body >CSS
Syntax
/* Kommentartext
nächste Zeile Kommentartext
*/
Beispiel
/* Nachfolgend blabla*/
h1 { background-color:yellow; color:black; font-style:bold; font-size:36pt; }
(Seite 10 /10
)
