27.06.16 1 Digitale Medien
Werbung
27.06.16
Vergangene Vorlesungen
Digitale Medien
HTML-Grundlagen
WichtigeHTML-Elemente
Heute:Stylesheets
4 . S T Y L E S HE E T S , C S S
¡
¡
Trennung von Inhalt und Layout
Oder: Woher weiß der Browser wie eine Seite darzustellen
Anwendung
Beispiele
Style-/Formatangaben
ist?
4
HTMLstrukturiertnur
trotzdemwerdenHTML-Elementeformatiert
→BrowserhatDefault-Layout:Browser-Stylesheet
n
n
n
Stylesheets/Style-AngabenerlaubendieBeschreibungder
FormateigenschafteneinzelnerHTMLElemente
DefinitionneuerFormate,dieHTMLElementenzugewiesen
werden
dreiMöglichkeiten(mitweitererUnterteilung):
¨ separat für jedes HTML-Element
Heute:WiekannichmeineigenesDesignintegrieren?
Style-AngabenwerdenalsAttributdes jeweiligen HTML-Elementsangegeben
Style-AngabenwerdenfüreinebestimmteIDangegeben
¨ durch <style></style> Element innerhalb des HTML-Dokuments
¨ innerhalb einer Stylesheet Datei
n
n
n
n
n
n
AlledreiMöglichkeitenkönnengleichzeitigverwendetwerden
→ Stylesheetskönnenhintereinandergeschaltet,kaskadiert
werden
→ CascadingStylesheets(CSS)
Style Angabe für jedes HTML-Element
Style Angabe für jedes HTML-Element
einfachster Fall: style-Attribut
einfachster Fall: style-Attribut
5
6
Ausgangspunkt: HTML-Dokument
<html>
<hea d>
<t itle >Tite l de r Da tei< /titl e>
</he ad>
<bod y>
<h 1>Üb ersch rift </h1 >
</bo dy>
</html >
<html>
<hea d>
<t itle >Tite l de r Da tei< /titl e>
</he ad>
<bod y>
<h 1 st yle=" colo r:re d; f ont-s ize: 48px ;">
48 P ixel und Rot!
</ h1>
</bo dy>
</html >
n
AngabefürjedesElement einzelnzugeordnet
1
27.06.16
Stylesheets
Stylesheets - Syntax
7
n
Besser:Formatangaben zentralinStyle-Element
<html>
<hea d>
<t itle >Tite l de r Da tei< /titl e>
<sty le ty pe=" text /css ">
/* Forma tang aben für HTML -Ele ment e*/
</st yle>
</he ad>
<bod y>
<h 1>Üb ersch rift </h1 >
</bo dy>
</html >
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
Stylesheets im Style-Element
Individualformate
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>
FürjedesHTML-ElementkanneineeindeutigeID
vergebenwerden
¡
Darf nureinmalimgesamtenHTML-Dokumentvorkommen
<html>
<head>
…
</head>
<body>
<h1 id="Titel1">48 Pixel und Rot!</h1>
</body>
</html>
Stylesheets
Stylesheets
Individualformate
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>
Verwendungdesclass-Attributs
<html>
<head>
…
</head>
<body>
<h1 class="title">Ein bisschen Text</h1>
</body>
</html>
2
27.06.16
Stylesheets
Formatangaben für Klassen
14
Problembisher:FormatangabenwarenfüralleElemente
<html>
<head>
einesTyps
<title>Titel der Datei</title>
<style
type="text/css">
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>
sei te .h tm l
<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>
Beispiele für CSS-Eigenschaften
Pseudoformate
FormatefürHTML-Bestandteile,diesichjedochnicht
durcheineindeutigesHTML-Elementausdrückenlassen
¡
¡
¡
EinnochnichtbesuchterLink
EinbesuchterLink
Der erste BuchstabeeinesAbsatzes
<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>
for ma te .c ss
.title {
font-size:18pt;
color:red;
}
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
Beispiele für CSS-Eigenschaften
& -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>
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ögliche Werte: repeat-x, repeat-y, no-repeat
3
27.06.16
Beispiele für CSS-Eigenschaften
Hintergrundfarbe
Bildpositionfestlegen:background-attachment
¡
Beispiele für CSS-Eigenschaften
& -bilder
MöglicheWerte:fixed (Wasserzeicheneffekt), scroll
Position
PositionvonElementenfestlegen: CSS Eigenschaft position
MöglicheWerte:
¡ absolute =absolute Positionierung,
÷
<style type="text/css">
body { background-image:url(dateiname.jpg);
background-attachment: fixed;
}
</style>
÷
÷
¡
WeitereEigenschaften:background-position
¡
÷
¡
¡
Elemente sindaußerhalb des normalen Textfluß‘, liegen überden anderen Elementen
undbeeinflussen nichtihrLayout
relative =relative Positionierung (Verschiebung), gemessen ander
Normalposition oder Anfangsposition des Elements selbst.
÷
MöglicheWerte:left,right,center
gemessen am Randdes nächsthöheren Vorfahrenelements, das nichtdie
Normaleinstellung position:static aufweist. Scrollt mit.
Positionierung durchdie Angaben left, top,right, bottom
Positionierungsangaben left, top,right, bottom verschieben das Element aus dieser
Position.
nachfolgende Elemente verhalten sich so, als wäre das Element nicht verschoben
static = keinespezielle Positionierung, normaler Elementfluss
(Normaleinstellung).
fixed = absolute Positionierung, gemessen am"Viewport", d.h.am
Browserfenster. Bleibt beimScrollen stehen.
http://www.css4you.de/position.html
DIV zur freien Gestaltung
DIV-Elemente definieren
Festlegung von
Bereichen, beispielsweise
für:
¡
¡
¡
¡
GrundlagefürdenSeitenaufbau
GiltnichtnurfürDIV
FestlegungvonBreite,Höhe,Innen- undAußenabständen
Prinzip <div>
Titel
Menü
Hauptinhalt
Infoboxen
Inhalt:
weitere div-Elemente,
Absätze: <p>, etc.
</div>
Boxmodell
Boxmodell, Abstände
ma r gi n -t o p
bo r de r -t o p
pa d di n g- t op
margin-to p
width
ma r gi n -r i gh t
In h al t
bo r de r -r i gh t
In h al t
width
padding-b ottom
margin-ri ght
Inhalt
border-ri ght
In h al t
padding-r ight
heigh
t
border-le ft
margin-le ft
padding-l eft
height
padding-t op
pa d di n g- r ig h t
border-to p
bo r de r -l e ft
Menübereich
</div>
<div>
Hauptinhalt
</div>
Ermöglichen freie
pa d di n g- l ef t
<div>
rechteckige Bereiche
ma r gi n -l e ft
<div>
Dies ist der Titel
</div>
Boxmodell
border-bo ttom
margin-bo ttom
pa d di n g- b ot t om
bo r de r -b o tt o m
ma r gi n -b o tt o m
Gesamtbreite und –höhe ergibt sich aus der Summe aller Einzelwerte in x und yRichtung
4
27.06.16
HTML und CSS
Boxmodell, Positionierung
27
<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;
}
n
¨ TagsfürStruktur
¨ Inhalt„normaler“Text
¨ StrukturbeinhaltetauchMarkierungderTeile, dieandersformatiertwerden
sollen
n
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>
FormatierungwirdinStylesheets(CSS)festgelegt
¨ fürjedes ElementkanneinzelnFormatierungbestimmtwerden
¨ Browser-StylesheetssorgenfürStandard-Darstellung
¨ Autoren-StylesheetsüberschreibendieseEinstellungen undkönnenfür
individuelle Formatierungenverwendetwerden
Formate für verschachtelte Elemente
HTMLbeschreibtStruktur undInhaltderDaten
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
Wiekannmannurdie<p>-Elementeformatieren,die
innerhalbvon<div>stehen?
Cascading Style Sheets - CSS
Formate attributabhängig angeben
31
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; }
n
n
n
Stylesheets fürunterschiedliche Ausgabegeräte
wichtigfür z.B.Barrierefreiheit
DefinitioninHTML:
<html>
<head>
<title>Titel de r Datei</title >
<link rel="st ylesheet" medi a="screen" hr ef="website.c ss">
<link rel="st ylesheet" medi a="print, emb ossed"
href="d ruck.css">
<link rel="st ylesheet" medi a="aural" hre f="speaker.cs s">
</head>
<body>
...
</body>
</html>
5
27.06.16
Medientypen
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;}
}
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ür Bildschirmausgabe
tty:fürnicht-graphischeAusgabemitfesterZeichenbreite,
bspw.FernschreiberodertextorientierteBrowserwielynx
tv:fürTV-ähnlicheAusgabegeräte,meistmitgrober
Bildschirmauflösung
http://de.selfhtml.org/css/formate/einbinden.htm
Cascading Stylesheets
Cascading Style Sheets - CSS
Die Kaskade
34
Stylesheetskönnen(undwerden)hintereinander
gehängt
n
n
n
n
n
¡
undüberschreiben einander
BrowserStylesheet wirddurchAutorenStylesheet
überschrieben
mehrere Autorenstylesheetsüberschreibeneinander
dadurchkönnensehrkomplexeLayoutsrealisiert
werden, aberauchkomplexinderAnwendung
StylesheetskönnendreiQuellenhaben:
¡
¡
AutordesHTML-Dokuments
Benutzer:NutzerkönnenStyleinformationen füreinspezielles
Dokumentfestlegen
User-Agent: müsseneinDefault-Stylesheetbesitzenodersotunals
hättensieeins.
÷ Sollten allgemeine Erwartungen erfüllen → physikalische Formatierung
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.
6
27.06.16
Hilfsmittel
Firebug:Firefox-Addon,das:
¡
¡
¡
dieArbeitmitHTML-Quellcodeerleichtert
DieAnzeigeundManipulationvonCSS-Elementenerlaubt
DemProgrammierer dieKontrollederAbarbeitungvonScripten
(bspw.Javascript)ermöglicht→wichtigfürdieFehlersuche
MittlerweilefürallegängigenBrowserinähnlicherForm
implementiert
Web-DeveloperToolbar:Firefox-Addon
Zusammenfassung
HTML beschreibt Daten
CSSbeschreibt Layout
Angaben über Ausseheneines HTML-Elementes können:
1.
demElement selbst über style-Attributmitgegebenwerden
2.
innerhalb eines <style></style>-Elementesangegebenwerden
3.
in einer separaten css-Datei stehen
beiPunkt2und3mussZuordnungzuElement(n)erfolgen:
¡ für alle HTML-Elementeeines Typs:Angabe des Tag-NamensimStylesheet:
bspw. h1
¡ über class-Attribut des Elementes: → Selektor im Stylesheet fängtmitPunkt
an:.name
¡ über id-Attribut des Elementes: → Selektor im Stylesheet fängtmitRaute an:
#name
freie Gestaltungsmöglichkeiten über div-Element
BasisfürdasLayout:Boxmodell
7
