Seznam HTML. Uporaba slogov CSS

Na številnih straneh HTML v besedilu si lahko ogledate sezname. Z njihovo pomočjo ustvarite menije, navodila, postopne algoritme, sistematizirajte informacije in izvedite veliko več. Seznam HTML je ustvarjen s pomočjo označevalnega jezika. Če želite to narediti, uporabite nekaj oznak. To je ena najpogostejših oblik predstavljanja informacij v stisnjeni obliki in hkrati jasno.

Seznami se uporabljajo predvsem v naslednjih primerih:

• predstavitev informacij v eni sami strukturi s primerno zaznavo;
• poenostavitev kompleksnih zaporednih procesov;
• ustvarjanje struktur s kazali vsebine, točkami in razlagami.

Seznami obstajajo v treh različicah:

• oštevilčeni;
• označeno;
• seznamov definicij.

Oštevilčen seznam

Oštevilčevanje je priročno pri uvrščanju izdelkov v vrstni red. Seznam HTML se odpre in zapre z oznakami <ol> in </ ol>.

Koda seznama bo:

<ol>

<li> 1 element </ li>

<li> 2 </ item> element

<li> 3 element </ li >›

</ ol>

Vsak položaj se nahaja znotraj oznake <li>.

Seznam z označbami

Položaji niso oštevilčeni in razvrščeni v poljubnem zaporedju. Seznam kod je podoben prejšnjemu. Edina razlika je, da se nahaja znotraj oznake <ul>:

<ul>

<li> najprej </ li>

<li> drugo </ li>

<li> tretji </ li>

</ ul>

Privzeti marker je označen s črnim krogom, vendar je njegova slika spremenjena z atributom tipa, na primer:

<ul type = "square">

Podobno spremenite oznako oštevilčenega seznama, na primer tako, da atributu dodelite dobesedno vrednost:

<ol type = "A">

Seznam definicij

Pogosto je potrebno izbrati besede iz glavnega besedila in jim pojasniti. Za to naredite seznam elementov z njihovimi definicijami. Koda se odpre in zapre z oznakama <dl> in </ dl>. Notranjost je urejena po elementih, ki so zaprti v paru <dt> in </ dt>. Pogosto jih dodatno ločujejo oznake <strong> ... </ strong>. Po vsakem elementu so pojasnila, uokvirjena s povezano <dd> ... </ dd>. Na splošno koda izgleda tako:

<h2> DefinitionList </ h2>

<dl>
<dt> www </ dt>
<dd> www predstavlja svetovni splet </ dd>
<dt> CSS </ dt>
<dd> CSS predstavlja slogovne datoteke </ dd>
</ dl>

Na strani bo rezultat izvajanja te kode videti takole:

Spustni seznam

Včasih je na spustnem seznamu priročno. V začetnem stanju so zaprte in privzeto je viden samo prvi položaj. Kodna shema je podobna prejšnji. Elementi seznama so ustvarjeni z oznako možnosti, ki je vdelana v vsebnik <select>:

<select>

<opcija> el1

<opcija> el2

<izbrana možnost> el3

Privzeto je prvi element vedno prikazan. Lahko ga zamenjate z uporabo izbranega atributa oznake <option>, kot je prikazano v kodi na spustnem seznamu. Tretja postavka je vidna v njej, ko je seznam zaprt.

Na nekaterih seznamih je treba izbrati več položajev hkrati. Za to se uporablja več atributov oznake <select>.

Kako spustiti seznam v HTML in CSS

Čeprav se markup pogosto uporablja, je precej omejen. S spustnim seznamom HTML se izboljša CSS. Njegov tip je lahko vsak.

<div class = "zvitki">

<gumb> izdelke

<ul>

<a> <li> 1 element </ li> </ a>

<a> <li> 2 element </ li> </ a>

<a> <li> 3 element </ li> </ a>

</ ul>

Zdaj morate na kodo uporabiti lastnosti CSS. Pogosto se uporabljajo za spektakularno oblikovanje, vendar je bolje, da se najprej osredotočite na učinkovitost spustnega seznama. Ko se premaknete nad naslov, se mora pojaviti na zaslonu.

Slogi določajo pogoje za prikaz ali skrivanje seznama:

.rolls a {

list-style: noben;

display: none}

.rolls: hover a {

prikaz: blok}

Ko se miška pomika nad gumbom, se na strani prikaže seznam, prikazan na spodnji sliki.

Spustni seznami na več ravneh

Ko postavitev strani preproste sezname morda ne bo dovolj, vendar informacije bi bilo super. Tukaj se rešujejo spustni seznami na več ravneh. Njihova struktura je včasih zapletena. Če želite odpraviti napake, morate skrbno spremljati začetne in končne oznake. Prejšnji seznam definicij je tudi večnivojski. Za ustvarjanje slovarjev ali pojasnil izrazov je priročno.

Uporabi se spustni seznam HTML-ja, da ne zapravi strani in razširi njegovih zmožnosti. Kot osnovno orodje zadostuje uporaba označevalnega jezika. Hkrati za vsako stopnjo gnezdenja koda ostaja ista.

Funkcionalno bo seznam HTML deloval, toda z uporabo slogovnih listov ga lahko oblikujete tako, da je lepa in udobna.

Zaključek

Obstajajo seznami različnih vrst HTML-ja. Ustvarjajo se po isti shemi, vključno z ugnezdenimi. Značilnosti seznamov so izboljšane s stili CSS. S pomočjo stilov lahko ustvarite edinstvena orodja. Hkrati je pomembno, da so seznami pravilno semantično oblikovani, da bi olajšali vzdrževanje območij zase.