Teorija

Ievads CSS
CSS (Cascading Style Sheet) izveidota 1995. gadā. CSS nosaukums izsaka to, ka vairākas stilu lapas var "kaskadēt" kopā, lai veidotu dokumenta galīgo izskatu.
 
HTML tagi un to atribūti nosaka dokumenta struktūru (sastāvu un atsevišķo elementu mijiedarbību) un vizuālo elementu ārējo izskatu. Tā kā Web dokuments sastāv no vairākām lapām un daudzi kodi atkārtojas, ir izdevīgi pielietot CSS tehnoloģiju, kas atdala parametrus, kuri nosaka dokumentu ārējo izskatu, no parametriem, kuri nosaka dokumenta iekšējo struktūru. CSS dod iespēju izmainīt HTML lapas īpašības un dod iespēju Web dizainerim uzlabot lapas ārējo izskatu.
 
Ar CSS palīdzību Web lapās var veikt šādas darbības:
• uzstādīt precīzu simbolu izmēru;
• izveidot rindkopu atkāpes;
• izvēlēties lapas lauka lielumu;
• ievadīt jaunus formatēšanas elementus (piem., izveidot rāmi ap tekstu);
• izvēlēties precīzu teksta izmēru (mērvienības);
• izveidot stila tabulas vairākām Web lapām;
• izmainīt elementa attēlošanas veidu uz ekrāna;
• iestatīt teksta, attēla vai kāda cita elementa precīzu novietojumu;
• vadīt fona zīmējuma novietojumu;
• izmainīt attālumu starp burtiem, vārdiem un teksta rindām.
 
Stilu lapas ļauj kontrolēt fontus, krāsu, virsrakstus, robežas un citas Web lapu elementu īpašības. CSS kodu ērti iekļaut HTML dokumentā nejaucot tā struktūru.
 
Tādējādi CSS priekšrocība ir tā, ka iespējams visu īpašību sarakstu uzdot vienuviet. Tas savukārt ļauj lapas sagatavot vienotā stilā un padarīt tās ērti labojamas.
 
CSS priekšrocības:
- iespējams precīzāk kontrolēt noformējuma elementus: fontu, krāsu, fonu u.c.;
- var ērtāk veikt izmaiņas;
- pietiekama neatkarība no pārlūkprogrammas;
- īsāks Web lapas kods, ātrāka lapas ielāde.
 
Pirms sāksim apgūt CSS, mums noteikti būtu jāzina HTML pamati, jo CSS "būtība" ir definēt, kā tiek attēloti HTML elementi!
 
CSS sintakse ir atšķirīga no HTML sintakses.
 
CSS balstās uz relatīvi vienkāršu sintaksi - ir jānosaka, kā HTML elements tiks attēlots, pievienojot tam īpašību sarakstu.
 
CSS sintakse jeb pieraksts veidojas no trim sastāvdaļām:
selektors {atribūts: vērtība}
 
Piemērs:
b01.png
 
Selektors - HTML elements jeb tags, kuru Jūs vēlaties definēt, piemēram, "p" (t.i., definēsim rindkopu). Ievērojiet, ka CSS-ā definējot elementu nelieto <>.
 
Atribūts - minētā taga kāda īpašība, kuru definēsiet, piemēram, "color" (t.i., definēsim minētās rindkopas burtu krāsu).
 
Vērtība - vērtība, kuru piešķirsiet minētajai īpašībai, piemēram, "blue" (t.i., šī krāsa būs zila).
 
Aiz selektora figūriekavās seko deklarācija. Piemēram, kombināciju font-size:12px sauc par deklarāciju.
 
Atstarpes starp šīm pieraksta sastāvdaļām var arī nelikt - tas katra paša ziņā. Izņēmums - nedrīkst būt atstarpe starp vērtību un tās vienībām, piemēram: "10 px"(nepareizi), "10px" (pareizi).
 
Atribūtu (īpašību) no vērtības atdala ar kolu, bet vairākas deklarācijas (piemērā color:blue; font-size:12px) savā starpā atdala ar semikolu.
 
Ja kaut kādas īpašības ir kopīgas vairākiem selektoriem, tad selektorus savā starpā atdala ar komatu, piemēram:
 
H1, H2, H3 {color: green}
 
Nereti ir tā, ka atsevišķus tagus vajag noformēt atšķirīgi no pamatnoformējuma. Piemēram, visu rindkopu burtu krāsa ir noteikta pelēka, bet šad un tad, lai uzsvērtu kādu domu, ir nepieciešams kādas rindkopas tekstu attēlot sarkanā krāsā. Tad ir lietderīgi definēt klases.
 
Šajā gadījumā katram definētajam stilam piešķir vārdu jeb klasi: .vārds, ko tālāk var izmantot tagā. Pirms vārda liek punktu. Klasē tiek ierakstīti elementi ar atbilstošajām vērtībām.
 
Piemērs:
b02.png
 
Klasi (.vārds) pieraksta šādā veidā:
<html>
<head>
<style>
.vārds
{
atribūts1: vērtība1;
atribūts2: vērtība2;
.......
atribūtsN:vērtībaN;
}
</style>
</head>
<body>
    <p class="vārds">teksts</p>
</body>
</html>
 
Ja ir nodefinētas klases stilu lapā, tad tās var tikt pielietotas jebkuram HTML elementam, izmantojot atribūtu class un norādot stila klasi. Klasi izsauc body daļā vai izmantojot div tagus.
 
Nākošajā piemērā klase ir definēta ar vārdu AAA. Klasē ir definēts burtu izmērs un krāsa, fonta veids, rāmis ap tekstu un tā krāsa. Stila klase AAA tiek identificēta ar tagu, kas satur atribūtu class: <p class="AAA">Teksts</p>.
 
Piemērs:
<html>
<head>
<title>Piemērs</title>
<style>
.AAA
{
color:red;
font-size: 24pt;
font-family: Geneva, Helvetica, sans-serif;
border: solid 0.2cm blue
}
</style>
</head>
<body> 
    <p class="AAA">Teksts</p>
</body>
</html>
Rezultāts:
 
b03.png
 
CSS izmanto divus atribūtus CLASS un ID. Class atļauj formatēt vairākus Web lapas elementus, bet ID - tikai vienu elementu.
 
HTML elementiem, to īpašībām, iespējams dot unikālu vārdu ar atribūta ID palīdzību.
 
ID uzdod head daļā, ID vārda priekšā rakstot zīmi #, piemēram,
 
b04.png
 
Body daļā īpašību sarakstu izsauc elementa taga iekšpusē, piemēram, <p id="selector1">Teksts</p>.
 
ID pamatdoma ir nedaudz līdzīga CSS klasēm, kad tiek nodefinēts kāda elementa īpašs attēlošanas veids un tam tiek piešķirts savs ID - unikāls vārds. Taču pamatatšķirība ir tajā, ka W3C standarti nosaka, ka vienu un to pašu ID vārdu lapā vai dokumentā var pielietot tikai vienreiz (t.i., tas ir unikāls, tikai šajā vienīgajā gadījumā šis elements lapā attēlojams sekojoši..), piemēram, lapas vienīgā reklāmkaroga (banner) noformēšanai un tml.
 
Piemērs:
Kods:
 
<html>
<head>
<title>Piemērs</title>
<style>
#AA {font-size:18pt; font-style:italic; color:blue}
</style>
</head>
<body>
<p id="AA">Teksts2</p2>
</body>
</html>
Rezultāts:
 
b05.png
 
Vienam un tam pašam HTML elementam vienlaicīgi drīkst pielietot gan "ID" gan "class".
 
Piemērs:
Kods:
 
<html>
<head>
<title>Id un Class pielietošana</title>
<style>
.AA {font-size:18pt; color:green}
#BB {color:#ff7f24; font-weight:bold}
body {font-size:xx-large}
</style>
</head>
<body>
<div>Teksts 1</div>
<div class="AA">Teksts 2</div>
<div id="BB">Teksts 3</div>
</body>
</html>
Rezultāts:
 
b06.png
 
CSS izmanto divus svarīgus tagus: <div> un <span>. Šie tagi ļauj dokumentā izdalīt atsevišķus apgabalus, kuriem var uzdot kādas specifiskas īpašības. Starpība starp šiem tagiem ir tāda, ka aiz bloka <div> teksts tiek rakstīts nākamajā rindā, bet aiz <span> nepāriet jaunā rindā. Izmantojot šos tagus, ir iespējams uzstādīt stilu atsevišķiem vārdiem un pat burtiem.
 
Daži stila parametri (piemēram, fontu izmērs, pozicionēšanas koordinātes, elementu izmērs un atkāpes) tiek raksturoti ar skaitliskām vērtībām, tāpēc bez skaitliskajām vērtībām ir nepieciešamas arī mērvienības. Izšķir relatīvās mērvienības (nav atkarīgas no konkrētā monitora vai printera) em, ex, en, px un % un absolūtās vienības in, cm, mm, pt un pc.
 
Apzīmējums
Nosaukums
Piemērs
in
colla
<p style="font-size:1in">
cm
centimetrs
<p style="font-size:1cm">
mm
milimetrs
<p style="font-size:1mm">
px
pikselis
<p style="font-size:1px">
pt
punkts
<p style="font-size:1pt">
pc
piks
<p style="font-size:1pc">
%
procents
<p style="font-size:1%">
em
platums relatīvās vienībās
konkrētā simbola platums
ex
augstums relatīvās vienībās
konkrētā simbola augstums
 
Svarīgi!
1 pt = 1/72 in;
1 pc = 12 pt = 1/6 in
1 in = 2,54 cm
  
Punkti (pt) un piki (pc) ir tipogrāfiskās vienības, kas apzīmē šrifta izmērus. Programmā MS Word punkti tiek norādīti ar skaitļiem no 8 līdz 72. Viens tipogrāfiskais punkts ir 0,375 mm liels.
Atsauce:
Tīmekļa lapu veidošana. HTML un CSS / Andris Kamars - Rīga: Apgāds Zvaigzne ABC, 2008. – 320 lpp.: il. – izmantotā literatūra: 121.-133. lpp.