V tej seriji smo že večkrat omenjali stylesheets. Ta stylesheets omogočajo strogo ločevanje postavitve in oblikovanja. HTML elementi so z uporabo CSS izključno odgovorni za logičen oziroma semantičen opis spletnega dokumenta.
Na začetku je koristno vedeti, kako dejansko izgleda stylesheets. Za to si oglejte prvi primer.
<!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 brskalniku dokument izgleda takole:
V body področju HTML datoteke so bila določena dva elementa:
• naslov
• odstavek
Z CSS se ti dve elementi oblikujeta. Za to je v head področju določen del stylesheeta z style. V tem delu se izvede oblikovanje elementov.
Tukaj je ponovno definicija za naslov h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
S prikazano sintakso se določita dve stvari:
• Določi se družina pisav.
• Določi se velikost pisave.
V tem trenutku gre splošno za uporabljeno sintakso. Vsaka CSS izjava vsebuje temeljno dva dela – selektor in CSS deklaracijo. Preko selektorja določimo element, ki naj bo oblikovan. Kako končno izgleda oblikovanje, določi CSS deklaracija. Selektor je vedno na levi strani, CSS deklaracija pa na desni strani v zavitih oklepajih.
Sama CSS deklaracija je sestavljena iz dveh elementov, in sicer lastnosti in vrednosti. Lastnost in vrednost ločimo z dvopičjem. Za vrednost sledi podpičje.
Selektor {
Eigenschaft: Wert;
}Vključevanje stylesheetsov
Obstajajo različni načini za vključitev stylesheetsov v spletne strani. Najprej lahko stilsko navodilo neposredno dodelite HTML oznaki. Primer:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
V tem primeru se naslov prikaže v modri barvi.
HTML oznaki lahko dodate več stilskih navodil hkrati.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Navodila lahko preprosto navedete drug za drugim, ločena s podpičjem.
Načeloma so takšna imenovana vdelana stila smiselna samo, če želite posamezna področja znotraj strani oblikovati individualno. Običajno bi morali tovrstno neposredno oblikovanje v HTML kodi vseeno preprečiti, saj bi se s tem HTML koda postala nepregledna.
Centralna definicija v področju head
V področju glave HTML datoteke lahko določite centralen stylesheet. V njem se določijo vsi stili, ki naj veljajo za to datoteko.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Prednost te različice: Za razliko od vdelane različice lahko določeni formati večkrat uporabljeni v dokumentu. V prejšnjem primeru je bilo definirano CSS razred text. (Podrobne informacije o selektorjih, kot je tu uporabljen razred, sledijo v naslednjem vadnici). Ta razred lahko sedaj poljubno uporabite v dokumentu.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Takšna definicija ima očitno prednost pred vdelano različico, saj omogoča hitro izvajanje sprememb.
Izločitev CSS izjav
Najbolj praktičen način definicije CSS je izločitev stilov v zunanjo datoteko. Tako lahko poljubno HTML datoteke dostopajo do iste CSS datoteke. Tako je enotno oblikovanje vseh datotek, ki spadajo v spletni projekt, zelo enostavno. Kasnejše spremembe, ki naj bi vplivale na vse strani, je zato enostavno uresničiti.
<link rel="stylesheet" type="text/css" href="css/styles.css">
V glavi HTML datoteke je določen element link. V link najprej navedete kombinacijo atributa vrednosti rel="stylesheet". Nato sledi type="text/css". Atributu href dodelite ustrezno CSS datoteko. Pazite – podobno kot pri vključevanju slik – na pravilno pot. V trenutnem primeru predvidevam, da se CSS datoteka styles.css nahaja v mapi css, ki je na enaki ravni kot dejanska HTML datoteka.
V referenčni CSS datoteki gre za običajno besedilno datoteko, ki ima pripono css. V zunanji CSS datoteki se določijo ustrezna CSS navodila.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Kot alternativo prikazani link-varianti je mogoče tudi uvoziti style-sheete. Tudi tukaj so CSS navodila locirana v zunanji datoteki. Za to se uporablja naslednja sintaksa:
<style type="text/css">
@import url("css/styles.css");
</style>
V oklepajih navedemo pot do uvožene CSS datoteke. Čeprav je @import CSS sintaksa, se lahko @import navodilo uporablja tudi v CSS datotekah. To omogoča klicanje drugih style-sheetov iz style-sheeta, kar omogoča boljšo organizacijo style-sheetov.
Seveda se pojavi vprašanje, ali bi morali uporabiti link ali @import. Načeloma se nagibam k uporabi link, saj je ta varianta enostavno hitrejša in s tem boljša za izvedbo strani.
Aplikacijski style-sheeti
Style-sheeta je mogoče definirati za zelo različne medije, kot so na primer tiskalnik ali zaslon. Za to se uporabi atribut media. Style-sheet je mogoče dodeliti tudi več različnim medijem, ki so ločeni z vejicami.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
V tem primeru sta bila klicana dva style-sheeta, eden za zaslon, drugi za primer, če se stran natisne. CSS datoteka druck.css se torej naloži, ko se pokliče funkcija tiskanja brskalnika. Na voljo so naslednje vrednosti za media:
• all – Velja za vse izhodne medije.
• aural – CSS datoteka se uporablja za sistem govorne izdaje.
• braille – CSS datoteka je namenjena brajl tiskalnikom z dotikovnim povratnim zvokom, ki lahko ustvarijo t. i. "braillovo pisavo".
• embossed – S tem se nagovarjajo brajl tiskalniki strani.
• handheld – Namensko za ročne naprave.
• print – CSS datoteka velja za tisk na papir. Brskalniki naj bi samodejno posegali po tej datoteki, ko se pokliče funkcija tiskanja.
• projection – Ta varianta je namenjena za projicirane predstavitve.
• screen – Namensko za prikaz na zaslonu.
• tty – CSS datoteka velja za medije, ki uporabljajo fiksno črkovno mrežo. To lahko na primer so telefaks aparati in terminali.
• tv – S tem se nagovarjajo naprave, ki so podobne televizorjem. Pričakuje se, da imajo naprave nizko ločljivost in omejeno možnost pomikanja.
Poleg prikazane HTML sintakse prek elementa link obstajajo tudi posebne CSS različice. Pri tem se uporablja @import ali @media.
<style type="text/css">
@media screen, projection {
/* Oblike za zaslon */
}
@media print {
/* Oblike za tiskanje */
}
</style>
Znotraj style-elementa se prek @media definira območje za definicije oblik, ki so namenjene določenemu izhodnemu mediju. Za @media mora slediti mediatip, ki je naveden v zaporedju presledkov, enega izmed že opisanih mediatipov. Več medijskih tipov je treba ločiti s presledki.
