Informatica 3 Liceo Scientifico Scienze Applicate/CSS pag2 Progetto

Wikibooks, manuali e libri di testo liberi.
CopertinaInformatica 3 Liceo Scientifico Scienze Applicate/Copertina
  • I DataBaseInformatica 3 Liceo Scientifico Scienze Applicate/I DataBase
  • Modelli di DatabaseInformatica 3 Liceo Scientifico Scienze Applicate/Modelli di Database
  • Progettare un database relazionaleInformatica 3 Liceo Scientifico Scienze Applicate/Progettare un database relazionale
  • Modello ERInformatica 3 Liceo Scientifico Scienze Applicate/Modello ER
  • Modello RelazionaleInformatica 3 Liceo Scientifico Scienze Applicate/Modello Relazionale
    • Es Concessionaria MotoInformatica 3 Liceo Scientifico Scienze Applicate/Es Concessionaria Moto
    • Es Agenzia ImmobiliareInformatica 3 Liceo Scientifico Scienze Applicate/Es Agenzia Immobiliare
    • Es Mercato del PesceInformatica 3 Liceo Scientifico Scienze Applicate/Es Mercato del Pesce
    • Es1 PrenotazioneVaporettoInformatica 3 Liceo Scientifico Scienze Applicate/Es1 PrenotazioneVaporetto
    • Es2 InterrogazioniPianificateInformatica 3 Liceo Scientifico Scienze Applicate/Es2 InterrogazioniPianificate
    • Es2 TaglioFashionInformatica 3 Liceo Scientifico Scienze Applicate/Es2 TaglioFashion
  • Forme Normali Integrità ReferenzialeInformatica 3 Liceo Scientifico Scienze Applicate/Forme Normali Integrità Referenziale
  • Linguaggio SQLInformatica 3 Liceo Scientifico Scienze Applicate/Linguaggio SQL
  • Compito1Informatica 3 Liceo Scientifico Scienze Applicate/Compito1
  • Compito2Informatica 3 Liceo Scientifico Scienze Applicate/Compito2
  • Compito3Informatica 3 Liceo Scientifico Scienze Applicate/Compito3
  • HTMLInformatica 3 Liceo Scientifico Scienze Applicate/HTML
    • HTML tagInformatica 3 Liceo Scientifico Scienze Applicate/HTML tag
    • HTML formInformatica 3 Liceo Scientifico Scienze Applicate/HTML form
  • Mysql e EasyPhpInformatica 3 Liceo Scientifico Scienze Applicate/Mysql e EasyPhp
  • MySQL WorkbenchInformatica 3 Liceo Scientifico Scienze Applicate/MySQL Workbench
  • PHPInformatica 3 Liceo Scientifico Scienze Applicate/PHP
  • PHP tabellaInformatica 3 Liceo Scientifico Scienze Applicate/PHP tabella
  • PHP Es. ProgettiInformatica 3 Liceo Scientifico Scienze Applicate/PHP Es. Progetti
    • Programmi UtilizzatiInformatica 3 Liceo Scientifico Scienze Applicate/Programmi Utilizzati
    • Schema CollegamentiInformatica 3 Liceo Scientifico Scienze Applicate/Schema Collegamenti
    • Database ImpiegatoInformatica 3 Liceo Scientifico Scienze Applicate/Database Impiegato
    • Modulo CapoProgettoInformatica 3 Liceo Scientifico Scienze Applicate/Modulo CapoProgetto
    • Modulo ProgettiInformatica 3 Liceo Scientifico Scienze Applicate/Modulo Progetti
    • CSS pag1 ProgettoInformatica 3 Liceo Scientifico Scienze Applicate/CSS pag1 Progetto
    • CSS pag2 ProgettoInformatica 3 Liceo Scientifico Scienze Applicate/CSS pag2 Progetto
    • CSS pag3 ProgettoInformatica 3 Liceo Scientifico Scienze Applicate/CSS pag3 Progetto
    • CSS pag4 ProgettoInformatica 3 Liceo Scientifico Scienze Applicate/CSS pag4 Progetto
    • Realizzazione SitoInformatica 3 Liceo Scientifico Scienze Applicate/Realizzazione Sito
  • CSSInformatica 3 Liceo Scientifico Scienze Applicate/CSS

CSS inserimento dati personali[modifica]

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.

.form{
    font-family: 'Helvetica', Verdana, sans-serif;
    width: 500px;
    padding: 30px;
    background: #FFFFFF;
    margin: 50px auto;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);
}

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.

.form p{
    background: #4D4D4D;
    text-transform: uppercase;
    font-family: 'Open Sans Condensed', sans-serif;
    color: #797979;
    font-size: 18px;
    font-weight: 100;
    padding: 20px;
    margin: -30px -30px 30px -30px;
}

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;
  • E’ un blocco che non presenta alcun blocco e il suo sfondo non ha alcun colore, infatti è trasparente;
.form select 
{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    display: block;
    width: 100%;
    padding: 7px;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    margin-bottom: 10px;
    font: 16px Arial, Helvetica, sans-serif;
    height: 45px;
}

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.
.form textarea{
    resize:none;
    overflow: hidden;}

E’ la sezione che riguarda i bottoni che inviano i dati una volta scritti. Essi sono allineati al centro.

.form input[type="submit"]{
    -moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
    -webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
    box-shadow: inset 0px 1px 0px 0px #45D6D6;
    background-color: #2CBBBB;
    border: 1px solid #27A0A0;
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 14px;
    padding: 8px 18px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
}

In questa classe la funzione “input[type="submit"]:hover” fa sì che quando si passa sopra al bottone questo cambi colore.

.form input[type="submit"]:hover {
    background:linear-gradient(to bottom, #34CACA 5%, #30C9C9 100%);
    background-color:#34CACA;
}