Crea sfondo e bordo per tag HTML
In questo articolo, ti mostrerò come creare uno sfondo per i tag HTML, attraverso il quale saprai come utilizzare alcune proprietà CSS sullo sfondo.
Per creare un colore di sfondo per qualsiasi tag HTML, utilizziamo la proprietà background. Questo articolo l'ho presentato nella serie di apprendimento CSS, ma per tua comodità, oggi creerò una lezione completamente nuova. Puoi controllare l'articolo che ho collegato sopra per saperne di più.
1. Crea un colore di sfondo per i tag HTML
Supponiamo di avere un tag div , voglio creare uno sfondo e un bordo per esso, basta usare le proprietà di sfondo e bordo .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: red; height: 200px; } </style> </head> <body> <div> Nội dung bên trong </div> </body> </html>Aggiungi un bordo ad esso.
div{ background: red; height: 200px; border: solid 3px blue; }Come puoi vedere, lo sfondo di questo tag div ha una lunghezza del 100%. Il motivo è perché il tag div viene visualizzato come un blocco, quindi ha una larghezza del 100%. Se lo sostituiamo ora con un tag span, sarà completamente diverso.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> span{ background: red; border: solid 3px blue; } </style> </head> <body> <span>Thẻ span</span> </body> </html>2. Comprensione dei colori di sfondo e bordo
Per quanto riguarda i colori, puoi usare secondo le seguenti regole:
- Usa nomi inglesi come nero, bianco, rosso, blu…
- Usa il formato RGB come:
- rgb(255,0,0) = rosso
- rgb(0,255,0) = verde
- rgb(0,0,255) = blu
- rgb(0,0,0) = nero
- rgb(255.255.255) = bianco
- Usa il formato esadecimale come:
- #ff0000 = rosso
- #00ff00 = verde
- #0000ff = blu
- #000000 = nero
- #ffffff = bianco
- E alcuni altri formati come RGBA e HSL
Di solito utilizziamo il formato esadecimale, perché questo è il codice colore standard in Photoshop.
Ad esempio : imposta lo sfondo su rosso, puoi scrivere in uno dei modi seguenti.
background: red; background: #ff0000; background: rgb(255,0,0); 
