UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.

Transcript

1 UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come <p> o <a>. Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui vengono applicati, come il colore o il carattere tipografico. Facciamo partire il programma TopStyle e apriamo il file PROVA.CSS contenuto nella cartella CSS. Apriamo anche il file INDEX.HTML sia sul browser sia in HTMLKIT. Nella colonna destra sono visualizzate tutte le istruzioni che possono essere messe, agendo sui tasti categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima. Vediamo di seguito quali sono le istruzioni principali e come possiamo intervenire per modificare il layout della nostra pagina. Ogni volta che facciamo una modifica e salviamo ricordiamoci di aggiornare la visualizzazione sul browser. HTML e BODY queste due istruzioni servono a dare uniformità alla pagina; ad esempio con font-family definiamo i font che possono essere usati ( il primo ed in alternativa gli altri); con font-size dichiariamo che i nostri font saranno grandi al 100% della grandezza dichiarata nel nostro pc e gestibili dal nostro monitor; con line-height dichiariamo l altezza dell interlinea; con letter-spacing dichiariamo lo spazio tra le lettere (queste due istruzioni sono necessaria per l accessibilità) CSS pag. - 1

2 CORPO Serve a definire il contenitore principale del sito, notate l istruzione padding: 0% 5% 0% 5%; che serve a lasciare uno spazio a destra e a sinistra. Ricordatevi che l ordine è TOP, RIGHT, BOTTOM, LEFT TESTATA Nel div testata sono definiti: border-style: solid none solid none; che serve a definire che tibo di bordo verrà disegnato, nel nostro caso avremo un bordo solo in alto e in basso border-color: #CCCCCC; definisce il colore del bordo attivato width: 100%; definisce la larghezza del contenitore height: 150px; definisce l altezze del contenitore padding: 10px 0px 0px 0px; definisce lo spazio tra il bordo e l inizio del testo. All interno del div TESTATA ci sono tre contenitori: LOGO che serve per inserire il logo della scuola. Deve posizionarsi a sinistra e in alto, ha delle misure precise ma soprattutto FLUTTUA (float)a sinistra dando così la possibilità ad altri elementi di potersi mettere alla sua destra NAV è il contenitore per il menu di navigazione orizzontale. Qui agendo sulla definizione dei colori possiamo modificarne l aspetto. Una istruzione importante è display: inline; che serve a mette gli elementi della lista in linea BOX con questo si definisce una classe per inserire il testo SETTORI Il div settori serve per il menu di navigazione orizzontale per i settori (gruppi) di informazioni del nostro sito. Anche qui agendo sulla definizione dei colori possiamo modificarne l aspetto. STRUTTURA Il div struttura è il contenitore degli elementi COLONNA DESTRA e PRINCIPALE Il comando principale è clear: both; che serve ad annullare tutti gli eventuale allineamenti inseriti con float PRINCIPALE Questo div contiene gli elementi: CORNICE che serve essenzialmente a creare una cornice colorata intorno al testo BOX è il contenitore del testo CSS pag. - 2

3 BRICIOLE è il contenitore delle indicazioni di movimento Gli elementi caratterizzanti si trovano nel div principale: float: left; con questa istruzione dichiariamo che questo div sarà allineato a sinistra a prescindere dall ordine di inserimento nell HTML questo ci permette (unito all allineamento destro del menu verticale ) di mostrare, nella visualizzazione solo testuale, prima il menu e poi il contenuto. Nell HTML inseriremo prima il menu e poi il testo. width: 79%; indica che il div principale dovrà occupare, a prescindere dal monitor e dalla risoluzione impostata solo il 79% del totale. COLONNA DESTRA La colonna destra si caratterizza per la presenza del classico menu verticale. Come detto prima l allineamento è forzato a destra float: right; e la larghezza è del 20% Facendo la somma i conti non tornano, si deve diminuire di 1px perché Internet Explorer lascia, sulla destra un margine di 1px.. Altro stratagemma utilizzato è quello di non inserire subito il menu ma incorporarlo all interno del box questo permette di definire I margini e il padding per ingannare explorer. Nel div menu abbiamo due istruzioni importanti: display: block; in questo modo il link occupa tutto lo spazio orizzontale, ma questo è vero per tutti tranne che per explorer, per superare questo limite si utilizzano le seguenti istruzioni: height:1em; line-height:1em; /* altezza del link: height e line-height devono avere il medesimo valore */ DOVE SONO La classe dove sono serve ad evidenziare la pagina aperta. PIE DI PAGINA Ne piè di pagine non ci sono particolarità tranne il riinserimento dell istruzione clear: both; MARCATORI DI TESTO Sono stati poi ridefiniti graficamente alcuni tag HTML come dt, ul, p, h2, ecc. Qui possiamo provare a modificarli per ottenere effetti diversi. Ricordatevi che nell HTML non è possibile inserire nessun alemento di impaginazione pertanto dovremo creare noi le classi in CSS che ci interessano; ES- questa classe ci permette di inserire un paragrafo (parola) al centro e in grassetto; p.centrato_neretto{ text-align: center; font-weight: bold; In HTML sarà richiamata ad esempio in questo modo: <p class= centrato_neretto > TESTO CHE VOGLIAMO </p> Nei vari abbiamo alcuni marcatori standard modificati graficamente; la particolarità stà Nell istruzione display:none; che ha l effetto di nascondere l elemento quando sono attivi i CSS (modalità grafica) e invece di mostrarli quando siamo in modalità testuale (CSS disattivati) CSS pag. - 3

4 LINK GENERICI Questo marcatore viene usato per i link all intero del testo. ESEMPIO Proviamo a creare un marcatore paragrafo allineato a destra: Posizioniamoci infondo alla pagina e scriviamo p.destra per inserire le parentesi graffe dobbiamo utilizzare i codici ascii: teniamo premuto il tasto ALT e digitiamo sul tastierino numerico 123 e lasciamo ALT, vengono inserite automaticamente entrambe. Posizioniamoci dentro e con il mouse, sulla finestra a destra, scorriamo l elenco troviamo textalign e nel menu a discesa selezioniamo right; il comando viene inserito p.destra { text-align: right; FOGLIO DI STAMPA Il foglio stile stampa.css serve a definire come e soprattutto cosa stampare. Spesso ci è capitato di stampare pagine da internet con risultati disastrosi, un sacco di colore, metà testo ecc. Inserendo le corrette istruzioni possiamo evitare ad esempio di far stampare il menu verticale destro o il piè di pagina. Ad esempio per disattivare la colonna destra in fase di stampa basta inserire div#colonna-dx { display: none; CSS pag. - 4

5 FOGLI STILE... 1 HTML e BODY... 1 CORPO... 2 TESTATA... 2 border-style... 2 border-color... 2 width:... 2 height... 2 padding:... 2 LOGO... 2 NAV... 2 BOX... 2 SETTORI... 2 STRUTTURA... 2 PRINCIPALE... 2 CORNICE... 2 BOX... 2 BRICIOLE... 3 COLONNA DESTRA... 3 display... 3 height... 3 DOVE SONO... 3 PIE DI PAGINA... 3 MARCATORI DI TESTO... 3 LINK GENERICI... 4 ESEMPIO... 4 FOGLIO DI STAMPA... 4 CSS pag. - 5