Notazione HSL o HSLA.<\/li>\n<\/ul>\n\n\n\nEcco un esempio in cui lo stesso colore, verde, viene impostato con le diverse notazioni possibili.<\/p>\n\n\n\n
<h1 style=\"color: green\">Verde<\/h1>\n\n<h1 style=\"color: #008000\">Verde<\/h1>\n\n<h1 style=\"color: rgb(0, 128, 0)\">Verde<\/h1>\n\n<h1 style=\"color: hsl(120, 100%, 25%)\">Verde<\/h1>\n\n<h1 style=\"color: rgba(0, 128, 0, 0.5)\">Verde con trasparenza<\/h1>\n\n<h1 style=\"color: hsl(120, 100%, 25%, 0.5)\">Verde con trasparenza<\/h1><\/code><\/pre>\n\n\n\nCome puoi vedere rgba e hsla ci permettono di impostare la trasparenza con l’ultimo valore.<\/p>\n\n\n\nBackground<\/h2>\n\n\n\n Con la propriet\u00e0 CSS background possiamo definire uno sfondo per gli elementi o per l’intera pagina.<\/p>\n\n\n\n
Vediamo brevemente quali sono le propriet\u00e0 che possiamo usare e cosa ci permettono di fare per poi vedere degli esempi di quelle pi\u00f9 importanti.<\/p>\n\n\n\n
\nBackground-color<\/code>: ci permette di assegnare un colore di sfondo.<\/li>\n\n\n\nBackground-image<\/code>: possiamo usare questa propriet\u00e0 per usare un’immagine come sfondo.<\/li>\n\n\n\nBackground-repeat<\/code>: per impostazione predefinita, se inseriamo un’immagine come sfondo questa verr\u00e0 ripetuta sia orizzontalmente che verticalmente. Con questa regola invece possiamo scegliere di ripetere l’immagine solo in un senso (ad esempio solo verticalmente).<\/li>\n\n\n\nBackground-attachment<\/code>: ci permette di definire il comportamento dell’immagine di sfondo e scegliere se deve essere fissa o seguire lo scroll della pagina.<\/li>\n\n\n\nBackground-position<\/code>: serve a posizionare l’immagine di sfondo.<\/li>\n<\/ul>\n\n\n\nVediamo come fare a impostare lo sfondo di un elemento o di una pagina usando queste propriet\u00e0. Iniziamo da un semplice sfondo colorato.<\/p>\n\n\n\n
Background-color<\/h3>\n\n\n\n Background-color ci permette di impostare lo sfondo per l’intera pagina o per un singolo elemento.<\/p>\n\n\n\n
Per impostare uno sfondo per l’intera pagina ci basta applicare la propriet\u00e0 a tutto il tag body, come in questo esempio:<\/p>\n\n\n\n
<style>\n\nbody {\n\nbackground-color: rgba(153, 204, 255, 0.4);\n\n}\n\n<\/style><\/code><\/pre>\n\n\n\nCos\u00ec come abbiamo fatto per il body, possiamo anche impostare un colore di sfondo per un tipo di elemento ad esempio per tutti i paragrafi, specificandolo nell’head cos\u00ec:<\/p>\n\n\n\n
<style>\n\np {\n\nbackground-color: #ffccff;\n\n}\n\n<\/style><\/code><\/pre>\n\n\n\nPossiamo anche specificare la propriet\u00e0 per un singolo elemento tramite l’attributo style come in questo esempio:<\/p>\n\n\n\n
<p style=\"background-color:white\">\nQuesto \u00e8 un paragrafo di colore bianco\n<\/p><\/code><\/pre>\n\n\n\nEcco i tre esempi appena riportati e l’anteprima. In questo caso abbiamo impostato una regola per lo sfondo della pagina (body), poi una regola per lo sfondo degli elementi paragrafo e per finire cambiato lo sfondo di uno solo dei paragrafi.<\/p>\n\n\n\nBackground-image<\/h3>\n\n\n\n Con la propriet\u00e0 background-image possiamo impostare un’immagine come sfondo di un elemento o di una pagina.<\/p>\n\n\n\n
Proprio come abbiamo visto prima nel caso del colore di sfondo, per impostare l’immagine come sfondo per tutta la pagina ci basta inserire la propriet\u00e0 nel tag body.<\/p>\n\n\n\n
Con questa propriet\u00e0 possiamo impostare una o pi\u00f9 immagini di sfondo, oppure creare dei gradienti di colore. Vediamo alcuni esempi.<\/p>\n\n\n\nIn questo caso abbiamo impostato uno sfondo diverso per i due paragrafi. Nel primo abbiamo inserito un’immagine di sfondo in questo modo:<\/p>\n\n\n\n
background-image: url(\"paper.gif\");<\/code><\/pre>\n\n\n\nNel secondo paragrafo abbiamo creato uno sfondo con un gradiente lineare:<\/p>\n\n\n\n
background-image: linear-gradient(#0066ff, #00ffff);<\/code><\/pre>\n\n\n\nPropriet\u00e0 dei testi<\/h2>\n\n\n\n Ci sono diverse propriet\u00e0 CSS che ci permettono di modificare la formattazione dei testi<\/strong> delle pagine web. In particolare andremo a vedere come modificare colore, allineamento e stile decorativo (ad esempio le sottolineature), parleremo inoltre dei font.<\/p>\n\n\n\nNon parleremo invece dei tag strong (che ha come risultato il grassetto) ed em (che viene reso in corsivo) visto che si tratta di tag HTML che abbiamo gi\u00e0 spiegato nella guida su come imparare HTML.<\/p>\n\n\n\n
Colore dei testi<\/h3>\n\n\n\n Via CSS possiamo impostare il colore del testo<\/strong> delle nostre pagine HTML.<\/p>\n\n\n\nLa propriet\u00e0 che bisogna usare \u00e8 color. Come per le altre propriet\u00e0 che si usano per specificare un colore (ad esempio per gli sfondi), possiamo utilizzare la notazione che preferiamo dal nome del colore al valore RGB o esadecimale.<\/p>\n\n\n\n
Vediamo cosa ci permette di fare questa regola con degli esempi pratici.<\/p>\n\n\n\n
Per impostare il colore di tutti i testi della pagina possiamo applicare la propriet\u00e0 color nel body, in questo modo:<\/p>\n\n\n\nCi basta inserire la propriet\u00e0 nel body e specificare il colore:<\/p>\n\n\n\n
<style>\n\nbody {\n\ncolor: green;\n\n}\n\n<\/style><\/code><\/pre>\n\n\n\nPossiamo definire il colore per una tipologia di elemento come in questo esempio. Allo stesso modo possiamo applicare la propriet\u00e0 anche per uno specifico ID o per una classe (puoi fare riferimento all’utilizzo dei selettori che abbiamo visto all’inizio di questa guida a CSS).<\/p>\n\n\n\nPer impostare il colore di uno specifico elemento possiamo anche usare l’attributo style e la propriet\u00e0 CSS color come in questo esempio:<\/p>\n\n\n\nIl colore viene definito nell’attributo style in questo modo:<\/p>\n\n\n\n
<p style=\"color:red\">Testo del paragrafo.<\/p><\/code><\/pre>\n\n\n\nAllineamento dei testi<\/h3>\n\n\n\n Tramite CSS possiamo modificare l’allineamento del testo.<\/p>\n\n\n\n
La propriet\u00e0 pi\u00f9 importante da conoscere \u00e8 text-align che ci permette di modificare l’allineamento orizzontale del testo. Prima di vederla con un esempio, ecco una panoramica delle principali propriet\u00e0 che possiamo usare.<\/p>\n\n\n\n
Text-align<\/strong>: ci permette di impostare l’allineamento orizzontale dei testi (a sinistra, destra, centrato o giustificato), lo vedremo dopo con degli esempi.<\/p>\n\n\n\nText-align-last<\/strong>: modifica solo l’allineamento dell’ultima riga di un testo e non dell’intero paragrafo. Il valore che possiamo dare a questa propriet\u00e0 \u00e8 center, right o justify, come ti mostro in questo esempio.<\/p>\n\n\n\nDirection<\/strong>: con questa propriet\u00e0 possiamo invertire la direzione del testo e mostrarlo da destra a sinistra (direction: rtl;).<\/p>\n\n\n\nUnicode-bidi<\/strong>: si usa insieme alla propriet\u00e0 direction per cambiare la direzione del testo di uno specifico elemento.<\/p>\n\n\n\nVertical-align<\/strong>: ci permette di modificare l’allineamento verticale di un elemento.<\/p>\n\n\n\nCon la propriet\u00e0 text-align possiamo cambiare l’allineamento del testo di un elemento ad esempio un paragrafo o un div in questo modo:<\/p>\n\n\n\n
p { text-align: center; }<\/code><\/pre>\n\n\n\nFacciamo un esempio pratico con i diversi valori: left, right, center e justify.<\/p>\n\n\n\nSottolineatura dei testi<\/h3>\n\n\n\n Un’altra propriet\u00e0 CSS per i testi \u00e8 text-decoration, attraverso cui possiamo definire lo stile della sottolineatura.<\/p>\n\n\n\n
Questa propriet\u00e0 pu\u00f2 essere utilizzata per tutti gli elementi di testo per esempio paragrafi o titoli, ma si utilizza maggiormente per i link.<\/p>\n\n\n\n
Ecco degli esempi dell’utilizzo della propriet\u00e0 text-decoration applicata a titoli e paragrafi. Come vedi nell’esempio dell’ultimo paragrafo, possiamo anche combinare diversi tipi di decorazione.<\/p>\n\n\n\nPer ricapitolare andiamo a vedere i valori che possiamo impostare per la propriet\u00e0 text-decoration:<\/p>\n\n\n\n
\ntext-decoration: underline;<\/code> \u00e8 una sottolineatura classica con la riga sotto il testo.<\/li>\n\n\n\ntext-decoration: overline;<\/code> inserisce una riga sopra al testo (sopralineatura).<\/li>\n\n\n\ntext-decoration: line-through;<\/code> aggiunge una riga al centro del testo per creare l’effetto barrato.<\/li>\n\n\n\ntext-decoration: none;<\/code> ci permette di rimuovere la sottolineatura, per esempio pu\u00f2 essere utilizzato per quegli elementi che per impostazioni predefinita sono gi\u00e0 sottolineati come i link.<\/li>\n<\/ul>\n\n\n\nAd esempio per rimuovere la sottolineatura da tutti i link<\/strong> di una pagina ci baster\u00e0 aggiungere nell’head:<\/p>\n\n\n\n<style>\n\na {\n\ntext-decoration: none;\n\n}\n\n<\/style><\/code><\/pre>\n\n\n\nNota: la propriet\u00e0 text-decoration che abbiamo visto in questi esempi \u00e8 una propriet\u00e0 abbreviata che ci permette di impostare tutte le propriet\u00e0 CSS di text decoration in una sola regola. La propriet\u00e0 corrispondente per definire il tipo di sottolineatura \u00e8 text-decoration-line.<\/p>\n\n\n\n
Ci sono poi delle propriet\u00e0 opzionali che ci permettono di definire il colore, lo stile e lo spessore della decorazione.<\/p>\n\n\n\n
Text-decoration-color<\/h4>\n\n\n\n Text-decoration-color seguito dal colore ci permette di definire il colore della sottolineatura.<\/p>\n\n\n\n
Per esempio per aggiungere una sottolineatura blu dovremmo scrivere:<\/p>\n\n\n\n
text-decoration-line: underline;\ntext-decoration-color: blue;<\/code><\/pre>\n\n\n\nText-decoration-style<\/h4>\n\n\n\n Con la propriet\u00e0 text-decoration-style possiamo modificare lo stile della sottolineatura come in questi esempi:<\/p>\n\n\n\nCome vedi bisogna prima usare la propriet\u00e0 text-decoration-line per impostare la sottolineatura e poi si pu\u00f2 modificare lo stile utilizzando uno dei seguenti valori:<\/p>\n\n\n\n
\ntext-decoration-style: solid;<\/code> \u00e8 la sottolineatura predefinita;<\/li>\n\n\n\ntext-decoration-style: double;<\/code> crea una sottolineatura doppia;<\/li>\n\n\n\ntext-decoration-style: dotted;<\/code> la riga di sottolineatura \u00e8 formata da puntini;<\/li>\n\n\n\ntext-decoration-style: dashed;<\/code> la sottolineatura \u00e8 tratteggiata;<\/li>\n\n\n\ntext-decoration-style: wavy;<\/code> la sottolineatura \u00e8 ondulata.<\/li>\n<\/ul>\n\n\n\n