1 / 43

Cascading style sheets Sintassi

Cascading style sheets Sintassi. La sintassi dei fogli di stile è realizzata in tre parti: un elemento, una proprietà e un valore secondo questa regola: ELEMENTO {proprietà: valore} L’elemento è normalmente il tag HTML al quale si vuole applicare uno stile. Per esempio: BODY {color:black}

dolores-soto
Download Presentation

Cascading style sheets Sintassi

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading style sheetsSintassi La sintassi dei fogli di stile è realizzata in tre parti: un elemento, una proprietà e un valore secondo questa regola: ELEMENTO {proprietà: valore} L’elemento è normalmente il tag HTML al quale si vuole applicare uno stile. Per esempio: BODY {color:black} Indica che tutto il testo della pagina sarà di colore nero Lezione 6

  2. Cascading style sheetsSintassi Quando una proprietà ha un valore composto da più attributi questi devono essere racchiusi tra virgolette, per esempio P {font-family: “sans serif”} Si possono assegnare più proprietà allo stesso elemento ma queste devono essere separate da “;”, per esempio: P {color: red; font-family: “times new roman” } Lezione 6

  3. Cascading style sheetsSintassi Si può definire lo stesso stile per più di un elemento, bisgona però separare gli elementi con delle virgole, per esempio: H1, H2 {color: red} Ad una stessa proprietà possono corrispondere più valori, il browser in questo caso riconoscerà come valida la prima che è in grado di riconoscere, per esempio: P {font-family: “sans serif”, courier, arial } Lezione 6

  4. Cascading style sheetsInserimento delle pagine di stile Pagine esterne Una pagina di stile esterna è la soluzione migliore quando lo stile viene applicato a più di una pagina. Questo permette di modificare l’aspetto di un sito web modificando solo la pagina di stile. La sintassi per inserire una pagina esterna, per esempio la pagina mystyle.css è la seguente: <HEAD> <LINK rel=“stylesheet” type=“text/css” href=“mystyle.css”> </HEAD> Lezione 6

  5. Cascading style sheetsInserimento delle pagine di stile Pagine interne Una pagina web interna può essere usata quando un singolo documento deve avere un proprio stile. Per inserire uno stile in una singola pagina si usa il tag STYLE tra i tag HEAD come di seguito: <HEAD> <STYLE type=“text/css”> H1 {color: red} P {margin: 20px} </STYLE> Lezione 6

  6. Cascading style sheetsInserimento delle pagine di stile Stili inline Per usare gli stili inline si usa l’attributo STYLE nel tag di cui si vuole modificare l’aspetto come di seguito: <P STYLE=“color: red”> </P> Uno stile inline perde molti dei vantaggi delle pagine di stile. Va usato solo quando uno stile deve essere applicato ad un solo elemento una sola volta. Lezione 6

  7. Cascading style sheetsOrdine di inserimento Quale stile viene usato quando siamo in presenza di più di uno stile per un elemento? Tutti gli stili seguono sempre questa priorità: Stili inline Pagina di stile interna (definita nel tag HEAD) Pagina di stili esterna (definita nel file .css) Lezione 6

  8. Cascading style sheetsL’attributo media Grazie ad esso siamo in grado di impostare un foglio di stile per ogni supporto su cui la nostra pagina verrà distribuita. Una possibilità davvero interessante e che andrà sempre più diffondendosi con l'ampliarsi dei mezzi di diffusione delle pagine (X)HTML. Dove prima c'era unicamente un browser, domani potranno sempre più esserci palmari, cellulari e altri dispositivi. Per non parlare dei software usati da disabili come i browser vocali. Ciascuno di questi supporti presenta caratteristiche diverse in termini di memoria, ampiezza dello schermo e funzionalità. Riuscire ad adattare uno stile unico a tutti è praticamente impossibile, oltre che controproducente. La soluzione ideale sta quindi nella creazione di fogli di stile ad hoc. Lezione 6

  9. Cascading style sheetsL’attributo media L'attributo media può accompagnare sia l'elemento <LINK> che l'elemento <STYLE>. Ecco due esempi di sintassi: <link rel="stylesheet" type="text/css" media="print" href="print.css" /><style type="text/css" media="screen">...</style> Per sfruttare a fondo questa opzione è fondamentale conoscere i diversi valori possibili per l'attributo: all. Il CSS si applica a tutti i dispositivi di visualizzazione. screen. Valore usato per la resa sui normali browser web. print. Il CSS viene applicato in fase di stampa del documento. projection. Usato per presentazioni e proiezioni a tutto schermo. aural. Da usare per dispositivi come browser a sintesi vocale. braille. Il CSS viene usato per supporti basati sull'uso del braille. embossed. Per stampanti braille. handheld. Palmari e simili. tty. Dispositivi a carattere fisso. tv.Web-tv. Lezione 6

  10. Cascading style sheetsL’attributo media L'uso più tipico dell’attributo media consiste nel collegare al documento vari fogli di stile adatti a ciascun supporto. Lo user agent che visualizzerà la pagina sarà in grado, se conforme agli standard, di caricare quello giusto: <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> <link rel="stylesheet" type="text/css" media="print, tv, aural" href="print.css" /> Lezione 6

  11. Cascading style sheetsProprietà singole e a sintassi abbreviata Nelle definizione delle regole è posssibile fare uso di proprietà singole e proprietà a sintassi abbreviata. Con questa espressione traduciamo il termine inglese shorthand properties reso spesso, alla lettera, con il termine scorciatoie. Le proprietà singole sono la maggior parte: impostano per un dato elemento o selettore un singolo aspetto. Con le shorthand properties, è possibile invece definire con una sola dichiarazione un insieme di proprietà. Lezione 6

  12. Cascading style sheetsFogli di stile alternativi In un singolo documento è possibile collegare più fogli di stile. Gli autori della specifica (X)HTML hanno esplicitamente previsto questo scenario introducendo due valori possibili per l'attributo rel all'interno dell'elemento <LINK>: stylesheet alternate stylesheet Il primo identifica il foglio di stile che servirà a formattare normalmente il documento, diciamo il CSS di default. Il secondo identifica un CSS come alternativo rispetto a quello standard. Ecco un esempio di codice: <link rel="stylesheet" type="text/css" href="stile.css" /><link rel="alternate stylesheet" type="text/css" href="stile_alternativo.css" /> Sta all'autore implementare un sistema che consenta all'utente di scegliere dinamicamente lo stile alternativo sostituendolo al primo. La via più semplice è di farlo con un semplice Javascript in grado di intervenire su proprietà e attributi dell'elemento <LINK> Lezione 6

  13. Cascading style sheetsProprietà singole e a sintassi abbreviata Esempio: Ogni elemento presenta sui suoi quattro lati un certo margine rispetto a quelli adiacenti. È possibile definire per ciascuno di essi un valore usando quattro proprietà singole separate: margin-top margin-right margin-bottom margin-left La regola sarebbe questa: div {margin-top: 10px;margin-right: 5px;margin-bottom: 10px;margin-left: 5px;} Lezione 6

  14. Cascading style sheetsProprietà singole e a sintassi abbreviata Lo stesso risultato si può ottenere usando la proprietà a sintassi abbreviata margin: div {margin: 10px 5px 10px 5px;} Oppure div {margin: 10 px} Lezione 6

  15. Cascading style sheetsProprietà dello sfondo Le proprietà di sfondo permettono di controllare il colore (o l’immagine) di background della pagina web. Lezione 6

  16. Cascading style sheetsProprietà dello sfondo Esempio: body { background-color: #6ACC00; } Lezione 6

  17. Cascading style sheetsProprietà dello sfondo Lezione 6

  18. Cascading style sheetsProprietà dello sfondo Lezione 6

  19. Cascading style sheetsProprietà dello sfondo Esempio: body { background-image: url(halloween.jpg); background-repeat: no-repeat; background-position: left; background-attachment: scroll; } Lezione 6

  20. Cascading style sheetsProprietà del testo Le proprietà del testo permettono di scegliere uno stile per il testo, una dimensione, un colore ecc.. Lezione 6

  21. Cascading style sheetsProprietà del testo body { background-color: transparent; color: #4169E1; } p { letter-spacing: normal; text-align: center; text-decoration: underline; } Lezione 6

  22. Cascading style sheetsProprietà del testo Le proprietà del testo permettono di scegliere uno stile per il testo, una dimensione, un colore ecc.. Lezione 6

  23. Cascading style sheetsProprietà del testo body { background-color: transparent; color: #4169E1; } p { letter-spacing: normal; text-align: center; text-decoration: underline; text-indent: 20px; text-transform: capitalize; } Lezione 6

  24. Cascading style sheetsFont Le proprietà del carattere permettono di cambiare la forma del carattere, il grado di grassetto, la dimensione del testo ecc.. Lezione 6

  25. Cascading style sheetsProprietà del testo p { letter-spacing: normal; text-align: center; text-decoration: underline; text-indent: 20px; text-transform: capitalize; font-family: fantasy; font-size: 30px; } Lezione 6

  26. Cascading style sheetsFont Lezione 6

  27. Cascading style sheetsProprietà del testo p { letter-spacing: normal; text-align: center; text-decoration: underline; text-indent: 20px; text-transform: capitalize; font-family: sans; font-size: 30px; font-style: italic; font-variant: normal; font-weight: 700; } Lezione 6

  28. Cascading style sheetsListe Le proprietà delle liste permettono di scegliere tra diversi marcatori di una voce di lista o di impostare una immagine come marcatore. Lezione 6

  29. Cascading style sheetsListe ul { list-style-image: url(quote.gif); list-style-position: outside; } Lezione 6

  30. Cascading style sheetsI box Top Margin Border Padding Left Il riquadro o box è formato da un’area per il contenuto che può essere un testo o una immagine, da una spaziatura (padding) che racchiude l’area del contenuto, da un bordo e da un margine. Right Contenuto Bottom Lezione 6

  31. Cascading style sheetsI box Le dimensioni di un box dipendono da diversi fattori. La larghezza del box è determinata dalla somma dell’ampiezza del contenuto e delle ampiezze di sinistra e destra del margine, del bordo e del padding. Analogamente per l’altezza. Lezione 6

  32. Cascading style sheetsI box Lezione 6

  33. Cascading style sheetsI box Lezione 6

  34. Cascading style sheetsI box Lezione 6

  35. Cascading style sheetsI floating box La proprietà float viene usata per trascinare un box a sinistra o a destra sulla linea corrente. Un box “flottante” viene trattato come un box e viene trascinato a sinistra o a destra fino a che il suo margine esterno non tocca il margine del box che lo contiene. Lezione 6

  36. Cascading style sheetsEsempi Vogliamo costruire con l’aiuto di un foglio di stile un menu orizzontale. Per farlo useremo le liste. <body> Esempio di menu con css <ul> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> </ul> <p>Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo </p> </body> Lezione 6

  37. Cascading style sheetsEsempi ul { float: left; width: 100%; } li { display: inline; } Lezione 6

  38. Cascading style sheetsEsempi a { margin-left: 5px; margin-right: 5px; color: white; font-weight: bold; background-color: Purple; padding-left: 15px; padding-right: 15px; padding-bottom: 5px; padding-top: 5px; text-align: center; } Lezione 6

  39. Cascading style sheetsEsempi Lezione 6

  40. Cascading style sheetsEsempi Si possono definire molte altre proprietà per i link. ul { float: left; width: 100%; } li { display: inline; } Lezione 6

  41. Cascading style sheetsEsempi a { margin-left: 5px; margin-right: 5px; padding-left: 15px; padding-right: 15px; padding-bottom: 5px; padding-top: 5px; text-align: center; color: white; font-weight: bold; background-color: Purple; text-decoration: none; } Lezione 6

  42. Cascading style sheetsEsempi a:hover { color: Purple; background: White; text-decoration: none; font-weight: bold; } Lezione 6

  43. Cascading style sheetsEsempi Lezione 6

More Related