Ordine CSS
Esempio
Cominciamo con la prima illustrazione di questo articolo per dimostrare l'uso della proprietà "ordine" dello stile CSS all'interno dell'HTML. È necessario un file di tipo "html" per aggiungere ed eseguire il codice HTML. Quindi, abbiamo creato un nuovo file, "Test.HTML ", all'interno della nostra cartella" Articoli "e lo ha aperto con il codice Visual Studio. Il codice HTML deve essere avviato con "
Inizieremo a spiegare questo esempio dal tag "testa" di base. All'interno di questo tag, abbiamo utilizzato le diverse proprietà CSS per particolari elementi HTML definiti in questo file HTML tramite il tag "stile". Innanzitutto, abbiamo disegnato il principale tag "Div" usato nel "corpo" della nostra pagina HTML tramite il suo ID specificato, i.e., "principale". I tag "Div" vengono sempre usati per dividere la pagina in sezioni o pezzi per separare alcuni degli elementi e dei contenuti di una pagina HTML da altri. Abbiamo usato la larghezza e l'altezza della proprietà per definire la larghezza e la lunghezza di questo elemento "div" nella pagina html in pixel, i.e., Larghezza 400px e altezza 70px.
Questa area "dib" conterrebbe il bordo solido di un bordo nero di cinque pixel attorno ad esso. Questo confine definirebbe il confine della principale area "div". Quindi, abbiamo usato l'ID principale del tag Div principale per applicare il CSS sui tag "Div" del bambino. Abbiamo impostato la larghezza su 100 pixel e l'altezza su 70 pixel per tutti e cinque i tag elementi "div" interni, che si troverebbero all'interno della sezione "Div" principale di questo tag HTML. Queste altezze e larghezze per gli elementi DIV interni ed esterni sono specificati per adattarsi allo stesso modo i cinque tag DIV all'interno del tag esterno. Successivamente, abbiamo usato i cinque ID tag DIV separatamente su cinque righe per modellare tutte le cinque sezioni "Div" di conseguenza e diversamente. Ecco che arriva la proprietà "ordine" dello stile CSS per ordinare i cinque tag DIV in base ai numeri. Il "div" marrone verrà visualizzato sul 3Rd, blu sul 5th, verde sul 2nd, viola sul 1st, e arancione sul 4th. Lo stile e il tag della testa si sono chiusi qui.
Cominciamo a spiegare il tag "corpo" di base utilizzato per definire e rappresentare gli elementi di base sulla pagina web del nostro browser. All'interno di questo tag, abbiamo usato il tag di intestazione principale della dimensione uno, il principale tag "div" e i cinque tag "div" dei bambini elencati uno dopo l'altro. Il principale tag "Div" è stato specificato con l'ID, "principale", per modellarlo all'interno del tag Head e può essere differenziato facilmente. I cinque tag "div" interni sono stati specificati con alcuni styling e i loro ID separati, io.e., Brown, blu, verde, viola e arancione.
Questi ID verrebbero utilizzati per modellare questi tag "div" separatamente nel tag di stile. Abbiamo disegnato tutti e cinque i tag usando l'elemento "stile" all'interno dell'apertura di tutti e cinque i tag DIV usando il metodo di stile CSS in linea. La proprietà in background-color è stata utilizzata per specificare separatamente i colori per tutti e cinque i tag DIV.e., Brown, blu, verde, viola e arancione. Questi cinque colori verrebbero riempiti nelle scatole create dagli elementi "div" sulla pagina web e sembravano fantastici sullo schermo. Il principale tag "Div" e il principale tag "corpo" sono stati chiusi qui. Inoltre, la nostra chiusura del tag principale "HTML" verrebbe utilizzata qui per terminare il codice HTML e farlo funzionare senza intoppi.
Innanzitutto, salviamo questo codice con Ctrl+s. Quindi, tocca il menu "Esegui" dalla barra delle applicazioni del tuo strumento di codice Visual Studio. Tocca l'opzione "Esegui senza debug" mostrato e seleziona il browser per continuare. Useremo il browser Google Chrome per eseguirlo.
La scheda di output del browser Chrome visualizza la seguente immagine di cinque parti Div all'interno di una "div" principale del bordo nero solido. La sequenza delle caselle "div" del bambino è la stessa che abbiamo descritto nella spiegazione di un codice, i.e., Purple 1st, verde 2nd, Brown 3Rd, Orange 4th, e blu 5th. Sebbene abbiamo definito la sequenza casuale di elementi "div" nello stile CSS, non influisce sull'uscita e viene visualizzata come definita nello stile.
L'illustrazione del codice precedente e il suo output della pagina web mostrano l'uso di numeri casuali all'interno della proprietà "ordine" per impostare i tag "div" su posizioni casuali. Quei valori per la proprietà "ordine" erano semplici numeri interi positivi. Quindi, non abbiamo problemi a usarli. Cosa se un utente cerca di impostare la proprietà dell'ordine con i valori negativi nel tag di stile? Proviamo questo per vedere i risultati. Quindi, abbiamo aggiornato il nostro codice per farlo. All'interno del tag di stile, abbiamo aggiornato il valore della proprietà "ordine" per ogni tag interiore "Div". Per Brown, sono 3. Per il blu, è -1. Per il verde, sono 2. Per il viola, è -2. Infine, per l'arancia, è 0. Questi valori definiscono l'indice di un elemento "div" principale. Salviamo questo codice per vedere.
Esecuzione di questo codice aggiornato nel browser Chrome, abbiamo il risultato di output aggiornato mostrato di seguito. Come abbiamo definito 0 per la proprietà dell'ordine del div "arancione", è stato visualizzato nel mezzo del div principale. Le etichette "div" verdi e marroni sono visualizzate sul lato destro dopo l'arancia "div". L'uso di -2 per Purple Div e -1 per Blue Tag ha visualizzato i tag "div" interni in base alla sequenza di numeri interi negativi.
Conclusione
Questo articolo contiene una spiegazione semplice e breve dell'utilizzo della proprietà CSS "Ordine" nel codice HTML. Per questo, abbiamo spiegato un breve esempio di codice HTML. Questo esempio conteneva l'uso di elementi "div" per elaborare correttamente il concetto di proprietà CSS "ordine". Abbiamo discusso dell'analisi dettagliata dell'utilizzo dei valori interi positivi per la proprietà dell'ordine e confrontarla con l'uso di valori interi negativi per la stessa proprietà.