Una risorsa web viene valutata dagli utenti in base alla sua attrattiva esterna. Pertanto, anche l'informazione testo utile potrebbe non essere letto a causa del fatto che è formattato male. Conclusione: è necessario avvicinarsi con attenzione e attenzione non solo al contenuto semantico delle pagine del sito, ma anche al suo presentazione visiva. Aspetto esteriore Tecnologie CSS ampliato le possibilità di creare articoli attraenti. Una delle proprietà progettate per rendere la scrittura più facile da leggere è l'indentazione. testo css.
Margini e padding: qual è la differenza?
Prima di iniziare a formattare il testo, dovresti capire cosa sono i margini e i rientri. Nonostante il fatto che questi elementi di markup in alcuni casi appaiano uguali all'utente, ci sono differenze fondamentali tra loro:
- il campo è impostato dalla proprietà imbottitura, trattino - margine;
- il margine è determinato dallo spazio tra il contenuto e il bordo del blocco, il trattino - tra i bordi dei blocchi vicini;
- I margini possono essere presi in considerazione nella dimensione dell'elemento (larghezza e altezza) o meno.
proprietà di margine
Quindi, per impostare il rientro orizzontale o verticale del testo CSS, usa la costruzione margine. Questa proprietà si applica al tag definire il paragrafo del documento. Nel molto caso semplice si scrive come:
margine: 12px
Questa riga significa che un blocco di testo (o qualsiasi altro blocco) verrà rientrato su tutti i lati di 12 pixel. Per aumentare l'intervallo, ad esempio, tre volte, è sufficiente scrivere:
margine: 36px
Ma cosa succede se la spaziatura tra i blocchi deve essere diversa su ciascun lato? Gli sviluppatori di pagine Web utilizzano diverse forme di notazione:
- margine: 11px 22px.
- margine: 11px 22px 33px.
- margine: 11px 22px 33px 44px.
Nel primo esempio, 11 pixel verranno rientrati dai bordi inferiore e superiore del blocco e 22 pixel verranno rientrati dai lati del blocco. Secondo la seconda forma di scrittura, ci saranno 11 pixel tra il bordo superiore del blocco e il contenuto, 33 pixel tra il basso e 22 pixel ai lati. Nel terzo caso, il padding sarà di 11 pixel dall'alto, 22 pixel da destra, 33 pixel dal basso e 44 pixel da sinistra.
È anche possibile registrare la distanza dal confine del blocco solo su un lato: margine superiore, margine inferiore, margine sinistro, margine destro. Dopo aver tradotto i nomi delle proprietà in russo, è facile intuire il loro scopo. Ad esempio, la voce seguente dice che il riempimento corretto sarà di 22 pixel:
margine-destra: 22px
Per gli altri lati, le distanze attorno al blocco sono considerate uguali al valore dell'elemento padre.
Proprietà margine ha una caratteristica che lo sviluppatore dovrebbe tenere a mente quando utilizza il rientro verticale CSS. Intervalli elementi vicini non cumulativi, ma sovrapposti l'uno all'altro. Ad esempio, lascia che uno dei blocchi abbia margine inferiore: 15px, e il blocco adiacente ad esso dal basso margine superiore: 35px. L'aritmetica scolastica e il buon senso impongono che il riempimento totale tra di loro sarà di 50 pixel. In pratica, questo non è il caso. Blocca con grande valore proprietà margine"assorbire" il suo vicino. Di conseguenza, la spaziatura tra gli elementi sarà di 35 pixel.
"Linea rossa
Fare un documento in editor di testo, gli utenti preferiscono impostare ciascuno nuovo paragrafo usando la linea rossa. DA usando CSS il rientro del testo a sinistra è facile da fare: viene utilizzata la costruzione indentatura del testo. Si scrive così:
rientro testo: 11px.
Cioè, la prima riga del paragrafo verrà spostata dal relativo bordo sinistro di 11 pixel. Per rendere il testo sulla pagina web più simile a un documento nell'editor, dovresti inoltre impostare, ovvero scrivere:
rientro testo: 11px;
text-align: giustifica.
Oltre ai pixel, quando si descrive il markup, è consentito utilizzare altre unità: pollici, punti, percentuali. Lascia che il blocco abbia un rientro del testo CSS del 10%. Con una larghezza del blocco di 500 pixel, la linea rossa sarà di 50 pixel (10% di 500).
Per data proprietà il valore può essere impostato ereditare. Tale record dice che il blocco utilizza una proprietà simile del blocco padre.
rientro testo: eredita.
Sorprendentemente, può volerci valori negativi! In questo caso si formano le cosiddette sporgenze, ovvero il testo principale rimane al suo posto e la prima riga viene spostata a sinistra di 22 pixel:
rientro testo: -22px.
In modo che le lettere non si incrocino confine sinistro browser, oltre a indentatura del testoè necessario utilizzare la costruzione per impostare il campo:
riempimento a sinistra: 22px
Principale proprietà CSS per considerato. E la pratica aiuterà a risolverli. Ecco alcuni suggerimenti finali su come applicare ciò che hai imparato allo sviluppo del tuo sito web:
- la linea rossa e il rientro del testo sono concetti diversi e vengono utilizzate proprietà diverse per specificarli;
- per rientri verticali le regole della matematica non funzionano: gli intervalli sono sovrapposti, l'elemento con un valore elevato "vince";
- negativo paragrafo trattino viene utilizzato per indicare la prima riga di un paragrafo utilizzando un'immagine.
I margini e il riempimento sono stili molto importanti durante la creazione di una pagina HTML. Consentono di posizionare con maggiore precisione gli elementi, creare una cornice con le distanze necessarie, ecc. Entrambi gli stili sono molto simili e svolgono funzioni simili. Ma ci sono ancora differenze.
Gli elementi possono essere annidati, possono essere adiacenti l'uno all'altro. Diamo un'occhiata al seguente esempio:
Abbiamo due tavoli, limone e colore blu situato uno sotto l'altro. Le tabelle sono composte da una cella. C'è un blocco rosso nella cella della prima tabella. In questo esempio, osserviamo come funzionano i margini e il riempimento.
I campi sono impostati in base allo stile imbottitura. Questo stile si applica solo agli elementi contenitore che possono contenere altri elementi. Stile consente di impostare il valore dei margini tra i bordi dell'elemento e il suo contenuto. Stile margine consente di impostare il riempimento da un elemento ai bordi più vicini di un altro elemento. I bordi di un altro elemento possono essere i bordi del contenitore padre, nonché i bordi della pagina stessa.
Esistono diversi modi per impostare questi stili. Ad esempio, specifica direttamente la dimensione di tutti i margini o rientri con un argomento in qualche unità di misura (px, ex, em, pt, cm e così via):
imbottitura: 3px margine : 3pxIn questo caso, i margini e il riempimento saranno gli stessi su tutti e quattro i lati. Quando si specificano due argomenti separati da uno spazio:
imbottitura: 3px 5px; margine: 3px 5px;il primo determinerà la quantità di margini/padding in alto e in basso, il secondo - a sinistra ea destra. Quando vengono forniti tre argomenti:
imbottitura: 3px 5px 2px; margine: 3px 5px 2px;il primo è il margine/rientro superiore, il secondo è sinistro e destro contemporaneamente, il terzo è inferiore. Con quattro argomenti:
imbottitura: 3px 5px 2px 6px; margine: 3px 5px 2px 6px;il primo è il margine superiore/padding, il secondo è quello destro, il terzo è quello inferiore, il quarto è quello sinistro. È facile da ricordare: il primo è in alto, poi in senso orario. Inoltre, puoi impostare separatamente i margini e il riempimento per un particolare bordo, utilizzando gli stili appropriati: parte superiore imbottita, imbottitura a destra, fondo imbottito, riempimento a sinistra, margine superiore, margine-destra, margine inferiore, margine sinistro. Il valore di questi stili può essere solo un argomento, che specifica la quantità di margine/padding per un determinato lato.
Nella figura, il blocco rosso si trova all'interno della cella della tabella e confina con i suoi bordi, ovvero la cella non ha margini. Impostiamo i margini della cella usando lo stile:
imbottitura: 5pxDi conseguenza, la pagina cambierà come segue:
Ora diamo un'occhiata agli offset. Due tabelle sono adiacenti l'una all'altra, se vogliamo allontanarle un po', possiamo applicare dei rientri. Ci sono due opzioni qui: impostare il rientro inferiore della prima tabella o il rientro superiore della seconda tabella. Usiamo il secondo:
margine superiore: 5px;Si noti che impostiamo il rientro sulla tabella e non sulla cella della tabella, come nel caso dei campi. Ecco il risultato:
A proposito, nel primo caso (lo spazio tra il blocco rosso ei bordi della cella madre), lo stesso effetto potrebbe essere ottenuto impostando i rientri del blocco. In generale, se qualcosa non è chiaro, cancellati dai commenti.
Codice HTML della pagina sperimentale:
<html > <testa > <titolo > Test</titolo> <meta http-equiv = "Tipo di contenuto" content = "text/html;charset=utf-8" > </testa> <corpo> <stile> tabella (larghezza: 200px; altezza: 150px; bordo: 1px solido #555; collasso bordo: collasso) td (allineamento verticale: alto; riempimento: 0px) div (larghezza: 100px; altezza: 100px; sfondo: rosso)</stile> <stile tabella = "sfondo: lime"> <tr > <tdstyle="padding:5px"> <div style="margine:0px"></div> </td> </tr> </tabella> <stile tavola = "sfondo: azzurro; margine superiore: 5px"> <tr > <td ></td> </tr> </tabella> </corpo> </html>Rientro HTML testo- nel processo di creazione di un sito, dobbiamo lavorare molto con blocchi di testo o frasi di testo. Una volta, dovevo aggiungere una frase di testo, in modo che prima di questa frase di testo ce ne fosse qualcuna testo del rientro da bordi html
il blocco in cui è stato aggiunto il testo specificato.
Così, Rientro del testo html, il primo metodo è il più naturale e semplice. Per far rientrare il testo, aggiungi prima testo html codice spazio - Aggiungi codice html gli spazi sono possibili in qualsiasi editor html.
Fornisco un esempio di codice funzionante per impostare un rientro per il testo utilizzando un codice spazio:
<html > <testa > <titolo >Rientro del testo HTMLtitolo > testa > <corpo> <p > HTML rientro del testo a sinistra, usa il codice spaziop > corpo> html >
A questo esempio, prima del testo che abbiamo scelto, il codice spazio -
aggiunto quattro volte, di conseguenza, otteniamo il rientro di cui abbiamo bisogno.Sappiamo che il codice spazio viene elaborato da qualsiasi browser. Pertanto, aggiungendo il numero di spazi richiesto prima del testo, puoi ottenere il rientro necessario per il testo.
Questo metodo è buono in quanto sarà garantito per essere elaborato da qualsiasi browser.
Ma questo metodo c'è svantaggio significativo. Per fare un rientro per il testo abbastanza grande in lunghezza, nel codice html, dovrai aggiungere prima del testo un gran numero di caratteri spaziali, che possono sembrare brutti, ingombranti e poco professionali.
Una delle soluzioni a questo problema è strada successiva lavori di rientro.
Metodo di rientro del testo HTML due: questo metodo si basa sulle proprietà del tag blockquote. Questo tag imposta un rientro di circa 40 pixel a sinistra ea destra per il testo inserito al suo interno. Inoltre, il rientro è impostato in alto e in basso. esempio html Il codice per utilizzare questo metodo è riportato di seguito:
<p ><citazione in blocco > Rientro del testo HTML a sinistra, usa il tag citazione in bloccocitazione in blocco >p >
Come puoi vedere, questo metodo per impostare un rientro per il testo è molto facile da usare, ma ha anche uno svantaggio significativo. Rientro che imposta il tag citazione in blocco,è fisso e corrisponde sempre allo stesso valore - 40px.
Per correggere la situazione e quando si aggiunge rientro html e per testo per poter impostare qualsiasi valore, utilizzeremo il terzo metodo.
Rientro del testo HTML, metodo tre.
Qui useremo la proprietà del parametro text-indent dei fogli di stile CSS CSS.
Se aperto riferimento CSS, nella pagina delle proprietà di text-indent, vedremo che con text-indent possiamo impostare il rientro della prima riga o del primo paragrafo di un blocco di testo.
Stiamo esaminando un esempio con un breve blocco di testo, quindi le proprietà del rientro del testo sono abbastanza adatte al nostro caso.
Di seguito è riportato il codice html che indenta il testo utilizzando text-indent. L'esempio lo mostra impostando il rientro del testo significati diversi argomenti, possiamo modificare la quantità di rientro del testo:
<pstyle="text-indent:100px"> HTMLtrattinotesto, lavori stile CSS - indentatura del testop >
A mio parere, questo modo di impostare un rientro per il testo è il più ottimale, ma, tuttavia, consideriamo un altro modo per impostare un rientro utilizzando le immagini.
Rientro del testo HTML, il quarto modo: qui useremo un'immagine per impostare il rientro.
Come esempio di lavoro, consideriamo subito il codice html che dimostra il funzionamento di questo metodo:
Rientro del testo HTML
a sinistra, usa l'immagine
Dall'esempio sopra, si vede chiaramente che modificando la larghezza dell'immagine, possiamo cambiare la posizione del testo, ovvero impostare il rientro desiderato per il testo.
Come immagine, puoi utilizzare un'immagine la cui larghezza e altezza sono uguali a un pixel. In modo che l'immagine che stiamo utilizzando non sia visibile sulla pagina, imposteremo il colore esattamente come lo sfondo della pagina del sito.
A mio parere, i metodi di cui sopra per impostare i rientri per il testo sono abbastanza per organizzare il rientro di cui hai bisogno in qualsiasi situazione quando aggiungi contenuti a una pagina sui tuoi siti.
Ti do il benvenuto nel mio blog. CSS (Cascading Style Sheets) offre molte opzioni di personalizzazione aspetto esteriore pagine web. Oggi vorrei mostrare brevemente come determinare in css indent in alto o su qualsiasi altro lato per qualsiasi elemento.
Imbottitura esterna
Il margine viene impostato utilizzando la proprietà margin. Con esso, puoi impostare il riempimento su tutti e quattro i lati contemporaneamente o utilizzare altre proprietà: margin-top , margin-left , margin-right , margin-bottom , che ti consentono di farlo solo su un lato.
Il margine determina la distanza alla quale il bordo selezionato di un elemento verrà rientrato rispetto ad altri elementi nella pagina. Ad esempio, la voce:
P, div( Margine in alto: 20px; )
Ciò significa che tutti i blocchi e i paragrafi verranno rientrati dall'alto di 20 pixel, ovvero il loro bordo superiore verrà spostato lontano dagli elementi adiacenti di questa distanza.
I margini possono essere scritti su ciascun lato con una sola proprietà di margine, che viene scritta 4 valori di seguito:
Div( Margine: 20px 10px 20px 10px; )
I rientri saranno dati rispettivamente dai bordi superiore, destro, inferiore e sinistro. Poiché in questo caso sono uguali ai lati opposti, si potrebbe anche scrivere così:
Div( Margine: 20px 10px; )
Il primo valore è il riempimento in alto e in basso e il secondo è il margine sui lati.
Rientro
Il riempimento funziona in modo diverso: non allontana la scatola dagli altri elementi, ma aggiunge quello spazio all'interno dell'elemento, allontanando il contenuto della scatola dai bordi. È comodo. Dove hai visto un sito in cui il testo inizia in alto a sinistra della finestra?
Non l'ho visto, perché gli sviluppatori web usano sempre margini e rientri per rendere il testo il più leggibile possibile. Rientri vengono scritti utilizzando la proprietà padding, in cui è possibile elencare contemporaneamente 4 valori per tutti gli spigoli, separati rispettivamente da uno spazio.
Inoltre, allo stesso modo con il margine, puoi aggiungere il nome del lato e impostare la distanza solo per esso. Ad esempio, il riempimento superiore può essere scritto usando padding-top . In genere, proprietà di imbottitura funziona esattamente come la proprietà margin.
Un esempio è il seguente pezzo di codice:
Blocco (larghezza: 200 px; imbottitura: 20 px; )
Quale pensi che sarà la larghezza effettiva del nostro elemento? Qui puoi vedere che sono 200 pixel, ma il padding aggiunge altri 20 pixel su ciascun lato, per un totale di 240 pixel. Tienine conto durante la stesura.
Vorrei anche notare che il riempimento è normalmente impostato solo elementi di blocco, minuscolo è meglio non darlo. Il margine funziona bene con qualsiasi elemento.
Buona giornata! L'impostazione dei rientri per testo e immagini è l'argomento principale della pubblicazione odierna. Consideriamo più in dettaglio quali approcci possono essere applicati nella pratica.
Durante la creazione di un sito, un webmaster si occupa di blocchi di testo e frasi inseriti nelle pagine del progetto. La soluzione dei singoli problemi è associata all'uso Tag HTML aggiunto all'editor. Esistono diversi tipi di attributi che consentono di spostare frasi o modificare la posizione dei frammenti in pagina elettronica.
Impostazione dei rientri inserendo spazi
Vediamo come indentare il testo in HTML usando etichetta speciale, che fornisce la formazione di uno spazio vuoto. E' necessario inserire il codice il numero di volte richiesto per ottenere lo scostamento desiderato dal bordo della pagina.
Il codice di cui sopra viene elaborato da tutti i tipi di browser e il webmaster lo riceverà risultato garantito. Lo svantaggio del metodo sta nelle possibilità limitate, perché per aumentare la distanza è necessario aggiungere grande quantità tag, e questo ingombra il documento.
Applicazione del tag di citazione
Studiando in dettaglio come indentare il testo nel codice HTML, puoi inciampare metodo alternativo dando più possibilità.
Qui dovrai usare blockquote, che ti consente di spostare il frammento a sinistra ea destra di circa 40 px. Basta scrivere il codice identico all'esempio dato:
Il metodo consente di manipolare frasi entro un valore fisso di 40 px. Vale anche la pena notare che in dato tag di solito termina con una citazione.
Alternative
Se intendi spostarti a una distanza non standard, dovrai utilizzare il parametro di rientro del testo relativo allo stile tabella CSS. Il metodo considerato garantisce la creazione di una deviazione della prima riga su distanza desiderata. È necessario apportare le seguenti modifiche all'editor:
Quando è necessario misurare il numero di pixel richiesto da un'immagine, sono preferiti codici semplici ma efficaci.
Nel primo caso, vengono impostati solo i valori dell'offset dai bordi dell'immagine. Il secondo imposta la posizione dell'immagine lungo il bordo sinistro con il testo che si avvolge attorno a destra e il terzo - viceversa.
Le informazioni sono terminate. Dimmi, hai trovato le informazioni che ti interessano? La risposta può essere scritta nei commenti.
Infine, menzionerò che il blog di Workip è dedicato principalmente alle opzioni monetarie per fare soldi online. Sai quali metodi sono davvero promettenti finanziariamente? Alcuni di loro sono già stati pubblicati.
Continua la pubblicazione dei materiali. Iscriviti a e-mail per gli aggiornamenti del progetto. Fino alla comunicazione.
