Teorija

Saraksti
Web lapu veidošanā tiek izmantoti marķētie un numurētie saraksti, kurus iestāta attiecīgi ar tagiem <ul> un <ol>, bet sarakstu elementus veido tagi <li>. Marķēt var ar iekrāsotu aplīti, neiekrāsotu aplīti vai ar iekrāsotu kvadrātu. Aizzīmes var noformēt arī ar kādu iepriekš sagatavotu attēlu (var izveidot savu zīmējumu kādā no zīmēšanas programmām).
 
Marķiera tipa iestatīšana
 
Piemērs:
Kods:
 
<html>
<head>
<title>Sarakstu veidi</title>
<meta http-equiv=" Content-Type" content="text/html; charset=windows-l257" >
</head>
<body>
<ul style="font-weight:bold; font-size:150%">
<li style="list-style-type:decimal">cipari</li>
<li style="list-style-type:lower-alpha">mazie latiņu burti</li>
<li style="list-style-type:upper-alpha">lielie latīņu burti</li>
<li style="list-style-type:lower-roman">mazie romiešu burti</li>
<li style="list-style-type:upper-roman">romiešu burti</li>
<li style="list-style-type:circle">riņķis</li>
<li style="list-style-type:disc">disks</li>
<li style="list-style-type:square">kvadrāts</li>
<li style="list-style-type:none">none</li>
</ul>
</body>
</html>
Rezultāts:
 
b35.png
 
Piemērs:
Piemērā parādīta vienkārša marķēta saraksta veidošana. Kā marķieris tiek izmantots iekrāsots kvadrātiņš (inside square).
 
<html>
<head>
<title>Vienkāršs saraksts</title>
</head>
<body>
<ul style="list-style:inside square; width:300px; font-size:18pt">
<li>Teksts 1</li>
<li>Teksts 2</li>
<li>Teksts 3</li>
<li>Teksts 4</li>
</ul>
</body>
</html>
Rezultāts:
 
b36.png
 
Piemērs:
Nedaudz sarežģītāks saraksta piemērs.
 
<html>
<head>
<title>Sarežģītāks saraksta piemērs</title>
</head>
<body>
<ul style="list-style:inside square; width:300px; font-size:18pt">
<li>Teksts 1</li>
<li style="margin-left:80px;">Teksts 5</li>
<li>Teksts 2</li>
<li style="margin-left:80px;">Teksts 6</li> 
<li>Teksts 3</li>
<li style="margin-left:80px;">Teksts 7</li>
<li>Teksts 4</li>
<li style="margin-left:80px;">Teksts 8</li>
</ul>
</body>
</html>
Rezultāts:
 
b37.png
 
Marķieru vietā var izmantot mazus zīmējumus, kas izveidoti kādā no zīmēšanas programmām.
 
Piemērs:
Kods:
 
<html>
<head>
<title>Attēli sarakstos</title>
</head>
<body>
<ul style="list-style-image:url(zim1.png); padding-left:200px; font-size:18pt">
<li><a href="http://www.inbox.lv"><b>teksts 1</b></a></li>
<li><a href="dok1.html"><b>teksts 2</b></a></li>
<li><a href="dok2.html"><b>teksts 3</b></a></li>
</ul>
</body>
</html>
Rezultāts:
 
b38.png
 
Piemērs:
Šis piemērs parāda konteksta selektoru izmantošanu. Ja rindiņas ul ul li{font-size:large; color:magenta} vietā ierakstam ul li{font-size:large; color:red}, tad viss teksts iekrāsojas sarkans un tas ir vienādā izmērā.
 
<html>
<head>
<title>Konteksta selektori</title>
<style>
body {font-size:x-large; color:blue}
ul ul li{font-size:large; color:magenta}
</style>
</head>
<body>
<ul>
<li>Teksts 1</li>
<ul>
<li>Teksts 2</li>
<li>Teksts 3</li>
</ul>
<li>Teksts 4</li>
</ul>
</body>
</html>
Rezultāts:
 
b39.png
 
Piemērs:
Palielinot width un padding lielumu, paplašinās abi piemērā redzamie teksta lauki. Šādā veidā varam iegūt vajadzīgo teksta lauku izmēru. Pēc vēlēšanās varam arī pievienot jaunus laukus, ievietojot kodā jaunu rindiņu <li class="AA">Teksts N</li>. Šajā gadījumā visus rāmjus noformē vienādi, jo ir tikai viena klase .AA.
 
<html>
<head>
<title>Saraksti</title>
<style type="text/css">
.AA{
background-color:#eee5de;
color:#cd0000;
width:350px;
padding:6px;
margin-bottom:8px;
list-style:none;
border:2px solid red;
text-align:left;
}
</style>
</head>
<body>
<ul>
<li class="AA">Teksts 1</li>
<li class="AA">Teksts 2</li>
</ul>
</body>
</html>
Rezultāts:
 
b40.png
 
Piemērs:
Šajā piemērā saraksti ir ievietoti viens otra iekšienē.
  
<html>
<head>
<title>Saraksti</title>
<style type="text/css">
.AA {
background-color:#eee5de;
color:#cd0000;
width:350px;
padding:6px;
margin-bottom:8px;
list-style:none;
border:2px solid red;
text-align:left;
}
</style>
</head>
<body>
<ul>
<li class="AA">
<ul>
<li class="AA">Teksts 1</li>
<li class="AA">Teksts 2</li>
</ul>Teksts 3</li>
<li class="AA">
<ul>
<li class="AA">Teksts 4</li>
<li class="AA">Teksts 5</li>
</ul>Teksts 6</li>
</ul>
</body>
</html>
Rezultāts:
 
b41.png
 
Piemērs:
Piemērā tiek izmantotas divas klases: .AA un .BB, un katrai klasei ir iespējams norādīt savus formatēšanas parametrus. Klašu skaitu var palielināt un, mainot padding un margin vērtības, panākt vēlamo saraksta izskatu.
 
<html>
<head>
<title>Saraksti</title>
<style type="text/css">
.AA {
background-color:#b9d3ee;
color:#0000FF;
width:350px;
padding:20px;
margin-bottom:8px;
list-style:none;
border:2px solid black;
text-align: left;
}
.BB {
background-color:#cdc9c9;
color:#0000FF;
width:350px;
padding:50px;
margin-bottom:8px;
margin-left:150px;
list-style: none;
border:2px solid black;
text-align: left;
}
</style>
</head>
<body>
<ul>
<li class="AA">Teksts 1</li>
<li class="BB">Teksts 2</li>
<li class="AA">Teksts 3</li>
<li class="BB">Teksts 4</li>
</ul>
</body>
</html>
Rezultāts:
 
b42.png
 
Piemērs:
Piemērā tiek parādīts saraksts saišu veidošanai starp lapām un dokumentiem. Palielinot atkāpi no kreisās malas margin-left, elements ar saiti pabīdās pa labi. Izmainot atkāpi, ir iespējams panākt vēlamo efektu. Iespējams norādīt arī margin visus četrus parametrus un novietot pogu, kur vēlas.
 
<html>
<head>
<title>Saraksti</title>
<style type="text/css">
#list {list-style:none}
#list a {
color:#473c8b;
text-decoration:none;
display:block;
width:120px;
height:21px;
background-color:#cdc9c9;
border:2px solid #ffe700;
border-left:6px solid #7a67ee;
text-align: center}
</style>
</head>
<body>
<ul id="list">
<li style="margin-left:400px"><a href="#">teksts saite 1</a></li>
<li style="margin-left:300px"><a href="#">teksts saite 2</a></li>
<li style="margin-left:220px"><a href="#">teksts saite 3</a></li>
<li style="margin-left:170px"><a href="#">teksts saite 4</a></li>
<li style="margin-left:120px"><a href="#">teksts saite 5</a></li>
<li style="margin-left:80px"><a href="#">teksts saite 6</a></li>
<li style="margin-left:50px"><a href="#">teksts saite 7</a></li>
<li style="margin-left:30px"><a href="#">teksts saite 8</a></li>
<li style="margin-left:10px"><a href="#">teksts saite 9</a></li>
<li style="margin-left:Opx"><a href="#">teksts saite 10</a></li>
</ul>
</body>
</html>
Rezultāts:
 
b43.png
 
Piemērs:
Pogas-saites izvietotas horizontāli un iekrāsotas.
 
<html>
<head>
<title>Saraksti</title>
<style type="text/css">
#AA li {display:inline}
#AA a {
color:#000000;
font:normal 14px arial, sans-serif;
padding:3px 15px 3px 15px;
text-decoration:none;
background-color:#c6e2ff;
border:3px solid #ee7942;
border-left:6px solid #0000ff;
text-align: center
}
</style>
</head>
<body>
<ul id="AA">
<li><a href="#">Teksts saite 1</a></li>
<li><a href="#">Teksts saite 2</a></li>
<li><a href="#">Teksts saite 3</a></li>
<li><a href="#">Teksts saite 4</a></li>
<li><a href="#">Teksts saite 5</a></li>
</ul>
</body>
</html>
Rezultāts:
 
b44.png
 
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: 163.-185. lpp.