Sākumlapa
"Pirmā web lapa"
HTML
Citi materiāli

Ceļošana - kalni

CSS

Sintakse
Sasaiste ar HTML
Kategorijas un ID
Šrifts
Teksts
Fons
Saraksta     noformējums
Saites

Vēl iesaku:

W3Schools
Krāsu palete

Pārlūku atbalsts CSS
 (1),   (2) 

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"
  1.  

"disc"
  •  

"decimal-leading-zero"
  1.  

"circle"
  •  

"lower-roman"
  1.  

"square"
  •  

"upper-roman"
  1.  

 
  •  

"lower-alpha"
  1.  

 
  •  

"upper-alpha"
  1.  

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!

  1. Sakārtots saraksts.
  2. Sakārtots saraksts.
  3. 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:

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!

  1. Sakārtots saraksts.
  2. Sakārtots saraksts.
  3. Sakārtots saraksts.

Saraksta atkāpe (list-style-position)

Saraksta atkāpei no malas ir divas vērtības:

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!

  1. Sakārtots saraksts.
  2. Sakārtots saraksts.
  3. Sakārtots saraksts.
  1. Sakārtots saraksts.
  2. Sakārtots saraksts.
  3. Sakārtots saraksts.



Autortiesības © 2005-2009, kasis.lv. Visas tiesības aizsargātas.