Tutorial per la personalizzazione layout CSS

June 13

Tutorial per la personalizzazione layout CSS


Cascading Style Sheets (CSS) è un modo utile di personalizzare il layout del tuo sito web. CSS comporta una abbastanza semplice sintassi per lo styling singoli elementi Hypertext Markup Language (HTML). Uno dei modi più potenti di impiegare CSS è quello di utilizzare 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.

istruzione

1 Aprire un nuovo documento in Blocco note.

2 Designare l'elemento HTML che sarà modificato dal foglio di stile, seguito da una parentesi aperta. Ad esempio, se si vuole modificare un paragrafo (<p>) elemento nel CSS, inserire "p {" nel vostro foglio di stile.

3 Inserisci il cambiamento che si desidera mettere in atto la riga successiva, seguito da un punto e virgola. Ad esempio, se si desidera modificare tutti i contenuti paragrafo elemento grassetto, il CSS sarà simile a questa:

p {

font: bold;

}

4 Utilizzare una classe o ID per specificare le modifiche che potrebbero essere chiamati all'interno del vostro HTML indipendente HTML tipo di elemento. Una classe può essere utilizzato più volte ed è indicata da un ".", Mentre un ID può essere usato una volta ed è indicata da un "#". Per esempio:

.thrab {

font: bold;

}

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

5 Salvare il foglio di stile con l'estensione "css".

6 Aprire il file HTML in Blocco note.

7 Link al tuo foglio di stile all'interno della sezione <head> del documento HTML. Ad esempio, se il foglio di stile si chiama styletimeds.css, il tag collegamento dovrebbe essere simile

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

8 Specificare tutte le classi o gli ID applicabili nei loro appositi elementi HTML. 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">. In questo modo applicare le modifiche corrispondenti al contenuto di quel particolare <div>.

9 Salvare il documento HTML.

Consigli e avvertenze

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