Dimensione del bordo CSS
Esempio 01: Utilizzo del tag di stile CSS per ridimensionare un bordo in un file HTML
In questo esempio, modificheremo le dimensioni di un bordo di un contenitore di div usando CSS nel tag principale in un file HTML. Definiremo una funzione universale per tutti i contenitori div che verranno creati in questo file per avere lo stile di editing predefinito che definiremo nella sezione Div presente nel tag di stile. Quindi, per svolgere questo compito, genereremo il seguente script:
Come possiamo vedere nello script sopra di un file HTML, abbiamo aperto un tag di stile in cui viene chiamato un div che ha diverse proprietà definite una per una. Il primo è l'imbottitura, che darà al contenitore Div uno spazio tra la pagina del browser e dei bordi. Quindi abbiamo chiamato la proprietà del bordo stesso e, in questa proprietà, definiremo le dimensioni del bordo e del tipo di bordo; Nel nostro caso, è impostato su "1px" e "solido."Quindi abbiamo aggiunto kit Web che supporteranno i browser più comunemente usati nella stessa funzione di proprietà. Quindi abbiamo chiuso lo stile e la tag della testa e abbiamo aperto il tag del corpo. In questo tag, abbiamo menzionato tutto ciò che sarà presente nella pagina una volta aperto questo file in un browser.
Abbiamo aggiunto un'intestazione usando il tag "H2" e abbiamo anche aggiunto un contenitore di div con un po 'di testo. Questo contenitore Div erediterà tutte le proprietà definite nel tag di stile, che è presente nell'intestazione del file. Questi tag saranno chiusi dopo questo. E ora salveremo questo file in ".Formato HTML "e aprilo nel browser per vedere il seguente output:
Come possiamo vedere nell'uscita sopra, sono presenti l'intestazione e il contenitore di div e il bordo del contenitore è anche mostrato con una dimensione sottile insieme ad un po 'di testo in esso.
Ora modificheremo lo script sopra e apporteremo modifiche alla dimensione del bordo nel tag di stile della sezione di intestazione per visualizzare la differenza tra la dimensione del bordo del contenitore.
Abbiamo regolato le dimensioni da "1px" a "5px" nello script sopra per generare un bordo più spesso per il contenitore. Osserviamo ora come questo cambiamento appare nel nostro browser quando eseguiamo lo script.
Come possiamo vedere nell'output sopra che la dimensione del bordo è ora spessa rispetto all'output precedente.
Esempio # 02: creazione di una classe in tag in stile CSS per controllare le dimensioni di un bordo in un file HTML
In questo esempio, creeremo una classe speciale di stile CSS in cui definiremo ogni aspetto dello stile che vogliamo in tutto il file. Questo è un metodo molto utile perché possiamo distinguere diversi progetti in un singolo file HTML e classificarli in classi diverse. In questo esempio, classificheremo lo stile di un bordo di qualsiasi contenitore. Per raggiungere questo obiettivo, scriveremo il seguente script:
Come possiamo vedere in questo script, abbiamo aperto un tag di stile nell'intestazione del file HTML. In questo tag di stile, abbiamo creato una classe per lo stile del tag paragrafo in cui abbiamo definito due proprietà per il bordo, che sono stile e larghezza. La proprietà di stile è impostata su solida, il che significa che il bordo sarà una linea uniforme, retta e la proprietà di larghezza è impostata su sottile, il che significa che la dimensione del bordo sarà sottile. Dopo questo, abbiamo chiuso lo stile e la tag della testa e ci siamo mossi verso il tag del corpo. Nel tag del corpo, abbiamo dato un'intestazione e un paragrafo alla pagina HTML. Nel tag paragrafo, abbiamo chiamato "P.classe BW1 ", che ha le proprietà di frontiera predefinite in essa. Chiuderemo i tag e salveremo questo file in modo da poterlo eseguire sul nostro browser.
Dopo aver eseguito questo script sul nostro browser, otterremo l'output sopra. Come possiamo vedere, la classe di stile per il tag paragrafo ha aggiunto un bordo solido e sottile al paragrafo presente nel corpo.
Ora variemo le dimensioni del bordo presente nella sceneggiatura sopra e osserveremo l'effetto di queste variazioni sul bordo.
In questa situazione, abbiamo modificato la larghezza da sottile a medio e dopo aver eseguito questo script, otterremo il seguente output:
In questo output, la dimensione del bordo è cambiata da sottile a media ed è ora molto più visibile. Successivamente, cambieremo le dimensioni da medio a spessa, come mostrato nella sceneggiatura in basso:
Dopo aver eseguito questo script, otterremo il seguente output:
Dopo aver cambiato la larghezza a spessa, possiamo vedere che il bordo è di dimensioni molto più ampie e abbastanza facilmente visibile.
Esempio # 03: Utilizzo del foglio di stile CSS di coda per modificare le dimensioni del bordo usando la classe di bordo
In questo esempio, useremo il foglio di stile CSS di coda per cambiare le dimensioni di un bordo usando una classe di bordo definita in questo foglio di stile. La classe di frontiera ha diverse dimensioni predefinite per il confine, che esploreremo in questo esempio implementandolo nel blocco note++.
Nello script sopra, aggiungeremo il collegamento al foglio di stile CSS di coda utilizzando il tag link nell'intestazione del file. Quindi apriremo l'etichetta del corpo e lo daremo. Quindi apriremo il tag DIV, che chiameremo la classe di Border-2 con il codice colore del bordo, quindi il tag di paragrafo avrà il testo del corpo del contenitore Div racchiuso in esso. Ora salveremo questo file e lo apriremo sul nostro browser per vedere come risulta il confine.
Come possiamo vedere che la dimensione del bordo è molto sottile e può essere regolata a una dimensione più grande, quindi aumenteremo le dimensioni chiamando la classe bordo-8 e vedremo come cambia la dimensione del bordo.
Come possiamo vedere nello snippet sopra, il bordo è ora più spesso di prima a causa della classe Border-8.
Conclusione
In questo articolo, ci siamo concentrati sull'attributo "dimensione" CSS di un bordo. La dimensione del bordo è comunemente specificata con due identificatori: pixel e rappresentazione testuale, come "sottile", "medio" e "spessa."Abbiamo discusso di diversi metodi per modificare la dimensione del bordo usando CSS in un file HTML in questo articolo. Abbiamo usato l'ambiente Notepad ++ per modificare il nostro file HTML e implementare i metodi CSS convenzionali di tag di stile e classe di stile per modificare le dimensioni di un bordo. Abbiamo anche usato il foglio di stile CS di coda per chiamare le sue classi di confine che hanno fornito dimensioni diverse per il bordo di un contenitore e possono essere chiamati tramite stile CSS in linea.