Linee Orizzontali
Pubblicato: 2021-09-01Esistono molti modi per rendere le tue pagine HTML più straordinarie e ben strutturate. Più specificamente, una linea orizzontale può svolgere un ruolo speciale nel rendere il contenuto del tuo sito ben bilanciato, più chiaro e più facile da navigare. Ogni volta che decidiamo di apportare grandi modifiche ai nostri siti Web, piccole cose come le righe possono fare la differenza. Queste piccole cose rendono il messaggio del tuo sito più completo. Inoltre, possono cambiare l'appeal visivo della tua risorsa web e il modo in cui il tuo pubblico percepisce i tuoi dati.
Ma puoi anche creare linee personalizzate per adattarsi alla tua pagina web e per darti una migliore padronanza dello spazio che stai manipolando sulla tua pagina. Detto questo, diamo un'occhiata più da vicino a come personalizzare le linee orizzontali all'interno delle tue pagine HTML.Una linea orizzontale è un elemento HTML che viene utilizzato come decorazione della tua pagina web. Tuttavia, può anche tornare utile per una serie di altri scopi, come:
- Un separatore che divide visivamente le diverse parti dei tuoi contenuti e pone l'accento sul punto in cui un'idea finisce e ne inizia un'altra.
- Un evidenziatore che mette in risalto alcune sezioni significative di una pagina web.
- Una linea orizzontale è considerata uno dei modi più popolari e più semplici per raggiungere un'ampia gamma di scopi su un sito web. Anche se a prima vista può sembrare semplice, è un elemento multifunzionale che puoi regolare in base alle tue esigenze specifiche. Utilizzando semplici modifiche al codice HTML della tua pagina web, puoi regolare le seguenti specifiche della linea orizzontale:
Lunghezza;
Larghezza;
Colore;
Allineamento.
Vale anche la pena sottolineare che la linea orizzontale si riferisce agli elementi del blocco. Significa che è posizionato su una riga separata su una pagina Web e il testo che aggiungi accanto alla riga verrà inserito sotto di essa.
Le linee orizzontali sono molto utili per separare la tua pagina in diverse sezioni, per aggiungere una semplice linea orizzontale basta digitare < hr > e otterrai questo:
Come creare una linea orizzontale
Puoi impostare una linea usando un semplice tag < hr >. È l'abbreviazione di "Regola orizzontale" e imposta i classici parametri esterni. La cosa che lo differenzia da molti altri è che non ha bisogno di un tag finale e può esistere da solo. Puoi modificare le caratteristiche esterne di un elemento utilizzando valori aggiuntivi nel tag:
Sembra questo. Ad esempio, se vogliamo una lunghezza di 100 pixel, impostiamo un tag come questo: hr width = "100.
Allineamento.
Puoi allineare la linea sui bordi sinistro o destro e anche al centro. Questa funzione è valida solo se hai già specificato il parametro larghezza poiché non è possibile allineare una riga a pagina intera. Per l'allineamento, imposta un attributo aggiuntivo nel tag "align" e aggiungi una direzione: centro - per il centro, sinistra - per sinistra e destra - per l'allineamento a destra. Il tag finito, in questo caso, sarà simile a questo: se dobbiamo impostare l'allineamento al centro per una linea orizzontale con una lunghezza di 150 pixel, il tag finito sarà simile a questo: hr align = "center" width = " 150". Si noti che "align", la misura per l'allineamento, viene messa in posizione 1, anche se l'attributo dipende dalla larghezza della misura della lunghezza.Larghezza.
Facoltativamente, puoi anche specificare la larghezza, creando una sottolineatura in grassetto o sottile. Questo criterio non dipende da nulla e può essere utilizzato indipendentemente senza specificare la lunghezza o l'allineamento. Per questo, utilizziamo l'attributo size nel tag e un valore numerico uguale alla larghezza desiderata in pixel. Il numero è indicato tra virgolette dopo l'attributo size e il simbolo "=".
Quindi, se dobbiamo creare una linea larga 15 pixel, dobbiamo creare il seguente tag: hr size = "15".
Colore.
È anche impostato come indicatore indipendente. Per cambiarlo, usa l'attributo color in combinazione con il nome del colore sotto forma di codice o in inglese. Il colore è indicato tra virgolette dopo il simbolo "=".
Pertanto, il tag per una linea bianca standard può essere scritto in due modi: hr color = "#FFFFFF" o hr color = "white"
Il nero può essere creato utilizzando il codice # 000000.
Come fare una linea orizzontale colorata?
Le linee orizzontali sono utili per separare un blocco di testo da un altro. Il testo piccolo con linee orizzontali in alto e in basso attira più attenzione sul lettore rispetto al testo normale.
Usando il tag < hr >, puoi disegnare una linea orizzontale, il cui aspetto dipende dagli attributi utilizzati, nonché dal browser. Il tag si riferisce agli elementi del blocco, quindi la riga inizia sempre su una nuova riga e, successivamente, tutti gli elementi vengono visualizzati sulla riga successiva. Grazie ai numerosi attributi del tag < hr >, la linea creata tramite questo tag è facile da manipolare. In combinazione con la potenza degli stili, aggiungere una riga al documento è un gioco da ragazzi.
Per impostazione predefinita, la linea viene visualizzata in grigio e con un effetto volume. Questo tipo di linea non si adatta sempre al design del sito, quindi è comprensibile il desiderio degli sviluppatori di cambiare il colore e altri parametri della linea attraverso gli stili. Tuttavia, i browser sono ambigui su questo problema, motivo per cui dovrai utilizzare diverse proprietà di stile contemporaneamente. In particolare, le versioni precedenti di Internet Explorer utilizzano la proprietà color per il colore della linea, mentre altri browser utilizzano un colore di sfondo. Ma non è tutto, in questo caso assicurati di specificare uno spessore della linea (proprietà altezza) diverso da zero e rimuovere il bordo attorno alla linea impostando la proprietà del bordo su nessuno. Mettendo insieme tutte le proprietà per il selettore hr, otteniamo una soluzione universale per i browser più diffusi.
<! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title> Colore linea orizzontale < /title > < style > hr { border: none; / * Rimuovi il bordo * / background-color: red; / * Colore linea * / colore: rosso; / * Colore della linea per IE6-7 * / Altezza: 2px; / * Larghezza della linea * / } < /style > < /head > < body > < hr > < p > Stringa di testo < /p > < hr > < /body > < /html >Esempi:
Questo:
< hr color="#c7c34c" size="2" width="50%" >dà questo:
Colore: colore della linea:
< hr color="#c7c34c" size="2" width="50%" >Dimensioni: Altezza della linea espressa in pixel:
< hr size="x" >Larghezza: Larghezza della linea espressa in percentuale (%) o in pixel (nel mio esempio è il 50% della dimensione originale):
< hr width="x%"> o < hr width="x" >Più avanzato:
Questo:
< hr width="400" color="#000000" size="4" >dà:
In questo caso abbiamo usato lo stile:
La larghezza del bordo è di 3 pixel (3 px)
È punteggiato
Il colore di base è nero: #000000
Punti colorati in blu: #0099CC
Un ultimo esempio per spiegare di più, se ancora necessario ;):
Questo
< hr width="400" color="#FFFFFF" size="6" >dà:
In questo caso appena sopra:
La larghezza del bordo è di 2 pixel (2 px)
È tratteggiato
Il colore di base è bianco: #FFFFFF
Trattini colorati in argento: #C0C0C0
Gli stili possibili sono:
-punteggiato
- tratteggiato
-solido
-Doppio
-scanalatura
-inizio
-inserto
-cresta
Questo è tutto ciò che ho da dire sulle linee orizzontali!