docqualcosa di basilare sui fogli di stile
download 
Reclamo Transcript
qualcosa di basilare sui fogli di stile
QUALCOSA DI BASILARE SUI FOGLI DI STILE
QUALCOSA DI BASILARE SUI FOGLI DI STILE
PREMESSA
Posso fare il possibile per spiegarti i fogli di stile in maniera chiara, ma si presume che tu conosca almeno i tag base
di una pagina web. Sennò io parlo e non sai di cosa.
A che cosa servono i fogli di stile?
Beh innanzitutto a occuparsi dello stile di una pagina senza dover selezionare per ogni cosa che scriviamo, per ogni
link il carattere, il colore, la grandezza, ecc. Ti pare poco? Se scrivi del testo con solo html devi selezionarlo e
determinare un sacco di parametri. E magari se fai un layout per blog, dove appunto non scrivi tu ma i codici di
splinder generano automaticamente il testo, come si fa? E poi si possono fare un sacco di effetti carini, per lo sfondo,
per i links, per il testo.
Come funzionano?
In linea di massima devi prendere un elemento ( p per quanto riguarda il testo <p> , ad esempio) e definirlo con tutto
quello che vuoi.
Se però ti interessa creare diversi tipi di “ p ” , per il testo normale, per il testo dei titoli e per il testo dei sottotitoli
devi dare un nome ad ogni tipo di p. ecco degli esempi.
<style type="text/css">
p {color: 000000; font-family: verdana; font-size: 10 px;}
.titoli {color: ff00ff; font-size: 16px; font-family: Verdana;}
--!>
</style>
Dove c’e’ p si tratta del testo ordinario. C’e’ definito il color, cioe’ il colore, il font-family, cioe’ il tipo di carattere, il
font-size, cioe’ la grandezza del testo.
Poi abbiamo la classe “titoli”, che ha un colore diverso ed e’ più grande.
Puoi chiamare le classi come vuoi e crearne quante ne vuoi per gestire tutto il testo presente in una pagina.
Per imporre poi a un testo di avere le caratteristiche che abbiamo prima definito nella <head> non dobbiamo fare
altro che scriverlo nel tag del testo
<p class=“NOMECLASSE”> testo </p>
file:///d|/Documenti/VaLeRy/collective/pcobsession/tutorial/css1.htm (1 of 4)13/03/2005 18.28.16
QUALCOSA DI BASILARE SUI FOGLI DI STILE
Quanti tipi di fogli di stile ci sono?
Tre tipi.
Un tipo di foglio di stile e’ quello che si mette dopo il tag <head> della pagina. Definisce tutti gli elementi della
pagina direttamente da lì. La sintassi sarebbe questa:
<style type="text/css">
ELEMENTO {VALORI}
--!>
</style>
Un altro tipo esterno alla pagina che conviene se devi definire brevemente tantissime pagine web tutte uguali.
Quando poi vuoi cambiare qualcosa dello stile, non so fare un carattere più scuro o cambiare l’immagine di sfondo
non devi metterti ad aprire tutte le pagine del sito. Ecco la sintassi, sempre dopo <head>
<link rel="stylesheet" type="text/css" href="NOMEFILE.css">
Questo va in ogni pagina. Mentre invece devi aprire a parte il notepad e devi scrivere a parte i valori, come ad
esempio così (senza ovviamente quella riga style type ecc.)
BODY {background-color: black;}
p {color: 000000;
font-family: 'verdana', 'verdana', verdana;
font-size: 10 pt;
font-weight: normal;}
.titoli {color: ffffff;
font-family: 'verdana', 'verdana', verdana;
font-size: 16 pt;
font-weight: normal;}
A:link {COLOR: #990000; TEXT-DECORATION: overline;}
A:visited {COLOR: #990000; TEXT-DECORATION: overline;}
A:active {COLOR: #990000; TEXT-DECORATION: overline;}
A:hover{color: #0000ff; text-decoration: overline;}
E poi si salva con l’estensione “ .css ” . In poche parole se il file si chiama “ procione ” bisogna scrivere “ procione.
css ”
Un ultimo tipo di foglio di stile e’ quello in linea. Cioè in pratica direttamente nel tag del testo. Dopo style= si
mettono le virgolette e si scrivono gli elementi con i loro valori, separati prima dai due punti e poi dal punto e
virgola.
<p style="color: 000000; text-decoration : overline;">
A mio parere e’ una cavolata :D
file:///d|/Documenti/VaLeRy/collective/pcobsession/tutorial/css1.htm (2 of 4)13/03/2005 18.28.16
QUALCOSA DI BASILARE SUI FOGLI DI STILE
Che differenza di programmazione c’e’ con l’html?
Quasi nessuna. L’uguale dell’html ( = ) si trasforma in due punti ( : ), nei percorsi delle immagini non ci sono più le
virgolette ( “ ” ) ma l’apostrofo ( ‘ ), e si può dire che i valori dei colori non necessitano più gli asterischi ( # ). Inoltre
quando si tratta di fogli di stile interni ed esterni (non in linea) i valori vanno inseriti tra parentesi graffe ( { } ) che
si fanno premendo control, alt, shift e i due tasti dove ci sono le parentesi quadre (a uno a uno).
Piccolo riepilogo di ciò che e’ stato detto se ancora ti stai incasinando
Elemento: sono pochi, almeno quelli che so. :D Sono BODY, P, A… sono gli elementi che compongono una pagina:
testo, links, body…
Attributi: sono i valori per gli elementi. Colori, caratteri, sfondi, ecc…
Classe: un insieme di elementi che hanno tutti lo stesso nome, che si definisce nel foglio di stile, e le caratteristiche
che gli abbiamo imposto.
Foglio esterno: un foglio comune a tante pagine web, che si salva con l’estensione .css e si scrive sul notepad. Il
collegamento a questo foglio si trova in ogni singola pagina dopo il tag <head>.
Foglio interno: foglio all’interno della pagina, che si trova dopo il tag <head>.
Foglio in linea: foglio di stile applicato direttamente a un tag in particolare (ad esempio <p> )
L’elemento BODY
In body si mettono: sfondo, cursore, barra di scorrimento, margini.
Ecco i vari attributi:
●
●
●
●
●
●
●
background-color || colore dello sfondo: si aggiunge il codice del colore, senza #
background-image || immagine di sfondo
background-attachment || se lo sfondo deve scrollare con la pagina o rimanere fisso
background-repeat || se lo sfondo si deve ripetere, quanto e in che direzione
background-position || le coordinate di dove vuoi che precisamente si ripeta lo sfondo.
cursor || il cursore per il mouse
scrollbar-…-color || colore della scrollbar
L’ELEMENTO P
Cioè a dire il testo e le varie classi che possiamo creare dopo.
file:///d|/Documenti/VaLeRy/collective/pcobsession/tutorial/css1.htm (3 of 4)13/03/2005 18.28.16
QUALCOSA DI BASILARE SUI FOGLI DI STILE
●
●
●
●
●
●
●
●
●
●
color || il colore del testo
font-weight || se il testo deve essere grassetto, molto grassetto, normale o leggero
font-family || il font per il testo
font-size || grandezza del testo
font-style || se si vuole un testo corsivo o normale
background-color || se si vuole evidenziare il testo in un colore particolare si sfondo
text-transform || se si vuole che il testo sia tutto maiuscolo, minuscolo o con la prima lettera dopo ogni punto
maiuscola
letter-spacing || spazio tra ogni lettera
text-decoration || sottolineatura, sopralineatura, barratura
cursor || cursore sul testo
L’ELEMENTO A
Cioè a dire i links. I valori sono gli stessi del testo. Con la differenza che non c’e’ un solo elemento A ma ce ne sono
quattro, che sono
●
●
●
●
A:link || E’ un link immacolato, non visitato, sul quale nn sta passando il mouse e dal quale nn si sta aprendo
nessuna pagina.
A:active || E’ un link attivo, cioe che si visualizza nell’intervallo di tempo che passa tra il click e il
caricamento della pagina clikkata. Si può dire che se programmi cose leggere, e se soprattutto l’adsl si andrà
ancora diffondendo così tanto questo tipo di link diventerà inutile. Non vale neanche la pena, almeno,
secondo me, mettere dei valori diversi dal link sopra.
A:visited || E’ il link visitato.
A:hover || E’ quello su cui lavoreremo di più. E’ il link che compare quando gli passi il mouse sopra.
Per sapere come personalizzare questi valori vai nei tutorial appositi.
Valeria Farinella © 2005
[email protected]
http://www.caroprocione.too.it/
file:///d|/Documenti/VaLeRy/collective/pcobsession/tutorial/css1.htm (4 of 4)13/03/2005 18.28.16
Documenti analoghi
Riassunto CSS Tutorial - isis einaudi
Le tre proprietà descritte sopra possono essere messe
insieme in ogni elemento e produrre pertanto bordi diversi. p {
border-width: 1px;
Per mostrare questo vedremo un documento dove
border-style: ...
