Šių serijų metu jau keletą kartų buvo pabrėžta stiliaus lapų svarba. Šie stiliaus lapai leidžia griežtai atskirti išdėstymą nuo dizaino. HTML elementai dėka CSS yra atsakingi tik už svetainės dokumento loginį arba semantinį aprašymą.
Pirmiausia yra naudinga žinoti, kaip iš tikrųjų atrodo stiliaus lapas. Pažiūrėkite pirmąjį pavyzdį.
<!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>Naršyklėje šis dokumentas atrodo taip:
HTML failo body sričiuose yra apibrėžti du elementai:
• antraštė
• teksto paragrafas
Šie du elementai formatuojami naudojant CSS. Šiems elementams formatuoti nustatoma stiliaus lapo sritis head naudojant style asmenį. Šioje srityje apibrėžiami elementų formatavimai.
Čia dar kartą pateikiama antraštės h1 apibrėžtis:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Per šią rodyklę nustatomi du dalykai:
• Nustatomas šriftas.
• Nustatoma šrifto dydis.
Šiame etape labai bendrai aptariama naudojama sintaksė. Kiekviena CSS instrukcija pagrįsta dviem pagrindiniais elementais - selektoriumi ir CSS deklaracija. Naudojant selektorių nurodomas elementas, kurį norime formatuoti. Kaip galiausiai atrodys šis formatus, nusako CSS deklaracija. Selektorius visada yra kairėje, o CSS deklaracija yra įstrižai skliausteliuose dešinėje.
Tikroji CSS deklaracija vėl gali susidėti iš dviejų elementų, t.y. savybės ir vertės. Savybė ir vertė yra atskirtos dvitaškiu. Po vertės seka kabliataškis.
Selektorius {
Savybė: Vertė;
}Stiliaus lapų įtraukimas
Yra daugybė būdų įtraukti stiliaus lapus į svetaines. Pirma, galite tiesiogiai priskirti stiliaus nurodymus HTML žymėjimui. Pavyzdys:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
Šiame pavyzdyje antraštė pavaizduota mėlynai.
HTML žymėjimui galite pridėti kelias stiliaus nurodymus.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Tiesiog jas užrašykite viena po kita, atskirant kabliataškiu.
Principiškai, šie taip vadinami įterptiniai stilai naudingi tik tada, kai norima individualiai suformatuoti atskirus puslapių sritis. Paprastai galite apriboti šį tiesioginį formatavimą, nes dėl to HTML kodas tampa pernelyg painus.
CSS instrukcijų iškėlimas
Akivaizdžiausias būdas apibrėžti CSS yra iškelti stilius į išorinį failą. Dėl to dauguma HTML failų gali pasiekti tą patį CSS failą. Taip galima lengvai nustatyti vienodą formatavimą visiems projektui priklausančių failų. Vėlesnius pakeitimus, kurie turėtų paveikti visus puslapius, galima lengvai atlikti.
<link rel="stylesheet" type="text/css" href="css/styles.css">
HTML failo antraštėje nurodomas link elementas. link viduje pirmiausia nurodomas atributas-reikšmė pora rel="stylesheet". Po to eina type="text/css". href atributui priskiriamas atitinkamas CSS failas. Čia svarbu - panašiai kaip įdedant vaizdus - teisingas kelias. Šiame pavyzdyje mano, kad CSS failas styles.css yra kataloge css, kuris savo ruožtu yra toje pačioje lygio kaip ir tikrasis HTML failas.
Paminėtame CSS faile yra paprastas tekstinis failas su css pabaiga. Išoriniame CSS faile apibrėžiamos atitinkamos CSS instrukcijos.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternatyva prie rodyklinės variantos yra galimas stilinių lapų importavimas. Čia CSS nurodymai taip pat yra laikomi atskirame faile. Naudojama ši sintaksė:
<style type="text/css">
@import url("css/styles.css");
</style>
Skliaustuose nurodomas kelias į importuojamą CSS failą. Beje, @import yra CSS sintaksė. Todėl @import nurodymą galima naudoti ir CSS failuose. Taip tampa galima iš vieno stiliaus lapo iškviesti kitus stilių lapus, kas padeda sukurti tvarkingesnę stilinių lapų struktūrą.
Zinoma, kyla klausimas, ar reikėtų naudoti link ar @import. Iš esmės aš link naudoju, nes ši variacija paprasčiau ir greitesnė, taigi puslapio veikimas yra geresnis.
Medijoms Specifiniai Stiliaus Lapai
Stilių lapus galima apibrėžti labai įvairioms prietaiso rūšims, pvz., spausdintuvams ar ekranui. Tam naudojamas media atributas. Galima priskirti stilių lapą keliosioms, kableliais atskirtoms medijoms.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
Šiuo atveju buvo iškviesti du stilių lapai, vienas skirtas ekranui, kitas – tuo atveju, jei pageidaujama spausdinti puslapį. CSS failas druck.css bus įkeliamas, kai naršyklės spausdinimo funkcija yra kviečiama. Iš viso yra prieinami šie media reikšmės:
• all – Taikoma visoms išvesties priemonėms.
• aural – CSS failai naudojami kalbos išvesties sistemai.
• braille – CSS failas skirtas Brailio spausdintuvams, kurie gali generuoti taikomąją „neregiams skirtą raštą“.
• embossed – Čia kalbama apie Brailio puslapių spausdintuvus.
• handheld – Skirta rankiniams įrenginiams.
• print – CSS failas skirtas spausdinimui ant popieriaus. Naršyklė automatiškai turėtų grįžti prie šio failo, kai yra kviečiama spausdinimo funkcija.
• projection – Ši variacija skirta projekcinėms pristatymams.
• screen – Skirta ekrano rodymui.
• tty – CSS failas taikomas prietaisams, kurie naudoja fiksuotą simbolinį rastrą. Tai gali būti, pavyzdžiui, telegrafo aparatai ir terminalai.
• tv – Per šią reikšmę kreipiamasi į TV panašius prietaisus. Skaitmeninės įrangos atveju numatoma, kad prietaisai turi mažą raišką ir yra ribotai slinkantys.
Be pateiktos HTML sintaksės su link elementu, yra ir specialių CSS variantų. Tai būna naudojamas @import arba @media.
<style type="text/css">
@media screen, projection {
/* Formatos ekrano rodymui */
}
@media print {
/* Formatos spausdinimui */
}
</style>
Style elemente, per @media, apibrėžiama sritis formatų apibrėžimui, skirtiems konkretiems išvesties priemonėms. Prieš @media, turi būti nurodytas vienas iš jau aprašytų medijos tipų, atskirtas tarpais. Kelios medijos turi būti nurodomos kableliais atskirtomis.
