FOGLI DI STILE (CSS: Cascading Style Sheets )
Transcript
FOGLI DI STILE (CSS: Cascading Style Sheets )
FOGLI DI STILE (CSS: Cascading Style Sheets ) 1 CSS , diversamente dall’HTML è case sensitive (fa distinzione fra maiuscole o minuscole) Per assegnare un valore a un attributo vengono usati i due punti ‘:’ laddove in HTML viene usato un uguale ‘=‘ Gli attributi consecutivi sono separati da ‘;’ (punto e virgola) invece che da ‘,’ come accade nell’HTML molti attributi sono divisi da ‘-’ anche se fanno parte integrante del nome stesso. 2 Ci sono tre modi con cui applicare i CSS ad un documento HTML: 1. direttamente su di un elemento HTML (fogli di stile in linea); 2. nell’header della pagina HTML (fogli di stile incorporati); 3. in un file esterno con estensione .css (fogli di stile esterni); 3 I fogli di stile in linea si utilizzano quando si ha la necessità di impostare uno stile a uno specifico elemento o blocco di elementi, senza che questo vada a influire sulle altre parti dello stesso documento. La sintassi generale è la seguente: <un_tag_qualsiasi_HTML style=“attributo1: valore1; attributo2: valore2;……; attributoN : valoreN; "> testo da formattare </un_tag_qualsiasi_HTML > 4 Esempio : vogliamo applicare ad un paragrafo <p> determinate caratteristiche ma con la certezza che queste non siano estese a tutti gli altri paragrafi <p> contenuti all'interno della stessa pagina web. Utilizziamo quindi lo stile in linea: <p style="text-align: justify; text-indent: 12px; color : blue;">Ciao a tutti</p> La frase “Ciao a tutti” (testo racchiuso fra i tag) avrà come stile: giustificato con una indentazione di 12 pixel e colore blu. 5 Con i CSS si adoperano solitamente due elementi di HTML che non hanno altro scopo che quello di fare da contenitore: DIV, caratterizzato dai tag <DIV> e </DIV> SPAN, caratterizzato dai tag <SPAN> e </SPAN> 6 DIV non lascia spazio prima e dopo la propria chiusura, ma, essendo un elemento di blocco, va a capo; SPAN, essendo un elemento inline non va a capo. L’elemento inline è, appunto, quello che non va a capo e continua sulla stessa linea del tag che lo include. Esempio <div style=“font-size:18px; font-family: Arial, Helvetica, sans-serif; color: green;"> tutto il blocco avrà colore verde, dimensione 12px e carattere arial </div> 7 I fogli di stile incorporati sono utilizzati quando allo stesso stile fanno riferimento diversi elementi nella stessa pagina HTML. Sarebbe estremamente dispersivo, oltre che laborioso, definire sempre lo stesso stile più volte all'interno della stessa pagina visto che servirebbe sempre per lo stesso identico scopo. Molto meglio definirlo una sola volta, ad inizio pagina. In questo caso le istruzioni non dovranno più essere inserite all'interno di uno specifico elemento come abbiamo visto nella spiegazione in linea ma saranno dichiarate ad inizio pagina, usando i tags <style> e </style> posto all'interno della sezione <head> </head> 8 La sintassi generale è la seguente: <head> ….. <style type="text/css“> Selettore1 { attributo1: valore1; attributo2: valore2;……; attributoN : valoreN; } Selettore2 { attributo1: valore1; attributo2: valore2;……; attributoN : valoreN; } …… SelettoreN { attributo1: valore1; attributo2: valore2;……; attributoN : valoreN; } </style> </head> 9 Esempio : vogliamo applicare a tutti i paragrafi <p> della pagina HTML Utilizziamo quindi lo stile incorporato (nella sezione <head> della pagina stessa: <head> …. <style type="text/css"> p{ text-align: justify; /* commento per allineamento giustificato */ color: #ff0000; /* commento per colore rosso */ } </style> ….. </head> 10 Un selettore, svolge funzione di etichetta di un contenitore, si possono cioè assegnare dei parametri e marcarli con una etichetta così che quando serviranno quei parametri, basterà richiamare il nome scelto per l’etichetta e con esso saranno richiamati tutti i valori a lui associati, valori specificati una sola volta nel foglio di style (interno o esterno che sia). L'uso dei selettori di elemento o di classe, può essere associato a qualsiasi elemento valido di HTML . 11 Finora abbiamo selezionato gli elementi HTML sui quali applicare lo stile, specificando come selettore il tipo dell’elemento (ad esempio, abbiamo specificato tutti gli elementi di tipo p ). Vediamo ora come selezionare : Solo uno specifico elemento attraverso i selettori di elemento; Tutti gli elementi logicamente raggruppati in una classe attraverso i selettori di classe. 12 Supponiamo di voler selezionare uno specifico elemento tra tutti quelli di un tipo. Ad esempio, uno specifico elemento p tra tutti quelli di tipo p presenti nel documento HTML Per fare questo ricorriamo ad una importante proprietà di tutti gli elementi HTML: la proprietà ID ID serve per identificare univocamente un elemento assegnandogli un nome (“logico”). La sintassi è (all’interno del tag HTML) : ID = “Nome_logico” e nel foglio di stile per riferirci ad esso #Nome_logico 13 14 15 Il risultato è il seguente: 16 Supponiamo di voler selezionare solo alcuni elementi tra tutti quelli di un tipo o anche di tipo diverso Quello che ci serve è creare una classe che raggruppi più elementi ai quali applicare lo stesso stile Per fare questo ricorriamo all’attributo CLASS CLASS serve per identificare un gruppo di più elementi all’interno di una stessa pagina o anche in più pagine HTML. Alla classe viene assegnato un nome logico. La sintassi è (all’interno del tag HTML) : CLASS = “Nome_logico” e nel foglio di stile per riferirci ad esso .Nome_logico 17 18 Risultato: 19 Nell’esempio utilizzato, è stata assegnata una stessa classe ad elementi di tipo diverso. Volendo applicare lo stile solo ad elementi di un certo tipo all’interno di una classe, dobbiamo specificare nel selettore (del codice CSS) il tipo dell’elemento secondo la seguente sintassi : TipoElemento.NomeClasse 20 21 Risultato: 22 Un foglio di stile esterno è semplicemente un file di testo con estensione .css che racchiude tutte le dichiarazioni di stile, e che può essere richiamato da tutte le pagine web che compongono il sito. In questo foglio, o fogli visto che possono essere più di uno, andremo a scrivere tutti gli stili che ci servono, comprese le "classi" e gli "id". Anche nel caso di uno o più fogli di stile esterni, sarà sempre possibile definire all'occorrenza stili ad inizio pagina e stili in linea, questi hanno priorità su quanto dichiarato nel foglio di stile esterno. N.B.-> La gerarchia è : stile in linea – stile incorporato – stile esterno 23 La sintassi generale è la seguente: File HTML <html> <head> <title>Il mio documento</title> <link rel="stylesheet" type="text/css" href=“style.css" /> </head> <body> ... </head> Percorso e nome ……….. del file css File CSS Selettore1 { attributo1: valore1; attributo2: valore2;……; attributoN : valoreN; } Selettore2 { attributo1: valore1; attributo2: valore2;……; attributoN : valoreN; } ………………. 24 La cosa realmente intelligente è che più documenti HTML possono essere linkati allo stesso foglio di stile. In altre parole, un file CSS può essere usato per controllare il layout di più documenti HTML contemporaneamente. 25