CSS3: La guida pratica e veloce di CSS per sviluppatori web
3.9 (17 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.
293 students enrolled
Wishlisted Wishlist

Please confirm that you want to add CSS3: La guida pratica e veloce di CSS per sviluppatori web to your Wishlist.

Add to Wishlist

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
3.9 (17 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.
293 students enrolled
Created by Hidran Arias
Last updated 8/2017
Italian
Current price: $12 Original price: $95 Discount: 87% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 7.5 hours on-demand video
  • 2 Articles
  • 11 Supplemental Resources
  • 16 Coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • 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
View Curriculum
Requirements
  • Usare un browser web
  • usare un editor di testo
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!

Who is the target audience?
  • Chiunque voglia imparare disegno web o diventare un web developer
  • Web designer
  • Dev ops
  • Sviluppatori
  • backend developers
  • Graphic desginers
Compare to Other Web Development Courses
Curriculum For This Course
73 Lectures
07:23:46
+
Introduzione al corso
1 Lecture 02:36

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

Preview 02:36
+
Struttura di una pagina web
2 Lectures 08:36

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>

Struttura di una pagina web
05:12

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

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>

Fogli di stile inline e conclusione
03:24
+
Introduzione ai fogli di stile: CSS
3 Lectures 13:43

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

Attributo style
03:47

Aggiungiamo l'attributo style ad un elemento per formattarlo usando CSS
Aggiungere attributo style ad un elemento html
1 question

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

Il tag style per formattare una singola pagina
03:40

Aggiungiamo il tag style per formattare una pagina specifica
Aggiungere il tag style ad una pagina web
1 question

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

Fogli di stile esterni
06:16

Aggiungere un foglio di stile esterno ad una pagina web
Aggiungere un foglio di stile esterno ad una pagina web
1 question
+
Selettori di Elementi
4 Lectures 24:46

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

Preview 09:54

Con una sola regola di CSS, aggiungere delle proprietà a diversi elementi
Aggiungere un bordo rosso a tutti gli elementi h1, h2, h3, h4, h5 e h6
1 question

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>

Selettori di class e ID
08:11

Vediamo un esercizio pratico di come formattare un elemento o diversi elementi che abbiano la stessa class CSS
Aggiungere delle proprietà CSS usando l'attributo class degli elementi
1 question

Vediamo come aggiungere delle proprietà CSS ad un elemento che abbia un id
Aggiungere delle proprietà CSS ad un elemento html che abbia un certo ID
1 question

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{

}

Selettori di tipo discendenti e figli: siblings, children
03:34

Vediamo come Selezionare tutti gli elementi discendenti di un elemento html per poterli formattare
Selezionare tutti gli elementi discendenti di un elemento html
1 question

Vediamo come Selezionare solo i figli diretti di un elemento
Selezionare solo i figli diretti di un elemento
1 question

Selettori CSS. Conclusioni
03:07
+
Formattazione del testo
5 Lectures 21:13

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;

}

Dimensione del testo: font-size
04:39

Vediamo come impostare la dimensione del testo usando la proprietà font-size
Impostare la dimensione del testo
1 question

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;

}

Allineamento del testo: text-align
03:07

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

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*/

}

Colori del testo: color
08:31

Vediamo come impostare il colore de testo usando la proprietà css color.
Impostare il colore del testo ad un elemento
1 question

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*/

}

Altezza del testo e trasformazione
04:52

L'altezza della linea del testo s'imposta con line-height e la trasformazione in maiuscolo minuscolo con text-transform
Impostare altezza del testo e trasformare tutto il testo in maiusculo
1 question

Download esercizi pratici della sezione
00:04
+
Font, font-family e font-face
3 Lectures 30:08

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*/

}

Preview 13:53

Studieremo come importare dei font esterni nelle nostre pagine web

Google fonts e altri font esterni
11:34

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

Scaricare font in locale e aggiungerli con @font-face
04:41

Aggiungere una famiglia di font ad una pagina html
1 question
+
Aggiungere bordo, padding e margine ad un elemento html5
4 Lectures 16:19

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

}

Aggiungere bordo ad un elemento html5: border
06:41

Vediamo come usare le proprietà: border, border-width, border-style,border-color, per impostare i bordi di un elemento
Aggiungere un bordo ad un elemento html
1 question

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;

}

Aggiungere padding ad un elemento html5
03:28

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

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;

}

Aggiungere margine ad un elemento html5: margin
03:41

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;

}

Preview 02:29
+
Aggiungere colore e immagini di sfondo ad una pagina web html5.
6 Lectures 25:10

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*/

}

Preview 06:51

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') ;

}

Aggiungere diverse immagini di sfondo ad un elemento
04:10

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);

}


Colore di sfondo e background-clip
03:21

Background-attachment
03:21

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') ;

}

Aggiungere diverse immagini di sfondo ad un elemento
04:10

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

body {

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

}

Definire tutte le proprietà di sfondo con la proprietà background
03:17
+
Formattare una immagine
1 Lecture 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

Preview 06:39
+
Posizionare elementi: STATIC, ABSOLUTE, RELATIVE, FIXED
3 Lectures 17:04

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;

}

Introduzione al posizionamento degli elementi html
03:42

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*/

}

Posizionamento Assoluto e Relativo
09:22

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*/

}

Posizionamento fisso
04:00
10 More Sections
About the Instructor
Hidran Arias
4.4 Average rating
1,370 Reviews
9,420 Students
16 Courses
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 .