Introduction to Technologies Stylesheets mit CSS

Beispiele CSS

http://css.maxdesign.com.au/listamatic/http://www.csszengarden.com/tr/deutsch/http://www.albinoblacksheep.com/livedesignhttp://de.selfhtml.org/css/layouts/index.htm

Beispiele http://www.creative-edesign.com/css/css.phpenthält z.B. Fenster mit Scrollbalkenhttp://www.andreas-kalt.de/webdesign/links/cssenthält viele Beispiele und Links, oft auch in englischhttp://www.drweb.de/csspraxis/index.shtmlverschiedene Beispiele und Anleitungenhttp://www.alistapart.com/englische Seite zu Webdesign und CSShttp://www.accessify.com/tools-and-wizards/developer-tools/markup-maker/default.phpWerkzeug zur automatisierten Erstellung von HTML aus einer Liste von IDs für Seitenbereichehttp://www.andreas-kalt.de/webdesign/tutorials/runde-eckenTutorial für frei skalierbare Box mit „runden Ecken“

Webdesign mit CSSPlan mit detaillierter SpezifikationFunktionen und Eigenschaften der WebseiteTechnologien, die genutzt werden sollenStandards, Browser, Plattformen, die unterstützt werden sollen

Webdesign mit CSSWie viele Seitentypen? - Startseite, Unterseite, Verteilerseiten, Katalogseiten, Bestellseiten, Hilfeseiten, SitemapWie viele Seitenbereiche? - Kopfbereich mit Logo, linke Spalte Navigationsleiste, Bildbereich, Inhaltsspalte, Fußzeile ....

Webdesign mit CSSBox-Modell zur Platzierung von BereichenInhaltsbreite bzw. -höhe, Innenrand, Rahmenjedes HTML-Element hat eine eigene Boxpunktgenaue Positionierung von Elementen (Pixel)dehnbares Layout, dynamisch anpassbar (%)

Copyright: Jon Hicks

display - Eigenschaftentscheidet, wie Browser ein Element darstellen soll – Block, Listenelement, Textzeile o.ä.derzeit von den Browsern unterstützt: block, inline, list-item, none

Mehrspaltiges LayoutZusammenfassung von HTML-Elementen zu <div> - BereichenEingliederung in Seitenlayout durch Definition von Außenrand, Rahmen und InnenrandEigenschaft position: absolute oder relativePositionierung von Elementen relativ zum übergeordneten Element

Mehrspaltiges LayoutAbsolute Positionierung richtet sich immer am übergeordenten Element ausRelative Positionierung wird an der Stelle ausgerichtet, an der sich das Element ohne Positionierung befinden würde

Anordnung mehrerer Blöckemehrere Elemente nebeneinander: Summe ihrer Breitenwerte muss Gesamtbreite des Blocks entsprechenam besten gleiche Maßeinheit für alle BreitenangabenBsp.: Breite des body-Bereiches 400px, 1. Block 80px, 2. Block 200px, 3. Block 120pxBreite = width-Eigenschaft

float-EigenschaftWerte left, right, noneleft und right verschieben Element an die linke bzw. rechte Seite der übergeordneten BoxElement wird von Inhalten der nachfolgenden Boxen umflossenz.B. hängende Initialen

clear-EigenschaftAusschalten den float-Eigenschaftz.B. zum Trennen von Absätzen, wenn nur ein Absatz umfliessen soll, der nächste aber nichtWerte left, right, both, nonefür fast alle inline- und block-Elemente

Höhen und BreitenHöhenangaben unkritisch, da es keine Höhenbegrenzung gibtabsolute Werte sind unflexibel, Probleme bei Größenveränderung des BrowserfenstersLayout sollte dehnbar sein – ProzentangabenBeispiele: http://www.stichpunkt.de/css/bereiche.htmlhttp://de.selfhtml.org/css/layouts/mehrspaltige.htm

Überlappungen von ElementenStandardmäßig Anordnung von Elementen neben- oder übereinanderFür manche Effekte gewünscht: „stapeln“Angabe nötig, welches Element durch das andere verdeckt wirdPosition in der Stapelfolge heißt z-Index

z-Indexohne z-Index gilt Reihenfolge des HTML-CodesJe größer der z-Index, desto weiter oben in der Stapelfolge ist das Element{position: absolute; z-index: 2; }

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index

Design mit CSSnach dem Layout nun Design einzelner Elemente und Detailsfarbige Gestaltung, EffekteJeder Benutzer kann in den Benutzereinstellungen seines Browsers eigene Voreinstellungen treffen, die das Stylesheetüberschreiben

Farben mit CSSZuweisung möglich für Hintergründe, Rahmen, Text und LinksFarbdefinition über Farbnamen, systemspezifische Farbwerte, RGB-Dezimalwerte, RGB-Hexadezimalwerte, RGB-Prozentwerte16 Farbnamen per Standard unterstützt, aber 140 von nahezu jedem Browser interpretiert

Farben mit CSSsystemspezifische Werte beziehen sich auf Betriebsystemeinstellungen (28 verfügbar), eher relevant für WebanwendungenRGB-Werte geben den jeweiligen Rot-, Grün- und Blauanteil der gewählten Farbe an

color: blue;color: rgb(0, 0, 255);color: #0000ff;color: rgb(0%, 0%, 100%);

Farbauswahlpassende Farbkombination auswählen, allgemeine künstlerische Regeln„websichere“ Farben (web-safe colors): 216 Farben, die von allen Systemen und Browsern unterstützt werdenbei farbigen Texten auf farbigem Hintergrund können Flimmer- und Wischeffekte auftretenRot-Grün-Blindheit berücksichtigen

Farbe in CSSmeist keine Hintergrundfarbe für <body>-ElementTextfarbe für gesamte Seite? besser nicht, denn:grundsätzlich: immer, wenn Vordergrundfarbe festgelegt wird, muss auch Hintergrundfarbe festgelegt werdenVererbung nicht vergessen: Einstellungen gelten dann für ALLE anderen Elemente der Seite

Farbe in CSSbei Hintergrundbild oder Hintergrundfarbe alle darauf angeordneten Elemente mit transparentem Hintergrund versehen

.boxelement {color: white;background-color: transparent;

}

Einsatz von Farbefarbige Textkästen zur Lenkung der Aufmerksamkeit des Lesers durch Festlegung von Hintergrund- und Textfarbe und RahmenMarginalienzusammenhängende Bereiche durch Farbe kennzeichnen usw.

Schriften mit CSSnahezu unbegrenzte Skalierung möglichDefinition alternativer SchrifttypenEinstellung von Strichstärke, Kursivschreibung, Kapitälchenunterstützte Schriftgattungen: serif, sans-serif, monospace, cursive, fantasyKonfiguration im Browser automatisch bei Installation

Texteffekte in CSS<span> - Element zur Hervorhebung innerhalb einer Zeile (inline-Element)Textausrichtung mit text-align und den Werten left, center, right und justify(Blocksatz, von vielen Browsern nicht unterstützt)Zeileneinrückungen mit text-indentp {

text-indent: 2em;}

Texteffekte in CSSZeilenhöhe einstellen mit line-height,gibt Abstand vom obersten Punkt des höchsten Buchstabens einer Zeile bis zum obersten Punkt des höchsten Buchstabens der nächsten Zeile anrelative Werte ohne Maßeinheit verwenden, außer bei Designs mit z.B. ineinander fließenden Textzeilen

Texteffekte in CSSZeichenabstand einstellen mit letter-spacing (Laufweite)Änderung des Wortabstandes vermeidenTextdekoration mit text-decorationund den Werten underline, overline, blink, line-throughund none

Texteffekte in CSSschattierter Text durch zweimaliges Darstellen des selben Textes an leicht verschobener PositionPseudoklassen zur Gestaltung von HyperlinksReihenfolge in der Regel beachten (Kaskadierung), auch kombinierte Regeln möglichUnterstreichung von Links vermeiden mit text-decoration: none

Listen mit CSSBlockelement, alle bisher genannten Eigenschaften auch für Listen gültigspezielle Eigenschaften sind list-style-type, list-style-position (insideund outside) und list-style-image

CSS und Graphiken Positionierung auf der Seite, Verwendung als Anker oder Imagemap undPositionieren und Anordnen von Bildern neben TextPositionierung von Text auf BildernAusschneiden von Bildern

CSS und GraphikenText um Bilder fließen lassen mit float, wie bei anderen Elemente auchText auf einem Bild muss einen höheren Wert für den z-Index bekommen, eventuell mit Hintergrundgraphik für Text zur besseren LesbarkeitAusschneiden <div>-Bereich passender Größe erzeugen, Eigenschaft overflow: hidden; zuweisen und Bild so in <div>-Bereichpositionieren, dass gewünschter Bildteil gezeigt wird

Navigation mit CSSNavigation in Webseiten mit Menüleistenin HTML: Listen zur Navigation verwendenBeispiel „vertical06“ mit Dreamweavernachbauen von http://css.maxdesign.com.au/listamatic/vertical06.htm

Navigation mit CSSWelche mit CSS ansprechbaren Elemente enthält das Beispiel? Wie sind sie strukturiert?

ungeordnete Liste

Listeneinträge,sind Verweise

aktiver Eintrag

Beispiel HTML-Quelltext<div id="navcontainer"> //gruppiert alle folgenden Elemente

<ul id="navlist"> //ungeordnete Liste

<li id="active"> //Listeneintrag, über dem die Maus ist

<a href="#" id="current"> //aktueller EintragItem one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div>

Gestalten mit CSSneue HTML-Seite erstellenNavigationsliste einfügen (ungeordnete Liste)Navigationsliste auswählen (anklicken)am linken Bildschirmrand im Fenster „Tag“ gibt es CSS-Eingabehilfendort unter „id“ für die Liste (<ul>-Tag) „navlist“eintragen

Datei im Dreamweaver

CSS-Quelltext vom Beispiel

#navlist { padding-left: 0; margin-left: 0; border-bottom: 1px solid gray; width: 200px; }

CSS im Dreamweaverpadding-left: 0; //Innenabstand linksmargin-left: 0; //Außenrand links

CSS im Dreamweaverwidth: 200px; //Breite in Pixel

CSS im Dreamweaverborder-bottom: 1px solid gray;//unterer Rand 1 Pixel breit, durchgezogene Linie in grau

CSS-Quelltext vom Beispiel#navlist li { list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid gray; }

CSS im DreamweaverEinstellungen für Listeneinträgeneuer CSS-Stil #navlist li

list-style: none;

CSS im Dreamweavermargin: 0; padding: 0.25em;

CSS im Dreamweaver

border-top: 1px solid gray;

CSS-Quelltext vom Beispiel#navlist li a { text- decoration: none; }

Gestaltung mit CSShorizontale statt vertikaler Navigationsleiste

Gestaltung mit CSSAbstände einfügen

CSS - ValidierungTests in verschiedenen Browsernhttp://jigsaw.w3.org/css-validator/entweder Validator-Software herunterladen, URL angeben oder vollständiges HTMl-Dokument an W3C schickenErgebnis: ist ein Report, bei Bestehen darf Seite das Logo tragen