Elenchi e menu in CSS3

a creare menu dinamici per le nostre pagine web Oggi è molto comune programmare in HTML5 e poi dargli un aspetto personale CSS3 che è un linguaggio che si basa su fogli di stile, cioè il codice che dà forma, colore e struttura alla nostra pagina va in un file separato codificato all'esterno della pagina stessa che stiamo scrivendo.

Prima di tutto, vedremo come creare elenchi, poiché in fondo un menu è un elenco che ha uno stile per renderlo visibilmente più elegante. In questo modo veniamo strutturati in Html come una lista di link e quindi mettiamo già un aspetto personalizzato con CSS3.

Esistono due tipi di elenchi, ordinati e non ordinati. Se utilizzeremo un elenco per configurare in seguito un menu, è molto probabile che utilizzeremo un elenco non ordinato, tuttavia vedremo le opzioni.

Sono creati esattamente uguali, l'unica differenza sta nella parola riservata, che per l'ordinato sarà

e per quelli disordinati

Il codice HTML è il seguente:

Primo elemento
Secondo elemento
Terzo elemento


Primo elemento
Secondo elemento
Terzo elemento

E il risultato sullo schermo della scrittura di questo è:

1. Primo elemento
2. Secondo elemento
3. Terzo elemento

O esattamente lo stesso senza prima l'ordinale:

Primo elemento
Secondo elemento
Terzo elemento

In HTML ci sono alcuni preformati quando creiamo un elenco, cioè c'è un certo margine, colore del carattere, punto elenco, riempimento, ecc. che appare per impostazione predefinita durante la creazione del nostro elenco. La cosa brutta è che visivamente non sembra molto buona, la cosa buona è che è estremamente facile cambiarla a nostro piacimento grazie ai CSS.

Inizieremo esaminando i diversi tipi di vignette che possiamo inserire nel nostro menu. Per impostazione predefinita, ogni elemento nell'elenco è preceduto da un cerchio nero. Tuttavia possiamo inserire quadrati, cerchi vuoti o un'immagine dal nostro file.

Il codice per modificare il punto elenco in CSS3 è il seguente:

 #menu {tipo-stile-lista: quadrato;} 

Lì possiamo mettere le parole riservate quadrato in modo che appaiano quadrati, cerchio per cerchi vuoti o un URL per esempio, url (myimagenes / midubujo.jpg.webp). Tuttavia, penso che la cosa più comune sarà che non mettiamo alcuna vignetta se il nostro menu è dinamico. In tal caso la parola da usare sarà nessuna.

Per modificare il margine usando il menu di esempio, è semplice come usare questo codice in CSS3:

 #menu {margine: 0px;} 

Lì a margine possiamo mettere il valore che vogliamo e possiamo scegliere la misura, percentuale, in pixel, ecc. Ed è importante dire che in alcuni browser o versioni di essi potrebbero esserci problemi, quindi si consiglia oltre a scrivere il margine per scrivere il padding. Questo è fatto con l'imbottitura:

 #menu {margine: 0px; imbottitura: 2px; } 

Per scegliere il bordo del nostro menu e di ciascuno degli elementi vedremo quanto segue Codice CSS3:

 #menu {bordo: 2px;} 

Con la parola bordo possiamo indicare quale dimensione o spessore vogliamo. Il bordo può essere applicato al bordo in generale, ma possiamo anche specificare se vogliamo che sia solo un bordo laterale o il bordo inferiore o superiore. Ciò si ottiene aggiungendo un bordo in basso, in alto, a destra o a sinistra.

Oltre allo spessore, il bordo è un campo che ha molte possibilità, possiamo scegliere uno stile, un colore, una sfumatura … e vedremo alcune opzioni.

Stile del bordo
A partire dallo stile del bordo, stile del bordo, le possibilità più utilizzate sono:

NessunoCiò che fa è rimuovere il bordo stesso. Questa è l'opzione predefinita, quindi normalmente quando creiamo elenchi per i nostri menu, non apparirà alcun bordo a meno che non lo specifichiamo.

SolidoQuesto è il bordo che può essere utilizzato di più. È un bordo continuo, di colore nero.
NascostoO nascosto è un'altra opzione in cui non visualizziamo alcun bordo, poiché sono nascosti. Tuttavia, per scopi di programmazione esiste. Viene utilizzato per delimitare i bordi con altre celle o tabelle adiacenti anche se non si desidera visualizzare un bordo spesso.
CrestaMetteremo questo vantaggio se vogliamo che si distingua dal resto. Fa sembrare il bordo posizionato un livello sopra il resto sullo schermo.
fin dall'inizioCome il precedente, è un bordo sporgente, tuttavia questo non sembra essere un livello sopra la superficie dello schermo rispetto a quello che porta all'interno.
ScanalaturaA differenza della cresta con questo stile di bordo, sembra che l'elemento sia sprofondato al di sotto del resto.
insertoAllo stesso modo di Groove, questo bordo non sembra essere infossato ma in realtà è un livello al di sotto del resto.
punteggiatoCon questo stile generiamo un bordo formato da una linea tratteggiata, nera di default, e spazi.
DoppioCome dice la parola stessa, si tratta di un doppio bordo, formato da due linee nere continue separate da uno spazio.

tratteggiatoQuesto è un tipo speciale di bordo simile al punteggiato, tranne per il fatto che i punti diventano linee più grandi, cioè è una specie di linea spezzata.

Come con il bordo, con lo stile del bordo possiamo scegliere di definire il bordo di un lato, entrambi, il limite superiore, il limite inferiore o tutti. Se scriviamo un solo valore, viene messo su tutti i bordi e se scriviamo due opzioni invece di una, la prima è per i bordi superiore e inferiore e la seconda per i lati.

Ora, con questo abbiamo definito il bordo, la dimensione e lo stile, tuttavia il menu rimane molto semplice e non molto carino visivamente parlando. Possiamo volere menu verticali, poiché vengono creati di default, ma se vogliamo che siano orizzontali dobbiamo aggiungere la parola chiave float in modo che ogni elemento nell'elenco sia posizionato accanto al successivo.

Lo spiego un po' più in dettaglio, ogni elemento della lista che abbiamo codificato con "li" ha per impostazione predefinita il comportamento di un elemento di blocco, cioè dopo essere stato posizionato genera un'interruzione di riga e impedisce il posizionamento di un altro elemento al suo fianco. Se vogliamo posizionare ogni elemento della nostra lista accanto a quello precedente, dobbiamo eliminare questo comportamento di blocco.

Per questo il codice sarebbe il seguente:

 #menu {stile lista: nessuno; margine: 0px; imbottitura: 0; } #menu li {margine: 2px; imbottitura: 2px; bordo: solido 2px; galleggiante: sinistro; } 

Con questo generiamo un menu e mettiamo a 0 e senza bordo le caratteristiche di base di margin e padding, quindi ad ogni elemento racchiuso in un li all'interno del nostro menu mettiamo altre caratteristiche, 2px di margin e padding, 2 px di bordo solido e che fluttua a sinistra, cioè l'elemento successivo può essere posizionato alla sua destra.
In questo modo abbiamo già il nostro menu orizzontale.

Ora, se vogliamo che la nostra lista funga da menu e ci reindirizzi dove vogliamo, dobbiamo aggiungere un collegamento ai nostri elementi. Questo è molto semplice. Nel nostro codice in Html aggiungiamo quanto segue:

Primo elemento
Secondo elemento
Terzo elemento

In questo modo ogni elemento sarà sottolineato e funzionerà come un collegamento che ci porterà dove vogliamo andare.

Infine vedremo alcune delle opzioni per l'aspetto.

Proprietà del testo
LarghezzaSe vogliamo mettere una larghezza fissa. Ad esempio larghezza: 100 px;
Decorazione del testoSe vogliamo che il testo del nostro elemento sia decorato in qualche modo. Ci sono molte possibilità, ma alcune delle più comuni sono:

• sottolineare: se vogliamo che tutto sia sottolineato
• sopralineato: come la sottolineatura mette una riga in tutto il testo, ma questa volta invece che sotto sopra.
• battito di ciglia: Crea un testo che brilla, che lampeggia come una luce a intermittenza.
• line-through: Scriveremo questa opzione se vogliamo che il nostro testo venga cancellato.
• nessuno: questa è una ridondanza poiché per impostazione predefinita il testo viene fornito con questo valore, senza alcuna decorazione. Tuttavia, a volte sarà utile se vogliamo tornare all'opzione iniziale dopo aver utilizzato un effetto utilizzando una risorsa chiamata hover che vedremo in seguito.

Allineamento testoÈ la direzione in cui verrà pubblicato il contenuto dei nostri elementi di blocco, attenzione, non il testo stesso, che vedremo in seguito con la proprietà direction. Le opzioni sono molto semplici: sinistra se vogliamo che vada da sinistra, destra se vogliamo che vada da destra a sinistra, centro se vogliamo che il testo sia centrato e giustifica se vogliamo che il testo sia giustificato.

DirezioneCon questa opzione andremo a definire la direzione del testo che scriviamo, in questo caso ci sono solo due opzioni:

• ltr: che è quello che appare di default nei browser, poiché ad eccezione di alcune lingue in cui è scritto da destra a sinistra, è normale scrivere da sinistra a destra, che è ciò che definisce questa opzione.
• rtl: è l'altra possibile direzionalità del testo, da destra a sinistra, che utilizzeremo se vogliamo scrivere testi arabi ad esempio.

Indentatura del testoChe provenga da indentazione o tabulazione è una proprietà che è responsabile di stabilire tale criterio nella prima riga dei nostri elementi di blocco, e anche nelle tabelle. Ci sono tre opzioni:

• misurare
• percentuale
• ereditare

In essi se usiamo la percentuale faremo riferimento alla larghezza dell'elemento in cui si trova.
Inoltre in tutti possiamo usare cifre positive o negative di una qualsiasi delle unità di misura esistenti per css3, pixel, ems …

Trasformazione del testoUltima proprietà relativa al testo che vedremo che ha a che fare con maiuscole e minuscole:

• capitalizzare: con questa opzione verrà mostrata in maiuscolo solo la prima lettera di ogni parola.
• maiuscolo: visualizza tutto il testo in lettere maiuscole.
• minuscolo- Visualizza tutto il testo in minuscolo.
• nessuno: lascia il testo così com'è stato scritto. È quello che viene di default.

Spaziatura tra paroleSebbene non tratti direttamente il testo, lo fa nello spazio che lasciamo tra le parole. I suoi valori possono essere "normali" o una misura valida. Se mettiamo una misura, il suo valore viene aggiunto alla misura normale che è quella che viene di default.

Ora andiamo con le proprietà del font.

Proprietà del carattere
FontQuesta proprietà è la più completa di tutte quelle relative al font, e ha diverse opzioni quando si tratta di usarlo. Innanzitutto, puoi iniziare con uno, due, tre o nessuno dei valori "font-style", "font-variant" e "Font-weight".

Quindi dobbiamo mettere la dimensione della lettera con "font-size" seguito opzionalmente dalla spaziatura che viene data con "line-height" e terminando sempre con il tipo di famiglia di caratteri "font-family". Infine, dovrai inserire uno dei seguenti valori:

• didascalia- Per pulsanti o elenchi a discesa, ovvero per controlli e campi modulo.
• menù: se andremo a configurare menu a tendina o altri tipi di menu.
• icona: per i testi visualizzati sotto le icone.
• casella dei messaggi- Per le finestre di dialogo, che si tratti di popup di errore, popup di informazioni, ecc.
• status-baA: per le barre di stato della finestra.
• piccola didascalian - Per campi e controlli di moduli piccoli.

Nella proprietà font abbiamo utilizzato alcune altre opzioni che non abbiamo ancora visto e che spiegheremo di seguito:

Stile carattereCon esso definiremo il stile carattere. I valori che può avere sono "normal", che è il default, "italic" se vogliamo che la nostra lettera sia corsiva, cioè corsivo; oppure "obliquo" se vogliamo avere la lettera obliqua, che è una specie di corsivo dove sono inclinati solo i caratteri e non tutti come in corsivo.

Font-varianteLo useremo per stabilire il varianti di carattere e abbiamo solo due opzioni, la "normale" che è quella che viene fornita di default, e la variante "maiuscoletto", chiamata anche maiuscoletto, che fa sembrare le lettere maiuscole della stessa dimensione delle lettere minuscole.

Peso del carattereÈ una delle proprietà più utilizzate poiché con esso possiamo controllare lo spessore delle lettere (attenzione, non è la stessa dimensione di ogni lettera che vedremo in seguito). Numericamente parlando ha 9 opzioni che sono le centinaia da 100 a 900, cioè 100, 200, 300, 400, 500, 600, 700, 800 e 900. Ci sono anche dei valori scritti, il "normale" che equivale a 400 , "grassetto" che corrisponde a 700 e che è quello che chiameremmo grassetto e che curiosamente non è apparso in stile font ma qui. Esistono anche i valori "bolder" o "lighter" e talvolta altri come "medium" o "heavy" che vengono assegnati a valori numerici a seconda del numero di spessori che ha il font.

Dimensione del fontCon questa proprietà se controlleremo la dimensione del carattere. Sono disponibili quattro valori, "dimensione assoluta", "dimensione relativa", "unità percentuale" e "unità di misura". Ci sono alcune unità di misura assolute e relative definite in css come em, che è la più utilizzata in questa proprietà, es, px,%, in, cm, mm, pt o pc. Oltre a queste misure ci sono alcune parole che funzionano e possono essere usate come xx-small per il più piccolo, x-small, small, medium, large, x-large o xx-large per il più grande. Queste sei parole corrispondono alle dimensioni dei diversi tag del titolo html di

a

e queste sono misure assolute, quindi avranno sempre lo stesso aspetto indipendentemente dal browser o dalla risoluzione dello schermo. Le parole "più piccolo" e "più grande" possono essere utilizzate anche come misure relative che dipenderanno dalla dimensione del carattere dell'elemento che lo contiene.

Altezza della lineaÈ già definito nelle proprietà del testo.
Famiglia di fontProprietà ampiamente utilizzata che noi ti permette di scegliere il carattere tipografico o il carattere. Per prima cosa mettiamo il nome del font, o il carattere tipografico, e facoltativamente può essere seguito da altri nomi di font nel caso in cui il nostro browser o sistema non abbia il primo o non lo supporti. Non esiste un tipo di carattere predefinito, poiché dipende dal nostro browser, sebbene uno molto comune sia "Times New Roman". Alcuni valori di tipo di carattere generico possono essere "serif" dove sono inclusi alcuni caratteri come Times New Roman, Garamond, Georgia o Cambria; "Sans-serif" e i suoi tipi Verdana, Arial, Tahoma, Helvetica o Futura. "Monospace" e i suoi esempi Courier New o Monaco tra gli altri. E "fantasy" con i tipi Comic sans o Impact. Ovviamente ci sono molti altri caratteri tipografici tra cui possiamo scegliere.

Spaziatura del carattereCon questo possiamo controlla lo spazio tra le lettere, e funziona esattamente come il suo analogo per la spaziatura delle parole delle proprietà del testo, con i valori "normali" e una misura valida.

ColoreFinalmente vedremo il proprietà del colore che vogliamo inserire nel nostro testo. Per impostazione predefinita è nero. Ci sono diversi modi per scegliere il colore, uno di questi è attraverso le 17 diverse parole di colore che ci sono: acqua, nero, rosso, giallo, blu, fucsia, verde, lime, arancione, grigio, bordeaux, oliva, blu navy, viola , argento, verde acqua e bianco.

Un'altra opzione è quella di mettere un colore di Percentuale RGB, si tratta semplicemente di specificare tre percentuali corrispondenti ai colori rosso ®, verde (G) e blu (B):

 colore: rgb (22%, 76%, 14%); (Le 3 percentuali non devono dare il 100%) 

Un altro modo è da decimale RGB che funziona esattamente come la percentuale RGB ma invece di mettere tre valori in percentuale vengono messi come valori decimali:

 colore: rgb (114, 29, 54);

Allo stesso modo possiamo scegliere che il nostro RGB essere esadecimale:

 colore: rgb (# 23A556);

Con queste opzioni possiamo divertirci a cambiare e provare i diversi stili, colori e caratteri.

Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo