Nwlapcug.com


Tutorial per la personalizzazione del Layout CSS

Tutorial per la personalizzazione del Layout CSS


Cascading Style Sheets (CSS) è un modo utile di personalizzazione del layout del tuo sito Web. CSS comporta una sintassi abbastanza semplice per lo styling di singoli elementi di Hypertext Markup Language (HTML). Uno dei modi più potenti di impiegare CSS è utilizzando un foglio di stile esterno. Un foglio di stile esterno è un file separato che viene chiamato dal documento HTML. Attraverso questa tecnica, più file HTML possono invocare lo stesso foglio di stile per le regole di formattazione.

Istruzioni

1

Aprire un nuovo documento nel blocco note.

2

Designare l'elemento HTML che verrà modificata dal foglio di stile, seguito da una parentesi aperta. Ad esempio, se si modificherà un elemento paragraph (< p >) nel foglio di stile CSS, immettere "p {" nel tuo foglio di stile.

3

Immettere il cambiamento che volete ricostruire nella riga successiva, da un punto e virgola. Ad esempio, se si desidera modificare tutti i contenuti dell'elemento paragrafo in grassetto, il tuo CSS sarà simile questo:

p {

carattere: grassetto;

}

4

Utilizzare una classe o un ID per specificare le modifiche che possono essere chiamate all'interno del codice HTML indipendente del tipo di elemento HTML. Una classe può essere utilizzata più volte e viene designata da un ".", mentre un ID può essere utilizzato una volta ed è indicato da un "#". Per esempio:

.thrab () {

carattere: grassetto;

}

Questo crea una classe denominata "thrab", che può essere chiamato all'interno del documento HTML.

5

Salvare il foglio di stile con l'estensione "CSS".

6

Aprire il file HTML nel blocco note.

7

Link al foglio di stile nella sezione < head > del documento HTML. Ad esempio, se il tuo foglio di stile è denominato styletimeds.css, il tag link dovrebbe essere simile

< link rel = "stylesheet" type = "text/css" href="styletimeds.css" / >.

8

È possibile specificare qualsiasi applicabile classi o ID nei loro elementi HTML appropriati. Ad esempio, se si desidera formattare un particolare < div > con le proprietà della classe thrab, il tag < div > dovrebbe essere rivisto come < div class = "thrab" >. Questo si applica le modifiche corrispondenti al contenuto di quella particolare < div >.

9

Salvare il documento HTML.

Consigli & Avvertenze

  • Ci sono innumerevoli modi di personalizzare il layout utilizzando i CSS. Per un elenco delle proprietà che possono essere in stile in CSS, vedere il link nei riferimenti.