Linea verticale CSS
Esempio 1
Stiamo usando il codice Visual Studio per generare un nuovo file. Il file vuoto si apre e dobbiamo scegliere una lingua. Prima stiamo facendo il codice HTML, quindi stiamo scegliendo la lingua HTML. Dopo questo, il file prodotto è un file HTML. Non abbiamo bisogno di dare un'estensione del file quando la salvi. Ora, metti i tag HTML di base (o puoi mettere il "!"Segna per la generazione automatica di questi tag). Se metti "!"E poi premi" Invio ", otterrai immediatamente tutti i tag fondamentali dell'HTML. Nel corpo, puoi vedere che esiste un intestazione e un contenitore. Il "V1" è il nome del contenitore. Colleghiamo anche questo file HTML con il CSS utilizzando il tag "link" nel "testa" di questo codice HTML.
Stiamo decorando l'intestazione e utilizzando la proprietà "decorazione del testo" e la staccando su "sottolinearsi". Quindi, utilizzando questa proprietà l'intestazione verrà sottolineata. Usiamo anche la proprietà "Color" che imposta il colore del testo dell'intestazione e lo imposta su "Blue-Violet". Nella riga successiva, abbiamo la proprietà "Font-Family" che abbiamo fissato come "Times New Roman". Quindi, posizioniamo il nome del contenitore Div che è "v1" e disegniamo la linea verticale in questo contenitore di div. Possiamo disegnare la linea verticale usando la proprietà "bordo".
Quindi, stiamo utilizzando questa proprietà "bordo-sinistra" che ci aiuta a disegnare una linea verticale. Poiché è la proprietà "bordo-sinistra", dobbiamo impostare la "larghezza", "tipo" e "colore" per questa proprietà a: "10px" nella sua "larghezza", "solido" in "tipo" e "Rosso" in "colore". Renderà una linea verticale sullo schermo di larghezza 10px e in rosso. Abbiamo anche impostato l '"altezza" di questa linea verticale come "400px". Ora, produrremo l'output di questo codice facendo clic sul pulsante destro del mouse e quindi selezionando "Apri nel browser predefinito". Oppure, è possibile utilizzare il collegamento che è "Alt+B" per ottenere l'output.
L'output è mostrato di seguito. Puoi vedere la linea verticale. Questa linea è resa sul lato sinistro poiché abbiamo usato la proprietà "bordo-sinistra" per disegnare questa linea verticale.
Esempio 2
Nell'esempio 2, aggiungiamo un paragrafo nel codice HTML sopra. Ora abbiamo un'intestazione, un paragrafo e un contenitore div in questo codice HTML. Dopo questo, stiamo procedendo al file CSS per la generazione del codice CSS.
Decorare un po 'l'intestazione applicando la proprietà "decorazione del testo" e impostandola su "tratteggiata" e usando "rosso" come valore della proprietà "colore". Il "algerino" è usato come "Font-Family". Ora, applica un po 'di stile al paragrafo e imposta la sua "dimensione del carattere" su "20px". Utilizziamo "verde" come valore della proprietà "colore". Inoltre, utilizza "Calibri" come "caramella di carattere". La parola chiave "audace" viene utilizzata qui come "font-peso".
Usa il div chiamato "v1" e metti la proprietà "bordo-sinistra". Questa proprietà aiuta a disegnare una linea verticale all'interno del contenitore div. La "larghezza" della linea verticale è "10px". Questa riga appare in tipo "solido" perché impostiamo "solido" come tipo di proprietà del bordo. Il colore della linea verticale è "arancione". L '"altezza" determina l'altezza della linea che abbiamo impostato come "400px". La "posizione" della linea verticale è "assoluta". Abbiamo impostato la "sinistra" sul "50%" in modo che questa linea verticale appaia sulla media del lato sinistro del 50% al centro. Il "margine-sinistra" è "-3px". Questa proprietà viene utilizzata per definire lo spazio all'esterno dell'oggetto sul lato sinistro. Abbiamo anche impostato la "parte superiore" della linea verticale come "50px".
La linea verticale appare al lato sinistro del 50% della schermata di uscita perché abbiamo impostato questo valore nel CSS e abbiamo utilizzato la proprietà "bordo-sinistra" per disegnare questa linea.
Esempio 3
Ora, disegneremo due linee verticali. Quindi, abbiamo messo due diversi contenitori di div in questo codice HTML. Useremo ogni div per disegnare linee verticali separatamente. L'intestazione e i tag di paragrafo sono gli stessi di cui sopra e cambiamo semplicemente il testo che è scritto nei tag di paragrafo.
In questo caso, la "famiglie di carattere" è "algerina" per l'intestazione. Imposta la "dimensione del carattere" del paragrafo su "20px" e applica più stile ad esso. Per il "colore", utilizziamo il "viola". Inoltre, usa "Times New Roman" come "famiglie di carattere". La parola chiave "audace" viene utilizzata come "font-peso". "Sottolineiamo" anche il testo del paragrafo usando "decorazione del testo". Usiamo la proprietà "bordo-sinistra" sul Div chiamato "V1."Questo attributo consente di disegnare una linea verticale all'interno del contenitore div. La "larghezza" della linea verticale è "12px" e la linea è "solida" in quanto il tipo di proprietà del bordo è "solido". In questo caso, la linea verticale è colorata "blu". L'altezza della linea specifica nella "altezza", che abbiamo messo a "400px". La "posizione" della linea verticale è "assoluta". Abbiamo impostato la "sinistra" sul "50 percento", quindi questa linea verticale mostrerà sul lato sinistro del 50 percento, che è al centro. Il "-3px" è il "margine-sinistra."Il" top "qui è" 130px ".
Ora, usiamo di nuovo le stesse proprietà per il secondo div nella creazione di un'altra linea verticale nel secondo div. Abbiamo impostato la proprietà "bordo-sinistra" su "12px Green solido" e "Altezza" per questa linea è la stessa della prima linea verticale che è "400px". Abbiamo impostato la sua proprietà "a sinistra" su "20%" e questa linea apparirà al 20% sul lato sinistro. Il "margine-sinistra" e la "parte superiore" sono uguali alla prima linea verticale.
Possiamo vedere che due linee verticali rendono sullo schermo di output. Entrambi sono resi in una posizione diversa nell'output mentre impostiamo questa posizione nel codice CSS.
Esempio 4
Mettiamo un'intestazione e un div nel corpo e scriviamo anche del testo nel contenitore. Disegneremo anche una linea verticale in CSS e collegheremo entrambi i file.
Regola la proprietà "decorazione del testo" su "sottolineare" e "verde" come "colore" per aggiungere ulteriore talento all'intestazione. La "famiglia del carattere" dell'intestazione è "algerina" in questo esempio ed è allineato nel "centro". Sul Div, utilizziamo l'attributo "bordo-destra". All'interno del contenitore Div, questo attributo consente di disegnare una linea verticale. La "larghezza" della linea verticale è "10px" e la linea appare "solida" poiché il tipo di proprietà del bordo è "solido". La linea verticale è colorata "Goldenrod" in questo codice. L '"altezza" indica l'altezza della linea, che abbiamo regolato a "500px". Usiamo il colore "marrone" per il "colore". Altera la "dimensione del carattere" del testo in "23px" e aggiungi ulteriori decorazioni ad esso. La parola chiave "audace" viene utilizzata come "font-peso" qui. Inoltre, come una "famiglia di caratteri", usa "sans-serif".
In questo screenshot, la linea verticale viene resa sul lato destro della schermata di uscita perché abbiamo utilizzato la proprietà "bordo-destra" in questo esempio.
Conclusione
Lo scopo di presentare questa guida è di aiutarti a capire la "linea verticale" in CSS. Abbiamo superato questa nozione in dettaglio e ti abbiamo dato diversi esempi di come abbiamo tratto questa linea verticale in CSS. Abbiamo spiegato che abbiamo utilizzato la proprietà "bordo-sinistra" o "bordo-destra" per rendere questa linea verticale nella schermata di uscita. Abbiamo scritto qui su come rendere le linee verticali. Abbiamo usato quattro esempi distinti qui e abbiamo dato l'output in questa guida.