Elenco HTML. Applicazione di stili CSS

Su molte pagine HTML nel testo puoi vedere le liste. Con il loro aiuto, create menu, istruzioni, algoritmi passo-passo, sistematizzate le informazioni e eseguite molto di più. L'elenco HTML viene creato utilizzando un linguaggio di marcatura del testo. Per fare ciò, utilizzare alcuni tag. Questa è una delle forme più comuni di presentazione delle informazioni in forma compressa e allo stesso tempo chiara.

Le liste sono utilizzate principalmente nei seguenti casi:

• presentazione di informazioni in una singola struttura con una percezione conveniente;
• semplificazione di processi sequenziali complessi;
• creazione di strutture con sommari, punti e spiegazioni.

Le liste esistono in tre varietà:

• numerata;
• etichetta;
• liste di definizioni.

Lista numerata

La numerazione è utile quando si elencano gli articoli in ordine. L'elenco HTML viene aperto e chiuso con i tag <ol> e </ ol>.

Il codice della lista sarà:

<Ol>

<li> 1 elemento </ li>

<li> 2 </ item> elemento

<li> 3 elementi </ li >>

</ ol>

Ogni posizione è posizionata all'interno del tag <li>.

Elenco puntato

Le posizioni non sono numerate e disposte in una sequenza arbitraria. La lista dei codici è simile alla precedente. L'unica differenza è che si trova all'interno del tag <ul>:

<Ul>

<li> prima </ li>

<li> secondo </ li>

<li> terzo </ li>

</ ul>

Il marker predefinito è indicato da un cerchio nero, ma la sua immagine viene modificata usando l'attributo type, ad esempio:

<ul type = "square">

Allo stesso modo, modifica la designazione di un elenco numerato, ad esempio assegnando un attributo a un valore letterale:

<ol type = "A">

Elenco di definizioni

Spesso è necessario selezionare le parole dal testo principale e dare loro spiegazioni. Per fare ciò, crea una lista di elementi con le loro definizioni. Il codice si apre e si chiude con i tag <dl> e </ dl>. All'interno sono disposti in ordine elementi racchiusi in una coppia di <dt> e </ dt>. Spesso si distinguono anche per i tag <strong> ... </ strong>. Dopo ogni elemento sono spiegazioni, incorniciato da <dd> ... </ dd> abbinato. In generale, il codice ha il seguente aspetto:

<h2> DefinitionList </ h2>

<Dl>
<dt> www </ dt>
<dd> www rappresenta il world wide web </ dd>
<dt> CSS </ dt>
<dd> CSS rappresenta i fogli di stile </ dd>
</ dl>

Nella pagina, il risultato dell'esecuzione di questo codice sarà simile a questo:

Elenco a discesa

A volte è utile creare elenchi a discesa. Nello stato iniziale, sono chiusi e, per impostazione predefinita, solo la prima posizione è visibile. Lo schema del codice è simile a quelli precedenti. Gli elementi dell'elenco vengono creati con un tag di opzione incorporato in un contenitore <select>:

<Seleziona>

<opzione> el1

<opzione> el2

<opzione selezionata> el3

Per impostazione predefinita, il primo elemento viene sempre visualizzato. Può essere sostituito applicando l'attributo selezionato del tag <option>, come rappresentato nel codice nell'elenco a discesa. Il terzo elemento diventa visibile al suo interno quando l'elenco è chiuso.

In alcune liste è necessario selezionare diverse posizioni contemporaneamente. Per questo motivo viene utilizzato l'attributo multiplo del tag <select>.

Come creare un elenco in HTML e CSS

Sebbene il markup sia ampiamente utilizzato, è piuttosto limitato. L'elenco a discesa HTML è migliorato dai CSS. Il suo tipo può essere qualsiasi.

<div class = "rolls">

<pulsante> prodotti

<Ul>

<a> <li> 1 elemento </ li> </ a>

<a> <li> 2 elementi </ li> </ a>

<a> <li> 3 elementi </ li> </ a>

</ ul>

Ora è necessario applicare le proprietà CSS al codice. Vengono spesso utilizzati per un design spettacolare, ma è meglio concentrarsi innanzitutto sull'assicurazione dell'efficienza dell'elenco a discesa. Dovrebbe apparire sullo schermo quando si passa il mouse sopra il titolo.

Gli stili impostano le condizioni per visualizzare o nascondere l'elenco:

.rolls a {

stile elenco: nessuno;

display: nessuno}

.roll: passa il mouse su {

display: block}

Quindi, quando il mouse passa sopra il pulsante, l'elenco mostrato nell'immagine qui sotto appare sulla pagina.

Elenchi a discesa multi-livello

Quando gli elenchi semplici del layout di pagina potrebbero non essere sufficienti, ma quantità di informazioni dovrebbe essere fantastico Qui è dove gli elenchi a discesa multi-livello vengono in soccorso. La loro struttura è a volte complessa. Per eliminare gli errori, è necessario monitorare attentamente i tag di inizio e fine. Il precedente elenco di definizioni è anche multilivello. È comodo da usare per creare dizionari o spiegazioni di termini.

L'elenco a discesa di HTML viene utilizzato per non ingombrare la pagina ed espandere le sue capacità. Come strumento di base, è sufficiente utilizzare un linguaggio di markup. Allo stesso tempo, per qualsiasi livello di nidificazione, il codice rimane lo stesso.

Funzionalmente, l'elenco HTML funzionerà, ma con l'uso di fogli di stile è possibile progettarlo in modo che sia bello e comodo.

conclusione

Esistono elenchi di diversi tipi di HTML. Sono creati secondo lo stesso schema, compresi quelli nidificati. Le caratteristiche degli elenchi sono migliorate dagli stili CSS. Con l'aiuto degli stili puoi creare strumenti unici. Allo stesso tempo, è importante che gli elenchi siano correttamente progettati semanticamente per facilitare la manutenzione dei siti stessi.