Separatore di riga orizzontale HTML. linee orizzontali. Esempi di linee orizzontali in HTML

Un compito

Disegna una linea orizzontale sulla pagina.

Soluzione

Le linee orizzontali sono utili per separare un blocco di testo da un altro. Il testo piccolo con linee orizzontali sopra e sotto attira maggiormente l'attenzione del lettore rispetto al testo normale.

Con un'etichetta

puoi disegnare una linea orizzontale, il cui aspetto dipende dagli attributi utilizzati e dal browser. Il tag si riferisce agli elementi del blocco, quindi la riga inizia sempre su una nuova riga e, dopo di essa, tutti gli elementi vengono visualizzati sulla riga successiva. Con molti attributi di tag

la linea creata tramite questo tag è facile da gestire. Se colleghi anche la potenza degli stili, l'aggiunta di una riga a un documento si trasforma in un'operazione semplice.

Linea predefinita

visualizzato 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 hanno approcci ambigui a questo problema, a causa dei quali 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 background-color . Ma non è tutto, assicurati di specificare lo spessore della linea (proprietà altezza) diverso da zero e rimuovere la cornice 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 (esempio 1).

Esempio 1. Linea orizzontale

HTML5 CSS 2.1 IE Cr Op Sa Fx

Colore della linea orizzontale

Stringa di testo

Il risultato di questo esempio è mostrato in Fig. uno.

Riso. 1. Linea orizzontale colorata

Un saluto a tutti i lettori. Di tanto in tanto, i maestri affrontano il problema di come creare una linea orizzontale o verticale usando HTML o CSS. Questo è ciò di cui ti parlerò oggi.

Righe in CSS

Esistono diversi modi per creare linee. Uno di questi è usare i CSS. Più precisamente, con l'aiuto di Border. Diamo un'occhiata a un esempio.

E questo è il risultato.

Linea orizzontale e verticale con css.

Le linee in CSS possono essere disegnate usando l'operatore Border. Se vuoi solo un rettangolo con una larghezza del bordo fissa, puoi semplicemente usare questo operatore e assegnargli un valore. Ad esempio border:5px solid #000000; significherà che i bordi del riquadro sono larghi 5 pixel in nero.

Tuttavia, se è necessario impostare non tutti i limiti, ma solo alcuni, è necessario specificare esattamente quali limiti sono necessari e quale valore avrà ciascuno di essi. Questi gli operatori:

border-top - imposta il valore del bordo superiore
border-bottom - imposta il valore del bordo inferiore
bordo sinistro: imposta il valore del bordo sinistro
border-right - imposta il valore del bordo destro.

Riga verticale e orizzontale in HTML

Puoi anche creare righe nell'HTML stesso. Per fare ciò, puoi utilizzare il tag hr.

In questo caso, verrà disegnata una linea orizzontale, alta un pixel e a tutta larghezza.

Ma questo tag, puoi impostare alcuni valori.

Larghezza– imposta il valore della larghezza della linea.
colore- imposta il colore della linea.
Allineare- imposta l'allineamento a sinistra, al centro, a destra
taglia– imposta il valore dello spessore della linea in pixel.

Usando il tag hr, puoi anche impostare una linea verticale. Ma in questo caso, dovrai ricorrere di nuovo agli stili.

In questo caso, verrà tracciata una linea verticale alta cento pixel, spessa un pixel e rientrata di cinque pixel.

Conclusione.

Bene, ora sai come impostare una linea verticale e orizzontale. Le righe possono essere impostate sia su siti normali che utilizzano HTML, sia su un sito che utilizza un CMS, come WordPress, ma in questo caso dovrai passare alla modalità HTML.

Bene, se hai altre domande, chiedile nei commenti.

Sembrerebbe, perché potrebbero essere necessari quattro metodi? Dopotutto, quasi ogni persona usa un metodo a cui è abituata. Ad esempio, ho premuto più volte Maiusc e il tasto trattino, ed è così che è risultata una linea orizzontale.

Ma cosa succede se questo si traduce in una linea tratteggiata, ma ne hai bisogno di una solida?
- Molto probabilmente, il tasto Maiusc sulla tastiera è difettoso. Ecco alcuni altri modi per aiutare.

3.
4.
5.

Forse il modo più familiare per creare una riga in Word è usare un paio di tasti sulla tastiera.

I Linea sottile, spessa, doppia, tratteggiata usando la tastiera

Di seguito è riportato il disegno di una tastiera con layout inglese, ma senza layout russo, ma questo non importa, perché ci interessano solo tre tasti: Maiusc, trattino e Invio.

Riso. 1. Tre tasti sulla tastiera: Maiusc, trattino e Invio per una linea orizzontale continua in Word

Con questi tre tasti puoi disegnare una linea orizzontale continua in Word: tratteggiata o piena, sottile o spessa, lunga o corta.

1) Quando premi più volte il tasto "-" (trattino) nell'editor di Word, otteniamo una linea tratteggiata di qualsiasi lunghezza.

Da fare sottile linea lunga per l'intera larghezza della pagina:

Troviamo il tasto “trattino” sulla tastiera (a destra del tasto “zero”, nel riquadro verde di Fig. 1).
Da una nuova (!) Riga in Word, premere più volte questo tasto: -
E quindi premere il tasto "Invio" (). Diversi trattini stampati si trasformeranno improvvisamente in una linea sottile orizzontale continua per l'intera larghezza della pagina.

2) Quando si preme Maiusc e "-" (trattino) contemporaneamente, NON viene stampato un trattino, ma un trattino basso _________. Pertanto, puoi creare una linea continua di lunghezza arbitraria in qualsiasi punto del documento.

Riso. 2. Linea orizzontale sottile e spessa in Word

Ora stampiamo spesso linea orizzontale su tutta la larghezza della pagina:

Ancora una volta troviamo lo stesso tasto trattino, così come il tasto Maiusc (sinistra o destra, come preferisci). Premi Maiusc, tieni premuto e non mollare.
E ora, da una nuova riga (!), fai clic sul trattino più volte (ad esempio, 3-4 volte) (senza rilasciare Shift): ___. Rilascia il turno.
Ora premi il tasto Invio. Vedrai una linea continua orizzontale spessa.

Riassumiamo alcuni risultati sotto forma di tabella:

(Clicca per ingrandire) Righe in Word utilizzando la tastiera

II Riga in Word usando una tabella

Una linea orizzontale può essere ottenuta utilizzando una tabella di una cella (1x1), in cui solo il bordo superiore o inferiore è colorato (sarà visibile) e gli altri tre lati della tabella hanno bordi non colorati (saranno invisibili) .

Mettiamo il cursore nel punto in cui dovrebbe essere la linea. Nel menu in alto di Word, fai clic su:

Inserire (1 in Fig. 3),
Tabella (2 in Fig. 3),
Una cella (3 in Fig. 3).

Riso. 3. Come inserire una tabella 1x1 in Word (da una cella)

Il risultato è una tabella di una cella grande (1x1):

Rimane nella tabella 1x1 su tre lati per rimuovere i bordi. Per questo

vai alla scheda "Home" (1 in Fig. 4),
accanto a "Font" troviamo "Paragrafo" e bordi (2 in Fig. 4),
rimuovere tutti i bordi facendo clic su "Nessun bordo" (3 in Fig. 4),
selezionare "Bordo superiore" o "Bordo inferiore" (4 in Fig. 4).

Riso. 4. Come rimuovere la selezione del bordo in una tabella di Word (rendere i bordi invisibili)

Lo mostro chiaramente nel video (alla fine dell'articolo).

A proposito, in Fig. 3 mostra che esiste un modo più semplice. Puoi posizionare il cursore all'inizio della riga in Word e fare clic su "Linea orizzontale" (5 in Fig. 4):

III riga in Word disegnando

Inserisci (1 in Fig. 5) - Forme (2 in Fig. 5) è un altro modo per ottenere una linea orizzontale in Word.

Per rendere la linea rigorosamente orizzontale, tieni premuto il tasto Maiusc e traccia la linea allo stesso tempo.

Riso. 5. Come disegnare una linea in Word

IV Riga in Word utilizzando la tastiera su schermo

Per trovare la tastiera su schermo, nella Ricerca inseriamo la frase "tastiera su schermo", maggiori dettagli per Windows 7 e per Windows 8.

Per Windows 10, puoi anche trovare la tastiera su schermo digitando "tastiera su schermo" nella barra di ricerca.

Riso. 6. Tastiera su schermo

Creeremo una linea orizzontale allo stesso modo della prima versione con una tastiera normale. Sulla tastiera su schermo, sono necessari tre pulsanti: trattino, Maiusc e Invio.

1 Trattino e Invio

Da una nuova riga in Word, fare clic più volte sul trattino (1 in Fig. 6) e premere Invio. Otterrai una sottile linea orizzontale.

2 Maiusc, trattino e Invio

Da una nuova riga in Word, fare clic prima su Maiusc (2 in Fig. 6), quindi Dash (1 in Fig. 6). Ottieni una sottolineatura. Quindi ripeti altre 2 volte, quindi premi Invio. Di conseguenza, vedremo una linea orizzontale spessa.

Quando si crea una pagina HTML, lo stile gioca un ruolo essenziale. Soprattutto quando si parla di simboli e decorazioni varie: queste piccole cose aiutano a rendere più accessibile e chiaro il “linguaggio” della tua pagina, e ne modificano anche notevolmente la percezione e l'aspetto in generale. Uno degli elementi di design più importanti è la linea orizzontale e in seguito impareremo in modo più dettagliato come lavorarci e come creare una linea orizzontale in html.

Cos'è una linea orizzontale e perché è necessaria

La linea orizzontale in html è un elemento di progettazione della pagina che svolge una serie di funzioni:

decorativo. Aiuta ad aggiungere attrattiva alla pagina.
Dividendo. Contribuisce all'effettiva separazione delle informazioni di diversi significati.
Enfatizzare o enfatizzare. Attirerà l'attenzione dei visitatori della pagina sulle informazioni necessarie e più importanti.

È la linea orizzontale che è considerata il modo più accessibile per implementare una serie di funzioni. È molto semplice da creare e all'esterno sembra molto redditizio. Con semplici modifiche al codice html, puoi controllare:

lunghezza;
larghezza;
caratteristiche del colore;
allineamento su uno o l'altro bordo.

Vale la pena notare che la linea orizzontale si riferisce agli elementi del blocco. Ciò significa che occupa una nuova riga nella pagina e il testo che la segue andrà sotto.

Creazione di una linea orizzontale in HTML

Puoi impostare una linea usando un semplice tag - hr tra parentesi triangolari. È l'abbreviazione di "Horisontal Rule" e imposta i classici parametri esterni. Si differenzia da molti altri in quanto non necessita di un tag di chiusura ed è in grado di esistere indipendentemente. Puoi modificare le caratteristiche esterne di un elemento utilizzando valori aggiuntivi nel tag:

Lunghezza. Se non vuoi che la lunghezza della linea copra l'intera pagina, puoi impostare la dimensione desiderata in pixel o percentuali. Questo viene fatto con l'aiuto di una parola aggiuntiva "larghezza" nel tag e un indicatore numerico della lunghezza specificata dopo il segno "=" tra virgolette.

Sembra questo. Ad esempio, se abbiamo bisogno di una lunghezza di 100 pixel, impostiamo il seguente tag: hr width="100"

allineamento. L'allineamento è possibile sui bordi sinistro o destro e anche al centro. Questa proprietà ha effetto solo se hai già impostato il parametro larghezza, poiché non è possibile allineare una linea dell'intera pagina. Per l'allineamento, impostiamo un attributo aggiuntivo nel tag "align" e aggiungiamo una direzione ad esso: centro - per il centro, sinistra - per sinistra e destra - per l'allineamento a destra.

Il tag finito in questo caso sarà simile a questo. Ad esempio, se dobbiamo impostare l'allineamento al centro per una linea orizzontale lunga 150 pixel, il tag finito sarà simile a questo: hr align="center" width="150".

Tieni presente che "align", la metrica per l'allineamento, è impostata su 1, anche se l'attributo dipende dalla metrica della larghezza.

Larghezza. Facoltativamente, puoi anche specificare una larghezza, creando una sottolineatura in grassetto o sottile. Questo criterio non dipende da nulla e può essere utilizzato come un criterio indipendente senza specificare la lunghezza o l'allineamento. Per questo, utilizziamo l'attributo size sul tag e un valore numerico uguale alla larghezza desiderata in pixel. Il numero è specificato tra virgolette dopo l'attributo size e il simbolo "=".

Quindi, se vogliamo creare una linea con una larghezza di 15 pixel, dobbiamo creare il seguente tag: hr size="15".

Colore. È anche impostato come indicatore indipendente. Per cambiarlo, l'attributo color viene utilizzato in combinazione con il nome del colore sotto forma di codice o in inglese. Il colore è specificato tra virgolette dopo il simbolo "=".

Pertanto, il tag per la linea bianca standard può essere scritto in due modi: hr color="#FFFFFF" o hr color="white"

Il colore nero può essere creato utilizzando il codice #000000.

Mettere via ombra. Se hai bisogno di un elemento che non contenga un'ombra, allora l'attributo noshade dovrebbe essere usato nel tag. Può essere utilizzato da solo o in combinazione con altri elementi. Il tag per la riga standard che lo utilizza sarà simile a questo: hr noshade

Crea una linea orizzontale con il video

E se vuoi ottenere informazioni in un formato più visivo, fai riferimento al seguente video, che descrive in dettaglio le possibilità di lavorare con una linea orizzontale.

Determinate le dimensioni richieste della linea orizzontale, è possibile disporre le pagine del sito in modo tale che le informazioni siano strutturate e visivamente ben formate. Ciò rende più facile per i visitatori percepire le informazioni presentate e distinguere il tuo sito dagli altri.

Ciao! Oggi ti dirò come creare una linea orizzontale usando html.

In effetti, la necessità di fare una linea orizzontale sorge abbastanza spesso, ad esempio, quando è necessario separare una parte del testo da un'altra.

linee orizzontali e verticali con css

Puoi farlo con CSS. Per fare ciò, racchiudo la sezione di testo necessaria in un blocco utilizzando il tag div, quindi nel file style.css o direttamente nel codice html, prescriviamo le proprietà di questo blocco per il bordo superiore o inferiore usando border-top e bordo inferiore. Ecco un esempio:

riga html verticale

Linea orizzontale con css.

In questo caso, l'ho disegnato con CSS direttamente dal codice html e ho reso il bordo superiore una linea continua e il bordo inferiore una linea tratteggiata.

Ecco come apparirà sulla pagina:

Linea orizzontale con css.

Questo metodo ha i suoi vantaggi:

Un'ampia gamma di impostazioni che consentono di impostare quasi ogni tipo di linea;
Puoi creare linee sia orizzontali che verticali. Per creare linee verticali, devi cambiare il bordo superiore in bordo sinistro e il bordo inferiore in bordo destro.

Gli svantaggi includono la relativa mole del codice.

Tuttavia, come si è scoperto, puoi inserire una linea orizzontale nel testo usando html. Allo stesso tempo, non è nemmeno necessario salire in css. Il tag viene utilizzato per questo.

linea orizzontale con tag html

La prima caratteristica di questo tag è che non ha un tag finale accoppiato. Può essere utilizzato ovunque nel codice html tra i tag e.

Questo tag ha i seguenti attributi:

Larghezza- definisce la lunghezza della nostra linea orizzontale in pixel o percentuali;
colore– definisce il colore della linea;
Allineare– imposta l'allineamento della linea al bordo destro - destro, al bordo sinistro - sinistro, al centro - centro;
taglia– spessore della linea in pixel.

Ecco un esempio di codice html.