Come posso creare il riempimento in CSS?
Il riempimento CSS consente a un programmatore HTML di impostare il riempimento predefinito o lo spazio morto al di fuori di un elemento HTML. Il vantaggio di fare questo è che salva il programmatore dal ripetere quel codice di riempimento per ogni istanza di quell'elemento e crea più facilmente coerenza sulla pagina. L'elemento HTML da riempire può essere un numero qualsiasi di cose, come un paragrafo, una tabella o un'intestazione.
Per creare il riempimento in CSS, devi prima identificare l'elemento HTML che vuoi riempire. Questo elemento che si desidera pad è noto come selettore. Quindi, ti consigliamo di specificare i valori di riempimento appropriati. Esistono cinque diversi tipi di proprietà di riempimento nel CSS: uno per tutti e quattro i lati di un elemento contemporaneamente e altri quattro per ogni singolo lato dell'elemento (ad esempio, il lato sinistro, il lato destro, il lato superiore o il lato inferiore ). Una proprietà che consente al programmatore di specificare contemporaneamente i valori per tutti e quattro i lati di un elemento HTML è definita proprietà abbreviata .
Il linguaggio di codifica utilizzato per specificare una dichiarazione di riempimento CSS è semplicemente la parola "riempimento". A seguito di tale etichetta, sono i "valori" rilevanti del riempimento, o informazioni sulla quantità di spazio desiderato, solitamente rappresentate da pixel o un percentuale. Il riempimento e i valori sono scritti all'interno di parentesi graffe o parentesi graffe (ad es. "{" E "}"). Precedentemente tutto ciò è l'elemento HTML da riempire (ad esempio, "p" per il paragrafo o "H2" per le intestazioni di livello 2).
In termini di rappresentazione del valore, i valori possono essere rappresentati in pixel (ad es. 1px o 5px), punti (ad es. 1pt o 5pt) o pollici (ad es. 1in o 5in) o centimetri (ad es. 1cm o 5cm) . I valori possono anche essere dichiarati come percentuale dell'elemento HTML in stile. Se il valore è del 50%, ad esempio, l'imbottitura sarà uguale alla metà della dimensione dell'elemento.
I seguenti esempi sono il codice HTML per il riempimento di un elemento HTML mediante valori riflessi rispettivamente in percentuale e lunghezza. Se viene assegnato un solo valore, i browser Web assegneranno questo riempimento a tutti e quattro i lati dell'elemento HTML.
padding: 10%;
padding: 100px;
L'aggiunta di più valori al tipo di dichiarazione di riempimento in alto farà sì che i browser Web li interpretino in un certo modo. Se vengono assegnati due valori, il primo corrisponderà a quello superiore e inferiore, mentre il secondo corrisponde a sinistra e a destra. Tre valori faranno in modo che il primo faccia riferimento alla parte superiore, il secondo ai lati sinistro e destro e il terzo alla parte inferiore dell'elemento HTML. L'assegnazione del massimo di quattro valori fa sì che il primo, il secondo, il terzo e il quarto valore corrispondano ai valori superiore, destro, inferiore e sinistro dell'elemento HTML, in quell'ordine. Quando viene fornito più di un valore, devono essere separati da spazi e terminati con un punto e virgola, ad esempio:
imbottitura: 10px 20px 10px 20px;
Anche il riempimento in CSS può essere eseguito da un lato alla volta. A questo proposito, ci sono altre quattro proprietà di riempimento disponibili. Questi sono padding-top, padding-right, padding-bottom e padding-left. Per creare il riempimento nei CSS in questo modo più preciso, dovrai etichettare le proprietà con la stessa sintassi delle dichiarazioni stenografiche di cui sopra. Ognuna di queste proprietà di riempimento richiede solo un valore in lunghezza o percentuale. Per esempio:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
Il codice seguente crea una pagina Web, dichiara le proprietà di riempimento tra i tag di stile e quindi li utilizza in un elemento di paragrafo specificato dal tag p. Il testo tra / * e * / sono note per spiegare il tipo di padding impiegato e non verrebbero inclusi nel codice di padding CSS.
<Html>
<Head>
<style type = "text / css">
p.example1 {padding: 10px;} / * Imbottitura a mano corta per tutti e quattro i lati * /
p.example2 {padding: 50px 30px;} / * Imbottitura a mano corta per la parte superiore e inferiore seguita da sinistra e destra * /
p.example3 {
padding-top: 10px;
padding-bottom: 20px;
padding-bottom: 10px;
padding-left: 20px;
} / * imbottitura individuale. * /
</ Style>
</ Head>
<Body>
<p class = "example1"> Questo testo ha la stessa imbottitura su ogni lato. L'imbottitura su ciascun lato è di 10px. </p>
<p class = "example2"> Questo testo ha un'imbottitura superiore e inferiore di 50 px e un'imbottitura sinistra e destra di 30 px. </p>
<p class = "example3"> Questo testo ha un'imbottitura superiore di 10px, un'imbottitura destra di 20px, un'imbottitura inferiore di 10px e un'imbottitura sinistra di 20px. </p>
</ Body>
</ Html>
Nell'esempio sopra, "esempio1", ecc., Sono nomi assegnati a una classe, a cui si fa riferimento nei paragrafi. Il periodo tra il tag p e i nomi delle classi all'inizio del codice indica una dichiarazione di una classe assegnata a un paragrafo. Notare le parentesi graffe dopo la dichiarazione di classe che racchiude le assegnazioni del valore della proprietà di riempimento.
Anche se questo può sembrare molto lavoro, è molto meno laborioso rispetto alla specifica del riempimento per ogni singolo paragrafo. È possibile dichiarare una proprietà di riempimento per l'elemento desiderato, che nell'esempio sopra è il tag p, quindi fare riferimento alla classe quando si utilizza l'elemento tra i tag body della pagina. Se è necessario un solo tipo di riempimento per tutti i paragrafi, non è necessario utilizzare le classi. Usa semplicemente il seguente codice tra i tag di stile, quindi codifica i paragrafi senza specificare alcuna classe. Questo codice andrebbe tra i tag body anziché il codice nell'esempio sopra.
p {riempimento: 10px 20px 10px 20px;}
Questo riempimento CSS che ciò creerebbe influenzerebbe tutti i paragrafi anche se non è stata specificata alcuna classe.