Proprietà CSS Padding-Left

Se sei mai stato uno studente di una programmazione web, allora devi aver provato i codici HTML e CSS. HTML è il linguaggio di markup ipertestuale utilizzato per fornire l'aspetto statico alle pagine Web. Mentre CSS sta per il foglio di stile a cascata per fornire l'aspetto estetico alla pagina web. La formattazione CSS ti consente di aggiungere un aspetto diverso alla pagina web, i.e. Aggiunta di record, imbottitura delle proprietà sinistro o destro, aggiungendo il colore di sfondo, dividendo la pagina in sezioni e molti altri. All'interno di questo tutorial, discuteremo dell'uso dell'opzione di imbottitura CSS nel codice di stile CSS, i.e. probabilmente spostando qualsiasi dati a sinistra.

Esempio #01:

Cominciamo con il primo esempio di utilizzo della proprietà di imbottitura-sinistra all'interno del CSS di un file HTML. Per questo, è necessario creare un nuovo file di blocco note "imbottitura" con il ".HTML "Estensione alla sua fine. Questo file può essere utilizzato all'interno del blocco note o in qualsiasi strumento linguistico come il codice Visual Studio, come quello che abbiamo fatto nella seguente immagine. Iniziamo questo file di codice HTML con il tag standard HTML "", seguito dal tag Head.

Il tag principale può contenere anche il tag del titolo. Per il momento, evitiamo l'uso del tag del titolo. All'interno del tag Head, utilizziamo il tag di stile per utilizzare lo stile CSS nel file HTML. L'etichetta del corpo segue le etichette di testa a partire dall'intestazione 1 alla direzione 6. All'interno dell'apertura delle intestazioni, utilizziamo la classe "PG" come identificatore per l'utilizzo del tag di stile. All'interno del tag di stile, utilizziamo l'oggetto di classe "PG" per ogni intestazione per lo styling. All'interno delle parentesi ricci, utilizziamo la proprietà di imbottitura a sinistra di CSS e la impostiamo su 100 pixel a sinistra dalla linea inizia. Ciò significa che i nostri titoli sono posizionati a 100 pixel lontani dall'inizio della linea invece di essere posizionati all'inizio della linea. Lo stile e la tag della testa sono completati qui.

Dopo aver salvato il precedente codice HTML, iniziamo a debug. Poiché questo file contiene il ".Estensione HTML ", viene aperta direttamente all'interno del browser predefinito selezionato alla prima esecuzione. La seguente uscita viene visualizzata nella pagina del browser contenente un totale di 6 titoli posizionati alla distanza di 100 pixel da sinistra all'inizio di ciascuna riga. Se rimuoviamo l'imbottitura sinistra dal tag di stile, le intestazioni iniziano dall'inizio di una linea.

Esempio #02:

Torniamo al codice HTML e aggiorniamo un po 'come mostrato nel seguente. Aggiungiamo una singola intestazione "H1" nel corpo seguendo i tag "Div". I tag "Div" vengono utilizzati per dividere la pagina in sezioni. Il primo tag "Div" è istanziato con il "id = div" e il tag "div" interiore al suo interno contiene la classe "Greydiv" per distinguerlo. Questo tag "div" contiene una semplice frase che afferma che questa sezione "div" è posizionata a 500 pixel da sinistra. Ora, all'interno del tag di stile del tag "Head", impostiamo la proprietà "rosa" di base per la pagina Web e posizioniamo l'intestazione 1 alla distanza di 500 pixel dal suo punto di partenza usando l'opzione di imbottitura-sinistra. Successivamente, aggiungiamo l'altezza e il colore di sfondo per la prima sezione "Div" di tutta questa pagina. La sezione "Div" interiore utilizzata dalla classe "Greydiv" viene utilizzata per impostare la larghezza "900" per questa sezione Div interna con la proprietà del colore di sfondo impostata su "LightGrey" e l'opzione di imbottitura-sinistra impostata su 500 pixel.

Ciò significa che il valore "Testo" della sezione Div interiore è posizionato a 500 pixel dal lato sinistro della pagina. Lo stile CSS è eseguito qui e questo codice è pronto per l'uso. Salviamo questo codice utilizzando CTRL+S ed eseguiamo questo codice utilizzando il pulsante "Esegui" nella barra delle applicazioni del codice Visual Studio. Il codice viene eseguito e il browser viene aperto per visualizzare il risultato per questo codice HTML.

La pagina Chrome mostra l'output per questo codice HTML come mostrato nella seguente immagine. Mostra che il colore della pagina è impostato su rosa e la prima sezione "div" viene aggiunta dopo l'intestazione 1, i.e. sezione di colore bianco. All'interno della prima sezione "div", viene generata un'altra sezione "div", i.e. sezione di colore grigio. Si può vedere che l'intestazione 1 e i dati all'interno della sezione della divisione interna sono posizionati a 500 pixel dal lato sinistro della pagina.

Esempio #03:

Abbiamo visto l'uso di "pixel" come unità per impostare il valore per un'opzione "imbottitura" nel codice HTML. Oltre a "PX", possiamo anche provare a utilizzare il carattere percentuale "%" per l'impostazione dell'opzione di imbottitura-sinistra nel CSS del codice HTML. Pertanto, abbiamo aggiunto una voce "H1" con il titolo "Nomi" e creato un elenco non ordinato di un totale di 5 elementi sulla nostra pagina web usando il tag "UL" per "Elenco non ordinato" e il tag "Li" per l'inserimento di ogni record nella lista.

La classe "Title" è specificata per l'intestazione 1 e la classe "Valori" è definita per l'elenco non ordinato. All'interno del tag "stile", impostiamo il valore di imbottitura sinistro per H1 e l'elenco non ordinato al 20% utilizzando i nomi delle classi definiti nei tag. Ora, salva il tuo codice per vedere i suoi risultati.

Dopo aver eseguito questo codice nel codice Visual Studio, viene avviato il browser Chrome e viene visualizzato il seguente output. Gli "nomi" che si dirigono insieme all'elenco non ordinato di 5 valori che contiene sono visualizzati come previsto, il 10 % di distanza dal lato sinistro. Ecco come l'opzione di imbottitura-sinistra può essere utilizzata per aggiungere i dati lontano dalla sinistra di qualsiasi pagina.

All'interno degli esempi precedenti, abbiamo provato il tag in stile CSS all'interno dello stesso file ma nella testa del file. Ora, utilizziamo il CSS Styling in linea per il seguente codice HTML. Quindi, all'interno del tag principale, utilizziamo solo il tag "Title" per aggiungere il titolo per questo file HTML, i.e. Imbottitura sinistra. All'interno del corpo di questo file, utilizziamo la stessa intestazione H1 e l'elenco non ordinato. Acconciamo l'intestazione 1 e l'elenco non ordinato in linea impostando i valori per l'opzione di imbottitura-sinistra al 12%. Abbiamo anche impostato il bordo verso l'intestazione 1 con il colore, viola blu. Salviamo il codice ed eseguiamolo utilizzando il pulsante "Esegui" del codice VS.

Dà il confine all'intestazione 1 - "nomi". Inoltre, l'intestazione e l'elenco non ordinato vengono visualizzati il ​​12% da sinistra della pagina.

Conclusione

Il paragrafo introduttivo di questo articolo elabora l'uso di CSS in HTML e mostra loro i modi per utilizzare l'opzione di imbottitura-sinistra al suo interno. Abbiamo discusso dei codici semplici ma eleganti dell'HTML nel codice Visual Studio per visualizzare l'uso dell'opzione di imbottitura. Abbiamo anche provato questa opzione con i caratteri "PX" e "%" nella sezione di stile separatamente per vedere come cambia l'output. Per questo, abbiamo provato a utilizzare lo stile CSS in linea e delineati per i codici HTML.