CSS STYLING ONLINE

programma corso CSS box

Qui puoi trovare il programma del corso online di CSS completo e aggiornato, punto per punto.


  1. Introduzione ai linguaggi di descrizione standard.

    È di fondamentale importanza comprendere la nascita e l'evoluzione dei linguaggi di descrizione e le differenze con la programmazione. In questa lezione imparerai inoltre a distinguere i contenuti dall'aspetto grafico e del layout delle pagine web.

    Basi di HTML e HTML5. Il W3C e i linguaggi standard. Contenuti e formattazione. Funzionamento dei browser e accessibilità dei contenuti. Layout di una pagina web e versioni responsive del sito.

  2. Basi del linguaggio CSS.

    Imparare la grammatica CSS è il primo step per affrontare la comprensione del linguaggio in ogni suo aspetto, al fine di evitare lacune o interpretazioni errate. Con una buona base non si avranno incertezze.

    Associare i fogli stile CSS a una pagina web. Sintassi di base del linguaggio. Sintassi di una regola CSS. Fogli stile in linea, incorporati, esterni ed importati. Selettori e dichiarazioni CSS. Proprietà CSS e valori.

  3. Selettori CSS

    In questa lezione entreremo nel vivo del linguaggio CSS dal punto di vista dei selettori, elemento basilare per la selezione ed il riconoscimento dei nostri contenuti da formattare. Capirai la "cascata CSS" e la sua applicazione.

    Selettori per tipo, selettori per attributo, selettori per stato e selettori di posizione. La cascata dei fogli stile: significato e utilizzo. Il supporto ai selettori CSS. Selettore universale. Classi e ID. Pseudoclassi e pseudoelementi. Direttiva important. Compatibilità CSS2 e CSS3. Combinatori CSS: discendenza, figlio, adiacenza e precedenza.

  4. Box Model e proprietà di layout di base.

    Il box model ci introduce direttamente alle proprietà per il layout delle pagine web, importanti per il funzionamento del sito web su tutti i dispositivi e senza errori di visualizzazione.

    Box Model e HTML. Elementi in-line level, elementi block level ed elementi replaced. Proprietà del box model, riquadri css. Prorpietà css per larghezza, altezza, margini e padding, bordi css. Proprietà box-sizing. Proprietà css display. Proprietà border-radius. Overflow e float. Visualizzazione sui diversi browser e reset css.

  5. Testo e sfondi con i CSS. Webfont, box e text shadow, gradient.

    Un po' di colore ma non solo: è il momento di scoprire le possibilità per l'utilizzo dei webfont, vera arma dei grafici del web. Grazie alla versione 3 del linguaggio CSS possiamo garantire alle pagine web un aspetto grafico di alto livello.

    Colorare con i CSS: metodi HEX e RGBa. Proprietà background-color, background-image, gradient. Posizione, dimensione, maschere, ripetizione, origine e attachment per gli sfondi. Proprietà box-shadow e opacity. Applicare i font con i CSS. Differenza tra font di sistema e webfonts. Caratteristica @font-face e utilizzo. Proprietà CSS dei font (family, style, variant, weight, size, line-height, text-align, text-decoration, text-indent, text-shadow). Altre proprietà css2 e css3.

  6. Impaginazione e creazione dei menu con i CSS.

    In questo modulo del corso CSS avrai la possibilità di sperimentare le innumerevoli soluzioni grafiche per la progettazione di layout più o meno complessi per le pagine web e per la creazione dei menu di navigazione.

    Concetto di flusso HTML e alterazione. Posizionamenti CSS: statico, relativo, assoluto e fisso. Sovrapposizione di elementi e proprietà z-index. Creare layout fissi e fluidi. Predisporre un layout per le media queries (introduzione ai layout responsive e adattivi). Layout a colonne. Layout a griglie. One Page layout. Creare menu di navigazione a 1 livello. Menu di navigazione a più livelli. Menu per dispositivi mobili e altre varianti.

  7. Layout responsive per cellulari e tablet.

    Versione mobile o sito web responsive? Si può dire che, a parte esigenze particolari, i siti web devono essere responsive: il layout e l'aspetto grafico si adatteranno alle dimensioni di tutti i dispositivi mobili e fissi.

    Attributo media. Tipi di media e media queries. Media features. Orientamento verticale e orizzontale per smartphone e tablet. Gestire i fogli stile con le media queries. Media queries CSS. Versioni ottimizzate per i dispositivi più diffusi.

  8. Effetti speciali e animazioni CSS.

    Le nuove frontiere del linguaggio CSS ci offrono la possibilità di creare effetti grafici di alto livello e di animare i nostri contenuti senza bisogno di programmazione javascript, almeno per i browser moderni...

    Disegno di elementi attraverso il tag <canvas>. Trasformazioni CSS. Trasformazioni scala, ruota, trasla, distorci. Applicare trasformazioni multiple. Modificare l’origine della trasformazione di un elemento. Transizioni CSS3. Proprietà, durata e temporizzazione.


HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, and Semantics