Ciao, cari lettori del sito blog! Oggi continueremo a conoscere i fogli di stile a cascata o CSS. Negli articoli precedenti abbiamo già guardato schema generale layout a blocchi del sito. Di conseguenza, abbiamo iniziato ad avere pagine web abbastanza professionali, ma mancava qualcosa. Ma molto probabilmente mancano di rientri e cornici. Oggi esamineremo le regole di stile di margine, riempimento e bordo, che consentono di impostare rientri e cornici per gli elementi html.
Opzioni di riempimento CSS
Con l'aiuto dei fogli di stile a cascata è possibile impostare due tipi di rientri.
1.Rientroè la distanza dal bordo immaginario dell'elemento al suo contenuto. Il valore della distanza viene specificato utilizzando il parametro imbottitura. Questa rientranza appartiene all'elemento stesso e si trova al suo interno.
2. Margine— la distanza tra il bordo dell'elemento corrente della pagina web e i bordi degli elementi vicini, oppure elemento genitore. La dimensione della distanza è controllata dalla proprietà margine. Questo rientro si trova all'esterno dell'elemento.
Per chiarezza, immagine:
Ad esempio, considera una cella piena di testo. Quindi il riempimento è la distanza tra il bordo immaginario della cella e il testo in essa contenuto. E il margine esterno è la distanza tra i bordi delle celle vicine. Iniziamo con l'imbottitura.
Imbottitura nei CSS utilizzando l'imbottitura (in alto, in basso, a sinistra, a destra)
Le proprietà di stile imbottitura-left, imbottitura-top, imbottitura-right e imbottitura-bottom ti consentono di impostare i valori di imbottitura, rispettivamente, a sinistra, in alto, a destra e in basso di un elemento della pagina web:
parte superiore imbottita | imbottitura-destra | fondo-imbottitura | imbottitura-sinistra: valore | interesse | ereditare
La quantità di rientro può essere specificata in pixel (px), percentuale (%) o altre unità accettabili per CSS. Quando si specificano le percentuali, il valore viene calcolato dalla larghezza dell'elemento. Che cosa è ereditare indica che è ereditato dal genitore.
Ad esempio, per il paragrafo corrente, ho applicato una regola di stile che imposta il riempimento sinistro su 20 pixel, il riempimento superiore su 5 pixel, il riempimento destro su 35 pixel e il riempimento inferiore su 10 pixel. La voce della regola sarà simile alla seguente:
p.prova(
imbottitura-sinistra:20px;
imbottitura superiore: 5px;
imbottitura destra: 35px;
fondo imbottito: 10px
}
Regola di riempimento composito ti consente di specificare i rientri su tutti i lati di un elemento di una pagina web contemporaneamente:
imbottitura:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
IN regola collettiva Puoi utilizzare uno, due, tre o quattro valori, separandoli con uno spazio. In questo caso, l'effetto dipende dal numero di valori:
- se specifichi un valore, imposterà la quantità di rientro su tutti i lati dell'elemento della pagina;
- se specifichi due valori, il primo imposterà la quantità di rientro in alto e in basso e il secondo a sinistra e a destra;
- se specifichi tre valori, il primo determinerà la quantità di rientro in alto, il secondo - a sinistra e a destra e il terzo - in basso;
- se vengono specificati quattro valori, il primo imposterà la quantità di rientro in alto, il secondo a destra, il terzo in basso e il quarto a sinistra.
Pertanto, la regola CSS di cui sopra può essere abbreviata il più possibile e scritta come segue:
p.test(imbottitura:5px 35px 10px 20px)
La proprietà margin o i margini nei CSS
Gli attributi di stile margin-left, margin-top, margin-right e margin-bottom consentono di impostare i valori dei margini rispettivamente sinistro, superiore, destro e inferiore:
margine superiore | margine destro | margine-inferiore | margine sinistro:<значение>|auto|eredita
Come accennato in precedenza, il margine è la distanza dal bordo dell'elemento corrente al bordo dell'elemento adiacente o, se non ci sono elementi vicini, al bordo interno del contenitore genitore.
La quantità di rientro può essere specificata in pixel (px), percentuale (%) o altre unità consentite per CSS:
P(
margine sinistro: 20px;
}
h1(
margine destro: 15%;
}
Il valore auto significa che la dimensione del rientro verrà calcolata automaticamente dal browser. Se utilizzi la notazione percentuale, i rientri vengono calcolati in base a larghezza del contenitore principale. Inoltre, questo vale non solo per margin-left e margin-right, ma anche per margin-top e margin-bottom, i margini percentuali verranno calcolati in base alla larghezza, non all'altezza, del contenitore.
È consentito l'uso di rientri esterni come valori valori negativi:
P(
margine sinistro: -20px;
}
Se, con valori di rientro positivi, gli elementi vicini vengono allontanati, allora con valore negativo il blocco adiacente entrerà in collisione con l'elemento per il quale abbiamo impostato un offset così negativo.
Possiamo anche specificare il riempimento utilizzando l'attributo style margine. Imposta i valori di rientro contemporaneamente su tutti i lati di un elemento della pagina web:
margine:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Quando si specificano uno, due, tre o quattro valori di riempimento, questa proprietà obbedisce alle stesse leggi della regola di riempimento.
Opzioni del bordo utilizzando la proprietà Border
Quando si impostano i frame, sono disponibili tre tipi di parametri:
- larghezza del bordo: spessore del bordo;
- border-color — colore del bordo;
- border-style — il tipo di linea con cui verrà disegnata la cornice.
Cominciamo con il parametro spessore del telaio:
larghezza del bordo: [valore | sottile | medio | spesso] (1,4) | ereditare
Spessore del telaio può essere specificato in pixel o altre unità disponibili nei CSS. Le variabili sottile, media e spessa impostano lo spessore del bordo rispettivamente su 2, 4 e 6 pixel:
larghezza del bordo: media;
Come per le proprietà di riempimento e margine, il parametro larghezza del bordo consente uno, due, tre o quattro valori, impostando così la larghezza del bordo per tutti i lati contemporaneamente o per ciascun lato separatamente:
larghezza del bordo: 5px 3px 5px 3px
Per il paragrafo corrente, imposta lo spessore del bordo superiore di 1px, di 2px a destra, di 3px in basso e di 4px a sinistra utilizzando la regola (larghezza del bordo: 1px 2px 3px 4px;)
Utilizzando gli attributi di stile border-left-width, border-top-width, border-right-width e border-bottom-width, puoi impostare rispettivamente lo spessore dei lati sinistro, superiore, destro e inferiore del bordo:
larghezza-bordo-sinistra|larghezza-bordo-alto|larghezza-bordo-destra|larghezza-bordo-fondo: sottile|medio|spesso|<толщина>|ereditare
Il parametro successivo è il colore del bordo con cui puoi controllare colore del telaio:
colore del bordo: [colore | trasparente] (1,4) | ereditare
La proprietà consente di impostare il colore del bordo per tutti i lati dell'elemento contemporaneamente o solo per quelli specificati. Come valore è possibile utilizzare i metodi per specificare i colori accettati in HTML: codice esadecimale, parole chiave, ecc.:
p (larghezza del bordo: 2px; colore del bordo: rosso)
Il valore trasparente viene impostato colore trasparente frame ed eredita eredita il valore del genitore. Per impostazione predefinita, se non viene specificato il colore del bordo, verrà utilizzato quello utilizzato per il carattere all'interno dell'elemento.
Utilizzando gli attributi di stile border-left-color, border-top-color, border-right-color e border-bottom-color, puoi impostare rispettivamente il colore dei lati sinistro, superiore, destro e inferiore del bordo:
colore-bordo-sinistra|colore-bordo-superiore|colore-bordo-destra|colore-bordo-bottom: trasparente|<цвет>|ereditare
E ultimo parametro specifica lo stile del bordo tipo di telaio:
stile bordo: (1,4) | ereditare
Il tipo di cornice può essere specificato per tutti i lati di un elemento contemporaneamente o solo per quelli specificati. È possibile utilizzare diversi valori parole chiave. L'aspetto dipenderà dal browser utilizzato e dallo spessore della cornice. Senso nessuno viene utilizzato per impostazione predefinita e non visualizza una cornice e il suo spessore è impostato su zero. Il valore nascosto ha lo stesso effetto. Il telaio risultante per altri valori, a seconda dello spessore, è mostrato nella tabella seguente:
Gli attributi di stile border-left-style, border-top-style, border-right-style e border-bottom-style specificano lo stile delle linee che verranno disegnate sui lati sinistro, superiore, destro e inferiore del bordo, rispettivamente:
stile border-left|stile border-top|stile border-right|stile border-bottom: nessuno|nascosto|punteggiato|tratteggiato|solido|doppio|scanalatura|ridge|inset|outset|eredita
Come per le opzioni di imbottitura e imbottitura, ci sono universale proprietà di confine . Ti consente di impostare contemporaneamente lo spessore, lo stile e il colore del bordo attorno a un elemento:
confine: | ereditare
I valori possono essere in qualsiasi ordine, separati da spazi:
td (bordo: 1px giallo fisso)
Per impostare un bordo solo su determinati lati di un elemento, esistono le proprietà border-top, border-bottom, border-left, border-right, che consentono di impostare i parametri per le parti superiore, inferiore, sinistra e lato destro struttura
Non resta che riassumere:
- per il compito imbottitura usiamo la proprietà imbottitura;
- per le impostazioni margini c'è una regola margine;
- parametri del telaio sono specificati utilizzando l'attributo confine.
Noto che tutte queste proprietà CSS aumentano la dimensione dell'elemento della pagina web. Pertanto, se modifichiamo lo spessore del bordo o la dimensione del riempimento dei contenitori di blocchi che compongono il design della pagina web, dovremo modificare di conseguenza le dimensioni di questi contenitori, altrimenti potrebbero spostarsi e il design risulterà rotto.
Questo è tutto, alla prossima volta!
Il layout a blocchi viene spesso utilizzato durante la creazione di un sito Web o di un blog. Di conseguenza, è spesso necessario rientrare i blocchi. Per questo motivo, circa come indentare nei CSS descritto dettagliatamente in questa lezione. Per il browser, ogni tag è un contenitore con contenuto, riempimento, margini esterni e un bordo. In questa lezione impareremo come realizzare interni e margini, consideriamo i loro parametri principali.
La figura seguente mostra chiaramente i parametri del rientro del blocco:
Come puoi vedere, i rientri possono essere creati in quattro direzioni: rientro superiore (in alto), rientro inferiore (in basso), rientro sinistro (sinistra) e rientro destro (destra). Le unità di misura possono essere pixel, percentuali e altre. Unità CSS- di più su di loro. Questo tutorial utilizza i pixel.
Imbottitura a blocchi
La proprietà responsabile del riempimento nei CSS è imbottitura. Quindi, diamo un'occhiata a un esempio di impostazione del riempimento interno per un blocco:
imbottitura superiore: 5px; /*imbottitura superiore*/ imbottitura-sinistra: 8px; /*imbottitura sinistra*/ imbottitura-destra: 8px; /*imbottitura destra*/ imbottitura-bottom: 5px; /*imbottitura inferiore*/
IN in questo esempio L'imbottitura interna è impostata separatamente per ciascun lato del blocco. Inoltre, esistono diversi modi per impostare il rientro nei CSS:
margine: 5px 8px 5px 8px; /*margini superiore, destro, inferiore, sinistro*/ margine: 5px 8px 5px; /*descrive i margini superiore, sinistro, destro e inferiore*/ margin: 5px 8px; /*descrive i margini superiore e inferiore, destro e sinistro*/ margin: 7px; /*descrive tutto il riempimento di 7px*/
È più facile ricordare il primo e ultimi modi. Nel primo caso, i rientri vengono posizionati in senso orario (in alto, a destra, in basso, a sinistra) - possiamo specificare qualsiasi quantità di rientro; nel secondo caso, i rientri su tutti i lati saranno gli stessi.
Bloccare i margini
La proprietà responsabile dei margini nei CSS è margine. Esempi di margini nei CSS:
margine superiore: 5px; /*margine superiore*/ margine sinistro: 10px; /*margine sinistro*/ margine-destro: 10px; /*margine destro*/ margine-inferiore: 5px; /*margine inferiore*/
imbottitura: 5px 10px 5px 10px; /*margini superiore, destro, inferiore, sinistro*/ riempimento: 5px 10px 5px; /*descrive il riempimento inferiore superiore, sinistro e destro*/ riempimento: 5px 10px; /*descrive il riempimento superiore e inferiore, destro e sinistro*/ riempimento: 7px; /*descrive tutti i margini di 7px*/
Così, come indentare nei CSS- la domanda non è difficile, ma molto rilevante. Per comprendere meglio le informazioni sopra descritte, è necessario ricordare che esistono due proprietà: riempimento - rientri interni e margine - rientri esterni. Inoltre, come già sai, ci sono diversi modi per impostare i rientri, puoi usarli.
Benvenuti nel mio blog. Css (Cascading Style Sheets) offre molte opzioni di personalizzazione aspetto pagine web. Oggi vorrei mostrare brevemente come definire nei CSS il riempimento nella parte superiore o su qualsiasi altro lato per qualsiasi elemento.
Margine
Il margine viene impostato utilizzando la proprietà margin. Con il suo aiuto, puoi impostare i margini su tutti e quattro i lati contemporaneamente o utilizzare altre proprietà: margine-top, margine-sinistra, margine-destra, margine-bottom, che ti consentono di realizzarlo solo su un lato.
Il margine determina la distanza alla quale il bordo selezionato di un elemento verrà spostato dagli altri elementi sulla pagina. Ad esempio, la voce:
P, div( Margine superiore: 20px; )
Ciò significa che tutti i blocchi e i paragrafi verranno rientrati nella parte superiore di 20 pixel, ovvero il loro bordo superiore verrà allontanato dagli elementi adiacenti di questa distanza.
I margini possono essere scritti su ciascun lato utilizzando una sola proprietà margin, in cui vengono scritti 4 valori di seguito:
Div(margine: 20px 10px 20px 10px; )
L'imbottitura sarà data rispettivamente dai bordi superiore, destro, inferiore e sinistro. Dato che in questo caso sono uguali sui lati opposti, potremmo anche scriverlo così:
Div(Margine: 20px 10px;)
Il primo valore è il margine superiore e inferiore, mentre il secondo è il margine laterale.
Rientro
Il riempimento interno funziona diversamente: non allontana il blocco dagli altri elementi, ma aggiunge spazio all'interno dell'elemento, allontanando il contenuto del blocco dai suoi bordi. È comodo. Dove hai visto un sito web in cui il testo inizia in alto a sinistra della finestra?
Non l'ho visto, perché gli sviluppatori web utilizzano sempre i rientri esterni e interni per rendere il testo il più semplice possibile da leggere. Il riempimento interno viene specificato utilizzando la proprietà riempimento, in cui è possibile elencare 4 valori contemporaneamente, separati da uno spazio, rispettivamente per tutti i bordi.
Inoltre, analogamente al margine, puoi aggiungere il nome del lato e impostare la distanza solo per esso. Ad esempio, è possibile scrivere il trattino superiore utilizzando l'imbottitura-superiore. In generale, la proprietà di riempimento funziona esattamente come la proprietà di margine.
Ad esempio, puoi fornire questo pezzo di codice:
Blocco (larghezza: 200px; imbottitura: 20px;)
Quale pensi sarà la larghezza effettiva del nostro elemento? Qui puoi vedere che sono 200 pixel, ma i riempimenti ne aggiungono altri 20 su ciascun lato, per un totale di 240 pixel. Tienilo in considerazione durante la progettazione.
Vorrei anche notare che il riempimento viene normalmente dato solo agli elementi blocco; è meglio non darlo agli elementi inline. Il margine funziona bene con qualsiasi elemento.
Il layout CSS è sempre stato rettangolare. Eventuali linee morbide sono di competenza dello sviluppatore. Le regole di stile forniscono opzioni sufficienti per conferire alla pagina una forma uniforme entro i limiti della risoluzione dello schermo. Ma qualsiasi elemento del layout è sempre un rettangolo in cui la disposizione delle informazioni è regolata dalle regole CSS.
Il riempimento su tutti i lati è importante per ogni elemento della pagina quando è posizionato in modo assoluto e il riempimento superiore CSS è definito in modo specifico perché è importante per vari elementi, soprattutto quelle minuscole.
Regole base di posizionamento
Un elemento blocco ha una regola di margine, una regola di riempimento per gli elementi al suo interno e una larghezza del bordo che può essere utilizzata.
La rientranza in alto è di particolare importanza. I CSS all'interno di un blocco associano le regole di riempimento alle regole per gli elementi posizionati in modo assoluto e relativo all'interno di quel blocco.
Una pratica comune per le regole CSS: puoi specificare lo stesso riempimento su tutti i lati, a coppie in alto/in basso e a destra/sinistra, o per ciascun lato separatamente. Per esempio,
- margine: 10px;
- imbottitura: 10px20px;
- imbottitura: 10px20px30px40px.
Nel primo caso viene fissata la rientranza dell'elemento dai lati del contenitore esterno in cui si trova. Nel secondo caso, i margini in alto e in basso sono 10px, a sinistra e a destra - 20px. Nel terzo caso, la dimensione dei rientri è indicata su tutti i lati: in alto, a destra, in basso e a sinistra.
In tutti questi casi, il rientro il CSS superiore è 10 px.
Regole che modificano la posizione degli elementi
Se un elemento del layout non è posizionato in modo assoluto, viene posizionato in Procedura generale formazione della pagina.
Se definiamo riempiendo il CSS superiore nell'elemento scCurrInfo, l'obiettivo verrà raggiunto, ma se a livello li non lo farà.
In questo esempio, utilizzando la regola di riempimento: 40px; richiede un'adeguata riduzione delle regole di larghezza e altezza di 80px. In caso contrario, la dimensione del blocco scCurrInfo supererà 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, otterremo solo trattino superiore. La CSS non applicherà questo valore ad altre parti.
Naturalmente, questo uso della regola del rientro si applica a ciascun elemento li.
Pratiche generali di formattazione dei contenuti
Alcuni sviluppatori raggiungono la perfezione disponendo le pagine elementi di blocco. A quanto pare è una pratica classica iniziare con i tavoli e finire con il proprio processo educativo sui blocchi.
Libertà intrinseca disposizione dei blocchi, è affascinante e l'immaginazione dello sviluppatore potrebbe non essere limitata dalle rigide regole della tabella: solo righe, solo celle, che si uniscono solo orizzontalmente e verticalmente. Niente di peculiare delle idee relazionali.
Nel frattempo, i tavoli, oltre agli ovvi svantaggi, presentano molti vantaggi qualitativi. Quando si crea il riempimento in alto, i CSS tengono conto del riempimento a sinistra, a destra (in basso è un momento speciale). Le regole delle celle della tabella ti consentono di controllare sia l'allineamento verticale che quello orizzontale. Utilizzando gli stili di riga e combinandoli con gli stili di cella, puoi creare visualizzazioni complesse di contenuto.
La consueta rappresentazione di una pagina sotto forma di rettangoli non impedisce affatto di presentarla sotto forma di tabella. Anche questi sono rettangoli, ma sono anche celle di tabella, cioè hanno le proprie regole che completano le regole dei blocchi.
Posizionamento assoluto
Blocca con la regola POSIZIONE: assoluta ; sarà localizzato in una posizione determinata dalle sue coordinate rispetto al blocco in cui si trova.
Una caratteristica delle regole CSS è la "pratica - miglior criterio verità" nella maggior parte dei casi, soprattutto quando è richiesta la compatibilità tra browser e il layout viene eseguito manualmente, è preferibile studiare manuali completi su fogli di stile a cascata.
L'utilizzo delle tabelle spesso comporta problemi di spostamento del contenuto della cella. Un offset simile all'interno di un blocco non sempre influisce su tutti gli elementi. Sperimentando è possibile ottenere il risultato desiderato. Un compito banale: come rimuovere il riempimento superiore non è sempre una soluzione banale per i CSS.
In alcuni casi, quando è necessario disporre gli elementi della pagina nel profondo di alcuni sistema popolare gestione dei contenuti dei siti web, è ancora necessario prestare attenzione non solo alla pratica sperimentale, ma anche guardare all'esperienza dei colleghi.
Buona giornata! L'impostazione dei rientri per testo e immagini è l'argomento principale della pubblicazione di oggi. Diamo uno sguardo più da vicino a quali approcci possono essere applicati nella pratica.
Quando si crea un sito Web, un webmaster si occupa di blocchi di testo e frasi pubblicate sulle pagine del progetto. Risolvere problemi individuali implica l'utilizzo Tag HTML, aggiunto all'editor. Esistono diversi tipi di attributi che ti consentono di spostare frasi o modificare la posizione dei frammenti pagina elettronica.
Impostazione dei rientri inserendo spazi
Diamo un'occhiata a come rientrare il testo in HTML utilizzando etichetta speciale, garantendo la formazione di un gap. È necessario inserire il codice il numero di volte richiesto per ottenere la deviazione desiderata dal bordo della pagina.
Il codice di cui sopra può essere elaborato da tutti i tipi di browser e il webmaster riceverà un risultato garantito. Lo svantaggio di questo metodo sono le sue capacità limitate, poiché per aumentare la distanza è necessario aggiungere grande quantità tag e questo ingombra il documento.
Applicazione di un tag di citazione
Studiando in dettaglio come indentare il testo nel codice HTML, puoi imbatterti metodo alternativo, dando più possibilità.
Qui dovrai utilizzare blockquote, che ti permette di spostare il frammento a sinistra e a destra di circa 40 px. È sufficiente scrivere il codice identico all'esempio fornito:
Il metodo ti consente di manipolare le frasi entro un valore fisso di 40 px. Vale anche la pena notare che in questa etichetta di solito si concludono con una citazione.
Opzioni alternative
Se prevedi di spostarti ad una distanza non standard, dovrai utilizzare il parametro text-indent, che si riferisce allo stile tabella CSS. Il metodo in esame garantisce la creazione di una deviazione della prima riga distanza richiesta. È necessario apportare le seguenti modifiche all'editor:
Quando è necessario misurare il numero richiesto di pixel da un'immagine, si preferiscono codici semplici ma efficaci.
Nel primo caso vengono impostati solo i valori di offset dai bordi dell'immagine. Nel secondo, la posizione dell'immagine è impostata sul bordo sinistro con il testo che scorre verso destra, e nel terzo viceversa.
Le informazioni sono giunte al termine. Dimmi, hai trovato le informazioni che cercavi? La risposta può essere scritta nei commenti.
Infine, menzionerò che il blog Workip è dedicato principalmente alle opzioni monetarie per fare soldi online. Sapete quali metodi sono veramente promettenti dal punto di vista finanziario? La descrizione di alcuni di essi è già stata pubblicata.
La pubblicazione dei materiali continua. Iscriviti a e-mail per gli aggiornamenti del progetto. Arrivederci.
