Za implementaciju se koristi oznaka ol. Primjeri stilskog dizajna ul li lista CSS
Pozdrav, dragi čitaoci blog stranice. Danas, kao dio ovog odjeljka, želim govoriti o raznim Html listama koje se mogu kreirati na osnovu UL, OL, LI i DL tagova posebno dizajniranih za ovo. UL i LI parovi kreiraju liste sa nabrajanjem, OL i LI parovi kreiraju numerisane liste, a DL, DT i DD elementi kreiraju takozvane liste definicija. Također ćemo ukratko razmotriti principe kreiranja ugniježđenih struktura.
Želio bih vas podsjetiti da smo već uspjeli razgovarati o osnovama modernog, kao i o tabelarnom izgledu (). Osim toga, dotakli smo se osnova i naučili do kraja.
Bullet liste zasnovane na UL i LI oznakama
UL oznaka se koristi za kreiranje lista sa nabrajanjem, a OL oznaka se koristi za kreiranje numerisanih lista. Ove oznake su uparene i blok oznake, baš kao i LI element.
Između početne i završne oznake nalaze se pojedinačne stavke liste, koje su zauzvrat zatvorene u otvaranju i zatvaranju LI elementa. Gornji i donji deo HTML liste Pregledač dodaje uvlačenje u jednu liniju, slično uvlačenju koje stvara oznaka pasusa.
Pogledajmo, na primjer, opciju s nabrajanjem koja bi mogla izgledati ovako:
- Prva linija
- Drugo
- Poslednji element
Samo LI elementi mogu biti unutar otvaranja i zatvaranja UL tagova, a unutar samih ovih elemenata (klauzula) možete umetnuti bilo koji sadržaj (tekst, slike, naslove, pasuse, linkove pa čak i druge liste).
One. UL služi samo za pružanje nabrajanog (ne uređenog) popisa i svega što ćete vidjeti na web stranicu unutar njega se implementira korištenjem sadržaja LI elemenata.
Za UL, možete promijeniti tip markera navođenjem različitih vrijednosti za atribut "Type". Ako "Type" (kontrola izgleda markera) za UL element nije naveden, tada će se prikazati podrazumevani izgled markera (disk - krug popunjen bojom teksta):
- — popunjen krug (podrazumevano);
- - nepopunjen krug;
- - kvadrat
U gornjim primjerima, specificirali smo atribut “Type” u UL elementu koristeći ovaj tip markeri za sve artikle. Ali atribut “Type” se također može specificirati za svaku pojedinačnu LI oznaku, postavljajući vlastiti tip markera za ovu stavku.
Primjer liste sa nabrajanjem sa razne vrste marker za svaku stavku:
- Marker u obliku popunjenog diska
- Marker u obliku neobojenog diska
- Square
Numerisane liste u HTML-u na osnovu oznake OL
Za kreiranje numerisane liste koriste se OL tagovi unutar kojih će se LI elementi ponovo nalaziti. OL i LI, kao što sam već spomenuo, su bazirani na blokovima (to jest, imaju tendenciju da zauzmu sav raspoloživi prostor u širini) i ništa osim LI elemenata ne može se postaviti unutar OL-a.
Ispostavilo se da su OL i UL servisne oznake koje su potrebne samo da naznače pretraživaču koju vrstu liste kreiramo (označene ili numerisane). U slučaju numerirane stavke, lijevo od svake stavke nećemo vidjeti marker, već broj i tačku iza njega:
- Prva linija
- Druga tačka
- Treća linija
Kao što sam spomenuo gore, elementi UL, OL i LI imaju mogućnost korištenja atributa TYPE. Omogućava vam da konfigurišete tip markera ili odredite koji brojevi ili slova će se koristiti za numerisanje stavki liste. Za numerisanu listu, parametri ovog atributa mogu imati sledeće vrednosti:
- — numerisanje će se vršiti uobičajenim arapskim brojevima (ista opcija će se koristiti podrazumevano, u nedostatku atributa „Type“);
- — velika slova kao numerisanje;
- - mala slova;
- - veliki rimski brojevi;
- - mali rimski brojevi;
Primjer numerirane liste s različitim vrstama numeriranja za svaku stavku:
- numerisan velikim rimskim brojevima
- Numeracija malim latiničnim slovima
- Numeracija malim rimskim brojevima
Prilikom kreiranja numerisanih lista, takođe je moguće započeti numerisanje ne od jednog, već od broja navedenog u START atributu. na primjer:
- Prvi element čiji je broj naveden u OL oznaci sa start="23" atributom
- Sljedeća stavka, s brojem jedan viši
- Još jedan
Za OL, također možete započeti novo numeriranje od bilo koje vrijednosti, počevši od bilo koje stavke, pisanjem atributa VALUE sa potrebnim brojem u početnom LI ove stavke. na primjer:
- Prva tačka sa brojem jedan
- Ovaj element će dobiti broj naveden u atributu value="32".
- Stavka sa velikim brojem
Dizajniranje izgleda lista u CSS-u (style sheets)
Ali obično sada izgled markeri se ne specificiraju preko atributa TYPE, već , za koje su specificirana odgovarajuća svojstva.
Ovdje ću samo dati primjer različitih oznaka za nenumerisane liste, čiji je izgled postavljen kroz zaseban fajl sa kaskadnim stilovima.
- Prva tačka
- Drugo
- Last
Ali o tome ćemo govoriti u narednim člancima. Ovako je postavljen izgled UL markera na ovom blogu. Slike se koriste kao markeri: za redovne stavke nenumerirane liste - , za ugniježđene stavke nenumerirane liste - .
Posebne i ugniježđene liste u HTML kodu
Treći i posljednji tip se zove “definicijska lista” i specificira se pomoću tri taga - DL, DT i DD. DL govori pretraživaču da je ono što slijedi lista definicija.
Obično se ovaj tip koristi (ili je bio namijenjen da se koristi) za pisanje rječnika koji se sastoji od pojmova (ograđenih u DT tagovima) i njihovih opisa (ograđenih u DD oznakama).
- Prvi mandat
- Opis
- Drugi mandat
- Njegov opis
Ako pogledate gornji primjer, primijetit ćete da je DD element (opis pojma) pomaknut (za 40 piksela) u odnosu na DT element (sam termin).
Generalno, DL, DT i DD su blok oznake i samo sadržaj sa inline oznakama može se umetnuti unutar DT elementa (ispada da se blok elementi naslova i pasusa ne mogu koristiti unutar DT). A unutar DD tagova možete umetnuti bilo koji element, kako inline tako i blok.
Ugniježđena lista u HTML-u se kreira analogno jednostavnom, ali unutar glavne liste, neke od stavki su još jednom zatvorene u početnu i završnu oznaku UL ili OL.
Imajte na umu da se završni LI stavke u kojoj će se kreirati ugniježđena stavka postavlja tek nakon cijelog koda ugniježđene liste (ovo je vrlo važno za njen ispravan prikaz na web stranici). Ugniježđena lista može izgledati otprilike ovako:
- Prvi pasus glavne numerisane
- Druga tačka
- Prvi element ugniježđenog s nabrajanjem
- Drugo
- Treća i poslednja tačka
- Treći element je numerisan
Sretno vam bilo! Vidimo se uskoro na stranicama blog stranice
Možda ste zainteresovani
Kako umetnuti link i sliku (fotografiju) u HTML - IMG i A tagove Odaberite, Option, Textarea, Label, Fieldset, Legend - oznake HTML forme padajuće liste i tekstualno polje 
Html obrasci za sajt - oznake Forma, Input i Select, Option, Textarea, Label i drugi za kreiranje elemenata web obrasca 
Kako se boje postavljaju u Html i CSS kodu, odabir RGB nijansi u tabelama, Yandex izlaz i drugi programi 
Ugradi i objekt - HTML oznaka i za prikazivanje medijskog sadržaja (video, flash, audio) na web stranicama 
Oznake i atributi naslova H1-H6, horizontalna linija Hr, prijelom reda Br i prijelom pasusa P prema Html 4.01 standardu 
Tabele u HTML-u - Tabela, Tr i Td oznake, kao i Colspan, Cellpadding, Cellspacing i Rowspan za njihovo kreiranje 
Šta je jezik za označavanje hiperteksta Html i kako pogledati listu svih oznaka u W3C validatoru 
Font (lice, veličina i boja), blok citata i pre tagovi - naslijeđeno formatiranje teksta u čistom HTML-u (ne koristi se CSS) 
Iframe i Frame - šta su to i kako najbolje koristiti okvire u HTML-u 
Img - Html oznaka za umetanje slike (Src), poravnavanje i premotavanje teksta oko nje (align), kao i postavljanje pozadine (background)
Jezik za označavanje hiperteksta HTML ima oznaku
- , koristi se za kreiranje lista sa nabrajanjem. To podržavaju svi moderni pretraživači i omogućava vam da prikažete elemente redosledom koji ne zahteva numerisanje. Na primjer, vrlo često prikazuje stavke menija i sve što se odnosi na liste na stranici: posuđe, proizvode, opremu, alate i još mnogo toga što treba navesti bez navođenja prioriteta određene stavke.
- Element #1
- Element #2
- Element #3
- ...
- Element #1
- Element #2
- Element #3
- Element #1
-
- Stavka #2-1
- Element #2-2
- Element #2-3
- Element #3
- ...
- Element #1
- Element #2
- Element #1
- Element #2
- Element #1
- Element #2
- Element #1
- Element #2
- ...
- disk - marker u obliku kruga (primjer je bio iznad)
- krug - marker u obliku prozirnog kruga (primjer je bio iznad)
- kvadrat - marker u obliku kvadrata (primjer je bio iznad)
- decimalni - marker u obliku numerisane liste arapskim brojevima: 1, 2, 3, ...
- decimalna-vodeća-nula - marker u obliku numerisane liste arapskim brojevima sa početnom nulom: 01, 02, 03, ...
- donji rimski - oznaka u obliku numerisane liste na latinskom pismu malim slovima: i, ii, iii, iv, v
- gornji-rimski - oznaka u obliku numerisane liste na latinskom pismu velikim slovima: I, II, III, IV, V
- donja latinica - marker u obliku liste na latiničnoj abecedi malim slovima: a, b, c, d, ...
- gornja latinica - marker u obliku liste latinicom velikim slovima: A, B, C, D, ...
- donji grčki - oznaka u obliku liste na grčkom alfabetu malim slovima
- gornji-grčki - oznaka u obliku liste na grčkom alfabetu velikim slovima
- . Prilikom postavljanja atributa oznaci
- sve stavke liste će biti prikazane kako je naznačeno atributom. Ali možemo ovom ili onom elementu dati svoj vlastiti prikaz. Primjer na slici:
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- Element #1
- Element #2
- Element #3
- kao što je prikazano ispod.
- Prva tačka
- Druga tačka
- Treća tačka
Ako ne navedete nikakve dodatne atribute i samo napišite oznaku
- , tada je podrazumevana lista sa arapskim brojevima (1, 2, 3,...), kao što je prikazano u Primeru 11.3.
- stvaranje tačnosti (nikada nećete zakasniti ni na šta);
- lijek za tačnost (nikada nećete žuriti);
- promjena u percepciji vremena i satova.
- arapski brojevi (1, 2, 3, ...);
- velika latinična slova (A, B, C, ...);
- mala latinična slova (a, b, c, ...);
- veliki rimski brojevi (I, II, III, ...);
- mali rimski brojevi (i, ii, iii, ...).
- Kralj Magnum XLIV
- Kralj Zigfrid XVI
- Kralj Sigismund XXI
- Kralj Husbrandt I
- tačka 1
- tačka 2
- tačka 3
- tačka 1
- tačka 1
- tačka 1
- tačka 1
- tačka 2
- tačka 3
- Naslov 1
- Naslov 2
- Naslov 3
- (element liste).
Podrška za pretraživač
Atribut
Opera
IExplorer
Edgestart , tip Da Da Da Da Da Da obrnuto Da Da Da Da br br Atributi
Atribut Značenje Opis kompaktan kompaktan Nije podržano u HTML5.
Određuje da lista treba biti manja od normalne veličine (visina linije: 80%).
Koristite CSS umjesto ovog atributa.obrnuto Određuje da redoslijed u numeriranoj (sortiranoj) listi treba biti opadajući. Atribut nije podržan Internet pretraživači Explorer i Edge. start broj Definira početnu vrijednost numerirane (uređene) liste. Vrijednosti moraju biti cijeli brojevi, negativne vrijednosti su dozvoljene. Kada se koristi sa slovima (tip = "A" i tip = "a"), broj naveden u vrijednosti atributa je redni broj slova u abecedi. Na primjer, start = "4" će odgovarati slovu "D" i lista će početi sa njom. Kada se koristi vrijednost start = "27", brojač se resetuje na nulu, a lista postaje dvocifrena ("27" = "AA", "28" = "AB", "29" = "AC". .). tip 1 (zadano)
A (veliki)
a (mala slova)
I (rimski veliki)
i (rimski mali)Definira tip nabrajanja koji se koristi u izradi numerisane (uređene) liste. Primjer upotrebe
Primjer korištenja oznake <ol> <span> - Prva tačkaDruga tačka
- Treća tačka
- Prva tačka.
- Druga tačka.
- Treća tačka.
Na stranici će izgledati ovako:
Ako želite da lista počinje od određenog broja (ne od 1), tada morate navesti početni atribut za oznaku
-
.
na primjer:
Još jedan zanimljiv atribut je type , koji će vam omogućiti da odredite alfabetsko numerisanje ("A" - velika slova, "a" - mala), ili numerisanje rimskih brojeva ("I" - velika, "i" - mala slova).
Pogledajmo primjer koji predstavlja sve moguće vrijednosti atributa tipa (osim zadane vrijednosti):
Primjer korištenja atributa tipa HTML oznake<оl> - >
- Treća tačka
- Prva tačkaDruga tačka
- Treća tačka
- Prva tačkaDruga tačka
- Treća tačka
- Prva tačkaDruga tačka
- Treća tačka
- ):
Primjer numerisane liste ugniježđene unutar druge numerirane liste <span> -
Prva tačka
- Treća tačka Druga tačka
-
Prva tačka
- Treća tačka
Primjer 11.3. Napravite numerisanu listu
Numerisana lista Rad sa vremenom
Rezultat ovog primjera prikazan je na sl. 11.3.
Rice. 11.3. Prikaz numerisane liste
Imajte na umu da numerisana lista takođe dodaje automatsko uvlačenje na vrh, dno i levo od teksta.
Sljedeće vrijednosti mogu poslužiti kao elementi numeracije:
Da biste označili tip numerisane liste, koristite atribut tipa oznake
- . Njegove moguće vrijednosti su date u tabeli. 11.2.
Table 11.2. Vrste numerisanih lista
Vrsta liste HTML kod Primjer arapski brojevi
1. Cheburashka
2. Krokodil Gena
3. ShapoklyakVelika slova latinice
A. Cheburashka
B. Krokodil Gena
C. ShapoklyakMala slova latinice
a. Cheburashka
b. Krokodil Gena
c. ShapoklyakRimski brojevi u velika slova
I. Cheburashka
II. Krokodil Gena
III. ShapoklyakRimski brojevi malim slovima
i. Cheburashka
ii. Krokodil Gena
iii. ShapoklyakDa biste započeli listu sa određenom vrijednošću, koristite start atribut oznake
- . Nije važno na koji tip je lista postavljena koristeći tip , startni atribut radi isto i sa rimskim i arapskim brojevima. Primjer 11.4 pokazuje kako napraviti listu koristeći velike rimske brojeve koji počinju sa osam.
Primjer 11.4. Numeracija liste
Rimski brojevi Rezultat ovog primjera prikazan je na sl. 11.4.
Rice. 11.4. Numerisana lista sa rimskim brojevima
Liste mogu biti numerisane ili nenumerisane.
Numerisane liste se prikazuju sa kodom:
- Lista sa brojevima
Nenumerisane liste se prikazuju sa sledećim kodom:
- Lista sa kvačicama ili drugim simbolima
Svaka stavka na bilo kojoj listi je zatvorena u li tag. Sve stavke liste su zatvorene u jednu zajedničku ul ili ol oznaku. Stilovi ovih oznaka su upisani u listu stilova.
Svakoj oznaci su dodijeljeni specifični stilovi dizajna. Oni označavaju uvlake iz teksta.
Za numerisanu listu, stilovi numerisanja su specificirani za svaku stavku.
Standardni arapski brojevi su opisani decimalom vrijednosti.
tip-stil liste: decimalni; /*arapski brojevi*/
Za listu sa nabrajanjem navedite stil karaktera - kvadratiće ili krugove.
list-style-type: krug; /*krugovi*/
list-style-type: kvadrat; /*kvadrati*/Svakoj stavci menija može se dodijeliti slika.
list-style-image: url('put do slike');
Tipično, u predlošcima, numerisana lista je formatirana jednostavnim brojevima, a nenumerisana lista je formatirana crnim kvadratima i krugovima. Dosadno je i bezizražajno. Hajde da popravimo ovo.
Gdje su stilovi liste napisani u predlošku Twenty Eleven?
Otvorite datoteku style.css. Pronađite odjeljak pod nazivom /* Tekstualni elementi */
Standardni kod izgleda ovako:
Kako kreirati numerisanu listu?
Numerisana lista koristeći pozadinu
Pogledajte ovaj slatki dizajn numerirane liste.
Sviđa mi se? Hajde da ponovimo.
Pronađite stilove za ol tag. Dodajte mu nova svojstva.
Ol ( padding: 0px 0 0 20px; margina: 0,5em 0 1,571em 1,9em; boja: #2E2E2E; tip-stil liste: nijedan; font: 15px/17px Verdana, Arial, Helvetica, sans-serif; z-index : 2; poništavanje brojača: tačka ) ol li ( margin-bottom: 4px; line-height: 1.6; color: #2E2E2E; position: relative; ) ol li:before ( margin-bottom: 4px; counter-increment: tačka 1: 24px pozadina: #BDC3C7;
Da biste razumjeli gdje i šta trebate promijeniti da bi odgovarao vašem dizajnu, hajde da razbijemo ovaj kod dio po dio.
tip-stil liste: nijedan; — onemogućava izlaz standardnih brojeva
poništavanje brojača: tačka; — postavlja varijablu za brojač numeracije
položaj: relativan; — numerisana mesta pored samih stavkiprije je pseudo element za ol li tag. Ima sljedeće stilove:
sadržaj: counter(point); — prikazuje vrijednost varijable
kontrainkrement: tačka 1; — povećava brojač za 1
pozicija: apsolutna;
pozadina: #BDC3C7; — pozadina za brojeve (pozadina se može postaviti bojom ili prelijepom ikonom
margina – vanjske margine
padding – unutrašnji padding
boja – boja teksta elementa
pozadina – pozadina
text-align – poravnanje teksta
font-weight – debljina fonta (zasićenost)U svojim stilovima možete postaviti bilo koje boje, poravnanja, veličine fonta i uvlake.
Numerisana lista sa jedinstvenom slikom za svaku stavku
Jedan ženski sajt ima veoma atraktivne numerisane liste.
Kako se to implementira? Pogledajmo sljedeći kod:
/*prvi broj*/ ol li:first-child (list-style-image: url(puta do slike sa brojem 1); ) /*drugi broj*/ ol li:nth-child(2n) (list-style- image: url(putanja do slike sa brojem 2) /*treći broj*/ ol li:nth-child(3n) (list-style-image: url(putanja do slike sa brojem 3); ) /*); četvrti broj */ ol li:nth-child(4n) (list-style-image: url(putanja do slike sa brojem 4); ) /*Dalje pišemo potpuno isto samo za sljedeće brojeve stavki*/
U kodu za takvu numerisanu listu morate navesti sve brojeve artikala i svakom od njih dodeliti jedinstvenu ikonu.
Ako koristite do 20 numerisanih stavki na listama u člancima, tada morate napisati pseudo-klasu nth-child(An) 20 puta. Tako da je zadnja u stilovima pseudo-klasa nth-child(20n).
Pronađite redove u datoteci stilova koji opisuju dizajn numerisane liste (ol li oznake).
Dodajte mu pseudoklasu prvog djeteta. Kopirajte i zalijepite ga jednom, a zatim promijenite ovo svojstvo u nth-child(An) i kopirajte onoliko brojeva koliko želite da imate vlastitu ikonu. Unesite brojeve stavki.
Za svaki broj dodajte svojstvo list-style-image sa svojom jedinstvenom ikonom.
Ako se ikone na web lokaciji nalaze daleko od stavki ili ih preklapaju, tada morate urediti poravnanje i uvlačenje digitalnih ikona ili tekst stavki.
Kako kreirati listu sa nabrajanjem (nenumeriranom)?
Označena lista ul li sa naizmjeničnim ikonama
Zaista mi se svidjela ova lista sa nabrajanjem.
Ul ( padding: 11px 0 5px 0; ) ul li ( padding-left: 32px; margin-bottom: 10px; font: normal 15px Verdana, sans-serif; boja: #2E2E2E; visina linije: 1,6; border-bottom: 1px isprekidana #ccc: 10px ul li:before (sadržaj: ""; pozicija: apsolutna; širina: 27px; margina-lijevo: -35px; pozadina: url; ("images/sprite.jpg") 0px 2px no-repeat-style-type: circle ) ul li:nth-child(2n):before (sadržaj: ""; pozicija: apsolutna; širina: 27px; visina; : 43px; margin-left: -35px background: url("images/sprite.jpg") 0px -17px;
Umjesto standardnog tipa-stil liste, možete dodijeliti svojstvo “putanja do ikone” - list-style-image:url. Ali tada morate odrediti vanjsku lijevu marginu sa rubova web-mjesta - bez nje ikone neće biti prikazane i ići će izvan područja sadržaja.
Za eksperiment možete dodijeliti uvlake:
Ul li (list-style-image: url(images/radio.png); margin-left: 30px; )
Izmjenjivanje ikona može se postaviti sa svojstvom nth-child(An). Gornji primjer koristi pseudoelement prije.
Kod sadrži jedno pseudo-klasu nth-child(2n). Njegova vrijednost je 2. Ispada da svaka parna tačka odgovara drugoj ikoni. Ako umjesto 2n upišete 2n+1, onda će se na neparnim tačkama pojaviti druga ikona.
Za svaku stavku liste možete odrediti donju crtu. U gornjem primjeru, tačke su podvučene isprekidanim linijama.
Također možete dodijeliti okvire, pozadine i ikone svakoj stavci. Samo nemojte preterivati. Naš cilj nije oduševiti svakoga fensi dizajnom, već poboljšati kvalitetu percepcije sadržaja.
Kako prikazati nekoliko lista s različitim dizajnom na stranici?
Ponekad morate postaviti nekoliko lista sa različitim stilovima.
Ako dodijelite zajedničke stilove, tada će isti dizajn biti dodijeljen svim listama. Razne liste može se prikazati ako ol ili ul oznaci dodijelite poseban id i unesete ga u html modu za uređivanje članka. Pa, u datoteci stila za ovaj ID trebate napisati zasebne stilove.
Evo, na primjer, jedne lijepe opcije dizajna sadržaja:
U HTML-u biste napisali listu ovako:
- Sadržaj
U CSS-u biste napisali stilove poput ovog:
Ol#sod( padding: 0px 20px 10px 51px; margina: 0.5em 0 0em 1em; boja: #2E2E2E; tip-stil liste: nijedan; pozadina: #f1f4f5; granica lijevo: #BDC3C7 4px solid; display: inline- block ) ol#sod li() ol#sod li:before( font-weight:normal !important )
Novi stil se razlikuje od glavnog u dizajnu oznake ol: pozadina, stil prikaza, linija lijevo od sadržaja.
Koristeći nekoliko lista različitog dizajna u tekstu, učinit ćete prezentaciju informacija još zanimljivijom. Kada navodite bilo koju stavku, možete postaviti neke ikone, a kada navodite radnje, možete postaviti druge. Ovdje je dizajn ograničen samo vašom maštom.
Ove metode su također primjenjive u dizajnu stavki menija, naslova i svih drugih elemenata stranice.
Kako kreirati sidrene veze na listi sadržaja?
Kako ih napisati u HTML kodu? Jedan deo koda uokviruje sidro linka, a drugi deo koda se postavlja pored mesta na koje treba da budemo preusmereni kada kliknemo na link.
- Sadržaj
A u tekstu članka trebate napisati ovo:
Naslov 1… Naslov 2… Naslov 3…
Možda me iskusniji webmasteri mogu nešto ispraviti. Jednostavno savjetujem ono što sam i sam isprobao u praksi.
Ako i dalje imate pitanja, bit će mi drago vidjeti ih u komentarima.
Ageeva Veronica.
Možda će vas zanimati i:
HTML oznakeZnačenje i primjena
Numerisana (uređena) lista je za stavke koje se pojavljuju određenim redosledom. Numerisana lista počinje oznakom
- (skraćeno od engleskog naručena lista- naručena lista). Svaki element liste počinje oznakom
- >
- >
- >
Imajte na umu da je dozvoljeno kreirati numerirane (uređene) liste ugniježđene unutar drugih numerisanih lista (unutar elementa liste
Na stranici će izgledati ovako.
Kod izgleda ovako:
Promjena oznaka oznaka
- koristeći CSS
Stavke liste za nabrajanje kreirane pomoću oznake
- , može se označiti proizvoljnim slikama. CSS se koristi za promjenu tipa markera. Na primjer
A ovako to izgleda na stranici:
C koristeći CSS možemo podesiti druge vrste prikaza markera. Ali morate to zapamtiti kada specificirate bilo koji stil za oznaku
- , odnosi se na sve elemente liste.
Numerisane liste su skup elemenata sa njihovim serijskim brojevima. Tip i tip numeracije zavise od atributa oznake
- , koji se koristi za kreiranje liste. Svaka stavka u numerisanoj listi je označena oznakom
Sintaksa oznake
Ovaj kod se prevodi u listu s nabrajanjem na web stranici:
Tag
- zahtijeva obavezna upotreba zatvaranje oznake
Za formiranje elemenata liste koristi se upareni tag. Između početne i završne oznake nalaze se pojedinačne riječi, fraze, paragrafi, slike, dijelovi koda i još mnogo toga što je sadržaj liste sa nabrajanjem.
Šta može biti sadržaj liste sa nabrajanjem?To može biti različit tekst, uključujući pojedinačne riječi, fraze i pasuse, slike, ugniježđene liste, dijelove php koda i još mnogo toga što je potrebno jednostavno označiti.
Svaka stavka liste uvučena je 40 piksela udesno po defaultu. Koristeći CSS stilovi, možemo promijeniti prikaz ovu listu prema vlastitom nahođenju. Tag
- je baziran na blokovima, tako da zauzima čitavo područje koje mu je dostupno, ograničeno ivicom ekrana, okvirom tabele ili drugim elementima stranice.
Dozvoljeni su prilozi liste unutar liste.
Na primjer
Atributi i svojstva oznake
Široko korišten atribut oznake
- je atribut tipa koji pokazuje kako će izgledati marker liste. Može uzeti sljedeće vrijednosti
1. type="disc" - marker u obliku popunjenog kruga (ova vrijednost je zadana). Primjer diska je bio malo viši.
2. type="circle" - marker u obliku prozirnog kruga
na primjer:
3. type="square" - marker u obliku kvadrata
na primjer:
A evo kako to izgleda na stranici:
U CSS-u, tip metka je specificiran pomoću atributa list-style-type:
Pogledajmo koje vrijednosti list-style-type može imati:
Napomena 2
Atribut se može dodijeliti samoj oznaci
- , i oznake
