Tài liệu Einstieg in CSS- P3 pdf

| Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark... 68 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark... 4 Abbildung 6.4 Ubung 0

Trang 1

6 Der erste Entwurf

div#header Die oberste »Reihe« ist fir einen Header vorgesehen, daher benennen wir das div-Element auch dementsprechend Hier kann spater ein Hintergrundbild, ein Logo oder Ahnliches platziert werden

div#nav Eine gut durchdachte Eine Navigationsleiste wird die Besucher unserer Seite durch die Navigation erleichtet Hạauptthemen leiten und anzeigen, wo sich der Besucher aktuell

so der Benutzerfreundlich-

keit

div-Elemente verschachteln Sie sehen in unserem Beispiel, dass div-Elemente beliebig verschachtelt (nested) werden diirfen Bereits in div#wrapper werden Elemente verschachtelt, nämlich div#header, dỉiv#nay,

div#wrapcontent und div#footer In div#wrapcontent werden

wiederum die Bereiche div#maintext und div#menu verschach-

- telt

EUIERNDERNOEEETNHEEI Dass wir in einige der div-Elemente jeweils ein Wort setzen,

men Eiielt ven hoi hat den einzigen Zweck, dass wir diese Container fiir unsere ersten telt werden Es dirfen keine Versuche sichtbar machen Ist ein div-Element vollig leer und hat Uberschneidungen beimVer-| — es auch noch keine CSS-Anweisungen beziiglich Breite und Hdhe schachteln entstehen! erhalten, so ist es auch nicht sichtbar

Korrekt verschachteln

div#wrapcontent Und weil es Spak macht, wrappen wir weiter: Uberall dort, wo mehrere Elemente sozusagen in einem Paket bewegt werden oder wo (wie in unserer ersten Webseite) zwei Bereiche neben- einander stehen sollen, ist so ein Wrapper niitzlich Das Ele-

ment div#wrapcontent umhillt die Bereiche div#maintext und

div#menu und halt sie zusammen

div#menu

Ein Container div#menu wird, wie der Name schon andeutet, unser

Ment beinhalten und fiir Rechtshander ergonomisch optimal an der rechten Seite platziert werden In diesem Fall erschiene es

wohl logisch, zuerst das Element div#maintext zu schreiben, da

es links liegen wird, und erst dann das div#menu Da das div#me nu aber rechts gefloatet werden soll, muss es zuerst geschrieben werden, wie Sie bereits vorher im Kapitel Uber Positionierung gelernt haben

|

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 2

6.2 Die CSS-Datei - Formen und Farben der Webseite

div#maintext Dieses Element ist als Container fiir die eigentlichen Texte (Inhal- te) vorgesehen

div#footer

SchlieBlich und endlich noch ein Container div#footer, fủr den

wir sicher auch praktische Nutzungsmöglichkeiten finden werden, zum Beispiel einen Copyright-Vermerk

Und so sieht es aus

Wenn Sie diese XHTML-Seite in einem Browser betrachten, wer-

den Sie enttéuscht sein - es gibt fast noch nichts zu sehen Nur die paar Worte, die wir in unsere Container platziert haben, stehen ein wenig verloren auf der Seite herum Ein div ohne Inhalt

und ohne Anweisungen fiir Dimensionen, also Breite und Hohe, ist schlicht unsichtbar

Sie werden im nachsten Schritt ein Stylesheet mit ganz einfa- chen Anweisungen erstellen, sodass Sie Ihre ersten Versuche mit

XHTML und CSS testen kénnen

6.2 Die CSS-Datei - Formen und Farben der Webseite

Eine durchaus tibliche Vorgehensweise ist, zuerst eine Grobstruk- tur der CSS-Datei anzulegen und diese nach und nach mit detail- lierten Anweisungen zu fủllen

Erstellen Sie bitte eine Textdatei und speichern Sie diese unter

dem Namen uebung01a.css ab Dieses Stylesheet wird das Ausse- hen unserer Webseite festlegen und Sie einige Ubungen lang be- gleiten Schreiben Sie die nachfolgenden Zeilen ab oder kopieren Sie die Datei von der DVD oder von der Website http://cssboxma-

nia.com/

Die Kommentare lassen Sie bitte weg Diese sollen Ihnen ledig-

lich, sozusagen an Ort und Stelle, den Code erlautern

Trang 3

6 Der erste Entwurf

Uberschriften */

die Reihenfolgeder = 4] ink {}

Pseudoklassen - diese Loa

Nur damit Sie sich gleich daran erinnern, dass Kommentare in CSS anders aussehen als in HTML, beginnt das Stylesheet mit einem

sheet Selektoren mit leeren

Deklarationen als Platzhalter,

đỉ beidei dế bức dee Beim Anlegen eines Stylesheets verwende ich grokteils Selekto-

in diesem Fall unbedingt ein ren mit leeren Deklarationen, um die Struktur des Stylesheets zu Paar geschwungener Klam- entwerfen und Selektoren festzuhalten, die ich nicht vergessen

Trang 4

6.2 Die CSS-Datei- Formen und Farben der Webseite

ID-Selektoren und die Eigenschaft »background«

#idname referenziert ein HTML-Element mit einer bestimmten id

Das Voranstellen des Element-Namens ist zwar nicht vorgeschrie- ben, dennoch kann ich es nur empfehlen Es dient der Ubersicht- lichkeit, denn eine id darf ja praktisch allen Elementen zugewiesen werden div#idname ist also gegentiber #idname zu bevorzugen

Die Eigenschaft background wird in Abschnitt 11.4 ausfủhr- lich behandelt Im Augenblick wird sie nur bendtigt, um div-Ele- mente sichtbar zu machen Als Farbwerte wird Hexadezimal-Code

verwendet, der sich vom RGB-Farbmodell ableitet und aus einer

Kombination des Raute-Zeichens # und sechs Ziffern besteht

Nur soviel an dieser Stelle: background verleiht einem Element

(hier sind es div-Elemente) einen Hintergrund Das kann Farbe aber auch ein Bild sein

Und so sieht es aus:

CšS Box#tania * LIbung 01a * CS5 fllr tins4elger * tIlsabeth Wetsch *Galllee De*slgn - @0zI|l0 1ref@%

4 Abbildung 6.2 Ùbung 01a (FF)

Trang 5

6 Der erste Entwurf

Schriftfarbe

Nattirlich fallt Ihnen auf, dass die Schrift im Bereich div#footer

viel zu dunkel ist Sie schaffen Abhilfe, indem Sie die Anweisung ftir div#footer wie folgt erganzen:

div#footer {background: #999999; color: #FFFFFF;}

Stolperfalle »color«

Eine der Stolperfallen in CSS ist der Eigenschaftsname fur die

Schriftfarbe Wahrend es font-family, font-size, font-style, font-weight usw heift, ist die Schriftfarbe einfach nur color

Die Eigenschaft fir die

Schriftfarbe bzw die Vorder-

grundfarbe hei8t color und benannt Und so passiert es immer wieder, dass man font-color

ist das Gegenstiick zu back - schreibt, was ja logisch ware Es ist aber falsch, da color zwar ground-color hauptsachlich fiir die Schriftfarbe eingesetzt wird, aber eigentlich

die Vordergrundfarbe meint

6.3 Browsercheck — ganz schnell

Es erscheint zwar ein wenig verfriuht, nach gerade einmal drei An- weisungen schon das Aussehen der Seite in verschiedenen Brow-

sern zu testen, aber sehen Sie einfach selbst, worauf ich hinaus

will: Im Schnelltest rufe ich die neue Seite einfach in Firefox (derzeit Version 2.0) und im Internet Explorer (derzeit Version 7.0) auf

und muss leider feststellen, dass die Abstande zu den Randern in

beiden Browsern unterschiedlich ausfallen

Ein Drama? Wie man's nimmt Tatsache ist, dass man mit sol-

chen Ungenauigkeiten nicht prazise designen kann Bei raffinierte- ren Designs kommt es ja oft auf jedes einzelne Pixel an

Sie erkennen an dieser Stelle, dass es offensichtlich in jedem Browser unterschiedliche Anweisungen gibt, wieviel Abstand zum Rand des Browserfensters gehalten werden soll

Browser-Stylesheets

Es gibt also Browser-Stylesheets, die zuallererst (also noch vor den von Ihnen erstellten Stylesheets) geladen werden und fur jeden Browser ein wenig anders aussehen Sie beinhalten eine lange Liste von Stilanweisungen und -vorgaben Meist stéren uns dabei vor allem unterschiedliche Angaben zu Aukenabstanden (margin),

Innenabstanden (padding) und Rahmen (border) Wir wollen

diese selber definieren, und zwar pixelprazise in allen Browsern

68

Trang 6

6.3 Browsercheck - ganz schnell

Der Universal-Selektor im Einsatz

Um diese Anforderung zu lésen, bedienen Sie sich des Universal-

Selektors und setzen margin, padding und border fir alle Elemen-

te auf null Die Eigenschaften werden somit zurtickgesetzt:

* {margin: Opx; padding: Opx; border: 0px;}

Somit haben Sie ftir alle Elemente (daftir steht ja der Universal- Selektor) Auen-, Innenabstande und Rahmen auf null gesetzt und kénnen danach bei Bedarf ftir einzelne Elemente individuelle

Werte setzen

Beim Wert null mussten Sie zwar keine Makeinheit schreiben,

ich empfehle dies aber ausdriicklich Oft andert man spater den Wert einer Eigenschaft und vergisst dann dabei, eine Makangabe

Go- FT VEFVESS, v\Of ACTQE YW#D7€7tef2AMA/AM,C27002Tđ119,COTTiU€OUtgSr)VeDUrg es | +r) x|[~eœ

We SBCs omens "Leura 01” Css tor Erteiger “Bie | | | R- m + @ *l}#te © Gera ”

Browser- oder CSS-Reset

Das generelle Zuriicksetzen einiger Eigenschaften nennt man auch Browser-Reset, da damit ja Eigenschaften des Browser-Stylesheets auBer Kraft gesetzt werden Wie einfach oder umfangreich so ein Browser-Reset ausfallt, dazu gibt es viele Philoso- phien bzw Strategien

4 Abbildung 6.4 Ubung 01b (FF)

4 Abbildung 6.5 Ubung 01b (IE)

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark

69

Trang 7

6 Der erste Entwurf

Noch ein Unterschied!

Was sieht das geschulte Auge des Pixelzahlers mit Schrecken? Da findet sich doch noch ein Unterschied in den beiden meistver- wendeten Browsern Sehen Sie einmal in die rechte obere Ecke des Fensters: Eine Liicke voller Tuicke - wie Wilhelm Busch feixen wủr de

Wenn Sie in der obigen Abbildung den rechten Rand unter die Lupe nehmen, entdecken Sie eine kleine Lticke Betrachten Sie unsere erste Seite live in den Browsern Firefox und Internet Explorer,

so fallt auf, dass Firefox keinen Scroll-Balken anzeigt, wenn der

Inhalt der Seite kleiner ist als das Browserfenster Der Internet Ex- plorer erzeugt hingegen in jedem Fall einen Scroll-Balken, gleich- giltig wie kurz die Seite ist

Ist das wichtig? Nun, das ist zwar nicht »lebensbedrohlich«,

wenn aber zum Beispiel die Startseite in Firefox (und anderen

Browsern auÊer IE) kiirzer und eine Folgeseite langer als das Brow-

serfenster (d.h ein Scroll-Balken erscheint im zweiten Fall) ist,

dann »hiipft« unser Layout seitlich beim Wechsel von der ersten

Seite zur nachsten um etwa zehn Pixel Pixelzahler wie mich stort

das tatsachlich

Sie werden in Kapitel 10, »Die Grundeinstellungen« lernen, wie Sie auch diese Ungenauigkeit noch beseitigen kénnen

6.4 Lorem ipsum - provisorischer Inhalt

Damit Sie sich die einzelnen Bereiche besser vorstellen kénnen,

fiillen Sie nun ein wenig provisorischen Inhalt ein Grafiker unter Ihnen kennen das auch als Blindtext Der wohl bekannteste Blind- text der Welt beginnt mit Lorem ipsum Auf der Website http:// lipsum.org/ konnen Sie den Blindtext herunterladen

Fillen Sie den Container div#maintext im XHTML-Code mit einem Absatz Blindtext, wie folgt (ich habe hier einen Teil des Tex- tes durch ersetzt):

<div id="maintext"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit Nullam facilisis condimentum ligula Curabitur ultricies.</p></div>

Texte sollten eigentlich immer in Absatzen (paragraph) stehen, d.h innerhalb eines p-Elements, sofern sie nicht in entsprechen-

—

Trang 8

6.4 Lorem ipsum - provisorischer Inhalt

Laufe der Ubungen lernen, wie auch Absatze flir eine bessere Le- sefreundlichkeit eingesetzt werden können

OT Peet OPM Suv teem cae fetes clue olive etn eigaey

Stelle nicht irritieren Bis zu einem gewissen Grad werden Sie dar- auf spater noch Einfluss nehmen kénnen

Z1 — Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 9

6 Der erste Entwurf

Und obwohl es nun so aussieht, als waren Sie von einem halbwegs

brauchbaren Layout noch meilenweit entfernt, sind es dank CSS

doch nur ein paar kleine Schritte, bis |hre Webseite vertraute For-

men annimmt

=

Trang 10

Die drei Saulen von CSS:

_ _autarial - CSS selectors >» Home

Mit dieser Anleitung treffen Sie die richtige Wahl

Sie werden lernen,

> welche Arten von Selektoren es gibt,

> wie Sie die richtigen Selektoren wahlen,

> wie Sie Selektoren gruppieren und kombinieren und

> wie Sie Selektoren optimal benennen

Trang 11

Der Universal-Selektor gilt oft auch implizit (wird also

nicht angefihrt)

Der Klassenselektor test bedeutet eigentlich * test und meint, dass alle Ele- mente mit der Klasse test ausgewählt werden

Das Prinzip von CSS ist einfach - es (be)ruht auf drei Saulen:

Selektoren wahlen also jene HTML-Elemente nach Element-

Name, ID, Klassenname und Attribut, welche mit den angegebe-

nen Eigenschaften versehen werden sollen

Beispiele:

hl {color: red;} /* nach Element-Name */

#hgrot (background: red;} /* nach ID */

-rotunter {border-bottom: lpx solid red;} /* nach Klassenname */

input[type="submit"] {color: green;} /* nach Attribut */

741 Der Universal-Selektor

Der Universal-Selektor, er wird als Asterisk * notiert, bedeutet:

Fur alle Elemente gilt: Platziert man den Universal-Selektor an den Anfang des Stylesheets, so nutzt man die Tatsache aus, dass Style- sheets nach ihrer Reihenfolge durchgeftihrt werden Somit lassen

sich dann Ausnahmen definieren

Trang 12

7.2 Typ-Selektoren (Element-Typ-Selektoren)

Typ-Selektoren werden so geschrieben wie der Name des HTML- Elements selbst, ohne spitze Klammern Typ-Selektoren haben den

Vorteil, dass diese in einer (X)HTML-Seite ohnehin vorkommen,

man muss also keine zusatzlichen Klassen und/oder IDs festlegen

Struktur und Semantik Die Empfehlung, innerhalb von CSS bevorzugt HTML-Selektoren

zu verwenden, setzt nattirlich voraus, dass wir in unserer XHTML-

Seite verstarkt HTML-Tags einsetzen, um Inhalte zu strukturieren

und mit einer gewissen Hierarchie zu versehen

Strukturelle HTML-Tags Wann immer méglich, sollten in XHTML-Seiten strukturelle HTML- Tags verwendet werden, anstatt immer neue Klassen und IDs zu definieren Es steht hierfiir eine Vielzahl an HTML-Tags zur Verfi- gung, sodass man den Einsatz von Klassen und IDs auf ein Mini- mum reduzieren kann Die wichtigsten HTML-Elemente und wie

man diese mit CSS formatieren kann, werden Sie im Verlauf der

Ubungen kennenlernen

Beispiel:

<p class="headline">Eine Headline</p>

<! Suboptimal >

<hl>Eine Headline</hl> <! Optimal >

Ein weiterer Grund, warum Typ-Selektoren gegentiber anderen

Selektoren bevorzugt werden sollten, ist die Tatsache, dass viele

Anwender nicht unser Stylesheet verwenden, sondern entweder gar keines (also nur das eingebaute Browser-Stylesheet) oder viel-

leicht sogar ein eigenes

Dann ist es wichtig, dass die Struktur unserer XHTML-Datei dennoch erkennbar ist und sich beispielsweise Headings anders darstellen als gewOhnlicher FlieBtext in Absatzen

Als strukturelle HTML-Elemente gelten unter anderem:

> html und body

> hl bis hé: Uberschriften

Uberlegen Sie bei jedem

ID- und Klassen-Selektor,

den Sie einsetzen wollen, ob Sie statt dessen ein struktu- relles HTML-Element verwenden konnten

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark

15

Trang 13

Die drei Saulen von CSS: 1 Die Selektoren

ul, ol, dl: Listen

label: Beschriftungen von Formularfeldern

caption: Uberschriften von Datentabellen

th: Kopfzeilen von Datentabellen (Table Headers)

blockquote und cite

in Headings erster Ordnung</hl> hoher als <h4>Suchbegriffe

in Headings einer niedrigeren Ordnung</h4

Eine komplette Liste der HTML-Elemente mit einer Kennzeich- nung der strukturellen Elemente finden Sie auf der Website des

W3C unter:

http://www.w3.org/TR/WCAG10-HTML-TECHS/#html-index

7.3 ID-Selektoren

ID-Selektoren beziehen sich auf eine ID, die wir in unserer

XHTML-Seite einem Element zugeordnet haben und werden mit einem Raute-Zeichen # vor dem ID-Namen geschrieben

Eine ID darf pro Seite nur Ich habe mir angewohnt, vor einem |D-Selektor immer das

einmal vergeben werden,da HTAAL-Element zu nennen, dem die ID zugewiesen ist Das ver-

ja i die Eindeutigkeit bessert die Ubersichtlichkeit Da man ja praktisch fiir jedes HTML-

as Wesen einer ID ist

Element eine ID vergeben kann, ist es sinnvoll, auf einen Blick zu

sehen, fiir welchen Element-Typ man die jeweilige ID festgelegt hat

Rein technisch ware das nicht notwendig, da ein ID-Selektor aufgrund der buchstablichen Einmaligkeit ohnehin nur ein einziges

Element wahlen kann

Beispiel:

#wohnbereich {} /* Das ist zwar korrekt, */

div#wohnbereich {} /* aber so ist es Ubersichtlicher */

76

Trang 14

7.4 Klassen-Selektoren

Im Gegensatz zu den IDs, die pro XHTML-Datei nur einmal vorkommen diirfen, konnen Klassen beliebig oft und unterschied- lichen Elementen pro Seite zugeordnet werden

Im CSS-Code wird auf eine Klasse also mit klassenname refe-

renziert Klassen-Selektoren koénnen mit ID- und Typ-Selektoren

kombiniert werden

HTML:

<p class="highlight">Rot hinterlegter Text</p>

<p>Hier ein wenig Text.</p>

<p class="highlight">Dieser Absatz wird gelb hinterlegt.</p>

</div><! ENDE #test >

Gs:

-highlight {background: red;}

Dies bedeutet: Alle Elemente mit der Klasse highlight, sofern

sie sich im Container div#test befinden, erhalten eine gelbe Hin- tergrundfarbe Anders ausgedriickt: Wenn sich in div#test ein

Element mit der Klasse highlight befindet, so erhalt dieses eine

gelbe Hintergrundfarbe

Ergebnis: Nur der zweite Absatz im Container div wird gelb hinterlegt, da ihm die Klasse highlight zugeordnet ist und sich

das p-Element innerhalb von div#test befindet

Ein Element darf nur eine ID aber mehrere Klassen haben

Trang 15

7 Die drei Saulen von CSS: 1 Die Selektoren

Klassen-Selektoren -fhozilla | sretox

X44 Ry Mies F/O: SERVERS_u/DFACTORY Swe

Heer ein weng Tere

Dieser Absatz wird gelb hinteslegt

Abbildung 7.1 >

Test von Klassen-Selektoren

HTML:

<h2>Das ist eine Headline</h2>

ch2 class="himmlisch">Diese Headline wird ganz sicher blau hinterlegt!</h2>

CSS:

Dies bedeutet: Ist einer h2-Uberschrift eine Klasse himmlisch zugeordnet, so erhalt sie einen blauen Hintergrund Es wird hier daher nur die zweite h2-Uberschrift blau hinterlegt, weil nur ihr

eine Klasse himmlisch zugewiesen wurde

Es bedarf also nur winziger Unterschiede in der Schreibweise,

um eine Anweisung grundlegend anders zu interpretieren, bezie- hungsweise um eine ganz andere Auswahl an Elementen zu treffen Bitte achten Sie daher ganz genau auf die Schreibweise

HTML:

<p class="wichtig">Das ist ein Absatz.</p>

<p>Das ist ein <span class="wichtig">Absatz.</span></p>

CSS:

Dies bedeutet: Alle Absatze (paragraph) mit der Klasse wichtig haben einen roten Hintergrund Die Anweisung trifft also auf die

erste Zeile im obigen Code zu, nicht aber auf die zweite Zeile bzw

den zweiten Absatz

p wichtig {background: red;}

8

Định dạng
Số trang	30
Dung lượng	5,91 MB