Come Creare un Foglio di Stile (CSS)

Scarica PDF

Info sull'Autore

Scarica PDF

In questo Articolo:

Passaggi

Articoli Correlati

I CSS (Cascading Style Sheet), in italiano fogli di stile, rappresentano un sistema di codifica usato per gestire, in modo centralizzato, diversi aspetti e funzioni di tutti gli elementi presenti in un sito web. Ad esempio, apportando una sola modifica al codice del foglio di stile relativo all'elemento che corrisponde allo sfondo, si può modificarne il colore o l'immagine in tutte le pagine web che compongono un sito. Questo articolo mostra come creare un semplice file CSS per un sito web.

Passaggi

1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2d\/Create-CSS-Step-1.jpg\/v4-460px-Create-CSS-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2d\/Create-CSS-Step-1.jpg\/v4-728px-Create-CSS-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   1
   Avvia il programma "Blocco note" presente in Microsoft Windows. Puoi farlo tramite il menu "Programmi" di Windows oppure digitando la parola chiave "notepad" all'interno del campo di ricerca del menu "Start" per poi premere il tasto "Invio".
2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9e\/Create-CSS-Step-2.jpg\/v4-460px-Create-CSS-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9e\/Create-CSS-Step-2.jpg\/v4-728px-Create-CSS-Step-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   2
   Dalla finestra del programma "Blocco note" apparsa, accedi al menu "File" e scegli l'opzione "Salva con nome".
3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/Create-CSS-Step-3.jpg\/v4-460px-Create-CSS-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/Create-CSS-Step-3.jpg\/v4-728px-Create-CSS-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   3
   All'interno del campo "Nome file" della finestra di dialogo apparsa, digita un nome da assegnare al file in oggetto, che sia semplice e corto, quindi aggiungi l'estensione ".css", scegli il formato di file "Tutti i file" e premi il pulsante "Salva".

   • Il nome del tuo file CSS dovrebbe essere direttamente correlato al sito web a cui fa riferimento il foglio di stile che stai creando. Ad esempio se il nome di dominio del tuo sito web è "www.createcss.com", assegna il nome "createcss.css" al relativo file CSS.
4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d6\/Create-CSS-Step-4.jpg\/v4-460px-Create-CSS-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d6\/Create-CSS-Step-4.jpg\/v4-728px-Create-CSS-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   4
   Apri il file "index.HTML" del tuo sito web utilizzando il programma "Blocco note".
5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8f\/Create-CSS-Step-5.jpg\/v4-460px-Create-CSS-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8f\/Create-CSS-Step-5.jpg\/v4-728px-Create-CSS-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   5
   Inserisci il seguente codice prima del tag di chiusura "/head": < link rel="stylesheet" type="text/css" href="createcss.css" >.

   • Questa riga di codice indica al tuo sito web dove reperire le definizioni del foglio di stile da utilizzare.
6. 6
   All'interno delle pagine HTML del tuo sito, inserisci tutti quegli elementi necessari a realizzare il design che hai in mente, dopodiché usa il relativo foglio di stile per determinarne l'aspetto e lo stile.

   • Gli elementi presenti in un file CSS descrivono l'aspetto e lo stile di oggetti, tra cui ad esempio il tag HTML < DIV > utilizzato per creare una sezione delimitata, il tag < P > usato per creare un paragrafo o il tag < H1 > usato per identificare un titolo o un'intestazione di grandi dimensioni.
     {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a9\/Create-CSS-Step-6Bullet1.jpg\/v4-460px-Create-CSS-Step-6Bullet1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a9\/Create-CSS-Step-6Bullet1.jpg\/v4-728px-Create-CSS-Step-6Bullet1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   • All'interno del foglio di stile, puoi creare una definizione per descrivere l'aspetto di qualsiasi elemento compaia nelle tue pagine web. Ad esempio lo stile di carattere e la dimensione del testo da usare per il titolo e i paragrafi, l'immagine o il colore da usare per lo sfondo e qualsiasi altro aspetto di tutto ciò che è racchiuso fra i tag
     .

     {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ef\/Create-CSS-Step-6Bullet2.jpg\/v4-460px-Create-CSS-Step-6Bullet2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ef\/Create-CSS-Step-6Bullet2.jpg\/v4-728px-Create-CSS-Step-6Bullet2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
7. 7
   All'interno del tuo file "createcss.css", inserisci l'elenco di tutti gli elementi CSS, facendo seguire a ognuno una coppia di parentesi graffe "{ }".

   • Le regole presenti in un foglio di stile sono tutte caratterizzate da una serie di "proprietà" seguite dal relativo valore. Le "proprietà" identificano l'aspetto del relativo elemento HTML che si desidera modificare, ad esempio il colore dello sfondo. Il relativo valore rappresenta una grandezza numerica o il nome dell'entità da assegnare alla proprietà, nel nostro esempio il nome o il numero del colore da utilizzare come sfondo. La sintassi da utilizzare per la definizione è la seguente {property: value; }. Vediamo un esempio concreto:
     {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e3\/Create-CSS-Step-7Bullet1.jpg\/v4-460px-Create-CSS-Step-7Bullet1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e3\/Create-CSS-Step-7Bullet1.jpg\/v4-728px-Create-CSS-Step-7Bullet1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   • Se, ad esempio, hai deciso che lo sfondo di tutte le pagine del tuo sito web deve essere di colore blu, devi definire il seguente elemento "page { background-color: blue;}".
     {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c2\/Create-CSS-Step-7Bullet2.jpg\/v4-460px-Create-CSS-Step-7Bullet2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c2\/Create-CSS-Step-7Bullet2.jpg\/v4-728px-Create-CSS-Step-7Bullet2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
8. 8
   Ogni elemento presente nelle tue pagine HTML dovrà essere caratterizzato da un "ID" o "CLASS" distinto.

   • All'interno del foglio di stile, la dichiarazione di un attributo "ID" dovrà iniziare con il simbolo "#", mentre la dichiarazione di un attributo "CLASS" dovrà iniziare con il simbolo ".".
     {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cb\/Create-CSS-Step-8Bullet1.jpg\/v4-460px-Create-CSS-Step-8Bullet1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cb\/Create-CSS-Step-8Bullet1.jpg\/v4-728px-Create-CSS-Step-8Bullet1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   • Se desideri che il piè di pagina delle tue pagine web abbia un aspetto diverso dal resto della pagina, crea l'elemento "#FOOTER" all'interno del documento HTML usando la seguente sintassi < div id="footer"> e posizionando il codice all'inizio della sezione, dopodiché chiudi l'area in oggetto usando il relativo tag di chiusura < /div >.
     {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f4\/Create-CSS-Step-8Bullet2.jpg\/v4-460px-Create-CSS-Step-8Bullet2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f4\/Create-CSS-Step-8Bullet2.jpg\/v4-728px-Create-CSS-Step-8Bullet2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   • All'interno del tuo file CSS, "createcss.css", dichiara una regola di stile relativa all'id "footer" utilizzando la seguente sintassi "#FOOTER {font-size: x-small;}" (senza virgolette). In questo modo tutto il testo inserito nella sezione indicata con l'id "footer" verrà visualizzato con una dimensione dei caratteri molto piccola.
     {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5a\/Create-CSS-Step-8Bullet3.jpg\/v4-460px-Create-CSS-Step-8Bullet3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5a\/Create-CSS-Step-8Bullet3.jpg\/v4-728px-Create-CSS-Step-8Bullet3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   Pubblicità

Consigli

• Utilizzando i fogli di stile puoi gestire molti aspetti e proprietà delle tue pagine web. Individua un sito web dal design soddisfacente e visualizzane il codice sorgente. Se nella parte superiore della pagina, all'interno dei tag "HEAD", è presente il collegamento a un file CSS, puoi selezionarlo per visualizzarne il contenuto e osservare come vengono gestite le varie proprietà e come vengono assegnati i valori ai relativi elementi visualizzati.

Pubblicità

Avvertenze

• Copiare direttamente il codice HTML e dei fogli di stile di altre fonti può aiutarti a comprenderne il funzionamento, ma, a conti fatti, dovrai utilizzare il codice creato da te. L'uso di realizzazioni altrui corrisponde al furto e al plagio.

Pubblicità