Šajā sērijā jau vairākkārt ir norādīts uz stilu lapām. Šīs stilu lapas nodrošina stingru izkārtojuma un dizaina atdalīšanu. Pateicoties CSS, HTML elementiem ir ekskluzīvi jābūt web dokumenta loģiskajai vai semantiskajai aprakstīšanai.
No pieredzes guvu, ka ir noderīgi zināt, kā izskatās stilu lapa. Uz šo nolūku aplūkojiet pirmo piemēru.
<!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>Pārlūkprogrammā dokuments izskatās šādi:
HTML faila body apgabalā ir definēti divi elementi:
• virsraksts
• teksta rindkopu
Ar CSS tiek formatēti šie divi elementi. Šim nolūkam head apgabalā tiek definēts stilu lapas apgabals, izmantojot style. Šajā apgabalā notiek elementu formatēšana.
Šeit vēlreiz definīcija virsrakstam h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Ar redzamo sintaksi tiek noteikti divi elementi:
• tiek noteikta fontu saime.
• tiek definēta fontu izmērs.
Šajā brīdī centrējas uz izmantoto sintaksi. Katra CSS norāde pamatā sastāv no divām daļām - izvēlnes un CSS deklarācijas. Izvēlne nosaka elementu, kas jāformatē. Kā šī formatēšana galu galā izskatīsies, nosaka CSS deklarācija. Izvēlnes ir vienmēr pa kreisi, bet CSS deklarācija ir pa labi, iekavās.
Pats CSS deklarācija atkal sastāv no diviem elementiem, proti, īpašība un vērtība. Īpašību un vērtību atdala dubultpunkts. Pēc vērtības seko puntošana.
Selektor {
Eigenschaft: Wert;
}Stilu lapu ieklikšana
Eksistē dažādas iespējas iekļaut stilu lapas tīmekļa lapās. Pirmkārt, varat piešķirt stilu norādes tieši HTML tagam. Piemērs:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
Šajā piemērā virsraksts tiks parādīts zilā krāsā.
Jūs varat pievienot vairākas stilu norādes vienam HTML tagam.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Šīs vienkārši ierakstiet secīgi, katru atdalot ar semikolu.
Principā šie tā sauktie inline-stili ir saprātīgi tikai tad, ja individuālas jomas lapā jāformatē individuāli. Parasti jūs tomēr vēlaties izvairīties no šāda veida tiešas formatēšanas, jo tādējādi HTML kods kļūst pārāk neskaidrs.
Centrālā definīcija head- apgabalā
Jūs varat HTML faila galvas apgabalā definēt centrālu stilu lapu. Tajā tiek definētas visas stilu norādes, kas jāievēro šim failam.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Šīs variantas priekšrocība: Atšķirībā no iekšējās variācijas definētos formātus var izmantot vairākas reizes dokumentā. Iepriekšējā piemērā bija definēta CSS klase text. (Izsmeļoša informācija par selektoriem, piemēram, šeit izmantotā klašu, tiks pievienota nākamajā pamācībā). Šo klasi tagad varat izmantot jebkur dokumentā.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Šāda definīcija, atšķirībā no iekšējās versijas, ļauj veikt izmaiņas ātri.
CSS norāžu iznest
Visticamāk praktiskākā CSS definīcijas variācija ir stilu iznest eksportēšana uz ārēju failu. Tādējādi jebkuram HTML failam ir piekļuve vienai un tai pašai CSS failam. Tādējādi vienota formāta nodrošināšana visiem tīmekļa projektam piederīgajiem failiem ir vienkārša. Vēlāk izdarītās izmaiņas, kas jāpielieto visām lapām, var viegli realizēt.
<link rel="stylesheet" type="text/css" href="css/styles.css">
HTML faila galvā tiek definēts link elements. link iekšpusē vispirms norāda īpašību-vērtību kombināciju rel="stylesheet". Pēc tam seko type="text/css". href atribūtam norāda attiecīgo CSS failu. Šeit jāuzmanās - līdzīgi kā attēlu iekļaušanas gadījumā - pareiza ceļa norāde. Šajā konkrētajā piemērā es pieņemu, ka CSS fails styles.css atrodas css mapē, kas savukārt atrodas tajā pašā līmenī kā pati HTML fails.
Referētajā CSS failā ir parasts teksta fails, kuram ir css sufikss. Ārējā CSS failā tiek definētas atbilstošās CSS norādes.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Kā alternatīvu minētajai link variantai, stilu lapas ir iespējams importēt. Šeit CSS norādes atrodas ārējā failā. Tam izmanto šo sintaksi:
<style type="text/css>
@import url("css/styles.css");
</style>
Ieslēgtās iekavas nosaka ceļu uz importējamajām CSS failām. Neatkarīgi no šī fakta, @import ir CSS sintakse. Tāpēc @import norāde var tikt izmantota arī CSS failos. Tas dod iespēju izsaukt citus stilu lapas no vienas, papildinot stilu lapu labāku sakārtošanu.
Protams, rodas jautājums, vai tagad vajadzētu izmantot link vai @import. Pamatā es dodu priekšroku link, jo šis variants ir vienkāršāks, tāpēc lapas veiktspēja ir labāka.
Mediju specifiskās stilu lapas
Var definēt stilu lapas visādiem medijiem, piemēram, printerim vai ekrānam. Tam tiek izmantots media atribūts. Var piešķirt stilu lapu arī vairākiem atdalītiem medijiem, izmantojot komatus.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
Šajā gadījumā tika izsauktas divas stilu lapas, viena priekš ekrāna, otra gadījumā, ja tīmekļa lapa tiek izdrukāta. CSS fails druck.css tādējādi tiks ielādēts, kad pārlūka drukas funkcija tiek izsaukta. Kopumā pieejamie media vērtības ir sekojošas:
• all - pielietojams visiem izvades medijiem.
• aural - CSS fails tiek izmantots runas izdrukas sistēmai.
• braille - CSS fails ir paredzēts Braille printeriem ar taktīlām atsauksmēm, kas spēj radīt "Neredzīgo rakstu".
• embossed - Tas adresē Braille lapu printerus.
• handheld - paredzēts rokas nopeldes ierīcēm.
• print - CSS fails paredzēts papīra izdrukai. Pārlūkiem automātiski jāizmanto šis fails, ja tiek izsaukta drukas funkcija.
• projection - Šis variants ir paredzēts projicētām prezentācijām.
• screen - domāts ekrāna parādīšanai.
• tty - CSS fails paredzēts medijiem, kas izmanto fiksētu rakstu režimu. Tas varētu būt telegrāfistu aparāti un termināļi, piemēram.
• tv - šādi tiek adresēti TV līdzīgi ierīces. Pieņemts, ka ierīcēm ir zema izšķirtspēja un tās ir ierobežoti ritināmi.
Papildus minētajai HTML sintaksei ar link elementu ir arī specifiskas CSS versijas. Parasti izmanto @import vai @media.
<style type="text/css">
@media screen, projection {
/* Formāti ekrānam */
}
@media print {
/* Formāti drukai */
}
</style>
Iekšējās style elementā tiek definēts plašākas izmantošanas joma, kas paredzēta noteiktam izvades medijam, izmantojot @media. Pēc @media ir jābūt norādītam vienam no jau aprakstītajiem mediju veidiem, atdalot ar atstarpēm. Vairākus mediju veidus atdala ar komatiem.
