CSS3: La guida pratica e veloce di CSS per sviluppatori web

Impara CSS, Fogli di stile, per cominciare subito a formattare una pagina web con i fogli di stile a cascata CSS
4.8 (11 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
242 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 73
  • Exercises 16 coding exercises
  • Length 7.5 hours
  • Skill Level All Levels
  • Languages Italian
  • Includes Coding Exercises New!
    Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2016 Italian

Course Description

Con questa guida pratica al CSS3 potrai formattare un intero sito web e renderlo responsive in modo che sia usufruibile per qualunque dispositivo utilizzando i media query selector.

Vedremo come selezionare con CSS3 gli elementi di una pagina web per nome di tag, classe, id e elementi figli e padri per poterli formattare.

Imparerai ad aggiungere padding, border e margin agli elementi.

Imparerai a cambiare colore al testo, colore allo sfondo degli elementi.

Imparerai ad aggiungere immagini di sfondo.

Imparerai a posizionare gli elementi html usando gli attributi position e float

Imparerai a creare diversi tipi di layout e renderli responsive.

Le lezioni ti guideranno passo a passo a conoscere le proprietà più importanti del CSS3 e come applicarle.

In meno di una settimana potrai cominciare a creare pagine web senza bisogno di un CMS.

Se veramente vuoi entrare nel meraviglioso mondo dello sviluppo web, questo è il corso con cui cominciare!

What are the requirements?

  • Usare un browser web
  • usare un editor di testo

What am I going to get from this course?

  • Usare le proprietà CSS più importanti
  • Formattare testo
  • Aggiungere padding, margin e border
  • Aggiungere immagini di sfondo
  • Creare layout di pagine web
  • Usare i media query per rendere una pagina web responsive
  • Creare dei layout responsive

What is the target audience?

  • Chiunque voglia imparare disegno web o diventare un web developer
  • Web designer
  • Dev ops
  • Sviluppatori
  • backend developers
  • Graphic desginers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduzione al corso
02:36

In questa lezione vedremo com'è strutturato il corso e le diverse sezioni del corso

Section 2: Struttura di una pagina web
05:12

In questa lezione creeremo la struttura base di un documento html5.

Vedremo la dichiarazione del tipo di documento ,<!doctype>,

l'elemento radice html, l'elemento delle intestazioni, <head>, il titolo della pagina, <title>

e il corpo della pagina web:<body>

<!doctype html>

<html>

<head>

<title>Titolo della pagina</title>

</head>

<body>

Qui vanno gli elementi visibili della pagina

</body>

</html>

1 question
Creare lo scheletro di una pagina web con doctype html5 e struttura minima standard
03:24

Possiamo formattare un elemento individualmente attraverso l'attributo style.

Le proprietà css date all'elemento con style, hanno priorità sulle stesse proprietà dichiarate

a livello di pagina o fogli di stile esterni.

Vediamo un esempio:

<p style="padding:5px;color:red"> Il mio contenuto</p>

Section 3: Introduzione ai fogli di stile: CSS
03:47

Anche se sarebbe meglio utilizzare dei fogli di stile esterni per formattare un elemento, a volte siamo costretti

ad utilizzare l'attributo style ( se non abbiamo acceso al filesystem), ad esempio in un CMS come wordpress o Joomla.

Le proprietà css inserite con l'attributo style hanno un livello più alto di proprietà del CSS del tag <style> o esterno

1 question
Aggiungiamo l'attributo style ad un elemento per formattarlo usando CSS
03:40

Il tag <style> ci permette di formattare con CSS gli elementi di una pagina.

Queste proprietà css inserite, avranno effetto solo nella pagina in cui vengono inserite

e sovrascrivono le stesse proprietà definite in un foglio di stile esterno

1 question
Aggiungiamo il tag style per formattare una pagina specifica
06:16

I fogli di stile esterni si aggiungono ad una pagina usando il tag <link> e indichiamo la URL dove si trova

il file con l'attributo href. La url può essere assoluta o relativa alla cartella della pagina web. Possiamo indicare con l'attributo media, su quale media vogliamo che abbia effetto il css aggiunto. Può essere, ad esempio, all ( valore predefinito) oppure un media query come width, height, orientazione portrait o landscape, ecct.

Vedi https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

1 question
Aggiungere un foglio di stile esterno ad una pagina web
Section 4: Selettori di Elementi
09:54

In questa lezione vedremo come selezionare gli elementi html con i fogli di stile per dargli

una formattazione specifica.

Si seleziona un o vari elementi usando il nome dell'elemento.

p{} selezionerebbe solo gli elementi p presenti nella pagina. p , div, <section> {} , selezionerebbe

tutti gli elementi di tipo p, div e section

1 question
Con una sola regola di CSS, aggiungere delle proprietà a diversi elementi
08:11

Possiamo formattare elementi comuni utilizzando il selettore class e ID.

Esempio :

<div class="highlight"></div>

<p class="highlight"></p>

Posso selezionare ambi i tag della forma seguenti:

.highlight{

}

Se uso un id, per identificare univocamente un elemento, posso selezionarlo così:

#idElement{} , dove idElement sarebbe l'id dell'elemento: <p id="idElement"></p>

1 question
Vediamo un esercizio pratico di come formattare un elemento o diversi elementi che abbiano la stessa class CSS
1 question
Vediamo come aggiungere delle proprietà CSS ad un elemento che abbia un id
03:34

Tutti gli elementi dentro un tag sono discendenti dell'elemento padre ma non tutti sono figli diretti:

<div id="main">

<h1></h1>

<div id="submain">

<p id="p1">

</p>

</div>

<p id="p2"></p>

</div>

L'elemento h1 e div con id= submain sono figli diretti del DIV con id=main

ma il paragrafo, p con id p1, no. <p id="p1"> e' un discendente ma non un figlio,

invece <p id="p2">

Per trova tutti i tag p figli del Div main la regola è:

div#main > p{

}

mentre se voglio selezionare tutti i tag p del div main:


div#main p{

}

1 question
Vediamo come Selezionare tutti gli elementi discendenti di un elemento html per poterli formattare
1 question
Vediamo come Selezionare solo i figli diretti di un elemento
Selettori CSS. Conclusioni
03:07
Section 5: Formattazione del testo
04:39

Possiamo indicare la dimensione del testo con CSS usando la proprietà font-size.

La dimensione la possiamo dare con una valore assoluto, di solito indicato in pixel, px, oppure

relativo alla dimensione predefinita o ereditata dall'elemento padre, con la percentuale: % oppure in em.

esempio:

p{

font-size : 16px

}

div {

font-size: 120%;

}

Se indico la percentual in em:

div {

font-size: 1.2 em;

}

1 question
Vediamo come impostare la dimensione del testo usando la proprietà font-size
03:07

Possiamo allineare il testo usando la proprietà css text-align, dove possiamo indicare sinistra,

destra, centro e giustificato: left, right, center, justify.

div {

text-align: left;

}

1 question
Per allineare un testo, si usa la proprietà text-align cui valore possono essere : center, left, right e justify
08:31

Per dare colore a un test usiamo la proprietà color .

Il valore della proprietà color lo passiamo dare in esadecimale usando #codiceesadecimalecolore,

con il nome del colore:red, blue, brown ecct, oppure in rgb o rgba se vogliamo dare anche l'opacità del colore. Vediamo un esempio:

p {

color: red; /* dà colore rosso al testo di un paragrafo*/

}

p {

color:#FF0000; /* dà colore rosso al testo di un paragrafo*/

}

p {

color:rgb(255,0,0); /* dà colore rosso al testo di un paragrafo*/

}

p {

color:rgb(255,0,0, 1); /* dà colore rosso al testo di un paragrafo*/

}

1 question
Vediamo come impostare il colore de testo usando la proprietà css color.
04:52

Possiamo definire l'altezza della linea del testo con la proprietà: line-height e il valore in px oppure in percentuale. Per transformare tutto il testo in UPPERCASE, LOWERCASE oppure mettere in maiuscolo solo la prima lettera di ogni parola, usiamo la proprietà css text-transform. Vediamo un esempio di ciascuno:

p {

line-height: 25px;

text-transform: uppercase /* posso metter LOWERCASE | CAPITALIZE*/

}

1 question
L'altezza della linea del testo s'imposta con line-height e la trasformazione in maiuscolo minuscolo con text-transform
Download esercizi pratici della sezione
Article
Section 6: Font, font-family e font-face
13:53

Le famiglie generiche di font più generale sono le Sans, Sans-serif e monospace.

Dentro ad ognuna di loro possiamo trovare delle sottofamiglie come Tahoma, Arial, Helvetica, Times new Roman ecct.

Indichiamo il font con il la proprietà in specifico font-family, oppure con la proprietà generale font.

body{

font-family: Tahoma, Helvetica, Sans-serif;

}

oppure

body{

font : 12px Tahoma, Helvetica, Sans-serif;

}


p{

font :italic 12px Tahoma, Helvetica, Sans-serif; /*indico font-variant , size e poi family*/

}


p{

font :12px/25px Tahoma, Helvetica, Sans-serif; /*indico size/line-height*/

}

11:34

Studieremo come importare dei font esterni nelle nostre pagine web

04:41

Vedremo come scaricare font in locale e poi collegarli ad un foglio di stile utlizzando la proprietà @font-face

1 question
Utilizzando la proprietà font-family oppure font. si può impostare un font al documento
Section 7: Aggiungere bordo, padding e margine ad un elemento html5
06:41

In questa lezione vedremo come aggiungere bordo ad un elemento html5 con la proprietà border.

Vediamo un esempio di come formattare il border di un elemento in una pagina web con i fogli di stile CSS

p {

border: 1px solid red; /* bordo rosso di un pixel

}

p {

border: 2px dashed #c0c0c0; /* bordo grigio di un pixel tratteggiato

}

p {

border: 1px inset red; /* bordo rosso di un pixel inset

}

1 question
Vediamo come usare le proprietà: border, border-width, border-style,border-color, per impostare i bordi di un elemento
03:28

Padding indica lo spazio tra il testo e il bordo dell'elemento. Lo possiamo indicare con la proprietà

css padding:

div {

padding: 10px;
}

Se do due valori, la prima sarebbe per top-bottom e la seconda left-right:

div {

padding: 10px 15px;
}

Se do tre valori, la prima sarebbe per top, la seconda per left-right e l'ultima per bottom

div {

padding: 10px 15px 15px;
}

Oppure posso dare tutt'e 4

div {

padding: 10px 15px 15px 10px;
}

posso indicare il padding individualmente usando padding-top, padding-right, padding-left e padding-bottom:

p{

padding-top: 5px;

padding-right: 15px;

padding-bottom: 5px;

padding-left:15px;

}

1 question
Usiamo la proprietà padding, padding-top, padding-left, padding-right, padding-bottom per impostare il padding di un elemento
03:41

In questa lezione vedremo come aggiungere margine ad un elemento html5 con la proprietà margin.

Vediamo un esempio di come dare margine ad un elemento in una pagina web con i fogli di stile CSS

p {

margin: 5px

}

p{

margin-top: 5px;

margin-right: 15px;

margin-bottom: 5px;

margin-left:15px;

}

02:29

Un modo per far sìcchè gli angoli di un elemento vengano arrotondati è utilizzare

la proprietà del CSS3 border-radius :

Per indicare gli angoli, si usa come per il padding, margin e border: top right bottom left:

div {

border-radius:15px

}

Se vogliamo dare un radio ad un bordo in particolare, usiamo:

div{

border-top-left-radius :15px;

border-top-right-radius :15px;

border-bottom-right-radius :15px;

border-bottom-left-radius :15px;

}

Section 8: Aggiungere colore e immagini di sfondo ad una pagina web html5.
06:51

Per aggiungere un'immgine di sfondo ad un elemento di una pagina web, utlizziamo la proprietà

background-image:

DIV {

background-image: url ('percorso/della/immagine');

}

possiamo indicare se si deve ripetere lungo l'asse X ,Y oppure che non si ripeta, con la proprietà background-repeat :

DIV {

background-image: url ('percorso/della/immagine');

background-repeat: no-repeat ; /* oppure repeat-x o repeat-y*/

}

03:21

Oltre a una immagine di sfondo, possiamo aggiungere una colore di sfondo ad un elemento di una pagina html5 con la proprietà css background-color:

div.red {

background-color: red;

}

Gli stessi tipi di valore che abbiamo visto per il colore di primo piano, color, si usano anche per il background color:

div.red {

background-color: #ff0000;

}

oppure {


div.red {

background-color: rgb(255,255,0);

}


Background-attachment
03:21
04:10

Se vogliamo indicare più di una immgine di sfondo, separiamo le url delle immagine da virgola

e poi anche la proprietà di background-repeat si deve separare da virgola altrimenti si applicherà a tutte:

DIV {

background-image: url ('percorso/della/immagine'), url ('percorso/della/seconda/immagine') ;

}

03:17

Possiamo usare la scorciatoia background per impostare tutti i valori di sfondo di un elemento html5:

body {

background: green url('percorso/immagine') repeat-x;

}

Section 9: Formattare una immagine
06:39

Possiamo includere una immagine in una pagina html utilizzando il tag <img>

Con l'attributo src indichiamo dove si trova la immagine. Con width, e height indichiamo

la larghezza e l'altezza. Le stesse proprietà si possono aggiungere con i fogli di stile CSS.

<img src="percorso/immagine" width="400" height="250">

Vedremo come formattare anche il testo attorno all'immagine e come far "flottare" l'immagine ad un lato del testo

04:10

Se vogliamo indicare più di una immgine di sfondo, separiamo le url delle immagine da virgola

e poi anche la proprietà di background-repeat si deve separare da virgola altrimenti si applicherà a tutte:

DIV {

background-image: url ('percorso/della/immagine'), url ('percorso/della/seconda/immagine') ;

}

Section 10: Posizionare elementi: STATIC, ABSOLUTE, RELATIVE, FIXED
03:42

La posizione statica è quella predefinita per gli elementi di tipo blocco di una pagina html. Se vogliamo esplicitare comunque questo valore, possiamo impostarla così:

DIV {

position : static;

}

09:22

Il posizionamento relativo di un elemento html di tipo blocco serve per modificare la posizione dell'elemento rispetto alla sua posizione statica. Una volta impostata la proprietà position : relative, allora possiamo impostare le proprietà, top, left, right e bottom:

div {

position : relative;

top : 20px;

left:20px;

}

La posizione assoluta è simile alla posizione relativa ma le cordinate sono rispetto alla posizone 0,0 della pagina

( in alto a sinistra) e non rispetto alla posizione dell'elemento nella sua posizione normale.


div {

position : absolute;

top : 20px; /* rispetto al top della pagina*/

left:20px; /* rispetto al bordo sinistro della pagina*/

}

04:00

La posizione fissa le coordinate sono rispetto alla posizione 0,0 della finestra

e non rispetto alla posizione della pagina. Anche se si scorre la pagina(scroll) questa posizione non varia

rispetto alla finestra.

div {

position : fixed;

top : 20px; /* rispetto al top della pagina*/

left:20px; /* rispetto al bordo sinistro della pagina*/

}

Section 11: Elementi di tipo BLOCK, INLINE e INLINE-BLOCK
07:17

Gli elementi di tipo block , blocco, occupano tutto lo spazio disponibile dell'elemento padre.

Normalmente i browser li rappresentano lasciando una riga sopra e una riga sotto, quindi un elemento block aggiunto dopo un altro elemento, andrebbe a capo e occuperebbe tutta la larghezza disponibile.

L'elemento DIV è un classico elemento di tipo block. Ci serve per creare delle divisioni in una pagina web o per

raggruppare elementi simili per poterli formattare con i fogli di stile. Usatelo se non avete un altro tag semantico come section, article, aside .

03:03

Gli elementi di tipo INLINE, occupano solo lo spazio dell'elemento contenuto tra il tag e non aggiungono una riga a capo. Due elementi inline rimarrebbero uno a fianco all'altro. A differenza dell'elemento di tipo block, un elemento inline non occupa tutta larghezza del parent e non manda a capo gli elementi che lo seguono

03:32

Se vogliamo che un elemento inline occupi una larghezza superiore al suo contenuto, possiamo dichiarare la proprietà CSS display:inline-block

Section 12: Elementi "galleggianti": FLOAT
10:23

In questa lezione studieremo come posizionare gli elementi di una pagina utilizzando la proprietà float.

Pwer spostare un elemento tutto a sinistra:

ELEMENTO {

float : left;

}

Per spostarlo a destra:

ELEMENTO {

float : right;

}

Per togliere lo spostamento:

ELEMENTO {

float : none;

}

Importante sapere che se impostiamo la proprietà float ad un elemento inline, possiamo modificare la larghezza di esso.

Gli elementi "flottati" non fanno parte del flusso normale di una pagina e gli altri elementi

della pagina si posizioneranno come se loro non ci fossero.

Per fare in modo che gli elementi block non flottati si posizionino sotto gli elementi flottati,possiamo usare la proprietà css clear:

DIV.clear {

clear: both /* oppure clear:left o clear: right a seconda degli elementi flottati. Meglio both*/

}

02:09

In questa lezione vedremo come "flottare" gli elementi di una lista ul per fare un menù verticale:

In questo caso, impostando li { float:left}, anche se gli elementi li sono inline, possiamo modificare

la loro larghezza

02:14

In questa lezione studieremo come formattare una immagine all'interno di un paragrafo usando la proprietà float

img {

float : left;

border-radius:30px

}

Se impostiamo il border-radius alla metà della larghezza, otteniamo un'immagine arrotondata;

impostando float:left oppure float:right, possiamo spostare l'immagine a sinistra o destra

Section 13: Formattazione di una tabella html
05:55

Descrizione della lezione

Il tag <thead> serve a delimitare le righe che servono come intestazione o riassunto della tabella.

Il tag <tfoot> serve a indicare qual è/sono la/le righa/e del piè di pagina della tabella

Scarica questa lezione (Solo per l'insegnante)
06:53

Descrizione della lezione

<tbody> lo utilizziamo per raggruppare le righe che fanno parte del copro della tabella html

<colgroup> e <col> ci permettono raggruppare delle colonne per poterle formattare individualmente con i fogli di stile CSS

Scarica questa lezione (Solo per l'insegnante)
Section 14: Creazione e formatazzione di liste ordinate e non ordinate.
04:50

Le definition list, <dl>, ci permettono di creare una lista di definizione. Il tag radice sarebbe <dl> e ogni elemento

di definizione viene indicato col tag <dd>

08:46

In questa lezione studieremo le liste non ordinate, <ul> . La lista <ul> ha gli elementi della lista indicati col tag <li>, list item.

<ul>

<li>Elemento 1</li>

<li>Elemento2</li>

</ul>

Vedremo come formattarle con CSS

06:10
Continuiamo con le liste e studiamo le liste ordinate: <ol> . Gli elementi si aggiungono con il tag <li>. A differenza delle liste non ordinate, queste le posso ordinare dandole una numerazione, oppure utilizzando le lettere dell'abecedario, siano minuscole che maiuscole e sia in ordine crescente che decrescente.
Section 15: CSS3: Media type e Media queries
Attributo media nel tag style e link
06:48
03:30
Attributo  @media e @import nei fogli di stile

  per aggiungere del CSS a seconda del media type o media queries

05:05
CSS3:  Media queries  min-width. Cambiare il font a seconda della larghezza

del dispositivo

Section 16: Priorità dei fogli di stili a cascata
04:13

Vedremo come gli stile a cascata convergono e la stessa proprietà

per un elemento prevale se messa nel tag style, altrimenti se inserita per ultima.

Se c'è !importan dopo una proprietà, questa segnalazione avrà la proprità

03:31

Vedremo come se aggiungiamo una classe ad un elemento, le sue proprietà css hanno priorità

sull'elemento. Se aggiungiamo un id e diamo delle proprietà css, queste proprietà

avranno priorità più alta di classe ed elemento

03:07

Vediamo come usare i media query, @media, per  condizionare

delle proprietà del CSS alle caratteristiche del dispositivo, ad esempio, la dimensione dello schermo: screen

02:19

Facciamo un riassunto delle proprietà delle proprietà CSS

Section 17: Nuove proprietà del CSS versione 3
07:08

Per aggiungere ombra ad un testo, utilizziamo la proprietà CSS3 text-shadow
h1 {
text-shadow: 5px 3px 2px #c0c0c0;
}

  1. Il primo valore (5px) indica la distanza orizzontale dell'ombra: quanti pixel a destra. Se negativo, a sinistra
  2. Il secondo parametro, la distanza verticale. Se positivo verso il basso, se negativo verso l'alto
  3. Terzo parametro indica quanto sfocata deve essere l'ombra
  4. Quarto valore il colore

Il terzo e il quarto valore sono opzionali

01:49

per ombre multipli: separate le diverse ombre con la virgola:

h1{
font-size:24px;
text-transform: uppercase;
font-family: Tahoma, Helvetica, sans-serif;
text-shadow: 2px 2px 1px rgba(255,0,0,1),
-2px -2px 1px green;


}


08:32

Per aggiungere ombra ad un elemento, utlizziamo la proprietà CSS3 box-shadow

div {

box-shadow: 5px 3px 4px 12px #c0c0c0;

}


  1. Il primo valore (5px) indica la distanza orizzontale dell'ombra: quanti pixel a destra. Se negativo, a sinistra
  2. Il secondo parametro, la distanza verticale. Se positivo verso il basso, se negativo verso l'alto
  3. Terzo parametro indica quanto sfocata deve essere l'ombra
  4. Quarto valore: quanto si deve espandere l'ombra. Se negativo si contrae
  5. Quinto valore: il colore dell'ombra

Solo il primo e il secondo parametro sono obbligatori

07:44

Vediamo come creare un gradiente lineare, come scegliere l'angolo, i colori.

Section 18: Editors con cui scrivere html e css
02:25

Vediamo come scrivere del codice html utlizzando l'editor nodepad

01:27

Un valido sostituto di nodepad è notedpad++ per scrivere del codice in diversi linguaggi di programmazione.

07:23

Vediamo come installare java JDK  e netbeans full

15:37

In questa lezione vedremo come configurare l'editor di testo NetBeans e come aggiunger dei plugins

06:15

Con l'Editor NetBeans potrai sviluppare i tuoi siti web in html, css e javascript ma anche JAVA. Puoi arricchirlo di plugins.

Section 19: Boostrap 4
Boostrap4: Introduzione e installazione
Preview
06:46
Boostrap4: Griglia a 12 colonne. Creare layout responsive
Preview
12:30
10:13

In questa lezione di bootstrap 4 vedremo come aggiungere la barra di menu alla barra di navigazione

Bootstrap 4: Componente barra di navigazione
Preview
09:16
08:51

In questa lezione di bootstrap 4 vediamo come aggiungere una CALL TO ACTION alla nostra Landing page utlizzando il componente jumbotron

12:53

In questa lezione di bootstrap 4  vedremo come aggiungere call to action al jumbotron

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Hidran Arias, Software Engineer

I'm a cuban living in the beautiful city of Turin, Italy. I have a university degree in computer sciences in the field of automation engineering. I am a software engineer since 2002 and since then I have worked for different italian companies developing web applications with the latest technogies, most of them open sources, such as PHP, MYSQL, ORACLE, CSS, HTML, NODEJS, MONGODB and javascript libraries such as EXTJS, SENCHATOUCH, JQUERY, ANGULARJS.

When I am not programming, I am learning new languages,currently German and Arabic. Currently I speak SPANISH, my mother tongue, ITALIAN,almost my second mother tongue, ENGLISH, FRENCH and PORTUGUESE.

Playing GUITAR is one of my hobbies and passions and I dedicate it as much time as for languages and computer.

People say I am an easy talker, always ready to help people and I love teaching what I know and mainly new technologies. I try to keep always up to date not only by teaching but also by learning and taking courses such as the ones found here in UDEMY .

Ready to start learning?
Take This Course