Se si progetta un sito Web che incorpora CSS nel codice, è necessario conoscere il modello di box che utilizza CSS. Ogni elemento in un sito Web è considerato una scatola di un tipo o un altro, e CSS consente di modificare l'aspetto e la configurazione delle caselle in modi che non può corrispondere a semplice HTML. Utilizzando i CSS per modificare caselle del tuo sito, è possibile modificare completamente l'aspetto e il layout anche del sito modificando solo poche piccole parti del codice stesso.

Istruzioni

1

Creare un nuovo documento HTML vuoto in un programma di elaborazione di testo come blocco note.

2

Immettere il tag standard necessari per un documento HTML nel documento. Questi sono i tag HTML testa e corpo, e nell'ordine corretto dovrebbe assomigliare a questo: < html >< testa >< / testa >< corpo >< / corpo >< / html >.

3

Aggiungere un numero di righe vuote tra i tag body. Questo è dove metterete il codice per la tua casella di prova.

4

Creare una casella di testo in esso aggiungendo il codice seguente:

testo test < div > < / div >

È possibile sostituire "prova testo" con tutto quello che vuoi. Se si apre il documento HTML in un browser, ora, si vedrà il testo nella casella, ma la casella stessa sarà invisibile.

5

Aggiungere il codice riportato di seguito:

Style = ""

nell'apertura tag div, tra il div e la parentesi di chiusura. Dovrebbe assomigliare a questo:

< div style = "" > prova testo < / div >

Questo attributo di stile consente di inserire codice CSS all'interno del tag div HTML per interessare la casella. Tutto il resto del codice che si aggiungerà dovrebbe andare tra le virgolette.

6

Aggiungere il codice riportato di seguito:

sfondo-colore: giallo

per l'attributo di stile. Questo cambia il colore di sfondo della casella, quindi se si apre il documento ora, vedrete il vostro testo di prova in una casella gialla.

7

Aggiungere un punto e virgola dopo il codice di colore e aggiungere il codice

confine: solido

per lo stile. Questo aggiunge un bordo nero solido attorno alla scatola, rendendolo leggermente più grande. CSS casella confini sempre andare all'esterno delle loro scatole. È inoltre possibile aggiungere uno spazio dopo la parola "solida" e includere una misura di larghezza, ad esempio 5px, o un nome di colore o entrambi, per modificare l'aspetto del bordo.

8

Aggiungere un punto e virgola dopo il codice di confine e aggiungere il codice

padding: 5px

per lo stile. Riempimento di una casella è invisibile spazio tra i bordi della scatola e il contenuto effettivo all'interno della casella. Ingrandire la dimensione della spaziatura interna potrà rendere la casella stessa più grande, che deve ospitare più spazio vuoto all'interno di esso intorno al testo.

9

Aggiungere un punto e virgola dopo il codice di imbottitura e aggiungere il codice

margin: 20px

per lo stile. Il margine è simile a imbottitura, ma considerando che l'imbottitura è spazio vuoto all'interno della scatola, il margine è lo spazio vuoto intorno alla casella. Maggiore è il margine, lontano tutto intorno la casella verrà visualizzato.

10

Sperimentare con diversi numeri nei codici di confine, padding e margin per vedere come influenzano l'aspetto complessivo della casella. Ogni casella che si modifica con i CSS automaticamente ha questi tre componenti, nonché il contenuto stesso, ma se non si definisce loro aspetto nel codice, hanno una dimensione pari a zero e sarà invisibile.