Un foglio di stile a cascata è una lingua che viene utilizzata per aggiungere effetti al linguaggio HTML. Senza CSS, HTML non è in grado di visualizzare i suoi contenuti nel modo in cui la pagina web deve essere. In altre parole, entrambe le lingue sono responsabili dello sviluppo e della progettazione di pagine Web. In questo articolo, spiegheremo una proprietà di CSS che è responsabile di dare tutte le dimensioni in un singolo set di proprietà, inserto. Queste dimensioni includono proprietà destra, in basso, superiore e sinistra di qualsiasi contenuto come testo o immagine, ecc.

Per spiegare il funzionamento della proprietà inserita, abbiamo utilizzato alcuni esempi di base nell'editor di testo utilizzando CSS in linea e interni. La sintassi di base utilizzata per la proprietà inserita è:

Non è necessario prendere tutti i valori nei pixel, % può essere utilizzato in alternativa. Allo stesso modo, l'ordine per la dimensione non è specificato. Può essere cambiato.

Esempio 1:

Per spiegare il funzionamento della proprietà CSS Inshet, creeremo alcuni contenuti HTML di base per formare una pagina Web di esempio. Senza styling di quali sono i semplici tag HTML, questo sarà visto dall'output. Questo viene fatto usando l'intestazione

un semplice testo audace e un paragrafo menzionato all'interno del div. Tutti questi tag sono scritti all'interno del tag del centro, questo tag allineerà tutti i contenuti di HTML al centro. Questo tipo di stile è in linea CSS.

Salva il codice con l'estensione HTML e aprilo nel browser. Vedrai che una pagina web statica è formata solo con il testo come intestazione e paragrafo.

Ora aggiungeremo CSS interni ai tag HTML sopra. Tutti i tag sono gli stessi ma hanno una dichiarazione di classe aggiuntiva.

Innanzitutto, creeremo una voce. Quindi, il testo in grassetto. Fare una pausa
. Questo tag è responsabile del salto alla riga successiva e della forma di spazio vuoto tra il testo semplice e il div. Un tag DIV viene utilizzato per creare un contenitore div per archiviare altri contenuti di HTML (come testo, immagini e ecc.,) dove viene dichiarato un paragrafo. Viene menzionato il nome di classe "uno" nel paragrafo in modo che tutti gli effetti dichiarati nel foglio di stile siano accessibili e applicati a questo paragrafo.

1

Chiudi il tag DIV e il tag centrale. All'interno della sezione Head, useremo un tag del titolo per dare un nome al sito Web. Questo titolo appare nella scheda del browser.

Usa il tag di stile. All'interno di quel tag, usa uno stile per l'intestazione. Abbiamo applicato un colore del carattere al testo dell'intestazione. Questo è un CSS interno. Allo stesso modo, Div viene utilizzato per applicare effetti su di esso. Innanzitutto, il colore di sfondo del div è impostato. Quindi, le dimensioni necessarie per le dimensioni del div vengono aggiunte per formare un effetto. Queste dimensioni includono valori di larghezza e altezza nei pixel.

Dopo aver applicato questi effetti, abbiamo creato una classe ",.uno ', il cui nome è stato menzionato nel tag paragrafo. La classe è dichiarata con un punto all'inizio che lo specifica come una classe.

La classe e gli ID in CSS HTML sono formati per applicare lo stile al contenuto HTML. Usando questo meccanismo, possiamo astenerci dallo stile CSS in linea che rende disordinato l'intero codice. Considerando che il CSS interno rende il codice di stile facilmente comprensibile e rende il codice breve. Dobbiamo solo aggiungere questo nome di Classe e IDS di CSS. In quei tag HTML specifici, dove vogliamo applicare gli effetti menzionati nella classe o ID, menzionati nei CS interni.

Tornando al ''.Una "classe, nella proprietà inserita per il paragrafo, abbiamo usato 4 valori in pixel. I valori possono anche essere menzionati in percentuale. Il valore dell'inserto contiene tutti i 4 valori superiore, destra, in basso e sinistra per il paragrafo da formare all'interno del contenitore div.

1 2 3 4 5

.uno Inserto: 10px 40px 30px 0px;

Questi 4 valori sono i valori di margine del testo di paragrafo perché questi valori allineano il testo all'interno del div. Il colore di sfondo è anche dato al paragrafo. Tutti i valori di inserto di allineamento sono solo per il testo all'interno del div.

Chiudi tutti i tag CSS e la testa e salva il file. Quando eseguiremo questo file nel browser, vedrai che vengono applicati tutti quegli effetti che vengono applicati al contenuto del corpo HTML, specialmente nella sezione paragrafo. E hanno aggiunto il colore di sfondo al paragrafo per mostrare gli effetti dei valori dell'inserto. Tutti i 4 valori di inserto vengono applicati al testo del paragrafo.

Esempio 2:

L'amplia è anche una sorta di contenitore di div che trasporta principalmente il testo in esso. Questi due contenuti HTML Div e Span sono disegnati attraverso CSS interni. Quindi prima elaboreremo la sezione di stile. Il contenitore Div viene applicato con il colore di sfondo, le dimensioni dell'altezza e della larghezza e con il colore del carattere. Questo stile CSS creerà un div con alcuni effetti.

Ora, la classe ".ExampleText ". Questa classe è accessibile dal testo di span solo all'interno del div. Il CSS di questa classe contiene una modalità di scrittura per il testo che è verticale in modo che il testo possa occupare meno spazio. Quindi, anche la proprietà inserita è impostata di conseguenza. Tutti i valori di inserto nei pixel sono forniti per mantenere la distanza marginale tra il testo e i confini di div.

1 2 3 4 5 6 7

.ExampleText Modalità di scrittura: Vertical-RL; Posizione: assoluto; Inserto: 40px 50px 30px 60px; Background-color: #F8FC08;

Dopo la sezione della testa, il corpo contiene solo il tag DIV e un tag di span all'interno del corpo del tag DIV.

Salva il codice ed esegui il file. Vedrai che il div e l'intervallo vengono visualizzati in base ai valori di inserto applicati al testo. I valori di inserto sono strettamente visualizzati per correggere il testo in esso.

Ora, se apportiamo alcune modifiche modificando i valori dell'inserto in modo tale da utilizzare solo 2 valori di inserto anziché 4, mentre tutti gli altri valori rimangono gli stessi, allora quale sarà l'immagine risultante?

1 2 3 4

.ExampleText inserto: 4px 8px;

Abbiamo impostato 4 e 8px. La pagina Web risultante conterrà il div e il testo che ha lo spazio vicino al div. Questo perché abbiamo rimosso due valori della proprietà inserita e anche i primi valori in alto a destra sono anche equivalenti a 0px.

Conclusione:

La proprietà CSS Insuet viene utilizzata per aggiungere valori alla dimensione del contenuto HTML collettivamente. Per elaborare questo concetto, abbiamo iniziato dando una panoramica di HTML e CSS e i tipi utilizzati in questo articolo. La proprietà inserita aiuta l'utente ad aggiungere margine al contenuto interno rispetto a quello esterno, avendo tutte e 4 le dimensioni collettivamente o eliminando qualsiasi valore dalla proprietà. Inoltre, vengono discussi due esempi per elaborare la funzione e il funzionamento della proprietà inserita in una pagina web.