Ciao! Inizialmente volevo dividere questo articolo in 4 piccoli, ma poi ci ho pensato. Per che cosa? Dopotutto, è più conveniente quando tali informazioni vengono raccolte nell'ambito di un materiale.
Pertanto, oggi impareremo come indentare CSS da sinistra e da tutti gli altri lati: a destra, in alto e in basso. Si possono fare per immagini e testi. Sono di due tipi:
- Esterno;
- Interno.
Per il primo viene utilizzato il margine della proprietà chiave, per il secondo il padding. Per chiarezza, ho fatto un piccolo esempio per te. Per rendere visivamente comoda la distinzione tra spazio interno ed esterno, ho aggiunto un tavolo visibile. Vediamo cosa è successo?
Imbottitura esterna
Scrivendoli nel foglio di stile CSS, puoi impostare l'orientamento del blocco di informazioni sulla pagina. Ad esempio, spostalo verso sinistra e verso il basso. Dimostriamo immediatamente come apparirà.
In generale, puoi utilizzare le opzioni seguenti per impostare i rientri.
Sinistra (margine sinistro).
Destra (margine-destra).
In alto (margine in alto).
In basso (margine-basso).
Ora ti mostrerò un'altra bella sfumatura.
Come puoi vedere, puoi usare una delle opzioni: l'effetto è lo stesso. Solo nel secondo caso il codice è più compatto. Si noti inoltre che l'imbottitura è in senso orario. Tutto inizia in alto e finisce a sinistra.
Imbottitura interna
La procedura è simile qui. Solo ora aggiungerò nuove proprietà non per l'intera tabella, ma per il contenuto delle colonne.
Vediamo cosa ne è venuto fuori.
Per analogia con i margini interni nei CSS, i margini esterni possono essere scritti in codice abbreviato o per i lati separatamente.
Questi erano i punti salienti. Infine, ti mostrerò come puoi semplificare parte del lavoro.
Rientro a livello dei tag selezionati
Nei casi che abbiamo esaminato sopra, sono impostati per testo e immagini contemporaneamente. In effetti, puoi impostare la distanza dagli elementi a livello di un tag specifico. Ti mostrerò come funziona. Annulla le ultime modifiche e inserisci il codice personalizzato nel foglio di stile.
Diamo un'occhiata a cosa è successo dopo aver salvato le modifiche.
L'immagine è rimasta al suo posto, solo il testo racchiuso a sinistra si è spostato. Manipolazioni simili possono essere applicate ad altri blocchi, ad esempio tr, span.
Come informazione aggiuntiva, propongo una pubblicazione sull'incarico per la revisione. Lì sono descritti anche metodi piuttosto interessanti. Può essere utile per formare una linea rossa nel testo o per eseguire altre azioni.
Inoltre, c'è un abbonamento alla distribuzione gratuita di informazioni agli indirizzi e-mail. C'è un modulo speciale per iscriversi al blog. Fino alla prossima volta.
I margini e il riempimento sono stili molto importanti quando si costruisce una pagina HTML. Ti consentono di posizionare più accuratamente gli elementi, creare una cornice con gli spazi necessari, 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 blu, situati uno sotto l'altro. Le tabelle sono costituite da una cella. C'è un blocco rosso nella cella della prima tabella. In questo esempio, diamo un'occhiata a come funzionano i margini e il padding.
I campi sono impostati dallo stile imbottitura... Questo stile è applicabile solo agli elementi contenitore che possono contenere altri elementi. Lo stile consente di impostare il valore dei margini tra i bordi dell'elemento e il suo contenuto. Stile margine ti permette di impostare il padding da un elemento ai bordi più vicini di un altro elemento. I bordi di un altro elemento possono essere i bordi del contenitore padre, così come i bordi della pagina stessa.
Esistono diversi modi per definire questi stili. Ad esempio, puoi specificare direttamente la dimensione di tutti i margini o il riempimento con un argomento in qualche unità di misura (px, ex, em, pt, cm e così via):
imbottitura: 3px; margine: 3px;In questo caso, i margini e i margini 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 / riempimento 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/imbottitura in alto, il secondo è a sinistra ea destra contemporaneamente, il terzo è in basso. Con quattro argomenti:
imbottitura: 3px 5px 2px 6px; margine: 3px 5px 2px 6px;il primo è il margine/imbottitura in alto, il secondo è a destra, il terzo è in basso e il quarto è a sinistra. È facile da ricordare: il primo è dall'alto, poi in senso orario. Inoltre, puoi impostare margini e margini per un bordo specifico separatamente, utilizzando gli stili appropriati: imbottitura-top, padding-right, imbottitura-fondo, imbottitura-sinistra, margine superiore, margine-destro, margine inferiore, margine sinistro... Il valore di questi stili può essere solo un argomento, che specifica la quantità di margine/imbottitura per un dato lato.
Nella figura, il blocco rosso si trova all'interno della cella della tabella ed è adiacente ai suoi bordi, ovvero la cella non ha margini. Impostiamo i campi sulla cella usando lo stile:
imbottitura: 5px;Di conseguenza, la pagina cambierà come segue:
Esaminiamo ora il rientro. Due tabelle sono adiacenti l'una all'altra, se vogliamo allontanarle un po', possiamo applicare dei rientri. Ci sono due opzioni qui: impostare il padding inferiore della prima tabella o il padding superiore della seconda tabella. Usiamo il secondo:
margine superiore: 5px;Nota 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 la casella rossa e i bordi della cella madre), lo stesso effetto potrebbe essere ottenuto impostando i margini della casella. In generale, se qualcosa non è chiaro, cancelliamo l'iscrizione nei commenti.
Codice HTML della pagina di prova:
<html> <testa> <titolo> Test</ titolo> <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"> </ testa> <corpo> <stile> table (larghezza: 200 px; altezza: 150 px; bordo: 1 px solido # 555; collasso bordo: collasso) td (allineamento verticale: in alto; padding: 0 px) div (larghezza: 100 px; altezza: 100 px; sfondo: rosso)</ stile> <stile tabella = "sfondo: lime"> <tr> <td style = "padding: 5px"> <div style = "margine: 0px"></ div> </ td> </ tr> </ tavolo> <stile tabella = "sfondo: azzurro; margine superiore: 5px"> <tr> <td></ td> </ tr> </ tavolo> </ corpo> </ html>Il layout CSS è sempre stato rettangolare. Eventuali linee morbide sono responsabilità dello sviluppatore. Le regole di stile forniscono opzioni sufficienti per dare alla pagina forme eleganti all'interno della risoluzione dello schermo. Ma qualsiasi elemento di layout è sempre un rettangolo in cui la posizione delle informazioni è governata dalle regole CSS.
Il padding completo è importante per ogni elemento su una pagina quando è posizionato in modo assoluto e il padding sopra il CSS è specificamente definito in quanto è importante per vari elementi, specialmente quelli in linea.
Regole di posizionamento di base
Un elemento blocco ha una regola per il riempimento dai lati dell'elemento in cui si trova (margine), una regola per il riempimento per gli elementi al suo interno (imbottitura) e una larghezza del bordo (bordo), che può anche essere utilizzata.
Il margine superiore è particolarmente importante. Il CSS all'interno di un blocco associa le regole di riempimento con le regole per elementi posizionati in modo assoluto e relativo all'interno di quel blocco.
Una pratica comune per le regole CSS è quella di specificare gli stessi margini su tutti i lati, alto/basso e destra/sinistra in coppia, o separatamente per ciascun lato. Per esempio,
- margine: 10px;
- imbottitura: 10px20px;
- imbottitura: 10px20px30px40px.
Nel primo caso, l'elemento è rientrato dai lati del contenitore esterno in cui si trova. Nel secondo caso, i margini superiore e inferiore sono 10 px e i margini sinistro e destro sono 20 px. Nel terzo caso, le dimensioni dei rientri sono indicate su tutti i lati: superiore, destro, inferiore e sinistro.
In tutti questi casi, indentazione il CSS superiore è 10 px.
Regole che cambiano la posizione degli elementi
Se un elemento del layout non è posizionato in modo assoluto, viene posizionato nell'ordine generale di formazione della pagina.
Se definisci il riempimento superiore CSS sull'elemento scCurrInfo, l'obiettivo sarà raggiunto e, se a livello li, non lo farà.
In questo esempio, utilizzando il padding della regola: 40px; richiede un'adeguata riduzione delle regole di larghezza e altezza di 80px. In caso contrario, la dimensione del blocco scCurrInfo andrà oltre i limiti del blocco esterno.
Se rimuoviamo la regola di riempimento dalla descrizione scCurrInfo, ma la aggiungiamo con un valore di 20px alla descrizione dello stile dell'elemento dell'elenco, otteniamo solo rientro superiore. I CSS non applicheranno questo valore ad altri lati.
Naturalmente, questo uso della regola di indentazione si applica a ogni elemento li.
Pratica generale sulla formattazione dei contenuti
Alcuni sviluppatori sono perfetti per codificare pagine con elementi di blocco. Apparentemente, questa è una pratica classica: iniziare con le tabelle e completare il proprio processo educativo in blocchi.
La libertà insita nel layout dei blocchi è affascinante e l'immaginazione di uno sviluppatore non deve essere limitata da rigide regole della tabella: solo righe, solo celle, si uniscono solo orizzontalmente e verticalmente. Nulla di peculiare delle idee relazionali.
Nel frattempo, i tavoli, oltre ai loro ovvi svantaggi, hanno molti vantaggi in termini di qualità. Quando si crea il padding in alto, CSS tiene conto del padding a sinistra, a destra (in basso è un momento speciale). Le regole delle celle della tabella consentono di controllare l'allineamento sia verticale che orizzontale. Usando gli stili di riga, combinandoli con gli stili di cella, puoi formare rappresentazioni complesse del contenuto.
La consueta presentazione della pagina sotto forma di rettangoli non impedisce affatto che venga presentata sotto forma di tabella. Anche questi sono rettangoli, ma sono anche celle di tabella, cioè hanno le proprie regole che completano le regole del blocco.
Posizionamento assoluto
Blocco con regola POSIZIONE: assoluto; sarà nella posizione impostata dalle sue coordinate relative al blocco in cui si trova.
Una caratteristica delle regole CSS è che "la pratica è il miglior criterio di verità" nella maggior parte dei casi, specialmente quando è richiesta la compatibilità tra browser e il layout viene eseguito manualmente, piuttosto che studiare manuali completi su fogli di stile a cascata.
L'uso delle tabelle porta spesso a problemi di spostamento del contenuto delle celle. Uno spostamento simile all'interno di un blocco non sempre e non ha effetto su tutti gli elementi. Sperimentando, puoi ottenere il risultato desiderato. Un compito banale: come rimuovere il padding superiore, i CSS non sempre risolvono in modo banale.
In alcuni casi, quando devi comporre elementi di pagina nelle viscere di qualsiasi popolare sistema di gestione dei contenuti di un sito, devi comunque prestare attenzione non solo alla pratica sperimentale, ma anche guardare all'esperienza dei colleghi.
- nel processo di creazione di un sito Web, dobbiamo lavorare molto con blocchi di testo o frasi di testo. Una volta avevo bisogno di aggiungere una frase di testo, in modo che prima di questa frase di testo ce ne fosse un po' rientrare il testo dal bordo html il blocco a cui è stato aggiunto il testo dato.
Quindi, il primo metodo è il più naturale e semplice. Per far rientrare il testo, aggiungi il codice html di uno spazio prima del testo - Puoi aggiungere il codice html di uno spazio in qualsiasi editor html.
Ecco un esempio di codice funzionante per impostare il rientro per il testo, utilizzando il codice spazio:
HTML rientrare il testo a sinistra, usa il codice spazio
In questo esempio, prima del testo che abbiamo selezionato, il codice dello spazio è -& nbsp; aggiunto quattro volte, di conseguenza, otteniamo il rientro di cui abbiamo bisogno.
Sappiamo che il codice degli spazi bianchi viene gestito da qualsiasi browser. Pertanto, aggiungendo il numero richiesto di spazi prima del testo, è possibile ottenere il rientro richiesto per il testo.
La cosa buona di questo metodo è che è garantito per funzionare in qualsiasi browser.
Ma questo metodo ha uno svantaggio significativo. Per fare in modo che il rientro per il testo sia sufficientemente lungo, nel codice html, dovrai aggiungere un numero elevato di caratteri spazio davanti al testo, il che potrebbe non sembrare carino, ingombrante e non professionale.
Una delle opzioni per risolvere questo problema è il seguente modo per impostare il rientro.
Rientro del testo HTML, metodo 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, l'imbottitura è impostata nella parte superiore e inferiore. Di seguito è riportato un esempio di codice html per l'utilizzo di questo metodo:
a sinistra, usa il tag citazione
Come puoi vedere, questo metodo per impostare il rientro del testo è molto facile da usare, ma ha anche uno svantaggio significativo. Il rientro che il tag imposta citazione,è fisso ed è sempre lo stesso valore - 40px.
Per rimediare alla situazione, e quando si aggiunge rientro html e per testo essere in grado di impostare qualsiasi valore, utilizzeremo il terzo metodo.
Rientro del testo HTML, metodo tre.
Qui useremo la proprietà text-indent dei CSS Cascading Style Sheets.
Se apri il riferimento CSS, nella pagina con la descrizione delle proprietà di text-indent, vedremo che con l'aiuto di text-indent, possiamo impostare la quantità di rientro della prima riga o del primo paragrafo di qualsiasi blocco di testo.
Stiamo considerando un esempio con un breve blocco di testo, quindi le proprietà di rientro del testo vanno bene per il nostro caso.
Di seguito è riportato il codice html che fa rientrare il testo utilizzando text-indent. Dall'esempio puoi vedere che impostando diversi valori di argomento per il rientro del testo, possiamo modificare la quantità di rientro del testo:
HTMLrientrotesto lo stile CSS funziona - indentatura del testo
Secondo me, questo modo di impostare il rientro per il testo è il più ottimale, ma, tuttavia, considera un altro modo di impostare il rientro, usando le immagini.
Rientro del testo HTML, il quarto metodo: qui useremo un'immagine per impostare il rientro.
Come esempio funzionante, diamo un'occhiata al codice html che dimostra come funziona questo metodo:
a sinistra, usa l'immagine
Si vede chiaramente dall'esempio fornito che modificando la larghezza dell'immagine, possiamo cambiare la posizione del testo, ovvero impostare il rientro richiesto per il testo.
Come immagine, puoi usare 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, imposta il colore esattamente come lo sfondo della pagina del sito.
A mio parere, i metodi di cui sopra per impostare i rientri di testo sono abbastanza per organizzare il rientro di cui hai bisogno in qualsiasi situazione quando aggiungi contenuti alla pagina dei tuoi siti.
Buona giornata! L'impostazione di rientri per testo e immagini è l'argomento principale della pubblicazione di oggi. Diamo un'occhiata più da vicino a quali approcci possono essere applicati nella pratica.
Durante la creazione di un sito Web, un webmaster si occupa di blocchi di testo e frasi posizionati nelle pagine del progetto. La risoluzione di singoli problemi è associata all'uso di tag HTML aggiunti all'editor. Esistono diversi tipi di attributi che consentono di spostare frasi o modificare la posizione di frammenti su una pagina elettronica.
Impostare rientri inserendo spazi
Diamo un'occhiata a come indentare il testo in HTML usando un tag speciale che genera uno spazio. È necessario incollare il codice tutte le volte necessarie per ottenere l'offset desiderato dal bordo della pagina.
Lo sviluppo del codice fornito viene eseguito da tutti i tipi di browser e il webmaster riceverà un risultato garantito. Lo svantaggio di questo metodo sono le sue capacità limitate, perché per aumentare la distanza, è necessario aggiungere più tag e questo ingombra il documento.
Usando il tag di citazione
Mentre studi in dettaglio come indentare il testo nel codice HTML, potresti imbatterti in un metodo alternativo che ti offre più opzioni.
Qui devi usare blockquote, che ti permette di spostare il frammento a sinistra ea destra di circa 40 px. È sufficiente scrivere il codice identico all'esempio precedente:
Il metodo consente di manipolare frasi all'interno di una dimensione fissa di 40 px. Vale anche la pena notare che questo tag di solito include una citazione.
Opzioni alternative
Se intendi spostarti a una distanza non standard, dovrai utilizzare il parametro di rientro del testo relativo al foglio di stile CSS. Il metodo considerato prevede la creazione di una deviazione della prima linea alla distanza desiderata. È necessario apportare le seguenti modifiche all'editor:
Quando è necessario misurare il numero richiesto di pixel da un'immagine, preferiscono codici semplici ma efficienti.
Nel primo caso vengono impostati solo i valori dell'offset dai bordi dell'immagine. Nel secondo, la posizione dell'immagine è impostata a sinistra con il flusso del testo a destra, e nel terzo, viceversa.
L'informazione è giunta al termine. Dimmi, hai trovato le informazioni che ti interessano? Puoi scrivere la risposta nei commenti.
Infine, menzionerò che il blog Workip è principalmente dedicato alle opzioni di denaro per fare soldi online. Sai quali metodi sono davvero promettenti dal punto di vista finanziario? Le descrizioni di alcuni di loro sono già state pubblicate.
La pubblicazione dei materiali continua. Iscriviti alla e-mail per gli aggiornamenti del progetto. Fino alla prossima volta.
