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.
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 Maiusc): ___. Rilascia il turno.
- Ora premi il tasto Invio. Vedrai una linea continua orizzontale spessa.
Linea orizzontale sottile, spessa, punteggiata e doppia 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 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 alla separazione effettiva di informazioni di significati diversi.
- 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.
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
Stringa di testo
Il risultato di questo esempio è mostrato in Fig. uno.
Riso. 1. Linea orizzontale colorata
Per sottolineare alcuni degli elementi più importanti del sito, non sarebbe male utilizzare tutti i tipi di stili e proprietà CSS previsti per questo. Ovviamente, non puoi preoccuparti particolarmente del testo ed evidenziarlo, ad esempio, in grassetto o corsivo, cambiare lo sfondo o creare una cornice attorno al testo. Ma non sempre uno dei metodi presentati è adatto. Diciamo che hai un testo che deve essere separato a causa delle specifiche del suo carico semantico. È qui che entrano in gioco le proprietà HTML e CSS.
Come creare una riga di testo usando i CSS
Per raggiungere il nostro obiettivo, dobbiamo rivolgerci a file style.css, scrivendovi la proprietà corrispondente frontiera. Ciò farà apparire una riga sopra, sotto o su un certo lato del testo. A loro volta, ci sono diverse proprietà responsabili della visualizzazione della linea, ovvero:
- bordo superiore– una linea orizzontale posta sopra il testo;
- confine-destra- una linea verticale posta a destra del testo;
- bordo inferiore– una linea orizzontale posta sotto il testo;
- confine-sinistraè la linea verticale a sinistra.
Come fare una riga in html
Utilizzando le proprietà CSS, puoi impostare tutti i valori necessari modificando il codice HTML. Per fare ciò, vai alla parte amministrativa del sito. Seleziona uno dei materiali pubblicati, passa l'editor di testo alla modalità di modifica del codice HTML e aggiungi le proprietà CSS. Un esempio può essere visto di seguito.
Scrivendo queste proprietà, sarai in grado di sottolineare l'importanza del materiale presentato, paragrafo o intestazione?
Breve spiegazione dei comandi
- larghezza– lunghezza della linea;
- solido- linea continua;
- punteggiato- linea tratteggiata.
Per una comprensione più profonda degli stili, consiglio di leggere questo.
È necessario comprendere che nel processo di modifica del codice del sito, le proprietà che determinano il tipo di linea, il suo spessore e il colore sono elencate con uno spazio.
Questo metodo ha diversi vantaggi:
Una vasta gamma di possibilità con cui puoi realizzare quasi tutte le linee.
Facilità di apportare tutte le modifiche necessarie direttamente al codice HTML. Ciò semplifica notevolmente il compito per i costruttori di siti inesperti.
Come creare una linea orizzontale diritta con un tag HTML
La prima cosa su cui vorrei attirare la vostra attenzione è che questo tag, nonostante tutte le sottigliezze ei principi dell'html, non ha un tag di chiusura. Può essere utilizzato ovunque nel codice html, tra i tag
e.Attributi dei tag
- larghezza- è responsabile della lunghezza della linea. Può essere specificato sia come percentuale che come pixel.
- taglia– spessore della linea. Specificato in pixel.
- colore– definisce il colore della linea.
- allineare– attributo responsabile dell'allineamento delle linee. A sua volta, la squadra si rivolge a lui.
Fondamentalmente, le linee orizzontali vengono utilizzate per decorare le pagine HTML di un sito, conferendo loro un aspetto più attraente. Ma possono anche delimitare visivamente le informazioni delle sezioni vicine, aggiungendo comodità ai lettori durante lo studio. In generale, disegna linee orizzontali dove è necessario, tutto qui.
Come disegnare una linea orizzontale?
C'è un tag speciale per disegnare linee orizzontali in HTML.
. E lui è etichetta di blocco, ovvero crea interruzioni di riga prima e dopo se stessa, quindi la riga si ottiene sempre su una riga separata. Di conseguenza, può essere specificato solo all'interno di tag che possono contenere, ad esempio, elementi di blocco o
. Ma se stesso
non può avere contenuto perché semplicemente non ha un tag di chiusura, cioè è vuoto.Un esempio di disegno di linee orizzontali in HTML
Disegna linee orizzontali
Paragrafo.
Paragrafo.
Paragrafo.
Risultato nel browser
Paragrafo.
Paragrafo.
Paragrafo.
Come puoi vedere, le linee sono molto sottili, anonime e disegnate per l'intera larghezza disponibile, quindi ora impareremo come cambiarle per renderle più attraenti.
Come cambiare colore, spessore e larghezza delle linee orizzontali?
Nelle versioni precedenti di HTML, il tag
c'erano attributi speciali con cui si poteva cambiare il colore, lo spessore e la larghezza delle linee orizzontali. Questi sono rispettivamente colore, dimensione e larghezza. Ma nelle versioni più recenti, sono stati deprecati a favore di Cascading Style Sheets (CSS), quindi, hai indovinato, useremo di nuovo il nostro attributo di stile preferito. La sintassi generale è:
style="sfondo:colore" >- colore della linea (o meglio del suo sfondo).
style="altezza:dimensione" >- spessore della linea.
style="larghezza:dimensione" >- larghezza della linea.
stile= "sfondo: colore; altezza: dimensione; larghezza: dimensione"> - e puoi specificare tutti i parametri contemporaneamente, ma non dimenticare il punto e virgola (;).Un colore può essere specificato dal suo nome in inglese o dal codice HEX del colore preceduto da un cancelletto (#). Bene, lo sai già dalla lezione in poi cambia il colore del testo e dello sfondo.
Ma parliamo del ridimensionamento in modo più dettagliato. Come ricordi da tutorial sulla modifica dei caratteri, ci sono una decina di unità in CSS, ma larghezza della linea può essere specificato solo in pixel (px) e percentuali (%) e spessore generalmente solo in pixel. Se inserisci altre unità di misura, questo non sarà un errore, ma i browser semplicemente le ignoreranno.
Se specifichi le dimensioni in pixel, lo spessore e la larghezza della linea dipenderanno dalla risoluzione del monitor su cui viene visualizzato il tuo sito (maggiore è la risoluzione dello schermo, più sottile e stretta sarà la linea).
Come ho detto, solo la larghezza della linea può essere specificata come percentuale. Le dimensioni percentuali dipendono sempre e sono calcolate in base alla dimensione dell'elemento genitore-contenitore, all'interno del quale si trova il tag
. In questo caso, le dimensioni del genitore sono assunte come 100%. Ad esempio, se posizioniamo il tag
style="larghezza:50%"> all'interno dell'elemento, quindi non importa come ridimensioniamo la finestra del browser o la risoluzione del monitor, la larghezza della linea sarà sempre la metà della larghezza del blocco.Un esempio di modifica del colore, dello spessore e della larghezza delle linee orizzontali.
Cambia il colore, lo spessore e la larghezza delle linee orizzontali.
Risultato nel browser
Modifica della posizione delle linee orizzontali
Quando modifichi la larghezza di una linea orizzontale, puoi vedere chiaramente che i browser la centrano sempre. Se vuoi cambiarne la posizione, usa semplicemente inside
align attributo con i seguenti valori:
- centro- la linea è centrata (valore di default).
- sinistra- premuto sul bordo sinistro.
- Giusto- premuto sul bordo destro.
Un esempio di allineamento di linee orizzontali.
Modificare la posizione delle linee orizzontali.
Risultato nel browser
Come rimuovere il bordo attorno alla linea?
Guarda il primo esempio di questo tutorial. Di che colore pensi che siano queste linee? Ed ecco quello sbagliato. Sono trasparenti, così come tutti gli elementi della pagina che non hanno un colore di sfondo specificato! Non credi? Quindi guarda l'esempio in cui abbiamo cambiato il colore delle linee. All'inizio non abbiamo impostato il colore, ma solo aumentato le sue dimensioni, e questa linea non è trasparente? Affinché!
Ora ti spiego. Per impostazione predefinita, i browser disegnano attorno alle linee di confine, che creano un effetto 3D. Quindi, quando non aumentiamo lo spessore delle linee orizzontali, i browser ci mostrano solo questi frame, poiché lo spessore della linea stessa è 0px.
Per rimuovere il bordo attorno alla linea, che spesso rovina solo l'aspetto, applicheremo nuovamente l'attributo style. Ed è scritto così:
Compiti a casa.
- Crea intestazioni di articoli, sezioni e sottosezioni. Posizionali tutti al centro.
- Imposta l'intera pagina su Arial e le intestazioni su Courier.
- Lascia che la dimensione del carattere per l'intera pagina sia l'85% della dimensione predefinita del browser. E i titoli hanno rispettivamente il 145%, 125% e 110% della dimensione del carattere sulla pagina.
- Scrivi un paragrafo sotto il primo titolo, una lunga citazione sotto il secondo e una poesia sotto il terzo. E lascia che la poesia sia centrata sulla pagina.
- Evidenzia tre parole nella citazione in grassetto.
- Sotto l'intestazione dell'articolo, disegna una linea orizzontale rossa spessa tre pixel su tutta la larghezza della pagina.
- Nella parte superiore e inferiore della poesia, disegna linee spesse un pixel in nero. Lascia che la larghezza della linea superiore sia approssimativamente uguale alla larghezza del verso e la linea inferiore - la metà.
- Rimuovere i frame non necessari dalle linee.
