In questa lezione esaminiamo la struttura dei due fogli di stile, "default.css" e "addon.css" per ottenere degli effetti personalizzati.
default.css
Per modificare i file, innanzi tutto dovremmo aprirli con un editor di testi. Cominciamo ad esaminare le parti principali del codice di "default.css".
margin-top:0px;
margin-bottom:0px;
margin-left:10px;
margin-right:10px;
font-family:Geneva, Arial, Helvetica, sans-serif;
text-align:left;
font-size:1.0em;
color: #999999;
background-color: #D6DFEF; background-image: url(sfondo.jpg);
background-repeat: repeat-x; background-position: top;
}
Definiamo i margini delle pagine, i font da utilizzare, il tipo di allineamento, la grandezza del carattere, il colore del carattere, il colore e l'immagine di sfondo, il numero di volte che lo sfondo deve essere ripetuto all'interno della stessa pagina e la sua posizione.
Dalla lista dei font
Questo codice, serve invece a personalizzare la struttura della tabella
table,td { border-style:none; }
table { width:100%; margin:0px; border-collapse:collapse; }
td { padding:0px; vertical-align:top; }
Il codice:
a { text-decoration: none; color: #003366; }
a:hover { text-decoration: underline; color: #999999; }
serve a personalizzare il colore dei i link
Per specificare la grandezza del font
.small { font-size: 9px; }
Per la personalizzazione del testo di alcuni messaggi
Per modificare la grafica dei campi usiamo:
Se invece vogliamo personalizzare la grafica del testo relativo al copyright del nostro sito, dobbiamo modificare la riga:
Personalizziamo i bottoni:
L'intestazione delle pagine web:
Il codice:
serve a personalizzare le linee delle tabelle presenti nelle nostre pagine web, permettendo una organizzazione più compatta ed usabile (oltre che leggibile) dei contenuti per gli utenti.
Il codice:
serve a definire il testo di default del nostro sito.
Per definire le caratteristiche delle tabelle di ASPNuke:
Per definire le intestazioni delle tabelle:
Per la personalizzazione delle righe e delle colonne delle tabelle:
Per personalizzare il testo citato (abbiamo parlato di come citare il testo nella lezione relativa all'inserimento degli articoli) modifichiamo la riga:
La riga:
#TopPage { height: 60px; }
ci permette, mediante l'utilizzo degli ID delle tabelle, di definire le caratteristiche di ogni tabella.
#MainPage { height: 60px; }
Ci permette di personalizzare il corpo delle tabelle.
#Display { height: 450px; }
Serve a definire il centro della pagina, dove di solito vanno inseriti i contenuti della pagina.
addon.css
Adesso apriamo il file "addon.css" e ne analizziamo brevemente il codice:
background-color: #fff8dc;
border-bottom: #000000 1px solid;
border-left: #000000 1px solid;
border-right: #000000 1px solid;
border-top: #000000 1px solid;
font-size: 12px;
font-weight: normal;
font-family: verdana;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: justify;
text-decoration: none
}
questa porzione di codice, ci permette di definire le dimensioni e le caratteristiche del tag HTML <h6>
Questa porzione di codice
Se troviamo qualche difficoltà a capire delle parti del codice CSS possiamo trovare aiuto nella Sezione CSS di HTML.it
Una volta individuate le parti da modificare non facciamo altro che dar sfogo alla nostra creatività.
