V průběhu této řady bylo již několikrát upozorněno na styly. Tyto styly umožňují pevné oddělení rozložení a designu. HTML prvky jsou díky CSS výhradně pro logický nebo sémantický popis webového dokumentu.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>V prohlížeči dokument vypadá následovně:
V oblasti body HTML souboru jsou definovány dva prvky:
• nadpis
• odstavec textu
Oba tyto prvky jsou formátovány pomocí CSS. K tomu je v části head definována oblast stylopisu pomocí style. V rámci této oblasti je provedeno formátování prvků.
Zde je ještě jednou definice pro nadpis h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
V uvedené syntaxi jsou definovány dvě věci:
• Určení rodiny písma.
• Definice velikosti písma.
V tomto okamžiku jde zatím všeobecně o použitou syntaxi. Každý CSS příkaz se zásadně skládá ze dvou částí - selektoru a CSS deklarace. Selektorem se definuje prvek, který má být formátován. Jak daná formátování vlastně vypadá, určuje CSS deklarace. Selektor je vždy vlevo, CSS deklarace je vpravo v závorkách.
Samotná CSS deklarace se pak skládá z dvou prvků, a to vlastnosti a hodnoty. Vlastnost a hodnota jsou odděleny dvojtečkou. Za hodnotou následuje středník.
Selektor {
Eigenschaft: Wert;
}Začlenění stylopisů
Existuje mnoho různých způsobů, jak začlenit stylopisy do webových stránek. Nejprve můžete přidělit stylové pokyny přímo k HTML tagu. Příklad:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
V tomto příkladu je nadpis zobrazen modrou barvou.
K jednomu HTML tagu můžete také přidat více stylových instrukcí.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Poté je jednoduše zapište za sebou, oddělené středníkem.
V podstatě jsou tyto tzv. vnořené styly smysluplné pouze tehdy, pokud chcete jednotlivé části na stránce formátovat individuálně. Obvykle byste však měli tuto formu přímého formátování vyhýbat, protože kód HTML by se tím stal nepřehledným.
Centrální definice v oblasti head
V rámci hlavičky HTML souboru můžete definovat centrální stylopis. Zde jsou definovány všechny styly, které by měly platit pro tento soubor.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Výhoda této varianty: Na rozdíl od inline varianty mohou být definované formáty použity vícekrát v dokumentu. V předchozím příkladu byla definována CSS třída text. (Podrobné informace o selektorech, jako je zde použitá třída, budou uvedeny v dalším návodu). Tuto třídu nyní můžete libovolně používat v dokumentu.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Taková definice má samozřejmě oproti inline variantě také tu výhodu, že změny lze provádět velmi rychle.
Vyčlenění CSS příkazů
Nejpravděpodobnější variantou definice CSS je vyčlenění stylů do externího souboru. Tím může být k nim přistupováno z libovolného množství HTML souborů. Tak lze jednoduše dosáhnout jednotného formátování všech souborů patřících k webovému projektu. Pozdější změny, které by měly ovlivňovat všechny stránky, mohou být snadno provedeny.
<link rel="stylesheet" type="text/css" href="css/styles.css">
V hlavičce HTML souboru je definován element link. V rámci link je nejprve uvedena kombinace atribut-hodnota rel="stylesheet". Následuje type="text/css". Atributu href je přiřazena příslušná CSS soubor. Mějte na paměti, podobně jako při vkládání obrázků, správně nastavit cestu. V aktuálním příkladu předpokládám, že se soubor CSS styles.css nachází ve složce css, která se nachází na stejné úrovni jako samotný HTML soubor.
U odkazovaného CSS souboru se jedná o běžný textový soubor s příponou css. V externím CSS souboru jsou definovány příslušné CSS příkazy.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternativ zur gezeigten link-Variante lassen sich Stylesheets auch importieren. Auch hier befinden sich die CSS-Anweisungen in einer externen Datei. Verwendet wird dafür die folgende Syntax:
<style type="text/css">
@import url("css/styles.css");
</style>
Innerhalb der Klammern gibt man den Pfad zur zu importierenden CSS-Datei an. Bei @import handelt es sich übrigens um CSS-Syntax. Daher kann die @import-Anweisung auch innerhalb von CSS-Dateien verwendet werden. Dadurch wird es möglich, aus einem Stylesheet heraus andere Stylesheets aufzurufen, was eine bessere Ordnung der Stylesheets ermöglicht.
Stellt sich natürlich die Frage, ob man nun link oder @import verwenden sollte. Prinzipiell bevorzuge ich link, da diese Variante einfach schneller, die Performance der Seite also besser ist.
Medienspezifische Stylesheets
Man kann Stylesheets für ganz unterschiedliche Medien wie beispielsweise Drucker oder den Bildschirm definieren. Verwendet wird dafür das media-Attribut. Dabei kann man ein Stylesheet auch mehreren durch Kommata getrennten Medien zuweisen.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
In diesem Fall wurden zwei Stylesheets aufgerufen, eines für den Bildschirm, das andere für den Fall, dass die Seite gedruckt wird. Die CSS-Datei druck.css wird also dann geladen, wenn die Druckfunktion des Browsers aufgerufen wird. Insgesamt stehen die folgenden media-Werte zur Verfügung:
• all – Gilt für alle Ausgabemedien.
• aural – Die CSS-Datei wird für Sprachausgabesystem verwendet.
• braille – Die CSS-Datei ist für Braille-Drucker mit taktilem Feedback gedacht, die die sogenannte „Blindenschrift“ erzeugen können.
• embossed – Hierdurch werden Braille-Seitendrucker angesprochen.
• handheld – Für Handheld-Geräte vorgesehen.
• print – Die CSS-Datei gilt für den Ausdruck auf Papier. Browser sollten automatisch auf diese Datei zurückgreifen, wenn die Druckfunktion aufgerufen wird.
• projection – Diese Variante ist für projizierte Präsentationen vorgesehen.
• screen – Für die Bildschirmanzeige gedacht.
• tty – Die CSS-Datei gilt für Medien, die ein festes Zeichenraster verwenden. Das können beispielsweise Fernschreiber und Terminals sein.
• tv – Hierüber werden TV-ähnliche Geräte angesprochen. Dabei wird davon ausgegangen, dass die Geräte eine geringe Auflösung haben und nur begrenzt scrollbar sind.
Neben der gezeigten HTML-Syntax über das link-Element gibt auch noch spezielle CSS-Varianten. Dabei wird @import oder @media verwendet.
<style type="text/css">
@media screen, projection {
/* Formate für Bildschirm */
}
@media print {
/* Formate für den Druck */
}
</style>
Innerhalb des style-Elements definiert man über @media einen Bereich für Formatdefinitionen, die für ein bestimmtes Ausgabemedium gedacht sind. Dabei muss hinter @media, durch Leerzeichen getrennt, einer der bereits beschriebenen Medientypen angegeben werden. Mehrere Medientypen sind durch Kommata voneinander getrennt zu notieren.
