body
Werbung
Digitale Medien
4. STYLESHEETS, CSS
Vergangene Vorlesungen
HTML-Grundlagen
WichtigeHTML-Elemente
Heute:Stylesheets
¡
¡
Anwendung
Beispiele
Trennung von Inhalt und Layout
Oder: Woher weiß der Browser wie eine Seite darzustellen ist?
HTMLstrukturiertnur
trotzdemwerdenHTML-Elementeformatiert
→BrowserhatDefault-Layout:Browser-Stylesheet
Heute:WiekannichmeineigenesDesignintegrieren?
Style-/Formatangaben
4
n
n
n
Stylesheets/Style-Angaben erlaubendieBeschreibungder
Formateigenschafteneinzelner HTMLElemente
DefinitionneuerFormate,dieHTMLElementen zugewiesen
werden
dreiMöglichkeiten(mitweitererUnterteilung):
¨
separatfürjedesHTML-Element
n
n
¨
¨
n
n
n
Style-AngabenwerdenalsAttributdesjeweiligenHTML-Elements angegeben
Style-AngabenwerdenfüreinebestimmteIDangegeben
durch<style></style> ElementinnerhalbdesHTML-Dokuments
innerhalbeinerStylesheetDatei
AlledreiMöglichkeitenkönnengleichzeitigverwendet werden
→ Stylesheets könnenhintereinander geschaltet,kaskadiert
werden
→ CascadingStylesheets (CSS)
Style Angabe für jedes HTML-Element
einfachster Fall: style-Attribut
5
n
Ausgangspunkt: HTML-Dokument
<html>
<head>
<title>Titel der Datei</title>
</head>
<body>
<h1>Überschrift</h1>
</body>
</html>
Style Angabe für jedes HTML-Element
einfachster Fall: style-Attribut
6
<html>
<head>
<title>Titel der Datei</title>
</head>
<body>
<h1 style="color:red; font-size:48px;">
48 Pixel und Rot!
</h1>
</body>
</html>
n
AngabefürjedesElementeinzelnzugeordnet
Stylesheets
7
n
Besser:FormatangabenzentralinStyle-Element
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
/*Formatangaben für HTML-Elemente*/
</style>
</head>
<body>
<h1>Überschrift</h1>
</body>
</html>
Stylesheets - Syntax
SyntaxeinesEintragsimStylesheet:
Selektor {
Eigenschaft:Wert;
}
Selektor:HTML-Element(Tag-Name),bspw.:H1
Eigenschaft:bspw.color,width,height,…
Wert:wirdderEigenschaftzugeordnet,bspw.:red,200px,
Selektor kannauchWildcard*sein
Stylesheets im Style-Element
9
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
h1 { color:red; font-size:48px; }
</style>
</head>
<body>
<h1>48 Pixel und Rot!</h1>
</body>
</html>
Stylesheets
Individualformate
FürjedesHTML-ElementkanneineeindeutigeID
vergebenwerden
¡
Darfnureinmal imgesamtenHTML-Dokument vorkommen
<html>
<head>
…
</head>
<body>
<h1 id="Titel1">48 Pixel und Rot!</h1>
</body>
</html>
Stylesheets
Individualformate
IDskönnenfürdieZuweisungvonFormatangaben
verwendetwerden
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
#title1ID { color:red; font-size:48px; }
</style>
</head>
<body>
<h1 id="title1ID">48 Pixel und Rot!</h1>
</body>
</html>
Stylesheets
Individualformate
Verwendungdesclass-Attributs
<html>
<head>
…
</head>
<body>
<h1 class="title">Ein bisschen Text</h1>
</body>
</html>
Formatangaben für Klassen
Problembisher:FormatangabenwarenfüralleElemente
<html>
<head>
einesTyps
<title>Titel der Datei</title>
type="text/css">
<style
DefinitionauchfürbestimmteKlassenvonElementen
.title {font-size:18pt;color:Red;}
möglich
</style>
</head>
<body>
<h1 class="title">Überschrift 1</h1>
<p>Ein bisschen Fließtext</p>
<h1>Überschrift 2</h1>
<p>Ein bisschen Fließtext</p>
<h1 class="title">Überschrift 3</h1>
<p>Ein bisschen Fließtext</p>
</body>
</html>
Stylesheets
14
seite.html
formate.css
.title {
font-size:18pt;
color:red;
}
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css"
href="formate.css">
<style type="text/css">
body { background-color:#FFFFCC;margin-left:100px;}
...
</style>
</head>
<body>
<div class="title">Dies ist der Titel</div>
</body>
</html>
Pseudoformate
FormatefürHTML-Bestandteile,diesichjedochnicht
durcheineindeutigesHTML-Elementausdrückenlassen
¡
¡
¡
EinnochnichtbesuchterLink
EinbesuchterLink
DerersteBuchstabeeinesAbsatzes
<style type="text/css">
a:link { font-weight:bold; color:#0000E0;}
a:visited { font-weight:bold; color:#000080;}
a:hover { font-weight:bold; color:#E00000;}
a:active { font-weight:bold; color:#E00000}
a:focus { font-weight:bold; color:#00E000;}
p:first-line { font-weight:bold }
p:first-letter { font-size:300%; color:red;}
</style>
Beispiele für CSS-Eigenschaften
Schriftarten und -parameter
Font-family (Schriftart)
font-style(Schriftstil):italic,oblique,etc.
font-variant(Schriftvarianten):small caps
font-size(Schriftgröße)
font-weight (Schriftschnitt):bold,bolder,lighter,number
text-decoration (Textdarstellung):overline,line-through,
underline
color
text-shadow (Schatten)
font-stretch:Laufweite
letter-spacing,word-spaching (Zeichen-,Wortabstand)
text-transform (Transformationen)
http://de.selfhtml.org/
Beispiele für CSS-Eigenschaften
Hintergrundfarbe & -bilder
Hintergrundfarbe:background-color
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
body { background-color:#FFFFCC;margin-left:100px;}
h1
{ font-size:300%;color:#00FF00;
font-style:italic;
border-bottom:solid thin black; }
.text {font-size:18pt;color:Red;}
</style>
</head>
<body>
<h1>Überschrift</h1>
<div class="text">Dies ist der Text…</div>
</body>
</html>
Beispiele für CSS-Eigenschaften
Hintergrundfarbe & -bilder
Hintergrundbild:background-image
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
body { background-image:url(dateiname.jpg);}
</style>
</head>
<body>
<h1>Überschrift</h1>
</body>
</html>
Bildkachelung kannbeliebigangegebenwerdenmit:
background-repeat
¡
MöglicheWerte:repeat-x, repeat-y,no-repeat
Beispiele für CSS-Eigenschaften
Hintergrundfarbe & -bilder
Bildpositionfestlegen:background-attachment
¡
MöglicheWerte: fixed (Wasserzeicheneffekt), scroll
<style type="text/css">
body { background-image:url(dateiname.jpg);
background-attachment: fixed;
}
</style>
WeitereEigenschaften:background-position
¡
MöglicheWerte: left,right,center
Beispiele für CSS-Eigenschaften
Position
PositionvonElementenfestlegen:CSSEigenschaftposition
MöglicheWerte:
¡ absolute=absolutePositionierung,
÷
÷
÷
¡
relative=relativePositionierung(Verschiebung),gemessenander
NormalpositionoderAnfangspositiondesElementsselbst.
÷
÷
¡
¡
gemessenamRanddesnächsthöherenVorfahrenelements, dasnichtdie
Normaleinstellung position:static aufweist.Scrolltmit.
Positionierung durchdieAngaben left,top,right, bottom
ElementesindaußerhalbdesnormalenTextfluß‘, liegenüberdenanderenElementen
undbeeinflussen nichtihrLayout
Positionierungsangaben left,top, right,bottom verschiebendasElementausdieser
Position.
nachfolgende Elementeverhaltensichso,alswäredasElementnichtverschoben
static =keinespeziellePositionierung,normalerElementfluss
(Normaleinstellung).
fixed =absolutePositionierung,gemessenam"Viewport",d.h.am
Browserfenster.BleibtbeimScrollenstehen.
http://www.css4you.de/position.html
DIV zur freien Gestaltung
DIV-Elemente definieren
<div>
Dies ist der Titel
</div>
<div>
Menübereich
</div>
<div>
Hauptinhalt
</div>
rechteckige Bereiche
Ermöglichen freie
Festlegung von
Bereichen, beispielsweise
für:
¡
¡
¡
¡
Titel
Menü
Hauptinhalt
Infoboxen
Boxmodell
GrundlagefürdenSeitenaufbau
GiltnichtnurfürDIV
FestlegungvonBreite,Höhe,Innen- undAußenabständen
Prinzip <div>
Inhalt:
weitere div-Elemente,
Absätze: <p>, etc.
</div>
Boxmodell
Boxmodell, Abstände
margin-top
border-top
padding-top
margin-top
width
margin-right
padding-bottom
border-right
width
padding-right
Inhalt
margin-right
Inhalt
Inhalt
border-right
Inhalt
padding-right
heigh
t
padding-left
border-left
height
padding-top
margin-left
padding-left
border-left
margin-left
border-top
border-bottom
margin-bottom
padding-bottom
border-bottom
margin-bottom
Gesamtbreite und –höhe ergibt sich aus der Summe aller Einzelwerte in x und yRichtung
Boxmodell, Positionierung
<div id=„title“>
DiesistderTitel
</div>
<div id=„menu“>
Menübereich
</div>
<div id=„content“>
Hauptinhalt
</div>
#title{
width: 500px;
height: 100px;
border: 1px solid black;
text-align: center;
}
#menu{
width: 500px;
height: 30px;
border: 1px solid black;
text-align: center;
margin-top:5px;
}
HTML und CSS
27
n
HTMLbeschreibtStrukturundInhaltderDaten
¨
¨
¨
n
TagsfürStruktur
Inhalt„normaler“Text
Strukturbeinhaltet auchMarkierungderTeile, dieandersformatiertwerden
sollen
FormatierungwirdinStylesheets (CSS)festgelegt
¨
¨
¨
fürjedesElementkanneinzelnFormatierungbestimmtwerden
Browser-Stylesheets sorgenfürStandard-Darstellung
Autoren-Stylesheets überschreibendieseEinstellungen undkönnenfür
individuelle Formatierungenverwendetwerden
Formate für verschachtelte Elemente
Bisher:FestlegenvonFormatenfürHTML-Elementeohne
BerücksichtigungderPositioninnerhalbdesHTMLDokuments
Weiter:FormatangabenunterBerücksichtigungder
VerschachtelungvonHTML-Elementen
<p>To be or not to be...</p>
<div>
<p>Ein berühmtes Zitat aus der Tragödie Hamlet, …</p>
</div>
Wiekannmannurdie<p>-Elementeformatieren,die
innerhalbvon<div>stehen?
Formate verschachtelt angeben
wird in <div>Sektion rot gesetzt
<style type="text/css>
div p { color:red; }
div > p { color:blue; }
div * b { color:violet; }
div + p { margin-top:100px; }
</style>
Text wird in <div>-Sektion blau
gesetzt, wenn es direkt
verschachtelt ist, z.B
<div><p>text</p></div>
Text wird in <div>-Sektion violett
gesetzt, wenn es indirekt
verschachtelt ist, z.B
<div><p><b>text2</b></p></div>
Text wird mit 100 Pixel Abstand
gesetzt, wenn er direkt nach
<div>-Sektion auftritt
Formate attributabhängig angeben
Rot,wennh1 Attribut„title“enthält
Blau,wennh1 Attribut„Kapitel“mitderZuweisung
"uebersicht" enthält
Rot,wennAbsatzp Attribut"align" enthält
GrünundlinksbündigeTextausrichtung,wennalign
"center" zugewiesenwurde
<style type="text/css">
h1[title]
h1[kapitel="uebersicht"]
p[align]
p[align=center]
</style>
{
{
{
{
color:red; }
color:blue; }
color:red; }
color:green; text-align:left; }
Cascading Style Sheets - CSS
31
n
n
n
StylesheetsfürunterschiedlicheAusgabegeräte
wichtigfürz.B.Barrierefreiheit
DefinitioninHTML:
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" media="screen" href="website.css">
<link rel="stylesheet" media="print, embossed"
href="druck.css">
<link rel="stylesheet" media="aural" href="speaker.css">
</head>
<body>
...
</body>
</html>
Cascading Style Sheets - CSS
n
n
StylesheetsfürunterschiedlicheAusgabegeräte
DefinitioninCSS:
@media print {
/*Formatdefinitionen zum Drucken*/
selektor {eigenschaft:wert;}
}
@media screen {
/*Formatdefinitionen für Bildschirmausgabe*/
selektor {eigenschaft:wert;}
}
Medientypen
Werte für das media-Attribut und @media
all:CSSgiltfüralleMedientypen
aural:fürsynthetischeSprachausgabe
braille:fürBraille-Ausgabegerät
embossed:fürBraille-Drucker
handheld:fürkleineGeräte,Organizer,Handy,etc.
print:fürdenAusdruckaufPapier
projection:fürProjektion,bspw.mitBeamern
screen:fürBildschirmausgabe
tty:fürnicht-graphischeAusgabemitfesterZeichenbreite,
bspw.FernschreiberodertextorientierteBrowserwielynx
tv:fürTV-ähnlicheAusgabegeräte, meistmitgrober
Bildschirmauflösung
http://de.selfhtml.org/css/formate/einbinden.htm
Cascading Style Sheets - CSS
34
n
Stylesheetskönnen(undwerden)hintereinander
gehängt
n
n
n
n
undüberschreibeneinander
BrowserStylesheetwirddurchAutorenStylesheet
überschrieben
mehrereAutorenstylesheetsüberschreibeneinander
dadurchkönnensehrkomplexeLayoutsrealisiert
werden,aberauchkomplexinderAnwendung
Cascading Stylesheets
Die Kaskade
StylesheetskönnendreiQuellenhaben:
¡
¡
¡
AutordesHTML-Dokuments
Benutzer:NutzerkönnenStyleinformationen füreinspezielles
Dokumentfestlegen
User-Agent:müsseneinDefault-Stylesheet besitzenodersotunals
hättensieeins.
÷ SolltenallgemeineErwartungenerfüllen →physikalischeFormatierung
Stylesheetsüberlappenundbeeinflussensich
entsprechendderKaskade
http://www.w3.org/TR/CSS21/cascade.html#cascade
User Stylesheet
Firefox:userContent.css
¡
¡
profile-directory/chrome/
Beispielin:Mozilla Firefox\defaults\profile\chrome\userContentexample.css
Opera:unterEinstellungen→Inhalte →
DarstellungsoptioneneigenesStylesheet
auswählen
InternetExplorer:unterExtras→ Internetoptionen→
AllgemeinBarrierefreiheit wählenundBenutzerstylesheet
festlegen
Stylesheets auf mehrere Dateien verteilen
Bisher:einbindenmittelslink-Element→HTML-Syntax
InnerhalbdesStylesheetskönnenCSS-Dateienmit
@import eingefügtwerden→CSS-Syntax
<HEAD>
<STYLE>
@import "formate.css";
@import url("druck.css") print;
@import url("minipc.css") handheld;
</STYLE>
</HEAD>
@import "formate.css";
@import url("druck.css") print;
@import url("minipc.css") handheld;
im HTML-Dokument
im separaten Stylesheet
Wichtig: muss am Anfang
Des Stylesheets stehen.
Hilfsmittel
Firebug:Firefox-Addon,das:
¡
¡
¡
dieArbeitmitHTML-Quellcode erleichtert
DieAnzeige undManipulationvonCSS-Elementen erlaubt
DemProgrammiererdieKontrollederAbarbeitungvonScripten
(bspw.Javascript)ermöglicht→wichtigfürdieFehlersuche
MittlerweilefürallegängigenBrowserinähnlicherForm
implementiert
Web-DeveloperToolbar:Firefox-Addon
Zusammenfassung
HTMLbeschreibtDaten
CSSbeschreibtLayout
AngabenüberAusseheneinesHTML-Elementeskönnen:
1.
demElementselbstüberstyle-Attributmitgegebenwerden
2.
innerhalbeines<style></style>-Elementesangegebenwerden
3.
ineinerseparatencss-Dateistehen
beiPunkt2und3mussZuordnungzuElement(n)erfolgen:
¡ füralleHTML-ElementeeinesTyps:AngabedesTag-NamensimStylesheet:
bspw.h1
¡ überclass-AttributdesElementes:→Selektor imStylesheetfängtmitPunkt
an:.name
¡ überid-AttributdesElementes:→Selektor imStylesheetfängtmitRautean:
#name
freieGestaltungsmöglichkeitenüberdiv-Element
BasisfürdasLayout:Boxmodell
