Schrift und Abstände
- font-weight:bold;
- Die Schriftstärke, zur Auswahl stehen normal|bold|bolder|lighter
- font-style:italic;
- Anzeige der Schrift (kurz ob kursiv oder normal)
italic = kursive
oblique = schräggestellt
normal = normal
- letter-spacing:0.3em;
- Abstände zwischen den einzelnen Buchstaben – sollte relativ angegeben werden, also in EM
- word-spacing:0.5em;
- Abstände zwischen den einzelnen Wörtern – sollte relativ angegeben werden, also in EM
- border-bottem:5px dotted;
- Unterstreicht mit 5 Pixel dicken punkten (solid = durchgezogen)
Farbe: Vordergrund- und Hintergrundfarbe
- color:#FF9F00;
- Farbe für Vordergrund – angewendet auf Schrift ist dies die Farbe der Schrift. Kann entweder als Hex-Wert:“#FF9F00″ oder als Farbnamen angegeben werden: „orange“
- background-color:#FF00FF
- Farbe für den Hintergrundbereich; auch diese als Hex-Wert oder Farbnamen.
Rahmen von Tabellen
- border-color:#00FFFF;
- Rahmenfarbe – soll nur ein Teil des Rahmens gefärbt werden, dann:
border-top-color, border-right-color, border-bottom-color und border-left-color - border-width:4px;
- Rahmenstärke in Pixel
soll nur ein Bereich geändert werden:
border-top-width, border-right-width, border-bottom-width und border-left-width - border-style: dotted;
- Rahmenart bestimmen – folgende Möglichkeiten gibt es:
solid = durchgezogen
double = doppelt
none = kein Rahmen (unsichtbar)
hidden = kein Rahmen (unsichtbar)
dotted = gepunktet
dashed = gestrichelt
groove = 3D-Effekt
ridge = 3D-Effekt
inset = 3D-Effekt
outset = 3D-Effekt
Aufgabe:
Überarbeite deinen Stundenplan.
Erstelle das Verzeichnis ai/css/stundenplan
Erstelle hier Datei stundenplan.html
Erstelle das Grundgerüst.
Kopiere den code vom Stundenplan in das Grundgerüst.
Verweise auf die css Datei stundenplanstyle.css
Erstelle die Datei ai/css/stundenplanstyle.css
Weise den benutzten Schriften (h1 und p) einen neuen style zu.
Weise der Tabelle einen neuen style zu.
Benutze dazu die zuvor erwähnten Attribute.
Zum Beispiel:
- h1 – Farbe lila, Breite 1px und solid
- h2 – hellgrau, nur links und oben mit Rahmenstärke von 10px und solid
- p – Schrift schwarz, unten und rechts gepunktet orange
<table border="1">
<tr>
<td colspan="6"><h1>Stundenplan</h1></td>
</tr>
<tr>
<td></td>
<td><b>Montag</b></td>
<td><b>Dienstag</b></td>
<td><b>Mittwoch</b></td>
<td><b>Donnerstag</b></td>
<td><b>Freitag</b></td>
</tr>
<tr>
<td>1</td>
<td>sp</td>
<td>ch</td>
<td>de</td>
<td>sp</td>
<td><a href="http://ai.schule-tremser-teich.de"/>wpu</a></td>
</tr>
<tr>
<td>2</td>
<td>sp</td>
<td>ch</td>
<td>bo</td>
<td>kla</td>
<td><a href="http://ai.schule-tremser-teich.de"/>wpu</a></td>
</tr>
<tr>
<td>3</td>
<td>weku</td>
<td>ma</td>
<td>ma</td>
<td>bio</td>
<td>de</td>
</tr>
<tr>
<td>4</td>
<td>weku</td>
<td>ma</td>
<td>ma</td>
<td>bio</td>
<td>de</td>
</tr>
<tr>
<td>5</td>
<td>de</td>
<td>en</td>
<td><a href="http://ai.schule-tremser-teich.de"/>wpu</a></td>
<td>en</td>
<td>weku</td>
</tr>
<tr>
<td>6</td>
<td>de</td>
<td>en</td>
<td><a href="http://ai.schule-tremser-teich.de"/>wpu</a></td>
<td>en</td>
<td>weku</td>
</tr>
<tr>
<td>7</td>
<td></td>
<td></td>
<td></td>
<td>west</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td></td>
<td></td>
<td></td>
<td>west</td>
<td></td>
</tr>
</table>
Ausrichtung von Elementen
- text-align:right;
- Ausrichtung von Text, möglich sind: left|center|right|justify
left = linksbündig ausgerichtet (Standard)
center = zentriert ausgerichtet
right = rechtsbündig ausgerichtet
justify = als Blocksatz ausgerichtet
Aufgabe:
- h1 – Textausrichtung rechts und Hintergrundfarbe lightskyblue
- h2 – Textausrichtung zentriert, Schriftfarbe weiß, Hintergrundfarbe limegreen
Grafik und Bilder
- background-image: url(„hintergrund.jpg“);
- Für das Element wird ein Hintergrundbild geladen und in der Größe des Elements angezeigt
- background-repeat:no-repeat;
- Verhaltensweise des Bilds – ob es nur einmal angezeigt wird oder wiederholt – folgende Werte sind möglich:
repeat = wiederholen (Standard)
repeat-y = nur in Y-Richtung, also senkrecht wiederholen
repeat-x = nur in X-Richtung, also waagerecht wiederholen
no-repeat = nicht wiederholen, nur einmal anzeigen - background-attachment:fixed;
- Wasserzeicheneffekt – Bild bleibt trotz Scrollen stehen – mögliche Werte:
scroll = mitscrollen (Standard)
fixed = Hintergrundbild bleibt fixiert - background-position:right;
- Ausrichtung des Bilds, mögliche Werte:
top = vertikal oben
bottom = vertikal unten
center = zentriert (horizontal wie vertikal)
left = horizontal links
right = horizontal rechts
Anmerkung: vertikal und Horizontal kann auch vermengt werden, z.B. soll es rechts oben sitzen: background-position:right top;
Im CSS kann man die Schriftgröße (font-size) in unterschiedlichen Einheiten angeben. Die bekannteste Größe sind Pixel. Aber daneben gibt es auch noch die Einheiten em und rem. Was hat es damit auf sich?
Pixel sind eine absolute Einheit. Das heißt, eine Überschrift, die die font-size 20px hat, hat immer genau diese Größe, nämlich 20 Pixel. Ganz gleich, was um sie herum passiert.
Wie groß eine Überschrift ist, die in 2.5em angegeben ist, kann man erst sagen, wenn man weiß, in welcher Umgebung sie steht. Denn die Einheit em bezieht sich auf den nächsthöheren Container.
Beispiel em
<div class=“content“ style=“font-size:1.0em“>
<h2 style=“font-size:2.5em“>Eine Headline</h2>
</div>
Weitere Schriftarten
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
font-family: Consolas, monaco, monospace;
Schreibe einen Kommentar