# Esempio di Progetto PHP - CSS (superiori)
## CSS pag1 Progetto
### CSS intestazione pagina

L’elemento che contiene l’intestazione del nostro sito web si adatta alla risoluzione massima della finestra nel browser, inoltre si comporterà come un vero e proprio elemento <table>, prendendo le sembianze di una tabella.
I blocchi che esibiscono il nome di “messaggio” e “contenuto” presentano un colore bianco, testo allineato al centro, raggruppato in un riquadro che presenta un bordo di 1 px.
Questo è il risultato ottenuto:

## CSS pag2 Progetto
### CSS inserimento dati personali

Questo codice CSS lo troviamo nelle seguenti pagine del progetto: inserimento di un nuovo insegnante e di un progetto, la modifica e la visualizzazione di un progetto, la gestione di un progetto (visualizzazione, modifica e cancellazione) e le credenziali del capo progetto. Ecco riportato il codice: Nel primo riquadro notiamo che i comandi si riferiscono a ciascuna classe che si chiama form, i quali gli conferiscono un carattere helvetica (oppure Verdana o sans-serif) e delle dimensioni ben precise. Presenta inoltre dei margini. Essendo una classe, tutte le voci in essa raggruppate, sono raccolte in un box che a sua volta presenta delle sfumature (box-shadow) e tutti i numeri che vengono di seguito rappresentano delle parti fondamentali: il primo indica la posizione dell’ombra da sinistra a destra, il secondo indica sempre lo spostamento dell’ombra ma in questo caso in alto o in basso, il terzo numero indica la messa a fuoco dell’ombra cioè la sfumatura, mentre i numeri tra parentesi vanno ad indicare il colore che si vuole ottenere per l’ombra.
La seconda parte del codice fa riferimento a tutte le classi che hanno il nome “form p”, ovvero tutte le classi che fanno riferimento ad un particolare paragrafo. Anche in questo caso, come nel precedente, vengono utilizzati dei caratteri particolari, la classe presenta dei margini e una grandezza dei caratteri con le apposite dimensioni.
Questa parte riguarda una classe chiamata “select” e presenta le seguenti caratteristiche:
* La proprietà box-sizing viene utilizzata per indicare al browser quali sono le proprietà di ridimensionamento che dovrebbe includere;
* Un display che è bloccato anche se si scorre verso il basso o alto;
* È un blocco che non presenta alcun blocco e il suo sfondo non ha alcun colore, infatti è trasparente;
Questo blocco prensenta due proprietà:
* La proprietà “resize” che specifica se un elemento è ridimensionabile dall'utente;
* La proprietà “overflow”: per ritagliare i contenuti o per raggiungere le barre di scorrimento quando il contenuto di un elemento è troppo grande per entrare in un’area specifica.
È la sezione che riguarda i bottoni che inviano i dati una volta scritti. Essi sono allineati al centro.
In questa classe la funzione “input[type="submit"]:hover” fa sì che quando si passa sopra al bottone questo cambi colore.
Questo è il risultato ottenuto:

## CSS pag3 Progetto
### CSS menù di scelta

Questa parte indica una lista in cui sono raggruppati: l’inserimento, la modifica e i progetti del docente, ai quali vengono date delle dimensioni
Con questo comando le liste non risultano puntate.
Qui invece viene definito il carattere delle voci che fanno parte della lista.
Si riferisce sempre alla lista e in questa parte del codice possiamo notare che ci sono dei comandi che ci permettono di aumentare la dimensione del carattere e anche della riga quando si passa sopra il cursore del mouse, rimanendo sempre nel posto in cui si trovano.
Questo è il risultato ottenuto:
Qui puoi vedere il funzionamento della funzione:

## CSS pag4 Progetto
### CSS piè di pagina

È la parte della pagina in cui vi è la firma di colui che ha progettato l’ha progettata e tale parte ha uno sfondo grigio scuro con scritte bianche, testo allineato al centro e presenta dei bordi bianchi.
Questo è il risultato ottenuto: