Spazio HTML tra i paragrafi. HTML: paragrafo e linea rossa. Citazioni e definizioni

Buon pomeriggio cari lettori. Oggi una breve nota su come fare linea rossa per ogni paragrafo nella pagina html. Se qualcuno non lo sa, la linea rossa è il rientro della prima riga in un blocco di testo. Tale rientro nei paragrafi può essere trovato in quasi tutti i testi stampati, ma durante la creazione di siti Web il design della linea rossa è piuttosto raro, nonostante renda il testo molto più leggibile. Nel caso in cui il cliente improvvisamente richieda che i paragrafi del suo sito inizino con una linea rossa, allora ti do una semplice ricetta per risolvere questo problema.

Esistono molti modi per risolvere il problema, ad esempio è possibile inserire diversi caratteri speciali in una riga all'inizio di ogni paragrafo, ma ciò può richiedere parecchio tempo. Pertanto, consiglio di utilizzare la proprietà CSS per creare una linea rossa indentatura del testo, che imposta rientro della prima riga blocco di testo. In questo caso, non viene effettuato alcun effetto sulle righe rimanenti.

La proprietà text-indent ha una sintassi semplice:

indentatura del testo:<значение> | <проценты>| ereditare

Come valori, puoi specificare pixel (px), punti (pt) e altre unità accettate in CSS. Il valore determina di quanto spostare il testo della prima riga a destra rispetto alla posizione originale. È consentito specificare valori negativi, quindi il testo si sposterà a sinistra. Quando si specificano valori percentuali, il rientro della prima riga viene calcolato in base alla larghezza del blocco di testo.

Se la linea rossa deve essere aggiunta a un solo paragrafo, puoi farlo:

Risultato:

C'era una quercia sul ciglio della strada. Era probabilmente dieci volte più vecchio delle betulle che formavano la foresta, dieci volte più fitto e due volte più alto di ogni betulla. Era un'enorme quercia a due circonferenze, con rami spezzati e corteccia ricoperta di vecchie piaghe. Con mani e dita enormi, goffe e asimmetriche, tese e goffe, stava in piedi tra le betulle sorridenti come un vecchio mostro arrabbiato e sprezzante. Solo lui solo non voleva sottomettersi al fascino della primavera e non voleva vedere né la primavera né il sole.

Oppure aggiungi l'attributo class ai paragrafi che dovrebbero iniziare con una linea rossa e aggiungi lo stile desiderato:

Il principe Andrei guardò più volte questa quercia mentre cavalcava attraverso la foresta. C'erano fiori ed erba sotto la quercia, ma lui stava ancora in mezzo a loro, cupo, immobile, brutto e testardo.

Risultato:

Il principe Andrei guardò più volte questa quercia mentre cavalcava attraverso la foresta. C'erano fiori ed erba sotto la quercia, ma lui stava ancora in mezzo a loro, cupo, immobile, brutto e testardo.

Ora puoi facilmente traccia una linea rossa sulle tue pagine html. Ci vediamo presto!

La linea rossa html può essere impostata in 4 modi diversi. Sebbene questo linguaggio di programmazione non preveda determinati standard per questo fenomeno, non ci sono quindi restrizioni al riguardo. In questo articolo, utilizzeremo un set di strumenti non proprio standard per creare una linea rossa.

1a via

Dovresti iniziare con il modo più comune. Solo in questo caso è necessario utilizzare tabelle a cascata, perché i CSS sono indissolubilmente legati al linguaggio di markup dell'ipertesto. La linea rossa di html può essere impostata utilizzando la proprietà "text-indent". È sufficiente specificare l'elemento desiderato e la distanza che verrà utilizzata per il rientro sul lato sinistro del documento. Ad esempio, la voce: "p (text-indent: 20px;)" significa che verrà creata una linea rossa di 20 pixel in ogni p paragrafo. Qualsiasi blocco di testo può essere utilizzato come elemento per il quale è specificato il valore. Questa proprietà infatti non imposta la linea rossa, ma specifica semplicemente il rientro della prima linea dell'elemento selezionato. Ma chi noterà la differenza? La proprietà "text-indent" può assumere tre diversi tipi di valori:

• Qualsiasi unità di misura comune, come px (pixel), in (pollici), pt (punti) e altre.
• Valore percentuale. In questo caso, viene presa in considerazione la distanza dall'elemento padre.
• Ereditare. Se si specifica questo valore, la proprietà verrà ereditata dall'elemento padre.

2a via

In html, la linea rossa può essere impostata senza includere le tabelle a cascata. È sufficiente mettere diversi spazi prima del primo carattere nel codice sorgente della pagina. Solo tu devi usare caratteri speciali, vale a dire "", perché se inserisci uno spazio normale, ne verrà preso in considerazione solo uno. E utilizzando questo simbolo è possibile impostare il rientro desiderato. Una tale riga HTML rossa non avrà un effetto globale e dovrai inserire tutti gli spazi manualmente. Questo meno ti caricherà notevolmente quando lavori con un gran numero di documenti. Inoltre, questo metodo dichiarerà il codice della tua pagina non valido.

3a via

Conclusione

In conclusione, possiamo dire che html insieme ai CSS ti permette di fare un'ampia varietà di effetti. A volte le proprietà e gli elementi vengono utilizzati per altri scopi, ma non devi deviare troppo dal significato standard dei tag.

Ogni testo ha una sua struttura unica: i libri sono divisi in parti, sezioni e capitoli, giornali e riviste hanno titoli e sottotitoli separati, che, a loro volta, includono frammenti di testo che hanno anche una propria struttura: paragrafi, trattini, ecc.

Il testo inserito nelle pagine web non fa eccezione, deve inoltre avere una struttura logica comprensibile a ogni utente. Dopotutto, molto dipende da quanto sarà percepito in modo semplice e conveniente il testo della pagina: prima di tutto, quale impressione avrà il visitatore sul tuo sito.

Per creare tali unità strutturali di testo come i paragrafi, il tag viene utilizzato nei documenti HTML.

, che separa i frammenti di testo con un rientro verticale (viene aggiunta una riga vuota prima e dopo un paragrafo).

Nota: per impostazione predefinita, la spaziatura tra i paragrafi è 1em (em è un'unità di misura uguale all'altezza del carattere), ovvero la spaziatura tra i paragrafi dipende direttamente dalla dimensione del carattere.

Per modificare i rientri tra i paragrafi senza modificare la dimensione del carattere, puoi utilizzare la proprietà del margine CSS.

Non dimenticare il tag di chiusura

La maggior parte dei browser visualizzerà correttamente un documento HTML anche se hai dimenticato il tag finale.

Paragrafo

Un altro paragrafo

Questo codice funzionerà nella maggior parte dei browser, ma non fare affidamento su di esso. Un tag di chiusura dimenticato può portare a risultati o errori imprevisti.

linea rossa

Cos'è una linea rossa? Per definizione, questa è la riga iniziale di un paragrafo, che veniva evidenziato in rosso (da cui il nome). Prima dell'invenzione della stampa, i libri venivano scritti a mano: il capitolo o parte del testo, la prima parola o lettera era scritta con vernice rossa. È così che è apparso il concetto di "scrivere dalla linea rossa": questo significa l'inizio di un nuovo pensiero, capitolo o parte.

Tuttavia, durante la creazione di pagine Web, il design della linea rossa viene utilizzato abbastanza raramente, nonostante consenta di percepire visivamente il testo con una comodità molto maggiore, il che è abbastanza importante per un lettore tradizionale: non tutti sono a proprio agio nel leggere il versione elettronica del testo.

Per aggiungere una linea rossa ai tuoi paragrafi, devi usare la proprietà CSS text-indent, che ti permette di indentare la prima frase:

Provare "

Nell'esempio sopra, la prima riga di ogni paragrafo della pagina inizierà con un rientro di 25px. L'esempio seguente mostra come impostare la linea rossa solo su un paragrafo specifico di una pagina.

Come in ogni vera arte, non ci sono sciocchezze nei buoni testi, a cui alcuni includono la linea rossa, ritenendo che il suo uso non sia così importante. Tuttavia, bisogna capire che qualsiasi virgola ha un carico sia estetico che semantico e non è solo un omaggio alle regole della grammatica, ma questo vale anche per la formattazione.

Provare "

Nota: non è necessario impostare il rientro a 25px, puoi scegliere tu stesso la dimensione ottimale del rientro, è anche possibile creare una linea che sporga sopra il resto del testo usando la proprietà text-indent, per questo è necessario impostare un valore negativo per la proprietà (ad esempio: -30px).

Durante la lettura di libri, giornali, riviste e in effetti qualsiasi testo normale, ti sei imbattuto in molti paragrafi e la prima riga di ciascuno di essi contiene un piccolo rientro. In questo articolo, ti mostrerò l'opzione migliore. rientro del paragrafo tramite CSS.

Ovviamente è possibile inserire un numero qualsiasi di spazi utilizzando , scegliendo così il rientro necessario, ma, di sicuro, capisci che questo metodo, per usare un eufemismo, è scomodo. E la soluzione a questo problema è molto semplice.

Dovresti già saperlo dentro HTML un paragrafo viene creato utilizzando un tag<P>. Pertanto, ogni paragrafo dovrebbe essere nel proprio tag.<P>. E per facendo rientrare la prima riga di ogni paragrafo abbastanza per connettersi codice CSS:

P(
rientro testo: 10px;
}

In questo esempio, abbiamo rientrato 10 pixel. Puoi giocare con questo valore per trovare quello migliore per il tuo sito.

In questo modo semplice, puoi impostare il rientro delle prime righe di qualsiasi paragrafo nel testo del sito.

Se hai domande o desideri parlare di questo articolo, puoi lasciare il tuo commento in fondo alla pagina.

Commenti (9 ):

31.05.2013 13:10:03

Ciao Michael, per favore aiutami a risolvere il problema con il seguente codice CSS: .bam ( border: 1px solid black; border-radius: 8px; margin-bottom: 4%; text-align: left; width: 84%; ) . bam .author ( colore di sfondo: bianco; bordo inferiore: 1px nero pieno; bordo-in alto-raggio-destra: 8px; bordo-in alto-raggio-sinistra: 8px; peso del carattere: grassetto; riempimento: 4px; ) . bam .text ( background-color: WhiteSmoke; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding:4px; ) Il testo all'interno di ".bam .text" deve essere spostato su un'altra riga se non si adatta a una riga. Ma per qualche motivo non viene trasferito, ma esce dal blocco. Aiutaci a risolvere questo problema.

Rispondere

06.06.2013 22:42:20

Ciao Mikhail, non sai come trovare una via d'uscita dalla seguente situazione: c'è un blocco e al suo interno c'è un altro blocco e il testo è scritto in questo blocco all'interno (la lunghezza del testo non è nota in anticipo). Quindi, come fare in modo che l'altezza del blocco padre dipenda dall'altezza del blocco al suo interno (con testo)? E poi per qualche motivo ottengo che l'altezza del blocco genitore è inferiore all'altezza di quello interno.

Rispondere

amministratore 06.06.2013 23:32:40

Tutti i blocchi esterni sono allungati in base alle dimensioni dei blocchi interni. Non è necessario farlo, dovrebbe già essere predefinito.

Rispondere

07.06.2013 11:11:09

e guardi: http://progbase.ru/about.php

Rispondere

amministratore 07.06.2013 21:54:37

Deve usare

- metti questo blocco in posti diversi e guarda cosa cambia. Una volta che tutto è in ordine, lascialo lì.

Rispondere

13.09.2013 21:39:34

Ciao! Aiuto, per favore, nella finestra di questo suggerimento, quando passi con il mouse, crea rientri e altri stili di testo. Qualcosa non funziona e basta. Grazie in anticipo. richiesta e più avanti nel testo

Nel caso dei documenti HTML, i tag funzionano più per contrassegnare il contenuto che per indicare come dovrebbe essere presentato. Un maggiore controllo sulla presentazione si ottiene con gli stili. In questo articolo, esaminerò quegli stili correlati alla formattazione dei paragrafi in HTML.

Etichetta

In HTML, puoi specificare i paragrafi e l'attributo align li allinea a sinistra, a destra, al centro o giustificati. In aggiunta a loro, utilizzeremo l'attributo di stile globale.

Allineamento dei paragrafi

Puoi allineare un paragrafo usando l'attributo align con i seguenti valori:

text-align: sinistra|destra|centro|giustificato|iniziale|ereditata;

Copia il codice seguente in un file .html.

Questo paragrafo è allineato al centro

Questo paragrafo è allineato a destra

Questo paragrafo viene visualizzato nella finestra del browser giustificato. Un paragrafo ben distanziato viene giustificato a destra e a sinistra aggiungendo spazi extra. Puoi vedere che i bordi del paragrafo giustificato corrispondono ai bordi dei paragrafi giustificati sinistro e destro. In un paragrafo allineato a sinistra, il margine sinistro è pari e in un paragrafo allineato a destra è a destra. Riesci a vedere che questo paragrafo ha entrambi i bordi pari? Ciò si ottiene grazie allo stile text-align:justify.

Nella finestra del browser HTML, il codice del paragrafo è simile a questo.

Interlinea

Puoi controllare l'interlinea di un paragrafo con style=line-height . Utilizza l'attributo style con i seguenti valori:

altezza-linea: normale|numero|lunghezza|iniziale|ereditare;

Quello che segue è un esempio di codice HTML che restituisce paragrafi con interlinea variabile:

Questo paragrafo utilizza due valori per l'attributo style. La prima line-height:1.5 specifica un'interlinea e mezza per il paragrafo e il secondo valore text-align:justify specifica che il testo del paragrafo deve essere giustificato in larghezza.

Questo paragrafo ha un'interlinea doppia ed è giustificato. line-height:2 specifica la doppia spaziatura. L'attributo style non deve avere due valori. Ma se devi specificare due valori, puoi farlo separandoli con un punto e virgola.

Di seguito sono riportati alcuni modi diversi per utilizzare il valore dell'altezza della linea per l'attributo di stile:

: imposta l'interlinea su 13 pixel;

: imposta la spaziatura tra i paragrafi in HTML al 200% della dimensione del carattere corrente;

: Imposta l'altezza della linea su 14 pixel.

Rientro

Ho usato il termine "rientro" per renderlo più facile da capire. Ma in HTML, utilizziamo gli spazi per creare uno spazio bianco attorno a un oggetto. Puoi utilizzare l'attributo style con un valore di riempimento per impostare il rientro sinistro o destro di un paragrafo.

Quello che segue è un esempio di paragrafi con rientro sinistro e destro:

Questo paragrafo non è rientrato, è solo giustificato. Osserva l'attributo style dell'elemento P per questo paragrafo.

Per questo paragrafo, ho impostato il rientro sinistro su 30px usando padding-left:30px . Questo paragrafo è anche giustificato usando lo stile text-align:justify. Come già saprai, possiamo utilizzare più valori per l'attributo Style separandoli con un punto e virgola.

E questo paragrafo ha un rientro destro di 30 pixel, ma nessun rientro sinistro. È anche giustificato in larghezza. Il valore 'padding-right' dell'attributo style imposta il riempimento a destra. Se non vedi l'effetto, riduci la larghezza della finestra del browser in modo che il paragrafo HTML giustificato venga visualizzato correttamente.

Rientri tra i paragrafi (trattino prima e trattino dopo un paragrafo)

In HTML o CSS, non abbiamo bisogno di questo. Possiamo semplicemente modellare l'imbottitura sull'elemento

Padding-top e padding-bottom definiscono lo spazio bianco prima e dopo un paragrafo, che funziona come un padding superiore o inferiore. Guarda l'esempio di tag qui sotto

Ho impostato il primo paragrafo HTML su un rientro di 10px prima del secondo e 50px dopo il secondo paragrafo:

Questo paragrafo non è rientrato né prima né dopo. Questo è un paragrafo regolare giustificato. Come già sai, possiamo giustificare un paragrafo usando il codice style="text-align:justify" all'interno del tag.

Questo paragrafo è allineato. Ha anche un rientro di 10 px prima del paragrafo e 50 px dopo. All'interno del tag, ho impostato 3 stili.

Questo è un paragrafo normale senza rientri e allineamento predefinito.

Cose da ricordare

• Un paragrafo HTML può essere allineato usando l'attributo align o lo stile text-align;
• L'HTML verrà visualizzato in modo diverso a seconda delle dimensioni dello schermo, delle dimensioni della finestra del browser;
• L'aggiunta di spazi extra o righe vuote al codice HTML non influisce sull'output. Il browser rimuove tutti gli spazi extra;
• I tag definiscono cosa dovrebbe essere visualizzato e gli stili definiscono come dovrebbe essere visualizzato;
• Gli stili possono essere impostati in tre modi diversi: inline (all'interno dei tag), interno ( all'interno dello stesso file HTML con un elemento

  © 2022 Tutti i diritti riservati

  Sito sui computer

  • Pubblicità sul progetto