Ievads
> Kas ir HTML? Kas slēpjas zem šī saīsinājuma?
HTML(Hypertext Markup Language) ir hiperteksta atzīmes valoda, kuru izmanto WEB lapu teksta noformēšanai un strukturizēšanai.
> Ko Jūs šeit apgūsiet?
Būtībā mani skolā māca pēc HTML 4.0 standarta, bet es papildināšu teoriju(vismaz centīšos) un Jūs apgūsiet XHTML 1.0 standartu. Tādi tagi, kas tiek atbalstīti tikai noteiktos pārlūkos, netiks apskatīti.
HTML(Hypertext Markup Language) ir hiperteksta atzīmes valoda, kuru izmanto WEB lapu teksta noformēšanai un strukturizēšanai.
> Ko Jūs šeit apgūsiet?
Būtībā mani skolā māca pēc HTML 4.0 standarta, bet es papildināšu teoriju(vismaz centīšos) un Jūs apgūsiet XHTML 1.0 standartu. Tādi tagi, kas tiek atbalstīti tikai noteiktos pārlūkos, netiks apskatīti.
Stunda nr. 1
HTML dokumenta struktūra
Iekš taga head tiek ietvertas dažādas meta instrukcijas(par tām vēlāk) un lapas nosaukums.
tags title atbild par dokumenta nosaukumu, kurš tiek attēlots pārlūkprogrammā.
Katram tagam var būt atribūts jeb īpašība:
Teksta formatēšanu veic ar taga font palīdzību. To izmanto tikai ar atribūtiem:
Loģiskā stila tagi - šajos tagos iekļautais teksts var tikt attēlots katrā pārlūkprogrammā savādāk:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="lv" xml:lang="lv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="lv" />
<title>HTML</title>
</head>
<body>
Jūsu teksts
</body>
</html>
Dokumentā sākumā tiek norādīta HTML versija."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="lv" xml:lang="lv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="lv" />
<title>HTML</title>
</head>
<body>
Jūsu teksts
</body>
</html>
Iekš taga head tiek ietvertas dažādas meta instrukcijas(par tām vēlāk) un lapas nosaukums.
tags title atbild par dokumenta nosaukumu, kurš tiek attēlots pārlūkprogrammā.
Katram tagam var būt atribūts jeb īpašība:
<tags atribūts="vērtība" atribūts2="vērtība">…</tags>
Atribūta vērtība noteikti rakstāma iekš pēdiņām un tags rakstāms ar mazajiem burtiem.Teksta formatēšanu veic ar taga font palīdzību. To izmanto tikai ar atribūtiem:
<font size="1..7" color="red,blue, ...,#FCAACC" face="Arial, Comic, ...">…</font>
Fiziskā stila tagi - šajos tagos iekļautajam tekstam ir stingri noteikti burtu parametri:
<b>…</b> - trekns teksts
<i>…</i> - slīps teksts
<u>…</u> - pasvītrots teksts
<tt>…</tt> - rakstāmmašīnas teksts
tagus ir iespējams kombinēt.<i>…</i> - slīps teksts
<u>…</u> - pasvītrots teksts
<tt>…</tt> - rakstāmmašīnas teksts
Loģiskā stila tagi - šajos tagos iekļautais teksts var tikt attēlots katrā pārlūkprogrammā savādāk:
<em>…</em> - akcents
<strong>…</strong> - izcēlums
<kbd>…</kbd> - tastatūras imitācija
<var>…</var> - mainīgie
<code>…</code> - kods
<samp>…</samp> - piemērs
<big>…</big> - liels
<hx>…</hx> - virsraksts nr. x, kur x=1..6(1-lielākais; 6-mazākais)
Teksta izvietošana:
<strong>…</strong> - izcēlums
<kbd>…</kbd> - tastatūras imitācija
<var>…</var> - mainīgie
<code>…</code> - kods
<samp>…</samp> - piemērs
<big>…</big> - liels
<hx>…</hx> - virsraksts nr. x, kur x=1..6(1-lielākais; 6-mazākais)
<div align="left,right,center">…</div> - bloks, kurš sevī var ietvert gan tekstu, gan citus blokus
<p align="left,right,center,justify">…</p> - paragrāfu veidošanas tags
<center>…</center> - centrē tagā ietvertos elementus
<blockquote>…</blockquote> - citāta attēlošanas tags
<br/> - teksta pārnešana jaunā rindā
<wbr/> - teksta pārnešana jaunā rindā, ja teksts aiz taga neievietojas pārlūkprogrammas logā
<nobrake>…</nobrake> - teksta automātiskas pārnešanas jaunā rindā aizliegšana
<pre>…</pre> - visu atstarpju ievērošana tekstā
<hr width="..%" color=".." size="..px" align="left,right,center"/> - horizontāla līnija
<img src="ceļs līdz bildei" title="nosaukums" alt="alternatīvais teksts" align="left,right,center" hspace="..px" vspace="..px"/> - zīmējuma ievietošana
<p align="left,right,center,justify">…</p> - paragrāfu veidošanas tags
<center>…</center> - centrē tagā ietvertos elementus
<blockquote>…</blockquote> - citāta attēlošanas tags
<br/> - teksta pārnešana jaunā rindā
<wbr/> - teksta pārnešana jaunā rindā, ja teksts aiz taga neievietojas pārlūkprogrammas logā
<nobrake>…</nobrake> - teksta automātiskas pārnešanas jaunā rindā aizliegšana
<pre>…</pre> - visu atstarpju ievērošana tekstā
<hr width="..%" color=".." size="..px" align="left,right,center"/> - horizontāla līnija
<img src="ceļs līdz bildei" title="nosaukums" alt="alternatīvais teksts" align="left,right,center" hspace="..px" vspace="..px"/> - zīmējuma ievietošana
Stunda nr. 2
Sarakstu veidošana
Ir 3 sarakstu veidi
Ir 3 sarakstu veidi
- Sakārtoti jeb numurēti saraksti
Par šī saraksta veidošanu rūpējas tags ol<ol type="1,a,A,I,i" start="..">
<li>…</li>
<li value="5">…</li>
</ol> - Nesakārtoti jeb marķēti saraksti
Par šī saraksta veidošanu rūpējas tags ul<ul type="disc,square,arcle">
<li>…</li>
<li value="3">…</li>
</ul> - Definīciju saraksti
Par šī saraksta veidošanu rūpējas tags dl<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
Stunda nr. 3
Šīs stundas tēma grozīsies ap hipersaitēm un kustīgo tekstu.
Hipersaites:
Par hipersaites veidošanu atbild tags a
Hipersaiti ir iespējams norādīt uz kādu web lapu
Kustīgais teksts:
Par kustīgo tekstu atbild tags marquee
Hipersaites:
Par hipersaites veidošanu atbild tags a
Hipersaiti ir iespējams norādīt uz kādu web lapu
<a href="http://...." title="..." target="_blank,_self,_frame">Hipersaite</a>
Tāpat hipersaitē var norādīt savu e-pasta adresi
<a href="mailto:mail@domain.lv" title="...">Hipersaite</a>
Hipersaiti var izmantot arī grāmatzīmju(bookmark) veidošanai, lai varētu izveidot norādi uz konkrētu apgabalu iekš dokumenta
Vispirms kaut kur dokumentā izveido grāmatzīmi
<a name="viens" ></a>Pārējais teksts
Pēc tam ievieto hipersaiti uz doto grāmatzīmi
<a href="http://...lv#viens" title="...">Hipersaite</a>
Līdzīgi kā hipersaites var izmantot meta instrukcijas, kas paredzētas pārlūkprogrammai
<a name="viens" ></a>Pārējais teksts
Pēc tam ievieto hipersaiti uz doto grāmatzīmi
<a href="http://...lv#viens" title="...">Hipersaite</a>
<meta http-equiv="Refresh" content="20; url=http://domain.lv"/>
Augstāk aprakstītā konstrukcija pēc 20 sekundēm no lapas ielādes automātiski veiks pāradresāciju uz norādīto web lapu.Kustīgais teksts:
Par kustīgo tekstu atbild tags marquee
Pirms lietojiet šo tagu savā web lapā noteikti apdomājiet, cik ilgi
Jūs pats gribētu uzturēties lapā, kurā visa uzmanība jāpievērš
kustīgajam tekstam nevis lapas saturam!!!
taga pieraksts ar atribūtiem
<marquee behavior="alternate,slide,scroll" bgcolor=".."
direction="left,right,up,down" heigth="..px" width="..px" vspace="..px"
hspace="..px" scrollamount=".." scrolldelay="..">Kustīgais
teksts</marquee>
Stunda nr. 4
Šī stunda tiks veltīta tabulām.
Par tabulu attēlošanu atbild HTML tags table. Zemāk es uzskaitīšu visus taga <table> atribūtus un to iespējamās vērtības
Katru tabulas rindu sāk ar tagu <tr>…</tr>, kuram ir sekojoši atribūti
Ja tabulas rindā tiks izvietots virsraksts, tad lietderīgi ir izmantot tagu <th>…</th>, kuram piemīt visi tie paši atribūti, kas piemīt tagam <td>…</td>.
Par tabulu attēlošanu atbild HTML tags table. Zemāk es uzskaitīšu visus taga <table> atribūtus un to iespējamās vērtības
align=left|right|center
background="grafiskā faila adrese"
bgcolor=krāsa
border=tabulas rāmja biezums pikseļos(vesels skaitlis)
bordercolor=tabulas rāmja krāsa
bordercolordark=krāsa
bordercolorlight=krāsa
cellpadding=atstarpe starp šūnas rāmīti un tekstu pikseļos(vesels skaitlis)
cellspacing=atstarpe starp šūnu rāmīšiem tabulā pikseļos(vesels skaitlis)
frame=above|below|border|box|hsides|lhs|rhs|void|vsides
heigth=tabulas augstums pikseļos(vesels skaitlis)
width=tabulas platums pikseļos(vesels skaitlis)
rules=all|colls|graoups|none|rows
Iekš taga <table> iespējams lietot tagu <caption>…</caption>, kas atbild par tabulas virsraksta attēlošanu. Šim tagam ir atribūts align, kuram ir iespējamas vērtības top un bottom, attiecīgi tabulas virsraksts atradīsies vai nu virs tabulas, vai zem tās.background="grafiskā faila adrese"
bgcolor=krāsa
border=tabulas rāmja biezums pikseļos(vesels skaitlis)
bordercolor=tabulas rāmja krāsa
bordercolordark=krāsa
bordercolorlight=krāsa
cellpadding=atstarpe starp šūnas rāmīti un tekstu pikseļos(vesels skaitlis)
cellspacing=atstarpe starp šūnu rāmīšiem tabulā pikseļos(vesels skaitlis)
frame=above|below|border|box|hsides|lhs|rhs|void|vsides
heigth=tabulas augstums pikseļos(vesels skaitlis)
width=tabulas platums pikseļos(vesels skaitlis)
rules=all|colls|graoups|none|rows
Katru tabulas rindu sāk ar tagu <tr>…</tr>, kuram ir sekojoši atribūti
align=left|right|center
bgcolor=krāsa
valign=top|middle|bottom
Katru tabulas šūnu apraksta ar tagu <td>…</td>, kuram ir sekojoši atribūti
bgcolor=krāsa
valign=top|middle|bottom
align=left|right|center
bgcolor=krāsa
valign=top|middle|bottom
colspan=horizontāli apvienojamo kolonnu skaits(vesels skaitlis)
rowspan=vertikāli apvienojamo rindu skaits(vesels skaitlis)
nowrap=nowrap - nosaka, ka šūnas saturs tiks attēlots vienā rindā
heigth=šūnas augstums pikseļos(vesels skaitlis)
width=šūnas platums pikseļos(vesels skaitlis)
Ja tabulas šūna ir tukša, tad tai apkārt netiks zīmēts rāmītis. Ja rāmītis ir nepieciešams, tabulas šūnā jāieraksta .bgcolor=krāsa
valign=top|middle|bottom
colspan=horizontāli apvienojamo kolonnu skaits(vesels skaitlis)
rowspan=vertikāli apvienojamo rindu skaits(vesels skaitlis)
nowrap=nowrap - nosaka, ka šūnas saturs tiks attēlots vienā rindā
heigth=šūnas augstums pikseļos(vesels skaitlis)
width=šūnas platums pikseļos(vesels skaitlis)
Ja tabulas rindā tiks izvietots virsraksts, tad lietderīgi ir izmantot tagu <th>…</th>, kuram piemīt visi tie paši atribūti, kas piemīt tagam <td>…</td>.
Stunda nr. 5
Šī stunda tiks veltīta formām.
Par tabulu attēlošanu atbild HTML tags form.
Formai ir sekojoši atribūti
Par tabulu attēlošanu atbild HTML tags form.
Formai ir sekojoši atribūti
<form method="post,get" action="apstrādes skripta adrese, mailto:e-pasta adrese" Enctype="kodēšanas veids">…</form>
Forma var saturēt dažādus elementus
<form method="post" action="skripts.php">
<input type="button" name="poga" value="Spied šeit"/> - pogas attēlošana
<input type="checkbox" name="chekboxis" checked/> - čekbox'a attēlošana
<input type="file" name="fails"/> - faila pievienošnai
<input type="hidden" name="slepts" value="vērtība"/> - slēpta elementa ievietošana
<input type="image" src="..." name="bilde" alt="" title=""/> - bildes attēlošana
<input type="password" name="parole" value="" size="platums simbolos" maxlength="max teksta garums"/> - paroles lauka attēlošana
<input type="radio" name="radiopoga" checked/> - radio pogas attēlošana
<input type="reset" name="resetpoga" value="Dzēst"/> - formas izdzēšanas pogas attēlošana
<input type="submit" name="submitpoga" value="Nosūtīt"/> - formas nosūtīšanas pogas attēlošana
<input type="text" name="teksts" value="" size="platums simbolos" maxlength="max teksta garums"/> - teksta lauka attēlošana
<textarea name="tekstalauks" cols="10" rows="5">…</textarea> - vairākrindu teksta lauka attēlošana
Saraksta attēlošanai izmanto
<select name="saraksts" size="1" multiple="multiple">
<option value="1">Vērtība 1</option>
<option value="2">Vērtība 2</option>
<option value="3">Vērtība 3</option>
</select>
</form>
Der atcerēties, ka, lai izveidotu, piemēram, vairākas radio pogas, no
kurām vienlaicīgi var atzīmēt tikai vienu, visām vienas grupas radio
pogām atribūts name jānorāda vienāds. Tā pat rīkojas arī ar čekboxiem.<input type="button" name="poga" value="Spied šeit"/> - pogas attēlošana
<input type="checkbox" name="chekboxis" checked/> - čekbox'a attēlošana
<input type="file" name="fails"/> - faila pievienošnai
<input type="hidden" name="slepts" value="vērtība"/> - slēpta elementa ievietošana
<input type="image" src="..." name="bilde" alt="" title=""/> - bildes attēlošana
<input type="password" name="parole" value="" size="platums simbolos" maxlength="max teksta garums"/> - paroles lauka attēlošana
<input type="radio" name="radiopoga" checked/> - radio pogas attēlošana
<input type="reset" name="resetpoga" value="Dzēst"/> - formas izdzēšanas pogas attēlošana
<input type="submit" name="submitpoga" value="Nosūtīt"/> - formas nosūtīšanas pogas attēlošana
<input type="text" name="teksts" value="" size="platums simbolos" maxlength="max teksta garums"/> - teksta lauka attēlošana
<textarea name="tekstalauks" cols="10" rows="5">…</textarea> - vairākrindu teksta lauka attēlošana
Saraksta attēlošanai izmanto
<select name="saraksts" size="1" multiple="multiple">
<option value="1">Vērtība 1</option>
<option value="2">Vērtība 2</option>
<option value="3">Vērtība 3</option>
</select>
</form>
Stunda nr. 6
Šī stunda tiks veltīta freimiem.
Dokuments, kas satur freimus, nesatur nekādu informāciju, bet kalpo, lai sadalītu pārlūkprogrammas darba apgabalu vairākos logos.
Freimu izmantošana nav īpaši populāra. Tos parasti izmanto "jaunie talanti".
Jāatceras, ka freimus saturošā dokumentā taga <body> vietā lietojams tags <frameset>.
Dokumenta struktūra
tagam <frame> ir sekojoši atribūti:
Dokuments, kas satur freimus, nesatur nekādu informāciju, bet kalpo, lai sadalītu pārlūkprogrammas darba apgabalu vairākos logos.
Freimu izmantošana nav īpaši populāra. Tos parasti izmanto "jaunie talanti".
Jāatceras, ka freimus saturošā dokumentā taga <body> vietā lietojams tags <frameset>.
Dokumenta struktūra
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="lv" xml:lang="lv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1257"/>
<meta http-equiv="Content-Language" content="lv" />
<title>HTML</title>
</head>
<frameset cols="30%,*" >
<frame src="fails1.html"/>
<frame src="fails2.html"/>
</frameset>
</html>
tagam <frameset> ir divi atribūti rows un cols, bet vienlaicīgi lieto tikai vienu no tiem.
Lai norādītu freimu platumu, iekš atribūtiem norāda lapas sadalījumu procentos, pikseļos vai arī atstāj *, kas nozīmēs visu atlikušo platību."http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="lv" xml:lang="lv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1257"/>
<meta http-equiv="Content-Language" content="lv" />
<title>HTML</title>
</head>
<frameset cols="30%,*" >
<frame src="fails1.html"/>
<frame src="fails2.html"/>
</frameset>
</html>
tagam <frame> ir sekojoši atribūti:
src="ceļš līdz failam" - freimā izvietojamā faila norādīšana
name="vārds" - freima nosaukums
frameborder="1,0" - norāda vai freimam lietot rāmīti
marginwidth="..px" - horizontālā atstarpe starp freimu rāmīšiem
marginheight="..px" - vertikālā atstarpe starp freimu rāmīšiem
scrolling="yes,no,auto" - vai būs pieejams scrollbar
noresize="noresize" - nosaka, ka freima platumu, augstumu lietotājs nevarēs mainīt
tagu <iframe> izmanto, lai vienu dokumentu ievietotu otrā. Šim tagam atribūti ir tādi paši kā tagam <frame>,
vienīgi papildus ir arī atribūts align="left,right,center"
Šis tags ir pāra tags - informācija, kas rakstīta iekš taga tiek attēlota gadījumos, ja pārlūkprogramma neatbalsta freimus.
name="vārds" - freima nosaukums
frameborder="1,0" - norāda vai freimam lietot rāmīti
marginwidth="..px" - horizontālā atstarpe starp freimu rāmīšiem
marginheight="..px" - vertikālā atstarpe starp freimu rāmīšiem
scrolling="yes,no,auto" - vai būs pieejams scrollbar
noresize="noresize" - nosaka, ka freima platumu, augstumu lietotājs nevarēs mainīt
Stunda nr. 7
Šī stunda tiks veltīta CSS pamatiem.
Kas par zvēru tas CSS(Cascading Style Sheet) ir?
Būtībā CSS tika ieviests, lai atdalītu web lapas saturu no noformējuma. CSS līdzekļi ļauj viegli mainīt izskatu neskaitāmām lapām, ja tās izmanto vienu un to pašu Style Sheet'u(stilu lapu).
Te arī parādās pirmās priekšrocības - vairs nav jāpārveido neskaitāmi .html dokumenti, pietiek izmainīt vienu .css dokumentu.
Kā vēl viena priekšrocība jāmin fakts, ka .css fails ielādējas pārlūkprogrammas atmiņā un netiek vēlreiz lejuplādēts, ja kāda cita lapa izmanto tieši to pašu .css failu - ieekonomējas Interneta trafiks.
Kā CSS pielietot savos dokumentos?
Viena no iespējām ir rakstīt CSS tieši .html dokumentā
Daži CSS piemēri
Kā attiecināt stila definīciju uz vairākiem elementiem?
Kā attiecināt stila definīciju uz noteiktu elementu, ja tas ir, piemēram, paragrāfā?
Kā aprakstīt savu stila klasi?
Kā aprakstīt savu stila klasi konkrētam tagam?
Kad klase ir aprakstīta, to var pielietot dokumentā
Kas par zvēru tas CSS(Cascading Style Sheet) ir?
Būtībā CSS tika ieviests, lai atdalītu web lapas saturu no noformējuma. CSS līdzekļi ļauj viegli mainīt izskatu neskaitāmām lapām, ja tās izmanto vienu un to pašu Style Sheet'u(stilu lapu).
Te arī parādās pirmās priekšrocības - vairs nav jāpārveido neskaitāmi .html dokumenti, pietiek izmainīt vienu .css dokumentu.
Kā vēl viena priekšrocība jāmin fakts, ka .css fails ielādējas pārlūkprogrammas atmiņā un netiek vēlreiz lejuplādēts, ja kāda cita lapa izmanto tieši to pašu .css failu - ieekonomējas Interneta trafiks.
Kā CSS pielietot savos dokumentos?
Viena no iespējām ir rakstīt CSS tieši .html dokumentā
…
<head>
<style type="text/css">
<!--
Stila apraksts
-->
</style>
</head>
…
Otrs variants ir rakstīt CSS kodu atsevišķā failā un tad to piesaistīt .html dokumentam
<head>
<style type="text/css">
<!--
Stila apraksts
-->
</style>
</head>
…
…
<head>
<style type="text/css">
@import:url(stils.css)
</style>
</head>
…
vai arī
<head>
<style type="text/css">
@import:url(stils.css)
</style>
</head>
…
…
<head>
<link href="stils.css" type="StyleSheet"/>
</head>
…
<head>
<link href="stils.css" type="StyleSheet"/>
</head>
…
Daži CSS piemēri
p{
font-size:13pt;
color:red;
}
Šis kods noformēs jebkuru paragrāfu ar 13 punktu lieliem,sarkaniem burtiem.font-size:13pt;
color:red;
}
Kā attiecināt stila definīciju uz vairākiem elementiem?
h1,h2,h3{
color:green;
}
Šis kods noformēs h1,h2 un h3 virsrakstus zaļā krāsā.color:green;
}
Kā attiecināt stila definīciju uz noteiktu elementu, ja tas ir, piemēram, paragrāfā?
p b{
color:yellow;
}
Šis kods noformēs trekno tekstu iekš paragrāfa dzeltenā krāsā.color:yellow;
}
Kā aprakstīt savu stila klasi?
.mana_klase{
color:red;
font-weight:bold;
}
Kad klase ir aprakstīta, to var pielietot dokumentā
color:red;
font-weight:bold;
}
…
<div class="mana_klase">
Trekns teksts sarkanā krāsā
</div>
…
<div class="mana_klase">
Trekns teksts sarkanā krāsā
</div>
…
Kā aprakstīt savu stila klasi konkrētam tagam?
p.mana_klase{
color:red;
font-weight:bold;
}
Šo klasi varēs pielietot tikai <p> tagam.color:red;
font-weight:bold;
}
Kad klase ir aprakstīta, to var pielietot dokumentā
…
<p class="mana_klase">
Paragrāfa teksts sarkanā krāsā
</p>
…
<p class="mana_klase">
Paragrāfa teksts sarkanā krāsā
</p>
…
Stunda nr. 8
Šajā stundā turpināšu CSS tēmu. Pirms ķeramies pie dokumenta noformēšanas ar CSS palīdzību, noderīgi būtu uzzināt
lapas atribūtiem piešķiramās vērtības.Fonti
font-weight:bold, normal, bolder, 200
font-size:12pt, 14px, small, big, 1.5 em
font-family:Times, "Sans Serif", Georgia
font-variant:normal, small-caps
font-style:bold, italic, normal
@font-face: font-family:MansFonts; src:url(http://domens.lv/MansFonts.eot)
Krāsas un fons
font-size:12pt, 14px, small, big, 1.5 em
font-family:Times, "Sans Serif", Georgia
font-variant:normal, small-caps
font-style:bold, italic, normal
@font-face: font-family:MansFonts; src:url(http://domens.lv/MansFonts.eot)
color:red, #CCFCCF, rgb(255,3,9)
background-color:tranparent, #FFABCD, yellow
background-image:url("bilde.jpg")
background-repeat:repeat, repeat-x, repeat-y, no-repeat
background-attachment: scroll, fixed
background-position: top center, center left, bottom right
Teksta īpašības
background-color:tranparent, #FFABCD, yellow
background-image:url("bilde.jpg")
background-repeat:repeat, repeat-x, repeat-y, no-repeat
background-attachment: scroll, fixed
background-position: top center, center left, bottom right
letter-spacing:1pt, 2em, 3px
text-decoration:underline, overline, line-through
text-transform:capitalize, uppercase, lowercase
text-align:left, right, center, justify
text-indent: 2px, 3%, 4em
line-height:14pt, 15px, 30%
letter-spacing: 4pt, 2px, 5%
word-spacing: 4pt, 2px, 5%
Rāmju īpašībastext-decoration:underline, overline, line-through
text-transform:capitalize, uppercase, lowercase
text-align:left, right, center, justify
text-indent: 2px, 3%, 4em
line-height:14pt, 15px, 30%
letter-spacing: 4pt, 2px, 5%
word-spacing: 4pt, 2px, 5%
Ja ir jānorāda kāda elementa viena sāna rāmīša īpašības, jāgriežas pie elementa īpašībām veidā:
elements-right
elements-bottom
elements-left
margin:3px 4% 5em auto(augšējā labā apakšējā kreisā)
padding:3px 4% 5em 2px(augšējā labā apakšējā kreisā)
border-width:thin, medium, thick, 15px
border-color:#FFFFFF, red
border-style:none, solid, double, groove, ridge, inset, outset, dashed
Augstākminētās border īpašības var pierakstīt arī vienā rindiņā
border:thin double blue
Sarakstu īpašības
padding:3px 4% 5em 2px(augšējā labā apakšējā kreisā)
border-width:thin, medium, thick, 15px
border-color:#FFFFFF, red
border-style:none, solid, double, groove, ridge, inset, outset, dashed
Augstākminētās border īpašības var pierakstīt arī vienā rindiņā
border:thin double blue
list-style-type:disk, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha
list-style-image: url("")
list-style-position:inside, outside
Lai vieglāk būtu saprast visas īpašības, atļāvos aizņemties no 42901.lv 2 bildītes.list-style-image: url("")
list-style-position:inside, outside
