CSS (Cascading Style Sheet)
Pirms sāksim apgūt CSS, mums noteikti būtu jāzin HTML pamati, jo CSS "sūtība" ir definēt, kā tiek attēloti HTML elementi!
Veidojot www lapas ar HTML palīdzību un pareizi lietojot CSS mēs aiztaupīsim milzums darba gan sev, gan arī mūsu lapa apskatei ielādēsies ātrāk, jo HTML kods būs daudz īsāks. Būtiski samazināsies patērētais laiks, veltīts HTML elementu attēlošanas rediģēšanai vēlāk. Domāju, ka ar šo jau pietiek, lai lietotu CSS!
Sintakse
CSS sintakse jeb pieraksts veidojas no trim sastāvdaļām:
selektors {īpašība: vērtība}
- selektors - (selector) 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 <>
- īpašība- (property) 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 - (value) vērtība, kuru piešķirsiet minētajai īpašībai, piemēram, "gray" (t.i., un šī krāsa būs pelēka!). Ievērojiet, ka īpašību no vērtības atdala ar kolu! Atstarpes starp šīm trim 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).
Piemērs:
p {color: gray}
W3C standarts nosaka, ka gadījumā, ja vērtība rakstāma ar vairākiem vārdiem, tad tie liekami pēdiņās. Tomēr eksperiments ar pārlūkiem "Internet Explorer 6.0.29", "Opera 8.01" un "FireFox 1.0.4" pierādīja, ka arī bez pēdiņām tie uzdoto vērtību interpretēja pareizi:
p {font-family: "sans serif"}
Ja kādam HTML elementam vienlaicīgi vēlaties definēt vairākas īpašības (kas ir pareizi), tad tās savstarpēji atdala ar semikolu. Ērtības labad varam katru īpašību rakstīt savā rindiņā:
p {
font-family: "sans serif";
color:
gray
}
Sasaiste ar HTML
1. Ārējs CSS fails (datne :))
- Atveram kādu vienkāršu teksta redaktora programmu, piemēram "Notepad" (iekš Windows XP: Start > Programms > Accessories > Notepad) un ierakstam mūsu kodu:
p {color: gray}
- Tad saglabājam dokumentu ar brīvi izvēlētu nosaukumu, bet kā faila paplašinājumu liekam ".css", t.i., neatstājam noklusēti piedāvāto ".txt". Varētu būt, piemēram tā: "noformejums.css".
- Mūsu HTML dokumentā "head" sadaļā norādām atsauci (link) uz mūsu failu, kurā glabājas jaunie noformējuma nosacījumi:
<head>
<link rel="stylesheet" type="text/css"
href="noformejums.css"/>
</head>
Pilns HTML lapas kods varētu izskatīties šādi:
<html>
<title>Eksperiments</title>
<meta http-equiv="content-type" content="text/html;
charset= windows-1257">
<head>
<link rel="stylesheet" type="text/css"
href="noformejums.css"/>
</head>
<body>
<p>Lūk, kāds noformējums!!</p>
</body>
</html>
Šis arī ir galvenais CSS pielietošanas veids, kad visas Web lapas daudzo HTML dokumentu noformējums glabājas atsevišķi un HTML dokumentos atrodas tikai saite jeb links uz ".css". Patiesi ir vērts atklāt šīs domas diženumu!
2. Lapas iekšējais CSS
Šajā gadījumā CSS noformējumu saglabā nevis atsevišķā failā, bet visu ievieto konkrētā HTML dokumenta "head" sadaļā. Šo variantu ir vērts izmantot, ja konkrētajam dokumentam būs atšķirīgs (unikāls) noformējums no visiem citiem. Šoreiz būs jālieto tags <style> nevis <link>!
<head>
<style type="text/css">
p {color: red}
</style>
</head>
3. Elementa iekšējais CSS
Ir iespēja iekļaut savu CSS noformējumu arī kādā atsevišķā, konkrētā HTML elementā jeb tagā (t.i., "tikai šī rindkopa tiks noformēta tā un tā.."), taču to sīkāk neapskatīsim, jo principā to pašu var izdarīt ar HTML līdzekļiem, kā arī tiek pazaudēta CSS jēga - vienlaicīgi noformēt veselu HTML dokumentu vai tagu attēlošanu. Pie tam praksē daudz biežāk līdzīgas problēmas risina ar CSS kategoriju (classes) palīdzību, jo parasti pat unikālus noformējumus Web projektā pielieto vairāk kā vienu reizi. Protams, vienmēr ir izņēmumi :).
Visbeidzot varētu rasties jautājums: "Vai vienā HTML dokumentā var lietot pat visus trīs CSS pielietojuma variantus?" Atbilde ir: "Jā, protams!" Tikai šajā gadījumā būtu jāņem vērā piesaistītā CSS subordinācija, jeb prioritāte. Tā ir sekojoša:
- Elementa iekšējais CSS. Šim ir visaugstākā prioritāte. Piemēram, ja esam noteikuši, ka šīs rindkopas burtu krāsa būs sarkana, tad, neatkarīgi no tā, kādu burtu krāsu rindkopām paredz citi CSS noformējuma noteikumi, šīs rindkopas burti tomēr paliks sarkanā krāsā. Tomēr, ja citi CSS noteikumi paredz vēl kaut ko papildus, kas nav minēts šajā augstākas prioritātes CSS-ā, tad šie konkrētie papildus noteikumi tiks ņemti vērā (piemēram, lapas iekšējais CSS nosaka, ka visu rindkopu tekstam jāatrodas kursīvā utt.). Šis pats princips attiecas arī uz "lapas iekšējo" un "ārējo" CSS, t.i., augstāka ranga CSS-am vienmēr ir "pirmā roka".
- Lapas iekšējais CSS.
- Ārējais CSS fails.
CSS kategorijas (classes)
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ā. Šim nolūkam lieliski kalpo CSS kategorijas!
Lai labāk izprastu CSS kategorijas, varētu lietot piemēru par kādu 10. klasi, kurā mācījās trīs Jāņi. Parasti, lai konkretizētu, kuram Jānim šoreiz būs jāatbild, skolotājs vārdam "Jānis" mēdza "piekabināt" kādu papildus apzīmējumu - vai nu uzvārdu, vai arī "Jānis Nr.1", "Jānis Nr.2" utt. Tā arī mēs varam nošķirt un konkretizēt HTML tagus. Lūk CSS kods, kurā noformulēti trīs atšķirīgi rindkopu attēlošanas veidi, kur "p" būs parastais noformējums, bet pēc izvēles būs pieejami vēl divi. Pie tam šiem pārējiem diviem rindkopu noformējuma veidiem jāpiešķir kāds apzīmējums, kuru no HTML elementa atdala ar punktu:
p {font-family: arial; color: gray}
p.x {font-family: tahoma; color: red}
p.melnais {font-family: "sans-serif"; color:
black}
Tagad sasaistīsim HTML dokumentu ar mūsu CSS failu ar <link> tagu un pielietosim visus trīs rindkopu noformējuma veidus. Lai to izdarītu, <p> tagā mums būs jānorāda, kuru nodefinēto CSS rindkopas kategoriju (class) gribam pielietot šīs rindkopas teksta noformēšanā. To norāda pēc formulas: class="mūsu dotais noformējuma varianta nosaukums", pie tam nosaukums jāliek pēdiņās. Lūk piemērs..
<html>
<title>Eksperiments</title>
<meta http-equiv="content-type" content="text/html;
charset= windows-1257">
<head>
<link rel="stylesheet" type="text/css"
href="noformejums.css"/>
</head>
<body>
<p>Pelēks arials!</p>
<p class="x">Sarkana tahoma!</p>
<p class="melnais">Melns
sans-serifs!</p>
</body>
</html>
..un rezultāts!
Pelēks arials!
Sarkana tahoma!
Melns sans-serifs!
CSS ID (identifikācija)
Vēl gribu pieskarties kādai lietai, kas saistīta ar CSS ID. ID varētu tulkot kā kāda unikālu, tam vien piemītošu atpazīšanas zīmi. Cilvēkam tas, piemēram, ir personas kods.
ID pamatdoma ir nedaudz līdzīga CSS kategorijā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.
CSS ID kods, kur ID sastāv no simbola"#" un "nosaukuma",..
#specvirsr {font-family: arial;
color: red}
#spectext {font-family: arial; color: red}
..tagi HTML dokumentā, ar atsauci uz CSS ID..
<h3 id="specvirsr">Sarkans
arials virsrakstā!</h3>
<p id="spectext">Sarkans arials rindkopas
tekstā.</p>
..un rezultāts!
Sarkans arials virsrakstā!
Sarkans arials rindkopas tekstā.
Piebilde - vienam un tam pašam HTML elementam vienlaicīgi drīkst pielietot gan "ID" gan "class"!
Šrifts (font)
Tagad ķersimies klāt atsevišķu HTML elementu noformēšanai. Kā pirmo apskatīsim šriftu jeb fontu, jo piemēros to jau esam lietojuši.
Krāsa (color)
Arī šrifta krāsas noformēšanu netieši jau esam apskatījuši. Kā jau droši vien esat ievērojuši, tad īpašība "krāsa" apzīmējas ar "color". Taču tās vērtību var uzdot trīs dažādos veidos:
- var krāsas vērtību vienkārši nosaukt (protams, jālieto angļu valoda :)), piemēram "black", t.i., "melns". Šis ir labs variants, ja nepieciešams izmantot tikai pamatkrāsas, jo krāsu apzīmējumus vārdiski parasti ir vieglāk atcerēties. Taču šādi izmantojamo krāsu skaits ir ierobežots, jo W3C CSS standarts atbalsta tikai 16 krāsu vārdiskos nosaukumus:
- var lietot heksadecimālo (sešpadsmitnieku) sistēmu, piemēram "#000000", t.i., "melns". Ievērojiet, ka priekšā jāliek simbols "#". Krāsu vērtības heksadecimālajā un rgb sistēmā viegli uzzināt, lietojot kādu attēlu apstrādes programmu, piemēram Adobe Photoshop. Tikai, ja ir tāda iespēja, ieķeksējiet, lai tiktu rādītas web krāsas (only web colors). Pretējā gadījumā izvēlētā krāsa pārlūkprogrammā var tikt attēlota nekorekti;
- visbeidzot var lietot rgb (Red Green Blue) sistēmu, kad tiek nodefinētas visu trīs komponenšu vērtības, piemēram "rgb(255,0,0)", t.i., "sarkans". Ievērojiet sintaksi - sākumā tiek paziņots, ka lietosim rgb sistēmu "rgb", tad apaļajās iekavās uzdod atbilstoši sarkanās, zaļās, zilās krāsas vērtības tās atdalot ar komatu. Krāsu vērtības nedrīkst sajaukt vietām! Lai noteiktu rgb vērtības, atkal var lietot Adobe Photoshop, Paint.NET (bezmaksas produkts) vai kādu citu programmu.
black | silver | gray | white |
maroon | red | purple | fuchsia |
green | lime | olive | yellow |
navy | blue | teal | aqua |
Lūk CSS kods..
p {color: black}
p.a {color: #FFCC99}
p.b {color: rgb(255,0,0)}
..HTML kods..
<html>
<title>Eksperiments</title>
<meta http-equiv="content-type" content="text/html;
charset= windows-1257">
<head>
<link rel="stylesheet" type="text/css"
href="noformejums.css"/>
</head>
<body>
<p>Melns teksts</p>
<p class="a">Interesants teksts</p>
<p class="b">Sarkans teksts</p>
</body>
</html>
..un rezultāts!
Melns teksts
Interesants teksts
Sarkans teksts
Šriftu saime (font family)
Arī šriftu saimēm jau esam netieši pieskārušies. Citiem vārdiem sakot, nodefinējot īpašības "font family" vērtību mēs pasakām kādu šriftu lietosim. Šriftu nosaukumus (vērtības) var atrast kaut vai MS Word-ā. Tikai jāņem vērā, ka daudzi šrifti neatbalsta latviešu mīkstos un garos burtus!
CSS kods..
p {font-family: arial}
p.x {font-family: papyrus}
..HTML kods (atļaušos vairs nerakstīt visu HTML kodu, bet tikai to, kas attiecas uz apskatāmo tēmu. Viss kods ir redzams iepriekšējos piemēros.)..
<p>Ariala teksts</p>
<p class="x">Papirusigs teksts</p>
..rezultāts!
Ariala teksts
Papirusigs teksts
Šriftu stils (font style)
Īpašībai "font style" ir tikai trīs iespējamās vērtības:
- normal - mums ierastais, nesavērstais šrifta stils;
- italic - teksts būs kursīvā;
- oblique - slīpraksts (tiesa, īsti neredzu to milzīgo :) atšķirību no "italic").
CSS kods..
p {font-style: normal}
p.a {font-style: italic}
p.b {font-style: oblique}
..HTML kods..
<p>Parasts teksts</p>
<p class="a">Kursīva teksts</p>
<p class="b">Slīpraksts</p>
..rezultāts!
Parasts teksts
Kursīva teksts
Slīpraksts
Šrifta biezums jeb treknraksts (font weight)
Šī būtu īpašība, kuru lietojot MS Office programmas mēdz apzīmēt ar terminu "bold". Atšķirībā no tik ierastā MS Word u.c. Office programmām šeit šrifta biezums ir viegli regulējams. To var veikt divējādi:
- manuprāt ērtāk lietojamas ir biezuma skaitliskās vērtības sākot ar 100 (plāns) līdz 900 (ļoti biezs). Parasti apzīmējot vērtību lieto veselus simtus, nevis, piemēram, 125, jo tik smalka precizitāte parasti būs grūti pamanāma;
- var lietot biezuma vārdiskās vērtības. Tās ir šādas: lighter, normal, bold, bolder.
CSS kods..
p {font-weight: 500}
p.a {font-weight: lighter}
p.b {font-weight: bolder}
..HTML kods..
<p>Šrifta biezums = 500.</p>
<p class="a">Šrifta biezums =
"lighter".</p>
<p class="b">Šrifta biezums = "bolder".</p>
..rezultāts!
Šrifta biezums = 500.
Šrifta biezums = "lighter".
Šrifta biezums = "bolder".
Šrifta lielums (font size)
Pieminēšu tikai divas šīs īpašības vērtības:
- var noteikt nemainīgu lielumu izmantojot pikseļus jeb punktus ("px");
- jeb relatīvu lielumu attiecībā pret noklusēto (defaulto) šrifta lielumu procentu veidā ("%"). Piemēram, ja mēs esam nodefinējuši, ka rindkopu teksta šrifts attēlojams 14px lielumā, bet pirmās katogorijas rindkopām ("p.1") šriftu lielumu nodefinēsim 130% lielumā, tad šie 130% tiks rēķināti no 14 pikseļiem (skatīt piemēru).
CSS kods..
p {font-size: 14px}
p.x {font-size: 130%}
..HTML kods..
<p>Šrifta lielums = 14
pikseļi.</p>
<p class="x">Šrifta lielums = 130
procenti.</p>
..rezultāts!
Šrifta lielums = 14 pikseļi.
Šrifta lielums = 130 procenti.
Kopsavilkuma piemērs
CSS kods..
p {color: red;
font-family: arial;
font-style:
italic;
font-size: 14px}
p.x {color: #FFCC99;
font-family: papyrus;
font-weight:
bold;
font-size: 120%}
..HTML kods..
<p>Sarkans teksts.</p>
<p class="x">Interesants teksts.</p>
..rezultāts!
Sarkans teksts.
Interesants teksts.
Teksts (text)
Krāsa (color)
Īpašības "color" piederību varētu piedēvēt arī sadaļai "text" nevis "font", taču tā kā tai nav specifikācijas, tad šis strīds patiesībā būtu lieks. Par īpašību "color" var lasīt sadaļā "font".
Teksta novietojums (text-align)
Runājot par teksta novietojumu, paralēles droši vien varētu vilkt ar teksta apstrādes programmām (piemēram MS Word), kad mēs tekstu varējām novietot vienā no četriem stāvokļiem:
- pie kreisās malas (left) - šis ir arī noklusētais (default) stāvoklis. T.i., ja mēs nedefinēsim kādu citu teksta novietojumu, tad spēkā būs šis;
- pie labās malas (right);
- pa vidu jeb nocentrēt (center);
- izlīdzināt pēc abām malām (justify).
Aplūkosim piemēru:
CSS kods..
p {text-align: left}
p.a {text-align: right}
p.b {text-align: center}
p.c {text-align: justify}
..HTML kods..
<p>Teksts pie kreisās
malas.</p>
<p class="a">Teksts pie labās malas.</p>
<p class="b">Nocentrēts teksts.</p>
<p class="c">Izlīdzināts pēc abām malām.
Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc
abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc abām
malām.</p>
..rezultāts!
Teksts pie kreisās malas.
Teksts pie labās malas.
Nocentrēts teksts.
Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām. Izlīdzināts pēc abām malām.
Teksta dekorēšana (text-decoration)
Šīs īpašības pamatdoma varētu būt - "kur vilksim līniju!":
- underline - tekstu pasvītrosim;
- overline - līnija būs virs teksta;
- line-through - līnija ies tekstam pa vidu;
- none - nebūs nekādas līnijas! Šis variants noder, ja gribam, piemēram, saites (link) noformēt bez pasvītrojuma.
Piemērs:
CSS kods..
p {text-decoration: underline}
p.a {text-decoration: overline}
p.b {text-decoration: line-through}
a {text-decoration: none}
..HTML kods..
<p>Pasvītrots teksts.</p>
<p class="a">Līnija virs teksta.</p>
<p class="b">Līnija tekstam pa vidu.</p>
<a href="smuka_bilde.jpg" target="_blank">Rau,
saite bez tradicionālā pasvītrojuma!</a>
..rezultāts!
Pasvītrots teksts.
Līnija virs teksta.
Līnija tekstam pa vidu.
Teksta atkāpe (text-indent)
Teksta pirmās rindas atkāpi no malas var noteikt divējādi:
- kā konkrētu attālumu (piemēram: "px", "cm"). Šis ir parasti ieteicamais variants;
- procentuāli ("%").
CSS kods (pie reizes tekstu arī izlīdzināsim pēc abām malām, lai piemērs būtu uzskatāmāks)..
p {text-indent: 20px;
text-align: justify}
p.x {text-indent: 2cm;
text-align: justify}
..HTML kods..
<p>Ļoti garš tekstiņš ar 20px
atkāpi. Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px
atkāpi. Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px
atkāpi.</p>
<p class="x">Arī pagarš tekstiņš, bet ar 2cm
atkāpi. Arī pagarš tekstiņš, bet ar 2cm atkāpi. Arī pagarš tekstiņš, bet
ar 2cm atkāpi. Arī pagarš tekstiņš, bet ar 2cm atkāpi.</p>
..rezultāts!
Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px atkāpi. Ļoti garš tekstiņš ar 20px atkāpi.
Arī pagarš tekstiņš, bet ar 2cm atkāpi. Arī pagarš tekstiņš, bet ar 2cm atkāpi. Arī pagarš tekstiņš, bet ar 2cm atkāpi. Arī pagarš tekstiņš, bet ar 2cm atkāpi.
Atstarpe starp vārdiem vai burtiem (spacing)
Atstarpi tekstā var regulēt (palielināt vai samazināt) starp:
- vārdiem - īpašība "word-spacing";
- burtiem - īpašība "letter-spacing".
Abos gadījumos īpašību vērtība var būt tikai divējāda: "normal" (noklusētā jeb default) vai arī uzdots konkrēts attālums (piemēram "px" vai "cm"):
CSS kods..
p {word-spacing: 20px}
p.a {word-spacing: 1cm}
p.b {letter-spacing: 4px}
..HTML kods..
<p>Starp vārdiem 20 pikseļu
atstarpe.</p>
<p class="a">Starp vārdiem 1 centimetra
atstarpe.</p>
<p class="b">Starp burtiem 4 pikseļu
atstarpe.;/p>
..rezultāts!
Starp vārdiem 20 pikseļu atstarpe.
Starp vārdiem 1 centimetra atstarpe.
Starp burtiem 4 pikseļu atstarpe.
Citas īpašības
Ir vēl dažas īpašības, kurām šobrīd negribu veltīt īpašu uzmanību, tamdēļ tās tikai pieminēšu. Ja ir vēlme, tad varat izmēģināt tās paši uz iepriekšējo piemēru bāzes, tikai nomainot CSS atbilstošās īpašības un to vērtības:
īpašība | apraksts | vērtība |
---|---|---|
"text-transform" | teksta burtu attēlojums | "none", "capitalize" (visi vārdi sākas ar lielajiem butiem), "uppercase" (visi burti ir lielie), "lowercase" (visi burti ir mazie) |
"white-space" | teikums turpināsies uz priekšu, kamēr neieliksim tagu <br/> | "normal", "pre", "nowrap" (teikums turpinās) |
"unicode-bidi" | "normal", "embed", "bidi-override" |
Kopsavilkuma piemērs
CSS kods..
h4 {color: red;
font-family: arial;
text-align:
center;
font-size: 16px;
text-decoration: underline;
letter-spacing:
4px}
p {color: black;
font-family: arial;
text-indent:
20px;
font-size: 12px;
text-align: justify}
..HTML kods..
<h4>CSS</h4>
<p>Kaut kas daudz sarakstīts. Kaut kas daudz
sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut
kas daudz sarakstīts.</p>
..rezultāts!
CSS
Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts.
Fons (background)
Atbilstoša fona izvēle ir ļoti būtiska web projekta
sastāvdaļa. Kā fonu var izmantot kādu krāsu vai attēlu.
Visos
gadījumos, kad runa iet par fonu, tad tiek lietota īpašība "background",
kurai ar domuzīmes ("-") palīdzību piesaista konkretizējošo daļu,
piemēram "background-color" nozīmē "fona krāsa".
Fona krāsa (background-color)
Kā jau minēju, tad lai HTML elementam (piemēram, virsrakstam, tabulai, rindkopai utt.) piesaistītu kādu fona krāsu, lieto īpašību "background-color". Kā jau ierasts, tad arī šajā gadījumā īpašības "color" vērtības var būt vārdiski nosaukta krāsa, kā arī krāsas vērtība rgb vai heksadecimālajā veidā. Par to varēja lasīt sadaļā "font". Tomēr gribu vērst uzmanību uz kādu jaunu iespējamo vērtību - "transparent", jeb "caurspīdīgs". Objektam ar šādu fonu būs redzams cauri augstākstāvošā objekta fons, piemēram rindkopai ar "caurspīdīgu" fonu, kura atrodas tabulā, būs redzams tabulas fons.
CSS kods..
table {background-color: yellow}
p {background-color: white}
p.x {background-color: transparent}
..HTML kods..
<table width="350px">
<tr><td>
<p>Teksts ar baltu fonu.</p>
<p class="x">Teksts ar caurspīdīgu
fonu.</p>
</td></tr>
</table>
..rezultāts!
Teksts ar baltu fonu. Teksts ar caurspīdīgu fonu. |
Fona attēls (background-image)
Šajā gadījumā par fonu tiks izmantots kāds iepriekš sagatavots attēls. Pie tam attēls var būt:
- visa objekta lielumā - piemēram, tabulas platums ir 350px un arī fona attēls ir sagatavots ar 350px platumu. Tiesa, šāda rīcība ir attaisnojama, ja attēls ir unikāls. Ievērojiet, kā tiek pierakstīta norāde ("url") uz attēlu!;
Piemērs:
CSS kods..
table.ziema {background-image:
url(sniegav.jpg)}
p.x {color: red; background-color: transparent}
..HTML kods..
<table class="ziema" width="350px"
height="100px">
<tr><td>
<p class="x">Te būs viss, ko domāju par
ziemu.</p>
</td></tr>
</table>
..rezultāts!
Te būs viss, ko domāju par ziemu. |
- gan daudz mazāks par objektu. Šis ir klasiskais variants, kad izveido nelielu attēlu, kuru atkārtojot pa horizontāli un vertikāli piepilda visu HTML objekta fonu (noklusētajā - "default" variantā tas notiek automātiski). Mēs izmantosim šādu nelielu flīzīti -
Piemērs:
CSS kods..
table.flize {background-image:
url(flize.jpg)}
p.x {color: red; background-color: transparent}
..HTML kods..
<table class="flize" width="350px"
height="100px">
<tr><td>
<p class="x">Virtuves flīzējums!!</p>
</td></tr>
</table>
..rezultāts!
Virtuves flīzējums!! |
Fona attēla atkārtošanās virziens (background-repeat)
Dažkārt rodas nepieciešamība, lai fona attēls atkārtotos tikai kādā noteiktā virzienā. Lai to panāktu, mums nāksies klāt pie jau aplūkotās HTML objekta īpašības "bacground-image" pievienot vēl vienu kokretizējošu īpašību - "background-repeat" ar kādu no sekojošām vērtībām:
- "repeat" - noklusētais variants, kad attēls atkārtojas abos virzienos, aizpildot visu HTML objekta fonu;
- "repeat-x" - attēls atkārtojas pa horizontāli, t.i., pa "x" asi;
- "repeat-y" - attēls atkārtojas pa vertikāli, t.i., pa "y" asi;
- "no-repeat" - attēls neatkārtojas vispār, tiks parādīts tikai oriģinālais attēls oriģinālajā lielumā.
CSS kods..
p {background-image: url(flize.jpg);
background-repeat: repeat}
p.a {background-image: url(flize.jpg);
background-repeat: repeat-x}
p.b {background-image: url(flize.jpg);
background-repeat: repeat-y}
p.c {background-image: url(flize.jpg);
background-repeat: no-repeat}
..HTML kods..
<p>Ļoti garš tekstiņš ar fonu. Ļoti
garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš
ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar
fonu.</p>
<p class="a">Ļoti garš tekstiņš ar horizontālu
fonu. Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš tekstiņš ar
horizontālu fonu. Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš
tekstiņš ar horizontālu fonu.</p>
<p class="b">Ļoti garš tekstiņš ar vertikālu
fonu. Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš ar
vertikālu fonu. Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš
ar vertikālu fonu.</p>
<p class="c">Ļoti garš tekstiņš ar oriģinālo
attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš tekstiņš ar
oriģinālo attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš
tekstiņš ar oriģinālo attēlu.</p>
..rezultāts!
Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu. Ļoti garš tekstiņš ar fonu.
Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš tekstiņš ar horizontālu fonu. Ļoti garš tekstiņš ar horizontālu fonu.
Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš ar vertikālu fonu. Ļoti garš tekstiņš ar vertikālu fonu.
Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu. Ļoti garš tekstiņš ar oriģinālo attēlu.
Fona attēla pozicionēšana (background-position)
Kā jau droši vien būsiet ievērojuši, tad bez papildus norādēm fona attēla noklusētā sākuma atrašanās vieta ir HTML elementa (taga) kreisais augšējais stūris. Taču sākotnējo attēla atrašanās vietu var mainīt ar papildus īpašību "background-position". Tās vērtības var būt sekojošas:
|
|
CSS kods..
p {background-image: url(flize.jpg);
background-positon: "bottom right";
background-repeat: no-repeat}
p.a {background-image: url(flize.jpg);
background-positon: "center center";
background-repeat: repeat-x}
p.b {background-image: url(flize.jpg);
background-position: 20% 80%;
background-repeat: no-repeat}
..HTML kods..
<p>Ļoti garš tekstiņš ar fonu
apakšējā labajā stūrī. Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī.
Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī. Ļoti garš tekstiņš ar
fonu apakšējā labajā stūrī.</p>
<p class="a">Ļoti garš tekstiņš ar nocentrētu
fona attēlu, kas horizontāli atkārtojas abos virzienos. Ļoti garš
tekstiņš ar nocentrētu fona attēlu, kas horizontāli atkārtojas abos
virzienos. Ļoti garš tekstiņš ar nocentrētu fona attēlu, kas horizontāli
atkārtojas abos virzienos.</p>
<p class="b">Ļoti garš tekstiņš ar procentuāli
novietotu fona attēlu. Ļoti garš tekstiņš ar procentuāli novietotu fona
attēlu. Ļoti garš tekstiņš ar procentuāli novietotu fona attēlu. Ļoti
garš tekstiņš ar procentuāli novietotu fona attēlu.</p>
..rezultāts!
Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī. Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī. Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī. Ļoti garš tekstiņš ar fonu apakšējā labajā stūrī.
Ļoti garš tekstiņš ar nocentrētu fona attēlu, kas horizontāli atkārtojas abos virzienos. Ļoti garš tekstiņš ar nocentrētu fona attēlu, kas horizontāli atkārtojas abos virzienos. Ļoti garš tekstiņš ar nocentrētu fona attēlu, kas horizontāli atkārtojas abos virzienos.
Ļoti garš tekstiņš ar procentuāli novietotu fona attēlu. Ļoti garš tekstiņš ar procentuāli novietotu fona attēlu. Ļoti garš tekstiņš ar procentuāli novietotu fona attēlu. Ļoti garš tekstiņš ar procentuāli novietotu fona attēlu.
Fona attēla piesaiste (background-attachment)
Šī īpašība nosaka fona attēla uzvedību, ja aplūkojamais materiāls ir tik liels, ka, piemēram, nesatilpst pārlūka logā un nākas pielietot ritināšanu (ritjoslu), lai materiālu pārlūkotu. Īpašībai var būt divas vērtības:
- "scroll" - fona attēls ritināsies kopā ar aplūkojamo materiālu;
- "fixed" - fona attēls paliks nekustīgs, kamēr aplūkojamais materiāls tiks ritināts.
CSS kods..
textarea.a {background-image:
url(flize.jpg);
background-attachment: scroll}
textarea.b {background-image: url(flize.jpg);
background-attachment: fixed}
..HTML kods..
<form>
<textarea class="a">Fona attēls ritināsies kopā
ar aplūkojamo materiālu. Fona attēls ritināsies kopā ar aplūkojamo
materiālu.</textarea>
<textarea class="b">Fona attēls paliks nekustīgs,
kamēr aplūkojamais materiāls tiks ritināts. Fona attēls paliks
nekustīgs, kamēr aplūkojamais materiāls tiks ritināts.</textarea>
</form>
..rezultāts!
Kopsavilkuma piemērs
Šoreiz izmantosim divus citus sagatavotus attēlus, lai rezultāts būtu nedaudz baudāmāks:
- virsrakstam un - fonam, kā arī fona krāsu pamattekstam.
CSS kods..
body{background-image: url(fons_p.jpg)}
table{background-color: #CCCCFF;
border-color: gray;
border-width:
1px;
border-style: solid}
h4 {color: red;
font-family: arial;
text-align:
center;
font-size: 16px;
letter-spacing: 4px;
background-image:
url(radial_p.jpg)}
p {color: black;
font-family: arial;
font-size:
12px;
text-align: justify}
..HTML kods..
<html>
<title>Eksperiments</title>
<meta http-equiv="content-type" content="text/html;
charset= windows-1257">
<head>
<link rel="stylesheet" type="text/css"
href="noformejums.css"/>
</head>
<body>
<table width="700px" align="center">
<tr>
<td>
<h4>Mana web lapa</h4>
<p>Kaut kas daudz sarakstīts. Kaut kas daudz
sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut
kas daudz sarakstīts.</p>
</td>
</tr>
</table>
</body>
</html>
..rezultāts!
Mana web lapaKaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. Kaut kas daudz sarakstīts. |
Saraksta (uzskaitījuma) noformējums (list-style)
Saraksta noformējuma veids (list-style-type)
Ja atceramies, tad HTML-ā bija iespējami trīs veidu saraksti, no kuriem tomēr biežāk lietotie ir sakārtotie (<ol>) un nesakārtotie (<ul>). Ar CSS palīdzību ir iespējams tiem pievienot dažādu noformējumu.
Lūk noformējuma vērtības:
nesakārtotais |
sakārtotais |
||
"none" |
|
"decimal" |
|
"disc" |
|
"decimal-leading-zero" |
|
"circle" |
|
"lower-roman" |
|
"square" |
|
"upper-roman" |
|
|
|
"lower-alpha" |
|
|
|
"upper-alpha" |
|
CSS kods..
ol {list-style-type: upper-alpha}
ul {list-style-type: none}
..HTML kods..
<ol>
<li>Sakārtots saraksts.</li>
<li>Sakārtots saraksts.</li>
<li>Sakārtots saraksts.</li>
</ol>
<ul>
<li>Nesakārtots saraksts.</li>
<li>Nesakārtots saraksts.</li>
<li>Nesakārtots saraksts.</li>
</ul>
..rezultāts!
- Sakārtots saraksts.
- Sakārtots saraksts.
- Sakārtots saraksts.
- Nesakārtots saraksts.
- Nesakārtots saraksts.
- Nesakārtots saraksts.
Saraksta noformēšana ar attēlu (list-style-image)
Gan sakārtotā gan nesakārtotā saraksta aizzīmes var noformēt arī ar kādu iepriekš sagatavotu attēlu. Lai to veiktu, būs jālieto īpašība "list-style-image", kurai iespējamas tikai divas vērtības:
- "none" - attēls netiek pievienots;
- "url" - tāpat, kā gadījumā ar fona attēlu ar norādi pievieno attēlu .
CSS kods..
ol {list-style-image: url(list.jpg)}
..HTML kods..
<ol>
<li>Sakārtots saraksts.</li>
<li>Sakārtots saraksts.</li>
<li>Sakārtots saraksts.</li>
</ol>
..rezultāts!
- Sakārtots saraksts.
- Sakārtots saraksts.
- Sakārtots saraksts.
Saraksta atkāpe (list-style-position)
Saraksta atkāpei no malas ir divas vērtības:
- "outside" - tuvāk malai (noklusētais);
- "inside" - tālāk no malas.
CSS kods (pie reizes tekstu arī izlīdzināsim pēc abām malām, lai piemērs būtu uzskatāmāks)..
ol {list-style-position: outside;
list-style-type: upper-alpha}
ol.1 {list-style-position: inside
list-style-type: lower-alpha}
..HTML kods..
<ol>
<li>Sakārtots saraksts.</li>
<li>Sakārtots saraksts.</li>
<li>Sakārtots saraksts.</li>
</ol>
<ol class="1">
<li>Sakārtots saraksts.</li>
<li>Sakārtots saraksts.</li>
<li>Sakārtots saraksts.</li>
</ol>
..rezultāts!
- Sakārtots saraksts.
- Sakārtots saraksts.
- Sakārtots saraksts.
- Sakārtots saraksts.
- Sakārtots saraksts.
- Sakārtots saraksts.
Saites (hyperlink)
Droši vien jau būs ievērots, ka saitēm, kuras apzīmē ar tagu <a>, var būt dažādi stāvokļi. Pat diezgan ierasts, ka vēl neapmeklēta saite ir vienā krāsā (piemēram, zilā), bet pēc lietošanas citā krāsā (piemēram, violetā).
Kopumā saitēm var būt četri stāvokļi, pie tam svarīga ir to kārtība:
- "link" - saite vēl nav lietota;
- "visited" - saite, kas tikusi lietota, bet peles kursors uz tās pašlaik neatrodas;
- "hover" - saite, uz kuras patreiz uzbīdīts peles kursors;
- "active" - saite, uz kuras patreiz klikšķina.
Līdzīgi kā citiem HTML elementiem, arī šim, pie kam katram tā stāvoklim, var nodefinēt dažādas īpašības. Tomēr ir jāņem vērā dažas īpatnības:
- definējot stāvokļus, ir jāievēro augstākminētā kārtība;
- ja gribam definēt kādu saišu stāvokli, tad to sintakse mazliet atšķirsies no pārējās CSS sintakses. Visa atšķirība ir tajā, ka tūlīt aiz HTML elementa liekams kols (":") un nosaucams konkrētais saites stāvoklis, piemēram, "a:visited{color:green}". Nenosaucot konkrēto stāvokli, saites definējums attieksies uz visiem tās stāvokļiem.
Visbeidzot jāmin īpašība, kas jau iepriekš tika apskatīta - "text-decoration", ar kuras palīdzību saites varēja noformēt bez pasvītrojuma.
Tagad to visu aplūkosim darbībā!
CSS kods..
a:link {font-family: arial;
font-size: 12px;
color: red;
background-color: white;
text-decoration: none}
a:visited {font-family: arial;
font-size: 12px;
color: red;
background-color: white;
text-decoration: none}
a:hover {font-family: arial;
font-size: 13px;
color: blue;
background-color: silver;
text-decoration: underline}
..HTML kods..
<a href="smuka_bilde.jpg" target="_blank">Skatīt bildi!</a>
..rezultāts!