I FOGLI DI STILE CSS (CASCADING STYLE SHEETS) Gli stili rappresentano un metodo per definire come il browser debba visualizzare i tag HTML. Il loro vantaggio è che possono essere utilizzati a differenti livelli: si possono inserire tutti gli stili in un file separato aumentando la facilità e la velocità di modifica degli stessi su più pagine oppure si possono inserire gli stili in cima a una singola pagina applicandoli solo ad essa; oppure si possono includere gli stili all'interno dei tag stessi tramite l'attributo style. Creare gli stili per la pagina: il tag <style> deve essere incluso fra i tag <head> e </head>. L'attributo type indica il tipo MIME per il foglio di stile: text/css è l'unico valore che si utilizzerà. Il corpo del foglio di stile consiste in una serie di direttive che seguono una precisa struttura: selettore { proprietà: valore; proprietà: valore;... } Ciascuna regola consiste in un selettore seguito da un elenco di proprietà e valori associati ad esse racchiuse tra parentesi graffe e senza limite di numero separate l'una dall'altra da un punto e virgola. I selettori possono coincidere con i normali tag HTML come <h1> <p> <div>... Creare fogli di stile per un intero sito: è possibile registrare tutte le informazioni di stile in un file e applicarle a più file contemporaneamente. Un file CSS è praticamente solo il corpo di un tag < style> separato dal resto della struttura HTML di una normale pagina e salvato con estensione.css. Una volta creato il file con il foglio di stile lo si può inserire in una pagina utilizzando il tag <link> : <link rel="stylesheet" href="url del file di stile.css" type="text/css" /> L'attributo type è lo stesso del tag <type> l'attributo href è lo stesso del tag <a>. E' possibile inserire i collegamenti a più di un foglio di stile in una pagina. I SELETTORI - tag HTML: un tipo di selettori è rappresentato dai tag HTML. Le regole per quel selettore verranno applicate a tutte le istanze di quel tag nella pagina o nelle pagine. tag { proprietà: valore; proprietà: valore;... } E' possibile applicare a più selettori le stesse proprietà. tag tag { proprietà: valore; proprietà: valore;... } - selettori contestuali: vengono usati per applicare gli stili agli elementi solo quando questi sono nidificati all'interno di altri elementi specificati: 1 / 5
tag_contenitore tag { proprietà: valore; proprietà: valore;... } In caso di conflitti gli sti li nidificati sovrascrivono gli stili generali. - classi e identificatori: a volte la selezione per tag non è molto specifica ma è necessario creare una propria classificazione da utilizzare con i CSS. Ci sono due attributi supportati da tutti i tag HTML: "class" e "id". L'attributo class serve ad assegnare gli elementi a interi gruppi di tag mentre l'attributo id è utile per assegnare un identificativo a singoli elementi specifici. La sintassi di una regola è:.nome classe { proprietà: valore; proprietà: valore;... } Se si vuole riservare una formattazione solo a un tag della classe specificata è possibile includere il nome dell'elemento HTML oltre quello della classe: tag.nome classe { proprietà: valore; proprietà: valore;... } Per applicare una classe ad un tag nella pagina: <tag class="nome classe"> testo o altri tag </tag> Se si desidera applicare gli stili solo ad un elemento in un foglio di stile è bene assegnargli un id : <tag id="nome id"> testo o altri tag </tag> Le regole CSS da applicare ad un elemento vanno scritte facendo riferimento al suo id: #nome id { proprietà: valore; proprietà: valore;... } E' possibile mescolare diversi tipi di selettori così come è possibile nidificarli. UNITA' DI MISURA Esistono 4 tipi di misure specificabili nei CSS: unità di lunghezza unità percentuali unità di col ore e URL. Esistono due tipi di unità di lunghezza: assolute (corrispondono a unità di misura del mondo reale) e relative (basate su unità di misura più arbitrarie solitamente più utilizzate; fra queste rientra anche l'unità "pixel"). Le unità percentuali devono essere utilizzate in considerazione del fatto che bisogna specificare il contesto affinché possano essere calcolate (nel senso: la percentuale di cosa?). Gli URL si specificano così: url(url del file). PROPRIETA' DEI RIQUADRI DI TESTO Prima di procedere con le proprietà dei riquadri di testo è bene soffermarsi sugli attributi che definiscono gli stili (interni o esterni) del testo: - text-decoration: underline overline line.trough blink none; - font-style: normal italic oblique; - font-weight: normal bold bolder lighter 100-900; - font-family: nome o nomi di carattere; - font-variant: normal small-caps; - text-align: left right center justify; - font-size: valore numerico con relativa unità di misura; - line-height: normal valore con relativa unità di misura. 2 / 5
Queste proprietà possono essere inserite all'interno dei tag come <div> o <span> oppure come coppia di proprietà-valore nei fogli di stile. Esistono altre proprietà per il testo. Per i riquadri di testo esistono altre proprietà utilizzate per posizionare gli elementi controllare lo spazio bianco attorno ad essi e applicare loro effetti grafici. Per lavorare sui riquadri di testo è possibile utilizzare il tag <div> perché non modifica assolutamente l'aspetto delle pagine ma è solo un contenitore al quale si può applicare uno stile. - Le dimensioni: la dimensione di un riquadro viene controllata da due proprietà: width e hei ght in termini assoluti o relativi alla finestra del browser. - I bordi: con i CSS è possibile applicare i bordi a qualsiasi elemento. La sintassi delle proprietà del bordo sono le seguenti: border: width style color; Quando si usa la proprietà border da sola ad essa possono essere associate tre variabili. - width è l'ampiezza della linea che disegna il bordo e che può assumere come valori un numero con la sua unità di misura o valori predefiniti (thin medium thick. - style assume i seguenti valori: none (nessuno stile) dottet (a punti) dashed (tratteggiato) solid (solido) double (doppio) groove (scalanatura) ridge (cresta) inset (incavato) outset (in rilievo). - color identifica il colore del bordo. Esistono molte altre proprietà. E' possibile impostare individualmente lo stile di ciascun lato utilizzando: border-top border-right border-bottom border-left. border-top: thin double black; - I margini: la proprietà margin controlla lo spazio bianco tra il bordo e il blocco che lo include..nome classe { margin: 10 px; } - La spaziatura: la proprietà padding controlla lo spazio bianco attorno al bordo..nome classe { padding: 10 px; } 3 / 5
- Il posizionamento: per avere pieno controllo sugli elementi è necessario selezionare prima uno schema di posizionamento con al proprietà position. Esistono 4 schemi di posizionamento: static relative absolute e fixed. - static: è lo schema predefinito in virtù del quale gli elementi vengono posizionati da sinistra verso destra e dall'alto verso il basso. Il valore static (statico) è il valore di default e sarebbe uguale alla posizione dell elemento nell esempio del flusso normale. L elemento statico non può essere mosso della sua posizione. - relative: permette di posizionare l elemento in base al suo div contenitore. Contrariamente alla posizione assoluta le dichiarazioni top bottom left e right non rappresentano punti fissi di posizionamento ma sono basate sulla posizione naturale dell elemento indicandone lo spostamento. - absolute: permette di rimuovere l elemento dello flusso normale della pagina per potere posizionarlo tramite le dichiarazioni top bottom left e right in unità di misura. L elemento assoluto è posizionato in rapporto al suo div contenitore solo se lui stesso ha la sua proprietà position impostato con un valore altro che static. - fixed: Come per la posizione assoluta il valore fixed (fisso) permette di rimuovere l elemento del flusso normale della pagina per potere posizionarlo con le dichiarazione top bottom left e right. La differenza tra di loro è che l elemento fisso si posiziona sempre in base a l elemento HTML (l area visiva della finestra del browser) e mai ad un suo eventuale elemento contenitore. Essendo fisso questo elemento rimanerà sempre alla sua posizione anche se il resto della pagina è scorrevole. Un elemento fixed può essere riposizionato usando top bottom left right (come per absolute ) ricordandosi che sarà sempre in relazione alla finestra browser. Una volta scelto lo schema di posizionamento è possibile impostare la posizione degli elementi. Ci sono 4 proprietà per il posizionamento: top left bottom right. Assumono valori 4 / 5
corrispondenti alla distanza tra il lato indicato e il lato del blocco che li racchiude..nome classe { position: relative; left: 50 px; top: 50 px; } PROPRIETA' DELLE TABELLE Le proprietà delle tabelle possono essere gestite dai tag <table> <tr> e <td>. Una volta individuata la classe o il tag è possibile applicare gli attributi per il padding border background-color text-align margin border border-left border-top border-righ t border-bottom ecc. PROPRIETA' DI BODY E' possibile applicare qualsiasi stile ad una pagina applicandolo al tag <body>. Per sostituire le informazioni generali finora applicate con l'html è possibile usare il seguente listato come esempio: body { font-family: nome font; color: colore; background-color: colore; margin: valore px; background-image: url (URL del file immagine); background-position: posizione dell'immagine di fondo; background-attachment: scroll o fixed; background-repeat: repeat-x o repeat-y o repeat o no-repeat;... } PROPRIETA' DEI LINK Per i collegamenti è possibile impostare diverse proprietà grazie ai CSS per diversi tipi di link. a: link { color: colore; } a: activate { color: colore; } a: visited { color: colore; } a: hover { color: colore; } E' possibile specificarte una classe per i vari link: a.nome classe: link { color: colore; } All'interno delle proprietà per i font è possibile inserire anche le proprietà normalmente usate per il testo normale (come font-weight text-decoration) o per altri tag (background-color). 5 / 5