CSS è l'acronimo di Cascading Style Sheets, ovvero "fogli di stile a cascata" o, più brevemente, fogli di stile.
Cos'è CSS e a cosa serve
Si tratta del linguaggio standard per la stilizzazione di documenti HTML (ma non solo) che assolve al compito di informare il browser circa l'aspetto da conferire ai vari tag presenti nel documento. Attraverso i CSS è...
Nella precedente lezione abbiamo visto che lo scopo dei CSS è quello di separare la formattazione dalla struttura del documento: se la seconda è demandata ai tag HTML, la prima è di esclusiva competenza dei fogli di stile.
Abbiamo anche detto che CSS è un linguaggio nuovo e distinto rispetto a CSS... ma a questo punto una prima domanda (assolutamente...
Nella precedente lezione abbiamo visto come integrare delle istruzioni CSS all'interno di un documento HTML. In questa lezione presenteremo un importante attributo che è possibile aggiungere tanto al tag <style> che al tag <link>. L'attributo in questione è media ed il suo compito è quello di definire il supporto cui applicare le regole contenuto nel foglio di stile. In...
Una buona prassi di programmazione prevede che il bravo sviluppatore non ometta mai di commentare il codice. I commenti sono delle porzioni di testo, presenti tra le varie istruzioni CSS, che non vengono interpretate dal browser, il quale le ignora in fase di rendering della pagina.
I commenti, quindi, possono essere definiti come dei semplici appunti lasciati dallo sviluppatore a...
Nella seconda lezione della nostra guida abbiamo visto come utilizzare i CSS all'interno di un documento HTML. Abbiamo visto, infatti, che è possibile applicare regole all'interno dei singoli tag HTML (stile inline), definire fogli di stili interni al documento o importare fogli di stile esterni e separati mediante un semplice link.
Quello che non abbiamo ancora visto è come è...
Nella precedente lezione abbiamo visto come costruire una regola CSS ed abbiamo visto che il primo elemento (partendo da sinistra) prende il nome di selettore.
Il selettore, come il nome lascia intuire, serve "per selezionare" il o gli elementi della pagina cui applicare le dichiarazioni contenute tra le parentesi graffe (il cosiddetto "blocco dichiarativo").
Sino ad ora abbiamo utilizzato come selettore...
La differenza tra classi ed ID è di fondamentale importanza: mentre con una classe definiamo la stilizzazione di una serie di elementi con caratteristiche comuni, con l'ID si definisce un elemento unico all'interno della pagina.
Se ad esempio volessimo stilizzare una serie di paragrafi useremo un classe:
p.esempio { color:#000000 }
Se invece volessimo definire un DIV contenitore della pagina (elemento presente...
Nella passata lezione abbiamo visto i selettori di base, ovvero i selettori utilizzati più di frequente attraverso i quali è possibile far fronte alle più comuni esigenze di sviluppo. Le possibilità offerte da CSS 2.1, tuttavia, non si euriscono qui. Le specifiche del linguaggio, infatti, prevedono altri tipi di selettori che, da un punto di vista espositivo, possiamo dividere...
Le pseudo-classi sono un concetto fondamentale per chi lavora coi CSS. Attraverso le pseudo-classi non si definisce l'aspetto di un elemnto ma di un particolare stato.
Una pseudo classe differisce da una classe in quanto la prima (a differenza della seconda) non esiste materialmente nel documento ma viene "creata" virtualmente dal browser al verificarsi di certi eventi. Un esempio tipico...
Uno dei concetti fondamentali dei CSS è quello di ereditarietà, in questa lezione cercheremo di spiegare, in modo semplice, cos'è e come sfruttarla all'interno dei nostri fogli di stile.
Il DOM (cenni)
Il concetto di ereditarietà, per essere compreso a pieno, deve essere affrontato tenendo bene a mente una caratteristica tipica dei documenti HTML, cioè quella di essere rappresentabili come un...
Abbiamo appena visto, al termine della lezione precedente, come si risolve un primo "conflitto" tra regole discordanti: abbiamo visto, infatti, che le proprietà assegnate specificamente prevalgono su quelle ereditate. In un certo senso il meccanismo di risoluzione dei conflitti si comporta in modo analogo anche in altre situazioni in quanto CSS tende a far prevalere la regola più specifica...
A partire da questa lezione iniziamo a parlare delle proprietà CSS per l'attribuzione degli stili agli elementi, a comprenderne il significato e ad esaminarne le casistiche di utilizzo. Il primo passo in tal senso lo faremo parlando di box model, cioè di quell'insieme di regole che determinano l'aspetto degli elementi di tipo block.
Elementi blocco e in linea
Iniziamo col dire...
Nella lezione precedente abbiamo introdotto il box-model di CSS, mentre a partire da questa lezione vedremo di illustrarne le principali proprietà, ovvero width, height, padding, border e margin.
La proprietà width
La proprietà width è utilizzata per assegnare una larghezza esplicita ad un elemento di tipo block. Come abbiamo già visto, in mancanza il nostro elemento si espanderà occupando tutta la...
In questa lezione vedremo le proprietà padding e margin ovvero, rispettivamente, la spaziatura interna ed esterna al box.
La proprietà padding
Tramite il padding viene definito uno spazio tra l'area dei contenuti ed il confine interno del box. Il suo utilizzo è frequente in due circostanze ben precise:
quando il box ha un bordo (per creare un po' di distanza tra il...
Ultima famiglia di proprietà attinenti al concetto di Box-model è quella relativa alla gestione dei bordi. Attraverso queste proprietà CSS consente agli sviluppatori una massima libertà creativa essendo possibile, per ciascun bordo, definire:
spessore
stile
colore
Come abbiamo visto per le proprietà padding e margin, anche per i bordi è possibile agire simultanemante su tutti e quattro i lati del box oppure solo...
Con la scorsa lezione abbiamo esaurito la rassegna delle proprietà CSS tipiche del box-model. A partire da questa lezione passeremo in rassegna le altre proprietà dei fogli di stile partendo da quelle relative allo sfondo (o background), le quali possono essere applicate tanto alla pagina (tag <body>) quanto ad un suo elemento (ad esempio un box).
Attraverso tali proprietà possiamo...
Abbiamo già affrontato le tematiche relative al colore nei CSS in due precedenti lezioni, più precisamente nella lezione dedicata alla stilizzazione dei bordi (proprietà border-color) e nella lezione dedicata al background (proprietà background-color). In questa lezione vedremo una panoramica generale sull'utilizzo dei colori nei fogli di stile.
I colori nei fogli di stile CSS
Abbiamo già visto che i colori, all'interno...
Nella precedente lezione abbiamo già visto un'importante proprietà del testo, cioè la proprietà color attraverso la quale è possibile definire il colore degli elementi testuali. Vediamo adesso quali sono le principali proprietà CSS per la stilizzazione del testo.
Per prima cosa vediamo le proprietà della famiglia font attraverso le quali è possibile impostare il tipo di carattere da utilizzare, le...
Oltre a quelle citate nella lezione precedente della nostra Guida CSS esistono diverse altre proprietà per la stilizzazione del testo attraverso le quali è possibile definirne, in modo estremamente preciso, la disposizione di lettere e parole. Queste proprietà di CSS sono:
letter-spacing
word-spacing
white-space
line-height
Anche queste proprietà, come tutte le altre relative alla stilizzazione dei blocchi di testo, sono ereditate. Vediamole nel dettaglio.
letter-spacing...
La stilizzazione dei link attraverso i codici CSS non prevede comandi specifici se non quelli che già abbiamo visto per il testo, una sua trattazione specifica, tuttavia, si rende opportuna in quanto si tratta di un elemento particolarmente importante e sovente oggetto delle più disparate stilizzazioni come, appunto, i collegamenti ipertestuali.
Una premessa si rende opportuna: quando si lavora sui...
In questa lezione della nostra Guida CSS vedremo come stilizzare liste e tabelle.
Stilizzare le liste
Attraverso i CSS è possibile agire sulla presentazione delle liste, cioè sull'aspetto di liste ordinate (<ol>) e non ordinate (<ul>). A tal fine i fogli di stile ci consentono di fare ricorso a quattro proprietà (tre specifiche + una con sintassi compatta).
list-style
list-style-image
list-style-position
list-style-type
Anche queste proprietà, come...
Cambiare l'aspetto del cursore del mouse con i CSS può essere un'ottima opzione per personalizzare l'esperienza utente su un sito web. Grazie alla proprietà cursor di CSS, è possibile scegliere tra una vasta gamma di cursori predefiniti del browser o definire un cursore personalizzato, creando così un'esperienza di navigazione unica e coinvolgente per gli utenti.
Personalizzare il cursore con uno...
La proprietà display
Una proprietà fondamentale di CSS è sicuramente display. Attraverso questa proprietà, infatti, è possibile definire il modo in cui un dato elemento viene mostrato (o meno) all'interno della pagina.
Abbiamo già visto, in una precedente lezione, che ogni elemento della pagina ha un valore predefinito di visualizzazione ed è pertanto possibile distinguere gli elementi in linea dagli elementi...
Nella lezione precedente abbiamo visto cosa sono e come funzionano le proprietà del CSS visibility e display ed abbiamo avuto modo di capire che entrambe agiscono sulla visualizzazione (o meno) di un dato elemento della pagina. Diveramente da quello che si potrebbe pensare, tuttavia, le due proprietà non hanno lo stesso effetto...
Usare display:none o visibility:hidden?
In entrambi i casi l'elemento...
I CSS permettono di "giocare" con gli elementi di una pagina in modo da posizionarli dove si preferisce, a prescindere cioè dalla naturale posizione sequenziale che un elemento avrebbe se si seguisse il normale flusso del codice HTML.
La proprietà position
Si tratta di una proprietà fondamentale nella costruzione di layout coi CSS. Attraverso position, infatti, è possibile posizionare con precisione...
Abbiamo visto come, attraverso i CSS, possiamo gestire ogni aspetto della presentazione degli elementi della pagina; nella precedenti lezioni abbiamo imparato manipolare la proprietà display e come posizionare gli elementi nella pagina. In questa lezione vedremo come gestire un aspetto particolare del rapporto tra i vari elementi della pagina, cioè le eventuali sovrapposizioni.
La sovrapposizione tra elementi della pagina è...
Concludiamo la nostra guida di base all'utilizzo dei CSS analizzando due proprietà fondamentali, ovvero float e clear. Queste due proprietà (che non vengono ereditate dagli elementi discendenti) assumono un ruolo assolutamente centrale nell'attività quotidiana di web design in quanto sono le protagoniste indiscusse di buona parte dei nuovi layout table-less.
La tecnica che prevede l'utilizzo di queste proprietà è detta...
Abbiamo a cuore la tua privacy
Noi e i nostri partner archiviamo e/o accediamo a informazioni su un dispositivo. Cookie, identificatori del dispositivo o analoghi identificatori online (ad es. identificatori basati sull’accesso, identificatori assegnati casualmente, identificatori basati sulla rete) insieme ad altre informazioni (ad es. tipo di browser e informazioni sul browser, lingua, dimensioni dello schermo, tecnologie supportate, ecc.) possono essere archiviati sul o letti dal dispositivo dell’utente per riconoscerlo ogni volta che l’utente si connette a un’app o a un sito web, per una o più finalità qui presentate.
Con il tuo consenso, i tuoi dati possono essere utilizzati per quanto segue: Pubblicità e contenuti personalizzati, misurazione delle prestazioni dei contenuti e degli annunci, ricerche sul pubblico, sviluppo di servizi; Dati di geolocalizzazione precisi e identificazione attraverso la scansione del dispositivo.
I tuoi dati personali verranno trattati e le informazioni dal tuo dispositivo (cookie, identificatori univoci e altri dati del dispositivo) possono essere memorizzate, consultate e condivise con 179 partner, o utilizzate specificamente da questo sito o questa app. Alcuni fornitori potrebbero trattare i tuoi dati personali sulla base dell'interesse legittimo, al quale puoi opporti gestendo le tue opzioni qui sotto. Puoi revocare il tuo consenso in qualsiasi momento facendo clic sul link delle impostazioni sulla privacy situato in fondo alla pagina.
Alcuni partner non chiedono il tuo consenso al trattamento dei tuoi dati, ma fanno affidamento sul loro legittimo interesse commerciale. Guarda il nostro elenco di partner per conoscere gli scopi per cui credono di avere un interesse legittimo e come puoi opporti.
Questi sono i nostri partner pubblicitari che partecipano al Framework di trasparenza e consenso dello IAB, creato per garantire un uso trasparente e corretto dei dati.
Questi fornitori sono registrati su Google, ma non nel Transparency & Consent Framework di IAB Europe.
{"b_dec":{"def":"Rifiuta e chiudi","res":"Rifiuta e chiudi"},"priclt":" \u003Cdiv class=\u0022cl-consent-settings cl-consent-settings--is-hidden\u0022\u003E \u003Cstyle\u003E .cl-consent-settings { position: fixed; left: 16px; bottom: 28px; z-index: 100; transition: all 0.15s ease-in-out; transform: translateY(0); } .cl-consent-settings--is-hidden { transform: translateY(70px); opacity: 0; } .cl-consent-settings__hint { border-radius: 4px; background: #282A3C; box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15); color: #FFFCF2; position: absolute; right: -195px; top: 0; bottom: 0; margin: auto; height: 40px; width: 175px; display: flex; align-items: center; justify-content: center; padding: 4px 12px; font-size: 12px; font-weight: 400; line-height: 16px; cursor: default; user-select: none; transition: transform 0.3s ease, opacity 0.3s ease; transform: translateX(0); opacity: 0; pointer-events: none; z-index: -1; } .cl-consent-settings__hint::after { content: \u0022\u0022; position: absolute; left: -16px; top: 0; bottom: 0; margin: auto; width: 0; height: 0; border: 0 solid transparent; border-top-width: 12px; border-bottom-width: 12px; border-right: 16px solid #282A3C; } .cl-consent-settings__btn { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background-color: #4B81E8; background-image: url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 width=\u002730\u0027 height=\u002730\u0027 viewBox=\u00270 0 30 30\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 d=\u0027M15 2.813C8.28 2.813 2.812 8.28 2.812 15S8.28 27.188 15 27.188c6.72 0 12.188-5.468 12.188-12.188C27.188 8.28 21.72 2.812 15 2.812Zm0 1.874c5.686 0 10.313 4.627 10.313 10.313 0 5.686-4.627 10.313-10.313 10.313-5.686 0-10.313-4.627-10.313-10.313C4.688 9.314 9.314 4.687 15 4.687Zm-1.875 3.75a.937.937 0 1 0 0 1.875.937.937 0 0 0 0-1.874Zm5.156.938a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.812Zm-7.968 2.813a1.875 1.875 0 1 0 0 3.749 1.875 1.875 0 0 0 0-3.75Zm5.624 1.874a.938.938 0 1 0 0 1.876.938.938 0 0 0 0-1.876Zm4.688.938a.938.938 0 1 0 0 1.875.938.938 0 0 0 0-1.875Zm-8.906 2.813a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.813Zm6.562.937a1.406 1.406 0 1 0 0 2.813 1.406 1.406 0 0 0 0-2.813Z\u0027\/%3E%3C\/svg%3E\u0022); background-position: center center; background-size: 30px 30px; background-repeat: no-repeat; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.35); z-index: 70; position: relative; text-decoration: none; } .cl-consent-settings__btn:hover + .cl-consent-settings__hint { transform: translateX(22px); pointer-events: all; opacity: 1; } .cl-consent-settings__user { width: 18px; height: 18px; border-radius: 50%; padding: 0; border: 1px solid #ffffff; background-color: #00AD98; background-image: url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 viewBox=\u00270 0 10 11\u0027 width=\u002710\u0027 height=\u002711\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 stroke=\u0027%23fff\u0027 stroke-width=\u0027.1\u0027 d=\u0027M6.858 6.262A3.3 3.3 0 0 0 8.2 3.597C8.2 1.796 6.764.325 5 .325s-3.2 1.47-3.2 3.272c0 1.094.53 2.07 1.342 2.665A4.67 4.67 0 0 0 .45 10.5v.05h1v-.05c0-2.012 1.585-3.632 3.55-3.632s3.55 1.62 3.55 3.632v.05h1v-.05a4.67 4.67 0 0 0-2.692-4.238ZM5 1.345c1.22 0 2.2 1.002 2.2 2.252s-.98 2.25-2.2 2.25-2.2-1-2.2-2.25.98-2.252 2.2-2.252Z\u0027\/%3E%3C\/svg%3E\u0022); background-position: center center; background-size: 9px 10px; background-repeat: no-repeat; z-index: 75; position: absolute; top: -2px; right: -8px; text-decoration: none; visibility: hidden; } \u003C\/style\u003E \u003Cbutton type=\u0022button\u0022 class=\u0022cl-consent-settings__btn\u0022 onclick=\u0022if(window.__lxG__consent__ !== undefined) {window.__lxG__consent__.showConsent()} else {alert(\u0027This function only for users from European Economic Area (EEA)\u0027)}; return false\u0022\u003E \u003Cspan class=\u0022cl-consent-settings__user\u0022\u003E\u003C\/span\u003E \u003C\/button\u003E \u003Cdiv class=\u0022cl-consent-settings__hint\u0022\u003EPrivacy and cookie settings\u003C\/div\u003E \u003C\/div\u003E","pricds":"show_in_the_footer","vcnt":179,"_t":{"titles":"Purposes|Purposes (Legitimate Interest)|Features|Special Features|Special Purposes|Scopi|Scopi (Interesse Legittimo)|Caratteristiche|Caratteristiche Speciali|Scopi Speciali","sp3_ret":"Le scelte che fai riguardo agli scopi e alle entità elencati in questo avviso sono salvate per un massimo di %sp3_retention% nei seguenti cookie e variabili di archiviazione locale","ill_pp_ttl":"Esempi di Utilizzo","vndr_dtls_con":"Trattamento dei dati basato sul tuo consenso","vndr_dtls_li":"Trattamento dei dati basato sul legittimo interesse","vndr_dtls_fi":"Trattamento dei dati basato sul tuo consenso o interesse legittimo","cks_strg_dur":"dura %DURATION%","cks_strg_ses":"per la sessione attuale","cks_strg_not_used":"non utilizzato","cks_strg_dur_s":"sec","cks_strg_dur_i":"min","cks_strg_dur_h":"ora(e)","cks_strg_dur_d":"giorno(i)","cks_strg_dur_m":"mese(i)","cks_strg_dur_y":"anno(i)","vr_dts_purl":"URL della politica sulla privacy","vr_dts_dsurl":"URL di divulgazione dell\u0027archiviazione del dispositivo","vr_dts_dsurl_h":"Informazioni aggiuntive su archiviazione e operazioni","vr_dts_clmurl":"URL della richiesta di interessi legittimi","vr_dts_datac":"Categorie di dati","vr_dts_datac_h":"Categorie di dati raccolti in relazione agli scopi","vr_dts_stdret":"Conservazione dei dati standard (giorni)","vr_dts_stdret_h":"Il periodo standard è utilizzato a meno che non sia dichiarato un altro periodo per scopi specifici.","vr_dts_ret":"Conservazione dei dati (giorni)","vr_dts_usecks":"Usa i cookie","vr_dts_usecks_h":"Indica se il fornitore utilizza l\u0027archiviazione dei cookie (sessione o altro). SÌ indica che l\u0027archiviazione dei cookie è utilizzata. NO - l\u0027archiviazione dei cookie non è utilizzata.","vr_dts_usecksy":"Sì","vr_dts_usecksn":"No","vr_dts_cksage":"Età massima del cookie","vr_dts_cksage_h":"Il numero di secondi che rappresenta la durata potenziale più lunga per l\u0027archiviazione dei cookie su un dispositivo. Se un fornitore utilizza più cookie con durate diverse, rappresenta il cookie con la durata più lunga. Un numero negativo o 0 indica l\u0027archiviazione della sessione simile alla specifica Set-Cookie.","vr_dts_cksref":"Aggiornamento cookie","vr_dts_cksref_h":"Indica se i cookie vengono aggiornati dopo essere stati inizialmente impostati. SÌ - indica che il fornitore può aggiornare i cookie. NO - indica che il fornitore non aggiorna i cookie ogni volta che il browser viene ricaricato.","vr_dts_noncks":"Utilizza l\u0027accesso senza cookie","vr_dts_noncks_h":"Indica l\u0027uso da parte del fornitore di archiviazione non-cookie e accesso alle informazioni già memorizzate sul dispositivo di un utente. SÌ - indica che l\u0027accesso senza cookie è utilizzato. NO - indica che l\u0027archiviazione e l\u0027accesso senza cookie alle informazioni già memorizzate sul dispositivo di un utente non vengono utilizzati.","vr_dts_hgetl":"Limite della lunghezza della richiesta HTTP GET (Kbyte)","vr_dts_hgetl_h":"Dimensione massima della richiesta GET in kilobyte per aiutare a diagnosticare i problemi con il passaggio della stringa TC e limitare le stringhe di dimensioni eccessive.","vr_dts_addtnl":"Dati aggiuntivi","vr_dts_legaddr":"Indirizzo completo dell\u0027entità legale","vr_dts_b2bcont":"Dettagli di contatto B2B","vr_dts_terscp":"Ambito territoriale","vr_dts_terscp_h":"Indica le giurisdizioni UE\/SEE\/UK in cui il fornitore opera con TCF. Nota che questo è diverso dalla sede del fornitore.","vr_dts_env":"Ambiente","vr_dts_env_h":"Indica gli ambienti in cui il venditore opera","vr_dts_tserv":"Tipo di servizi","vr_dts_tserv_h":"Indica il tipo di servizi offerti dal venditore","vr_dts_trnsfout":"Trasferimenti internazionali fuori dall\u0027UE\/SEE","vr_dts_trnsfout_h":"Indica le giurisdizioni UE\/SEE\/UK in cui il fornitore opera con TCF. Nota che questo è diverso dalla sede del fornitore.","vr_dts_trnsfmch":"Meccanismi di trasferimento internazionale"}}