• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Guida Le basi del CSS

Ketto93

Utente Mitico
Autore del topic
User Legend
12 Febbraio 2008
7.659
0
Miglior risposta
0
COS'E' IL CSS

<font color="Black"><font size="2">Il CSS (Cascading Style Sheets) è un file in formato .css, per l'appunto, che definisce le varie proprietà degli elementi che dovranno apparire nella pagina web. Per creare questi fogli di stile non c'è bisogno di file avanzati ma solo il blocco note e un po' di pazienza.


COME RICHIAMARLO

Per includere un qualsiasi codice CSS ad una pagina web si possono scegliere due modi:

- includerlo tramite un altro file in estensione css;

- scrivere il codice direttamente nel file html, tra il tag head. In seguito vedremo come fare;


Seguendo il primo caso, dovremmo creare il file css che in questo caso chiameremo stile.css.

Come faccio a dare l'estensione .css al file? Prendiamo come esempio il blocco note. Una volta terminato il lavoro clicchiamo su salva con nome..., dal menù a tendina scegliamo Tutti i file e salviamo il file creato con il nome di stile.css

Ecco il codice per includere il file css nella pagina:

HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Non credo ci sia da spiegare qualcosa in questo codice :emoji_smiley:

Ora vediamo il secondo codice, cioè, inserire il codice css direttamente nel file html/php

HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Anche qui non credo ci sia qualche problema :emoji_smiley:

Una volta incorporato il foglio di stile non ci resta che imparare a gestirlo nel file html.

Iniziamo col dire che i selettori del CSS (li vedremo più in là) possono essere definiti anche classi o ID.
Per richiamare un selettore del CSS nel file html bisogna usare questi codici:

HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
Ora vi chiederete perchè due stringhe. Per spiegarvelo devo cominciare a spiegare il CSS e quindi iniziamo :emoji_smiley:

Il foglio di stile è diviso in selettori. Questi selettori servono per definire le proprietà del blocco.

Ecco un esempio di selettore

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Analizziamo questo codice.
Prima del nome selettore va inserito un punto o un cancelletto (#). Questi due segni stanno ad indicare se il selettore è un classe o un ID e qui si ritorna al concetto dei div. Quando è presente il punto, il selettore è una classe, quindi si userà <div class="nomeselettore"></div>, mentre con il # si userà ID.

selettore è quello che verrà inserito qui: <div class="selettore"></div>. Non ha molta importanza. Proprietà1 sta ad indicare una proprietà del selettore.

Delle proprietà possono essere:

- font-family; (tipo del carattere, es: verdana, comic sans ms, ecc...)
- background-color; (colore che farà da background al contenuto del div)
- color; (colore del font contenuto nel div)
- height/width; (altezza/larghezza)
- border; (bordo del contenuto)
- float; (posizione del div)

Questi sono i più importanti, vediamo come usarli.

Font-Family

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Ogni tipo di carattere dovrà essere diviso con la virgola e uno spazio.

Background-Color

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Così si potrà assegnare un colore allo sfondo in codice esadecimale.
E' possibile anche definire un'immagine

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Color

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Si può assegnare un colore al font tramite codice esadecimale.

Border

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
1px: sta a significare la grandezza del bordo.
solid: sta ad indicare il tipo di bordo. C'è anche il bordo tratteggiato, il bordo con l'ombra e altre cosuccie molto carine :emoji_smiley:
#123456: sta ad indicare il colore del bordo

Float

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Bhè, la guida è terminata. Per altre proprietà usate il caro amico Google ^^
 
Ultima modifica:
Non posso ne darti il grazie ne la reputazione quindi telo dico letterlamente:

GRAZIE ^^
 
é molto semplice il CSS dopo aver imparato bene l'HTML