Fachbereich Automatisierung und Informatik Kapitel CSS

Transcription

Wernigerode
Fachbereich Automatisierung und Informatik
Vorlesung „Grundlagen der Informatik II“
Vorlesung „Informatikgrundlagen II“
Kapitel CSS
Version 05.05.2008
Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm
Friedrichstraße 57 - 59
38855 Wernigerode
Raum:
Tel.:
Fax:
Email:
2.202
03943/659-338
03943/659-399
[email protected]
Inhaltverzeichnis
Cascading Style Sheet ...................................................................................................................... 4
1.1 Laden der CSS-Datei................................................................................................................. 4
1.1.1
Extern................................................................................................................................. 4
1.1.2
Intern.................................................................................................................................. 4
1.2 Doctype ..................................................................................................................................... 4
1.3 Literatur..................................................................................................................................... 5
1.4 Validierung................................................................................................................................ 5
2 Positionierung................................................................................................................................... 6
2.1 Absatz........................................................................................................................................ 6
2.1.1
Beispiel: ............................................................................................................................. 6
2.1.2
CSS-Definition:.................................................................................................................. 6
2.2 Positionierung ........................................................................................................................... 7
2.2.1
Beispiele: ........................................................................................................................... 7
2.3 Class und Id............................................................................................................................... 9
2.4 Vererbung / Nachbarschaft / Spezifikation ............................................................................. 10
2.4.1
Geschachtelte Elemente ................................................................................................... 10
2.4.2
Übergeordnetete Elemente............................................................................................... 10
2.4.3
Benachbarte Elemente ..................................................................................................... 11
2.4.4
Multi-Selector .................................................................................................................. 11
2.4.5
Hierarchische Elemente ................................................................................................... 11
2.4.6
Pseudo-Element-Selektoren............................................................................................. 12
2.5 display ..................................................................................................................................... 12
3 Grundelemente ............................................................................................................................... 14
3.1 Kommentare............................................................................................................................ 14
3.2 Maßeinheiten........................................................................................................................... 14
3.3 Farbeinheiten........................................................................................................................... 14
3.4 Font ......................................................................................................................................... 15
3.4.1
font-family ....................................................................................................................... 15
3.4.2
font-style .......................................................................................................................... 16
3.4.3
font-size ........................................................................................................................... 16
3.4.4
font-variant....................................................................................................................... 16
3.4.5
font-weight....................................................................................................................... 17
4 Text................................................................................................................................................. 18
4.1.1
word-spacing.................................................................................................................... 18
4.1.2
letter-spacing.................................................................................................................... 18
4.1.3
text-decoration ................................................................................................................. 18
4.1.4
vertical-align .................................................................................................................... 18
4.1.5
text-transform................................................................................................................... 19
4.1.6
text-align .......................................................................................................................... 19
4.1.7
text-indent ........................................................................................................................ 19
4.1.8
line-height ........................................................................................................................ 19
4.1.9
white-space ...................................................................................................................... 20
4.2 Color und Background-Eigenschaften .................................................................................... 20
4.3 Background ............................................................................................................................. 21
4.4 Box .......................................................................................................................................... 22
4.5 Vordefinierte Selectoren ......................................................................................................... 24
4.6 Listen....................................................................................................................................... 24
4.6.1
list-style-type.................................................................................................................... 24
4.6.2
list-style-image................................................................................................................. 25
4.6.3
list-style-position.............................................................................................................. 25
4.6.4
list-style............................................................................................................................ 26
4.7 Absatz / Paragraph .................................................................................................................. 26
1
4.8 Bilder und Text ....................................................................................................................... 26
Border (Ränder).............................................................................................................................. 28
5.1 MARGIN................................................................................................................................. 30
5.2 PADDING............................................................................................................................... 30
5.3 Mauszeiger .............................................................................................................................. 31
6 Navigationsmenü mit Listen........................................................................................................... 33
7 Beispiele ......................................................................................................................................... 36
7.1 Definition in der CSS-Datei .................................................................................................... 36
7.2 Definition im HTML-Code: .................................................................................................... 38
5
1 Cascading Style Sheet
Eigenschaften:
Cascading Style Sheet bieten den Vorteil, dass der Inhalt und die Darstellung weitgehend entkoppelt
werden.
Eine weitere Eigenschaft ist die Vererbung von Style-Elementen. Eine Header-Überschrift "erbt" die
"Body-Farbe", wenn man nicht in die Farbe umdefiniert.
Die externe Style-Sheet-Datei kann zentral auf dem Server gespeichert werden. Dann sind alle HTMLDateien nach dieser CSS-Datei definiert. Zusätzlich können aber innerhalb einer Datei interne
Definition definiert werden. Diese können die zentralen Elemente "überschreiben". Als letztes kann
ein beliebiges Element innerhalb des Tags CSS-Code definieren.
1.1
Laden der CSS-Datei
1.1.1 Extern
Erste Version:
<link rel="stylesheet" type="text/css" href="../../test1.css">
Zweite Version:
<link rel="stylesheet" type="text/css"
@import url(../../test1.css)
</style>
1.1.2 Intern
<style type="text/css">
body {
color:black;
}
</style>
1.2
Doctype
Mit Hilfe dieser Eigenschaft kann man definieren, wie die Syntax einer HTML-Seite bearbeitet
werden soll:
Es gibt zwei Hauptmodi:
• Strict
Alles muss den Definitionen entsprechen
• Quirks
Der Browser toleriert
Falls die Seiten nicht CSS-unterstützen und veraltete Tags verwenden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Für neuere Seiten mit CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Für neuere Seiten mit XHTML 1.0:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.3
Literatur
http://webcom.net/~gmc/html/quick_ref.html
http://www.zdim.com/content/anchors/199704/28/1.html
http://www.htmlhelp.com/reference/css/structure.html
Dan Shafer, Kevin Yank: Cascading Stylesheets, dpunkt-Verlag, ISBN: 3-89864-248-8
1.4
Validierung
Ihre Seiten sollten mit möglichst allen verfügbaren Browsern getestet werden. Die Netcape-Browser
4.x sind aber relativ fehlerbehaftet. Möchte man diese auch unterstützen, so kommt man nicht umhin,
verschiedene Varianten anzubieten. Mit einem Java-Script kann man
Eine weitere Steigerung der Qualität von Web-Seiten ist die Validierung durch das WWW-Consortium. Dies ist recht einfach durchzuführen und dazu noch kostenlos.
Adresse:
http://jigsaw.w3.org/css-validator/
Es gibt drei Varianten:
• Man kann die komplette Valdierung-Software herunterladen
• Man kann in einem Formular die URL angeben
• Man kann die Seite(n) an das WWW-Consortium senden.
2 Positionierung
2.1
Absatz
Mit dem Tag <DIV> wird ein Abschnitt definiert, der mit einem oder mehreren Selectoren belegt
werden kann. Es wird immer ein neuer Absatz, keine neue Leerzeile, eingefügt.
Mit dem Tag <SPAN> kann man auch CSS-Selectoren belegen. Hier wird aber kein neuer Absatz
eingefügt. Das Span-Tag dient dazu, in einem Fließtext, CSS-Tag zu definieren.
2.1.1 Beispiel:
<DIV class="absatz1>
Text </DIV>
Dieser Text beinhaltet ein <SPAN class="absatz2> abc def ghijk </SPAN> wird ein Abschnitt
definiert, der mit einem oder mehreren Selectoren belegt werden kann. Es wird immer ein neuer
Absatz, keine neue Leerzeile, eingefügt.
Dieser Text beinhaltet ein Tag <EM class=absatz3>Automatisierung und Informatik</EM>
2.1.2 CSS-Definition:
.absatz1{
vertical-align: super;
color:blue;
font-size:14pt;
border-color: red;
border-style: groove;
}
SPAN.absatz2{
vertical-align: sub;
color:red;
font-size:14pt;
border-color: blue;
}
EM.absatz3{
vertical-align: bottom;
color:red;
font-size:14pt;
border-color: blue;
}
2.2
Positionierung
Mit dem Style-Attribut "position" kann ein AbschnittDIV> wird ein Abschnitt definiert, der mit einem
oder mehreren Selectoren belegt werden kann. Es wird immer ein neuer Absatz, keine neue Leerzeile,
eingefügt.
Wert
absolute
relative
fixed
static
Beschreibung
Absolute Positionierung durch die Angaben left, top, right, bottom. Absolut
positionierte Elemente sind außerhalb des normalen Textfluss, sie liegen über den
anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position
wird relativ zu den Rändern des Eltern-Elements berechnet, wenn dieses ebenfalls
positioniert ist, oder wenn es der Seiteninhalt (<body>) ist. Da sich der Seiteninhalt scrollen lässt, werden absolut positionierte Elemente mitgescrollt.
Relative Positionierung vom normalem Fluss. Die normale Position ist wie bei
static im normalen Textfluss. Die Positionierungsangaben left, top, right, bottom
verschieben das Element aus dieser Position. Die nachfolgenden Elemente
verhalten sich so, als wäre das Element nicht verschoben
Wie absolute, jedoch bleibt das Element beim Scrollen stehen und die
Positionierung orientiert sich am Viewport (dem sichtbaren Browserfenster) und
nicht am übergeordneten Element. Der Abschnitt scheint über den anderen
Elementen zu schweben.
Positionierung im Textfluss. Die Angaben left, top, right, bottom sind unwirksam.
2.2.1 Beispiele:
1. Beispiel:
#block {
color: green;
background-color: #c0c0c0;
}
#block1 {
float: left;
background-color:blue;
}
#block2 {
position: fixed;
top: 200px;
left: 500px;
background-color:yellow;
}
HTML-Code:
<div id="block">
<div id="block1">
abcdef
</div>
Das Labor Datenbanken befindet sich im 2. Obergeschoss; des Gebäude 5,
</div>
Der untere Text wird durch die Eigenschaft "float" rechts neben des ersten Textes dargestellt. Sonst
wäre es ein einfacher Absatz.
2. Beispiel:
Diese Beispiel positioniert zwei Blöcke nebeneinander.
#block {
color: white;
background-color: blue;
}
#block1 {
position: relative;
top: 0;
left: 0;
width: 250px;
float: left;
}
#block2 {
margin-left: 250px;
border-style: dashed;
border-color: red;
border-width:6px;
}
HTML-Code:
<div id="block">
<div id="block1">
abcdef
</div>
<div id="block2">
ghijklmnop</ul>
</div> 
</div> 
3. Beispiel:
Das dritte Bespiel zeigt die Position zweier Bloecke. Der erste Block, grau, wird immer links, der
zweite, blau, wird immer rechts dargestellt.
#blockleft {
background-color: #c0c0c0;
color: #FF0000;
float: left;
width: 30%;
}
#blockright {
background-color: rgb(0,80,149);
color: #ffffff;
float: right;
width: 150px;
}
HTML-Code:
<div id="blockleft">
<p>Sehen Sie, wie ein ein langer Text Absätze überdeckt, die ihm im Quellcode nachfolgen ?
Den Blockelementen fällt überhaupt nicht auf, daß die Floats existieren.
Nur die Textzeilen weichen den Floats aus.</p>
</div>
<div id="blockright">
<p>
Diese Box floated nach rechts und ist im ersten Blockelement eingebettet.
Und obwohl sie dort eingebettet ist, überlappt sie alle folgenden Boxen,
ganz wie der linke Float, der außerhalb jeglichen Blockelements sitzt.
</p>
</div> 
<p>Dieser Text "floatet" zwischen den beiden Blockelemente (in diesem Fall Absätze).</p>
2.3
Class und Id
Selektortyp
Auswirkung
Universeller Selektor Stilregel ist gültig für alle Elemente in
einer HTML-Datei
Elementtyp
Die Stilregel ist für alle im Selektor
genannten HTML-Elemente gültig
Klassen-Selektor
ID-Selektor
Beispiel
*
H1
P
TD
Die Stilregel ist für HTML-Elemente EM.absatz1
gültig, deren class-Attribut der Klassen- .beispiel1
angabe entspricht. Kann mehrfach ver- H1.special
// Diese Klasse
wendet werden
dient nur für H1
Die Stilregel ist NUR für HTML-Ele- #special3
mente gültig, deren id-Attribut der ID-- p#specials52
Angabe entspricht. Kann nur einmal ver- <h1 id="k1">Kapitel 1</h1>
<h2 id="k1-1">Kapitel 1.1</h2>
wendet werden
<h2 id="k1-2">Kapitel 1.2</h2>
<h1 id="k2">Kapitel 2</h1>
Pseudoklassen
Die Stilregeln ist nur für Pseudoklassen a:hover;
gültig, wenn sie ihren Zusatnd durch a:active:
Interaktion mit dem Benutzer verändern a:focus;
a:link;
a:visited;
Quelle: CSS von Rachel Andrew, Dan Shafer
2.4
Vererbung / Nachbarschaft / Spezifikation
Folgende Regeln können für geschachtelte Elemente benutzt werden:
2.4.1 Geschachtelte Elemente
Liegen zwei Elemente in Beziehung, kann man mit den Definitionen spezielle Darstellungen
vornehmen.
Beispiel in der CSS-Datei:
body {
color:black;
}
body > p {
Folgende Regeln können für nebeneinander liegende Elemente benutzt werden:
2.4.2 Übergeordnetete Elemente
Liegen zwei Elemente in Beziehung, kann man mit den Definitionen spezielle Darstellungen
vornehmen.
body {
color:black;
}
body > p {
color:red;
font-site:22pt;
}
body > li {
color:red;
}
Der linke Teil ist die Beziehung zum Parent, es können aber HTML-Tag zwischen beiden Elementen
liegen.
<body>
<h1>1. Überschrift</h1>
<p>Dieser Teil hat als Parent den Body</p>
<Div>
<p>Dieser Teil hat als Parent DIV, nicht den Body</p>
</DIV>
</body>
// Farbe rot
// Farbe schwarz
Beispiel HTML-Seite
2.4.3 Benachbarte Elemente
Liegen zwei Elemente nebeneinander, so kann man mit den Definitionen spezielle Darstellungen
vornehmen.
body {
color:black;
}
h1 + h2 {
margin-top:5px;
}
Damit erhält die H2-Überschrift einen zusätzlichen oberen Rand.
2.4.4 Multi-Selector
Möchte man mehrere Elemente auf einmal definieren, so kann man folgende Syntax verwenden.
h1, h2, h3 {
color:red;
}
2.4.5 Hierarchische Elemente
Bei Listen hat man manchmal das Problem, dass die geschachtelte Listen unterschiedlich sein sollen.
Mit folgender Syntax erreicht man das gewünschte
ol {
list-style-type:lower-alpha;
}
ol ol{
list-style-type: decimal;
}
ol ol ol {
list-style-type: lower-latin;
}
2.4.6 Pseudo-Element-Selektoren
Erelaubt die Definition für einen Teil eines Elementes:
• first-line
• first-letter
body:first-letter {
font-size: 200%;
color: blue;
float: left;
}
body:first-line {
letter-spacing: 2px;
}
2.5
display
display:
Gibt an, ob und wie ein Element angezeigt werden soll
• Inline
// Ein neuer Kasten wird auf derselben Linie wie benachbarte Elemente angelegt
(Bild oder Text)
• Block // Ein neuer Kasten wird relativ zu den umliegenden Elementen angelegt (H1
oder P).
• List-item // Ähnlich Block, aber hier werden Listenelemente eingefügt, die sich mehr wie
InlineInhalt verhalten
• None
none
block
Inline
inline-block
list-item
run-in
inline-table
table
Keine Anzeige.
Das Element wird als Block-Element dargestellt.
Das Element wird als Inline-Element dargestellt.
Das Element ist eine Mischung aus einem Block- und einem Inline-Element. Es
wird als Block-Element formatiert, du kannst Breite, Höhe und Außenabstand
angeben, floatet aber wie Inline-Elemente in der Zeile.
Sichtbar. Das Element erzeugt einen Absatz und hat ein Aufzählungszeichen.
Erzeugen Block, bzw Inline-Elemente abhängig vom Inhalt
Darstellung als Tabelle (In HTML <table>), die keine Absatz erzeugt.
Darstellung als Listensymbol. Sollte nur zusammen mit den Pseudoformaten
:before und :after verwendet werden.
Darstellung als Tabelle (In HTML <table>).
table-caption
table-cell
table-column
table-columns-group
table-footer-group
table-header-group
table-row
table-row-group
Darstellung als Tabellenüberschrift (In HTML <caption>)
Darstellung als Tabellenzelle (In HTML <td>, <th>)
Darstellung als Tabellenspalte (In HTML <col>)
Darstellung als Tabellespalten (In HTML <colgroup>)
Darstellung als Tabellefusszeile (In HTML <tfoot>)
Darstellung als Tabellenkopfzeile (In HTML <thead>)
Darstellung als Tabellenzeile (In HTML <tr>)
Darstellung als Tabellenzeilen (In HTML <tbody>)
Normalerweise sind die Darstellungen fest definiert:
Block:
p, h1 bis h2, div
// als Absatz
Inline:
strong, code, span
// ohne Umbruch
List-Item Listen
// Listen werden als
Beispiele:
1) H1 ohne Absatz
<p>
<h1 style="display:inline">
Dies ist eine Überschrift, die keinen Absatz erzeugt</h1>
Normaler Text
</p>
// Alle beiden Texte stehen in einer Zeile
2) Waagerechte Liste
Mit folgenden Definitionen und HTML-Code wird die Liste waagerecht gezeichnet. Testliste ul ist
zusätzlich vorhanden.
#testliste ul {
margin:0;
padding:0;
}
#testliste li {
display: inline;
}
Alternativ wäre folgender Code möglich:
<p>
<UL >
<LI style="display:inline" > Automatisierung und Informatik</LI>
<LI style="display:inline"> Verwaltungswissenschaften</LI>
<LI style="display:inline"> Wirtschaft</LI>
</UL>
</p>
3 Grundelemente
3.1
Kommentare
Anfang eines Kommentars: /*
Ende eines Kommentars:
*/
3.2
in
cm
mm
em
ex
pt
pc
px
Maßeinheiten
inch
centimeter
millimeter
Höhe des aktuellen Fonts
Höhe des Buchstaben „x“ des aktuellen Fonts
point, 1/72 in, entspricht 0,35278 mm
pica, entspricht 12 points: 4,23 mm
Pixel
Verwenden Sie für Fonts keine absolut Schriftgrößen, sondern eher relative, wie 1,5em. Damit kann
der Anwender seine lokalen Einstellungen besser nutzen.
.bold {
font-weight:bold;
font-size:1.5em;
}
.italic {
font-style:italic;
font-size:1.5em;
}
Problem:
Bei Verschachtelung beider Stile,wird der Text 1,5*1,5 mal größer gezeichnet. Dann besser einen
dritten Stil verwenden.
.bolditalic {
font-weight:bold;
font-style:italic;
font-size:1.5em;
}
3.3
Farbeinheiten
#rrggbb
Hexadezimale Darstellung
rgb(x,y,z)
Farbanteil pro Farbe, jeweils 0 bis 255
rgb(x%,y%,z%)Farbanteil in Prozent pro Farbe, jeweils 0 bis 100%
Farbnamen:
aqua black blue fuchsia gray green lime maroon
navy olive purpleredsilver teal white yellow
Beispiel:
color: rgb(100,100,100);
Hinweis:
Man sollte immer bei der Benutzung von Text- oder Hintergrundfarben beide Farbewerte angeben.
Problem: Vererbung
3.4
Font
3.4.1 font-family
Die Fonts werden nach ihrer Reihenfolge ausgewählt.
a) feste Namen wie
Garamond, Palatino, Serif, Times, Courier New, "Gill Sans"
Tahoma, Geneva, Arial, Helvetica,
b) generische Namen
serif
sans-serif
cursive
fancy
monospace
fantasy
Beispiele:
Tipp:
Immer nur eine Grundfamilie verwenden.
body {
font-family: "Courier-New",Courier, monospace;
}
body {
font-family: "Times New Roman",Times, serif;
}
body {
font-family: Helvetica, Arial, sans-serif;
}
3.4.2 font-style
Gibt die Stil an (normal oder kursiv)
• normal
• italic
• oblique // ähnlich italic
3.4.3 font-size
Gibt die Größe der Schrift an. Vier Möglichkeiten
a) Absolute Größe
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• 18pt
• 18in
• 18cm
• 18 mm
• 18pc
• 18px
b) Relative Größe
• smaller
• larger
c) Absolute Breite entsprechend eines Em
• 1,5 em
d) Prozentwert, Verhältnis zur Elternschrift
• 300%
3.4.4 font-variant
Setzt den Text in KAPITÄLCHEN.
• normal
• small-caps
3.4.5 font-weight
Dicke der Buchstaben (normal, fett etc).
a) Nummern
• 100
// Dünn, lighter
• 200 bis
• 900
// Fett, bold
b) Name
• lighter
• normal
• bold
• bolder
// Verringerung zur Elternschrift
// Vergrößerung zur Elternschrift
Beispiele:
TD {
font-family : Tahoma, Geneva, Arial, Helvetica, sans-serif;
font-size: 19pt;
color: #000000;
font-weight : normal;
}
.cell {
font-size: 19pt;
color: #000000;
font-weight : 900;
}
4 Text
4.1.1 word-spacing
Setzt den zusätzlichen Platz zwischen den Wörtern
• 1em
• 0.5em
• 2pt
4.1.2 letter-spacing
Setzt den zusätzlichen Platz zwischen den Buchstaben
• 0.2em
• 0.5mm
Beispiel:
Letter-spacing: 1.2 mm;
4.1.3 text-decoration
Zusätzliche Textattribute:
• none
• underline
• overline
• line-through
• blink
Beispiel:
text-decoration: underline;
4.1.4 vertical-align
Setzt die Textposition zum Elternelement, nur innerhalb eines Textes, nicht zum DIV-Element gültig
• Baseline
// Grundlinie
• Sub
// Tiefer
• Super
// Höher
• Text-top
// Ausrichtung an den oberen Rändern
• Text-bottom // Ausrichtung an den unteren Rändern
• Middle
// Vertikale Zentrierung bzw. Elternelement
• Top
// Ausrichtung am größten Element
• Bottom
// Ausrichtung an tiefsten Element (g)
• 30%
// positiver oder negativer Wert)
vertical-align: middle;
vertical-align: 30%;
4.1.5 text-transform
Text-Umwandlung
• capitalize
• uppercase
• lowercase
• none
Der erste Buchstabe wird immer groß geschrieben
Beispiel:
text-transform: capitalize;
4.1.6 text-align
Horizontale Ausrichtung
• left
• right
• center
• justify
(Alle Zeilen haben die gleiche Länge)
4.1.7 text-indent
Platz vor dem ersten Wort , Einrücken der Zeile um x Einheiten
• 5em
• 2mm
4.1.8 line-height
Linienhöhe unabhängig zur Schrifthöhe
• 1.5
Beispiel:
line-height: 1.5; font-size: 12pt
Fontgröße 12pt, Linienhöhe 18pt (Faktor 1,5)
Beispiele:
CODE { color: red ; font-weight: bold ; text-decoration: underline}
H1 { font-size: 28pt ; color: maroon ; text-align: center}
P.newstyle { letter-spacing: 0.5em ; text-transform: uppercase }
4.1.9 white-space
Legt fest, wie Textumbrüche, Leerzeichen und Tabulatoren im Quellcode vom Browser angezeigt
werden.
white-space: Behandelt Leerzeichen und Zeilenumbrüche
• Normal
// Zusätzliche Leerzeichen werden ignoriert
• Pre
// Vorformatierten HTML-Text
• nowrap
// Nur Zeilen mit <BR> werden umgebrochen
Normal
Pre
Nowrap
pre-wrap
pre-line
4.2
Zeilenumbrüche im Quellcode werden nicht dargestellt und mehrere Leerzeichen
im Quellcode zu einem zusammengefügt. Der Browser fügt einen Zeilenumbruch
am Zeilenende ein.
Zeilenumbrüche und Leerzeichen werden, wie im <pre>-Tag, so dargestellt, wie
sie im Quellcode eingegeben sind.
Zeilenumbrüche im Quellcode werden nicht dargestellt, mehrere Leerzeichen im
Quellcode zu einem zusammengefügt und der Browser fügt am Zeilenende keinen
Zeilenumbruch ein. Dieser kann nur mit dem <br />-Tag erzeugt werden.
Wie im <pre>-Tag stellt der Browser Zeilenumbrüche und Leerzeichen dar wie
sie im Quellcode eingegeben sind, jedoch erfolgt am Zeilenende ebenfalls ein
automatischer Zeilenumbruch.
Mehrere Leerzeichen im Quellcode werden zu einem zusammengefügt und
Zeilenumbrüche fügt der Browser am Ende der Zeile, durch das <br />-Tag und
dort, wo sie im Quellcode eingegeben sind, ein.
Color und Background-Eigenschaften
Color
Textfarbe
background-color
background-image
background-repeat
no-repeat
Keine Wiederholung. Das Bild wird einmal dargestellt.
repeat
Horizontal und vertikal wiederholen.
repeat-x
Nur horizontal wiederholen.
repeat-y
Nur vertikal wiederholen.
background-attachment
Bestimmt, ob ein Hintergrundbild beim Scrollen mit wandert oder seinen festen Ort auf der Seite
behält. Wird deshalb in Zusammenhang mit background-image verwendet.
scroll
Das Hintergrundbild wandert beim Scrollen mit.
fixed
Das Hintergrundbild behält seinen festen Standort.
background-position left | right | top | bottom | center
Beispiele:
BG { background-position: left 20px ; background-attachment: scroll}
4.3
Background
color:
Farbe des Textes
background-color:
Hintergrundfarbe
background-image:
Hintergrundbild (URL)
background-repeat:
Wiederholung des Hintergrundbild
• repeat-x
• repeat-y
• repeat
// Wuederholt in x- und y-Richtung
background-attachment: Bild ist im Hintergrund (fixed) oder im Vordergrund (à la Winword)
• scroll
• fixed
background-position:
Position des Hintergrundbildes
a) durch einen Namen
• left
• center
• right
• top
• bottom
b) durch Prozentangaben
• w% x% y% z%
c) Angaben in in, em etc.
• 0.3em
• 2pt
Beispiele:
background-position{
right top;
}
10% 10% 90% 90%;
}
1em 1em 1em 1em;
}
// links / oben / unten / rechts
4.4
Box
Definiert einen Rahmen mit Außen- und Innenabständen. Die Bezeichnung Box erscheint nicht in der
Definition.
margin-top
margin-right
margin-bottom
margin-left
margin
Außenrand, Abstand Rahmen zur Außengrenze
Setzt alle vier Werte, (top, right, bottom, left)
padding-top
padding-right
padding-bottom
padding-left
padding
Innenrand, Abstand zum Rahmen
Setzt alle vier Werte, (top, right, bottom, left)
1. Beispiel:
html>
<head>
<title> Boxenvarianten</title>
h1 {
background-color: #00FF00;
font-family: Helvetica; Arial; sans-serif;
}
h2 {
background-color: yellow;
padding-left: 47px;
padding-top: 22px;
font-family: Verdana; Garamond; Times New Roman; sans-serif;
}
</style>
</head>
<body>
Die ist ein einfacher Text
<H1> Hier kommt die erste Überschrift (bsp1) </h1>
<H2> Hier kommt die zweite Überschrift (bsp2) </h2>
</body>
</html>
h2 {
padding: 47px;
// Gilt für alle vier Seiten
padding: 47px 22px 10px 2 px;
// 1. Wert: Top+Bottom; 2. Wert: Right+Left
padding: 47px 22px;
// Top, Right, Bottom, Left
padding: 47px 22px 10px;
// Top, Right+Left, Bottom
padding: 47px 22px 10px 2 px;
// Top, Right, Bottom, Left
font-family: Verdana; Garamond; Times New Roman; sans-serif;
border-top-width: 2px;
}
2. Beispiel:
Mit der Anweisung „padding: 1em“ werden die Ränder relativ zur Größe der Schrift gesetzt.
<html>
<head>
<!-relative Groessenabstaende in der Box -->
body {
background-color: #00FFFF;
}
h1,h2 {
background-color: red;
padding: 1em;
font-family: Times New Roman; sans-serif;
}
</style>
</head>
<body>
<H1> Hier kommt die erste Überschrift (bsp1) </h1>
<H2> Hier kommt die zweite Überschrift (bsp2) </h2>
</body>
</html>
4.5
Vordefinierte Selectoren
Folgende HTML-Elemente sind fest definiert:
• body
• h1 bis h6
• p
• td
• th
• ol
• ul
• li
4.6
Listen
4.6.1 list-style-type
none
circle
square
disc
decimal
lower-roman
upper-roman
decimal-leading-zero
lower-greek
lower-latin
upper-latin
armenian
georgian
Kein Aufzählungszeichen
Kreis, nur Rahmen
Quadrat
Gefüllter Kreis
Dezimalzahlen (1. ,2. , 3. , ...)
Kleine römische Zahlen (i. ,ii. ,iii. , ...)
Grosse römische Zahlen (I. ,II. , III., ...)
Dezimalzahlen mit führender 0 (01. ,02. , 03. , ...), nur Firefox
Kleine grieschische Nummerierung alpha, beta, gamma,...
Kleine Ascii-Zeichen (a. ,b., c. , ...)
Große Ascii-Zeichen (A., B. ,C. , ...)
Armenische Nummerierung
Georgische Nummerierung
Beispiele:
<ol style="list-style-type:decimal;">
<li>Zeile 1</li>
<li>Zeile 2</li>
</ol>
<ul style="list-style-type:square;">
<li>Zeile 1</li>
<li>Zeile 2</li>
</ul>
oder
ul {
style=list-style-type:square;
}
4.6.2 list-style-image
Bestimmt eine eigene Grafik als Aufzählungszeichen.
url()
none
Dateiname und evtl. Pfad der Grafik
Keine eigene Grafik.
Beispiele:
<ul style="list-style-image: url(images/bulletrd.gif);">
<li>Zeile 1</li>
<li>Zeile 2</li>
<li>Zeile 3</li>
</ul>
list-style-image: Statt Aufzählungspunkt wird eine Grafik verwendet.
UL{
list-style-image:url(http://www.hs-harz.de/image/point.jpg);
}
UL{
list-style-image:url(../image/point.jpg);
}
4.6.3 list-style-position
Rückt das Listenzeichen in der ersten Zeile ein, wenn sich der Eintrag über mehrer Zeilen erstreckt.
<ul>-, <ol>-Tags und display:list-item-Elemente
inside
outside
Die erste Zeile wird soweit eingrückt, dass das Aufzählungszeichen und der Listeneintrag
Linksbündig abschließen.
Das Aufzählungszeichen steht links vom Listeneintrag.
Beispiel:
<ol style="list-style-position:outside;">
<li>Zeile 1<br>Zeile 1</li>
<li>Zeile 2</li>
<li>Zeile 3</li>
</ol>
oder
ol {
style=list-style-position:outside;
}
4.6.4 list-style
Kurzform der drei Listenformatierungen.
Beispiel:
<ol style="list-style:decimal outside;">
<li>Zeile 1</li>
<li>Zeile 2</li>
<li>Zeile 3</li>
</ol>
oder
ol {
style=list-style:decimal outside;
}
4.7
Absatz / Paragraph
Beispiel:
P{
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 8pt;
color : #000000;
line-height : 13pt;
}
4.8
Bilder und Text
Texte um Bilder werden mit dem Tag float umflossen. Das Tag „Clear“ setzt dieses Umfließen außer
Kraft.
Beispiel:
<img src="Skully.GIF" alt="Skully.GIF" border="0" style="float:left;">
Die ist ein einfacher Text, der ein ganzes Bild umfließen soll, dabei muss er aber
sehr lang sein, sonst kommt der Effekt nicht tragen, so dass dieser Text
immer noch weiter gehen muss. Nun gut, dann eben der zweite Satz.

<p style=clear:left;">
Die ist ein einfacher Text, der ein ganzes Bild umfließen soll, dabei muss er aber
sehr lang sein, sonst kommt der Effekt nicht tragen, so dass dieser Text
immer noch weiter gehen muss. Nun gut, dann eben der zweite Satz.
Dies ist aber schon der dritte Satz und es wird noch besser. Der vierte
Satz ist nicht weit, er endet vor dem fünften Satz. Bald schon sollte
dieser Text zu Ende sein, denn Inhalt hat er relativ wenig. Aber was
ist schon relativer Inhalt.
Ergebnis:
Abbildung 1
Bilder mit Float-left und Clear-Left
5 Border (Ränder)
Setzt für die Rahmen (oben, rechts, unten, links) jeweils den Stil, die Farbe und die Breite. Wird nicht
von allen Browsern unterstützt.
Hinweis:
Bitte auch den Border-Style setzen (border-style: double;)
Border-Breite:
Entweder eine Maßangabe oder ein Element aus der Liste:
• thin
• medium
• thick
border-top-width:
Setzt die obere Rahmenstärke.
border-right-width:
Setzt die rechte Rahmenstärke.
border-bottom-width: Setzt die untere Rahmenstärke.
border-left-width:
Setzt die linke Rahmenstärke.
border-width:
Setzt alle vier Ränder
border-width: 3px 10px 12 px 14 px
// 3 px oben, 10px rechts, 12px unten, 14px rechts
border-top-color:
Setzt die obere Rahmenfarbe.
border-right-color:
Setzt die rechte Rahmenfarbe.
border-bottom-color:
Setzt die untere Rahmenfarbe.
border-left-color:
Setzt die linke Rahmenfarbe.
border-color:
border-color: red blue, green yellow
border-top-style:
Setzt den oberen Rahmentyp (gestrichtelt, solid etc.).
border-right-style:
Setzt den rechten Rahmentyp (gestrichtelt, solid etc.).
border-bottom-style:
Setzt den unteren Rahmentyp (gestrichtelt, solid etc.).
border-left-style:
Setzt den linken Rahmentyp (gestrichtelt, solid etc.).
border-style:
border-style: ridge groove double none
Attribute:
• double
• groove
• inset
• none
• outset
• ridge
• solid
// doppelter Rand
// 3-Dim. Rand
// „eingefallener Rand
// kein Rand
// hervorgehober Rand
// mit Rand
Beispiel:
<html>
<head>
<!-relative Groessenabstaende in der Box -->
body {
}
.myStyle {
border-color: red blue;
border-style: outset;
font-family: Courier new;
font-size: 22pt;
}
.myButton {
border-color: grey;
border-width: medium;
border-style: outset;
background-color: lightgrey;
font-family: Times New Roman;
font-size: 42pt;
}
</style>
</head>
<body>
<DIV class=myStyle>Hier kommt mein eigener Stil, ich hoffe es wird allen
gefallen.
Dieser Text muss aber etwas länger sein um Zeilen zu erzeugen !
</DIV>
<br>
<DIV class=myButton>Disk formatieren
</DIV>
</body>
</html>
Ergebnis:
Abbildung 2
5.1
Text mit CSS-Styles, scheinbar ein Schalter
MARGIN
Margin ist die Angabe eines Außenrandes. „margin“ bezieht sich auf den Abstand des Rahmens zum
Außenbereichs.
margin-top: 3px;
margin-right: 10px;
margin-bottom: 12px;
margin-left: 5in;
margin: 3px 10px 12 px 14 px;
margin: 3px 10px;
margin: 3px auto;
5.2
setzt den oberen Rand:
setzt den rechten Rand
setzt den unteren Rand
setzt den linken Rand
setzt alle vier Ränder // top, right, bottom, left
setzt alle vier Ränder // top+bottom=3, left+right=10
setzt alle vier Ränder // top+bottom=3, left+right=auto
PADDING
Padding ist die Angabe eines Innenrandes. Während „margin“ die Hintergrundfläche und
Schriftbereich gleich einrückt, definiert padding nur den Schriftbereich. Die Hintergrundfläche bleibt
erhalten, bzw. funktioniert zusätzlich.
padding-top: 3px;
padding-right: 10px;
padding-bottom: 12px;
padding-left: 5in;
setzt den oberen Rand:
setzt den rechten Rand
setzt den unteren Rand
setzt den linken Rand
padding: 3px 10px 12 px 14 px;
padding: 3px 10px;
padding: 3px auto;
setzt alle vier Ränder // top, right, bottom, left
setzt alle vier Ränder // top+bottom=3, left+right=10
setzt alle vier Ränder // top+bottom=3, left+right=auto
Der obere Ausschnitt zeigt das Tag „margin“. Der untere Ausschnitt zeigt beide „margin“ und
„padding“. Sie Beispiel test2.html und test2.css.
5.3
Mauszeiger
Folgende Typen existieren:
• auto
• crosshair
• default
• e-resize
• help
• move
• n-resize
• ne-resize
• nw-resize
• pointer
• s-resize
• se-resize
• sw-resize
• text
• w-resize
• wait
Betriebssystem abhängig
Einfache Pluszeichen
+
Weißer Pfeil
waagerechter Pfeil (East-Pfeil)
Fragezeichen mit Pfeil
Ein Pluszeichen mit einem Pfeil an jedem Ende
Senkrechter Strich mit Pfeilen (North-Pfeil)
North-East Pfeil
Nord-West-Pfeil
Hand
South-Pfeil oder n-resize
South-East-Pfeil oder nw-resize
South-West-Pfeil oder ne-resize
Textkursor I
West-Pfeil oder e-resize
SandUhr
Beispiel:
h1 {
cursor: crosshair;
}
<H1> Erste Überschrift mit crosshair </h1>
.h9 {
cursor: text;
font-size=32pt;
}
<DIV class=H9> Neunte Überschrift mit text </DIV>
<span id=Out1 class=Outline style="cursor: hand; ">
6 Navigationsmenü mit Listen
Ein Menü kann mittels Javascript oder mittels CSS-Methoden und einer Liste erzeugt werden. Das
folgende Beispiel zeigt eine Menüstruktur an Hand einer Liste. Dabei mussten folgende Eigenschaften
verändert werden:
• Anzeige des Listenknotens
• Normale Hintergrundfarbe
• Einrückung abschalten
• Referenz einfügen
• Hintergrundfarbe bei „Mouse-Over“
• Einfügen eines Untermenüs
Das Grundbeispiel ist aus Cascading Stylessheets, Shafer:
Die Eigenschaften sind auf mehrere Styles verteilt. Dabei gilt eine Vererbung.
Stylename
UL#menu
UL#menu li
UL#menu li a:link, UL#menu li a:visited
UL#menu li a:hover
UL#menu UL.subnav
Beschreibung
Es ist das Hauptstyle. Es verändert die Schrift,
die Ränder und die Hintergrundfarbe.
Das das Style, das in dem Block für ein
Listenelemnet wirksam ist. Es zeichnet eine Linie
oberhalb des Elementes.
Für beide Style existiert die identische
Definition. Sie werden für die Links aufgerufen.
Dieser Style wird aufgerufen, wenn der Mauskursor sich über dem Element befindet.
Definiert das Untermenü. Man könnte könnte
auch nur “.subnav“ schreiben.
Hier der kompletteQuellcode:
<html>
<head>
<title> Navigation mittels Listen, 11. Variante </title>
<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-
1. Aenderung: Liste ausschalten, list-style: none; -->
2. Aenderung: Listeneinrueckung ausschalten,
margin: 0; padding:0; -->
3. Aenderung: Hintergrundfarbe mit background-color: #C3C3C3; -->
4. Aenderung: Referenzen einfügen -->
5. Aenderung: Entfernen der Unterstreichung bei den Referenzen
mit text-docoration: none; -->
6. Aenderung: Oberen Rand einfuegen mit border-top -->
7. Aenderung: Wechsel der Hintergrundfarbe background-color
und hover -->
8. Aenderung: Die Listeneintraege als Block definieren,
Zusatzeintrag in UL#menu li -->
9. Aenderung: Hinzufügen von Innenraendern 6%, Breite auf 88%,
1,5 Zeilenabstand -->
10. Aenderung: Untermenues -->
body {
}
UL#menu {
font-family: Verdana;
font-size: 22pt;
list-style: none;
margin: 0;
padding:0;
background-color: 5C6F90;
background-color1: #C3C3C3;
color: blue;
}
//
//
//
//
1. Änderung
2. Änderung
2. Änderung
3+10. Änderung
UL#menu li a:link, UL#menu li a:visited {
text-decoration: none;
display:block;
width1="88%";
padding: 6px 6%;
background-color:#5C6F90;
font: bold 22pt Arial, sans-serif;
color: #FFFFFF;
}
//
//
//
//
//
//
//
5. Änderung
8. Änderung
8+9. Änderung
9. Änderung
9. Änderung
9. Änderung
9. Änderung
UL#menu li {
border-top: 1px solid #A5B5C5;
}
// 6. Änderung
UL#menu li a:hover {
background-color: #43616B;
}
UL#menu UL.subnav {
color:red;
font-size: 16pt;
list-style: none;
margin1: 0; 
padding:0;
}
// 7. Änderung
// 10. Änderung
</style>
</head>
<body>

<TABLE BORDER=1
WIDTH="100%">
<TR>
<TD COLSPAN="2" ALIGN="CENTER"> Kopfzeile</TD>
</TR>
<TR>
<TD WIDTH="300" >
<UL id="menu" >
<LI> <a href="page1.html">
Kapitel 1 </a> </LI>
<UL class="subnav" >
<LI> <a href="page1_1.html">
</UL>
</UL>
</TD>
<TD VALIGN="TOP">
<H2> Welcome to our Homepage
<H3> News: </H3>
Morgen ist Hitzefrei
</TD>
</TR>
<TR>
<TD
</TR>
</TABLE>
</body>
</html>
Ergebnis:
Kapitel 1.1 </a> </LI>
COLSPAN="2"> Statuszeile</TD>
</H2>
7 Beispiele
7.1
Definition in der CSS-Datei
BODY {
font-size: 12pt;
color: #FF0000;
}
UL{
list-style-type:square;
list-style-position:outside;
}
UL{
margin-left:2.0in;
color: #FFFF00;
background-color: black;
list-style-type:square;
list-style-image: url(point.gif);
}
OL{
}
H2 {
font-size: 14pt;
color: #0000FF;
font-weight : small;
}
H2 {
font-size: 28pt;
color: red;
margin-left: -1.0in;
: overline underline;
}
BLOCKQUOTE(
display: block
)
.CELL {
font-size: 19pt;
color: #000000;
}
.ROWHEADER {
font-size: 9pt;
color: #ffffff;
font-weight : bold;
}
TD {
font-size: 15pt;
color: #00FFFF;
font-weight : 900;
}
TH {
font-size: 19pt;
color: #00FF00;
}
BODY {
background: #EEEE50;
font-size: 12pt;
font-family: Times;
margin-left: 1.0in;
margin-right: 1.0in;
}
P{
text-indent: 0.5in;
margin-top: 0.25in;
font-size: 12pt;
font-variant: small-caps;
word-spacing: 0.4em;
letter-spacing: -0.1em;
}
#box1 {
position:absolute; top:50%;
left:10px; width:50%; height:150px; z-index:1;
}
7.2
Definition im HTML-Code:
Der Fachbereich <span class="bold">Automatisierung und Informatik </span>wurde im Herbst 1992
gegründet.
<EM class=superstyle>Automatisierung und Informatik</EM>
.MYSTYLE{
}
<DIV class=mystyle>Automatisierung und Informatik</DIV>
</DIV>
<div id="box3" style="background:yellow; border:solid 2px red;">box3













<div id="nav" style="float: left;
padding: 10px; width: 150px; background: rgb(220,230,220);
border: 5px groove red;">
Indexverzeichnis
A
Absatz P 26
B
Background 20, 21
Background-Attachment 21
Background-Color 21
Background-Image 21
Background-Position 21
Background-Repeat 21
Bilder 26
Bilder und Text 26
Border 28
Box 22
C
class 9
Color 20
CSS
Literatur 5
Validierung 5
Cursor 31
D
Display 12
Div 6, 7
double 29
F
Farbeinheiten 14
Farben 20
Font 15
Font-family 15
Font-size 16
Font-style 16
Font-Variant 16
G
Geschachtelte Elemente 10
I
id 9
K
Kommentare 14
Kursor 31
L
letter-spacing 18
Line-height 19
Listen 24
List-style 26
List-style-image 25
List-style-position 25
M
Margin 22, 30
Maßeinheiten 14
N
Nachbarschaft 10
Navigationsmenü mit Listen 33
P
P 26
Padding 30
R
Randeingabe 30
Ränder 28
S
Span 6, 7
T
Text 18
Text und Bilder 26
Text-align 19
text-decoration 18
Text-indent 19
Text-transfrom 19
V
Vererbung 10
Vertical-align 18
Vordefinierte Selectoren 24
W
Word-spacing 18
Z
Zeilenhöhe 19

Fachbereich Automatisierung und Informatik Kapitel CSS

Transcription

Documents pareils

Anlässe wechseln . . . Stimmungen wechseln . . . . . . mein Friseur

Anlässe wechseln . . . Stimmungen wechseln . . . . . . mein Friseur

PDF

Nachbericht im STYLE UP YOUR LIFE!

Reisefolder Colorline 2016

Events

Verarbeitungshinweise Transferpapier / Transferfolie

Interview mit Jyrki Perttunen, CEO von CPS Color: "In diesem

Irismatch® - eyecare.ro