Guida introduttiva al css

+
Diamo vita al tuo portale web, gestiamo la tua
visibilità online, promuoviamo il tuo business

+Chi siamo ElaMedia Group è una Web Agency di Roma che si occupa di:
• Gestire dei portali di proprietà
• Promuovere l'attività dei propri clienti
• Creare e gestire portali web
• Proporre dei corsi di formazione (filiere ICT e
Comunicazione e Marketing)
2
Enrico Mainero - www.elamedia.it 25/11/14

+
Web Academy
Percorsi di specializzazione e di certificazione

+Programma Web Academy Il programma di certificazione Web Academy è dedicato alla
formazione didattica specialistica per quel che riguarda il
mondo del Web. Gli obiettivi di questo programma di
certificazione:
• innovare la didattica italiana (formazione scolastica)
• favorire la veicolazione di competenze informatiche
• certificare queste competenze
Nel portfolio Web Academy percorsi relativi alla progettazione,
lo sviluppo e l'amministrazione di siti web, al web editing di
testi ottimizzati e all’indicizzazione sui motori di ricerca
4

+ I percorsi Web Academy
5

+Web Master Program Associate
Il programma di certificazione Web Academy è dedicato alla
formazione didattica specialistica per quel che riguarda il
mondo del Web. Il percorso “Web Master Program” Associate
prepara alla certificazione Web Master Program Associate
Certified. Il percorso è composto da tre corsi:
• Corso base di HTML
• CMS Joomla o Wordpress
• Grafica per il web
Ogni corso prepara al 30% rispetto alla certificazione di
riferimento. Per poter sostenere l'esame di certificazione
ufficiale è necessario aver frequentato i tre corsi.
6

+
Dott.
SEO – Web Marketing Associate
Il percorso “SEO Web Marketing” Associate prepara alla
certificazione SEO Web Marketing Associate Certified. Il
percorso è composto da tre corsi:
• Web Copywriter – scrittura sul web
• Best Practices SEO
• Principi di Web Marketing
Ogni corso prepara al 30% rispetto alla certificazione di
riferimento. Per poter sostenere l'esame di certificazione
ufficiale è necessario aver frequentato i tre corsi.
7

+Corso base CSS
Parte del Percorso ufficiale Web Master Program Associate

+Agenda
• Cos’è e a cosa serve il CSS
• Regole e CSS
• CSS incorporati, interni ed esterni
• Selettori
• Classi e Identificatori
• Posizionamento CSS
• Il colore
• Immagini e CSS
• Gestire il testo
• CSS3
9

+Cos’è il CSS e a cosa serve
Il CSS, acronimo di Cascading Style Sheets, che in italiano significa
fogli di stile a cascata, viene utilizzato per definire gli elementi grafici
e non della struttura html.
Questi infatti servono a gestire in modo pratico il layout di un sito web
intervenendo su ogni elemento come il font, i colori, i margini, le
linee, il posizionamento degli elementi, le immagine di sfondo con
relative altezze e larghezze la formattazione del testo e tantissime altre
cose.
In sostanza non definiscono subito l’aspetto di un documento, ma
stabiliscono il modo in cui i browser rappresentano un determinato
oggetto. Scrivere un codice CSS richiede le basi del linguaggio HTML.
10

+Storia del CSS
Il Word Wide Web nacque intorno agli anni 90 e tutte le persone che
cominciarono a sfruttare questa piattaforma avevano poco controllo
per la gestione degli elementi grafici di una pagina web e quello che
potevano fare era mettere un testo di intestazione e formattarlo in bold
o italic.
Con il passare degli anni, nel 1994 gli autori capirono la potenzialità e
allo stesso tempo le limitazioni che il linguaggio HTML aveva.
11

+Sviluppo del CSS
Nel marzo del 1995 il W3C (World Wide Web Consortium) iniziò a
lavorare su una versione di HTML più avanzata e con numerose e
fondamentali modifiche per definire uno standard.
Ecco che l’anno a seguire nel 1996, viene messo a disposizione di tutti
i web master e web designer le specifiche del CSS1 seguite nel 1998
dalle specifiche del CSS2, atte ad andare incontro alle esigenze di
grafici e professionisti e allo stesso tempo a separare i contenuti HTML
dal loro aspetto grafico.
12

+Storia del CSS3
Da diversi anni, i web designer, hanno come l’impressione che lo
sfruttamento delle potenzialità del Css sia confinato a se stesso,
oppure che molto spesso a sostituirlo su diversi fronti sia il javascript.
Ecco che da circa tre anni si sta lavorando per stare sia al passo
dell’html5 e sia delle esigenze del nuovo web: così con i CSS3 è
prevalsa l’idea di suddivisione dei moduli, aggiunta di proprietà,
tecniche e metodi tarati finalmente sulle esigenze di chi crea siti web.
13

+Regole e CSS
Il foglio di stile è un documento che raccoglie un insieme di regole di
rappresentazione, che determinano l’aspetto delle proprietà dei vari
elementi della pagina a cui il foglio è associato.
La regola è composta dal selettore e dalla dichiarazione che a sua
volta è composta dalla proprietà e dai valori. In sostanza la regola CSS
determina il modo in cui il browser interpreterà il selettore.
14

+Regole e CSS
• Il Selettore identifica l’oggetto della pagina a cui si vuole attribuire
un determinato aspetto, come per esempio body, a, p, h1 ecc,
• All’interno di due parentesi graffe si trovano le dichiarazioni
separate da punto e virgola.
• Le dichiarazioni sono composte dalle proprietà, ossia l’aspetto
dell’elemento da modificare secondo un valore espresso. Proprietà
e valori devono essere separati da due punti
15

+CSS esterni e interni
Per richiamare un foglio di stile CSS in una pagina html esistono
differenti modi, importante è capire prima la differenza tra css esterno
e interno:
• Css Esterno è definito in un file completamente differente e separato dal
documento html
• Css Interno invece è compreso nello stesso documento del codice html
A seconda del loro utilizzo variano le diverse modalità di
inserimento del foglio di stile all’interno del documento html. Le
modalità sono
• Css incorporati
• Css collegati o esterni
• Css in linea
16

+La struttura dei fogli CSS: incorporato
Il foglio di stile incorporato è inserito direttamente nel documento
HTML attraverso il tag <style> dentro <head>. Si usa quando lo stile
si riferisce a più elementi della stessa pagina.
<head>
<style type="text/css">
<!—
p {
text-align: justify;
text-indent: 12px;
}
-->
</style>
</head>
Tutti i paragrafi riceveranno le medesime indicazioni.
17

+La struttura dei fogli CSS: collegato o esterno
Il foglio di stile collegato o esterno, come già accennato, è un file del
tutto scollegato dal documento HTML ma la sua funzione è identica al
css incorporato.
Viene richiamato nella <head> del documento attraverso il tag <link>
ed alcuni importanti attributi:
<head>
<link rel="stylesheet" href="/nome_assegnato.css" type="text/css">
</head>
dove nome_assegnato.css è il nome preciso del file Css, generato con
un editor. E’ il miglior modo per inserire un foglio di stile nell’html in
quanto la modifica risulta più semplice.
18

+La struttura dei fogli CSS: in linea
Il foglio di stile in linea avviene tramite la dichiarazione del singolo
tag all’interno del documento HTML tramite l’attributo <style>. Se
vogliamo solo un paragrafo con testo giustificato e con carattere di
grandezza 12, occorrerà scrivere:
<p style="text-align: justify; font size: 12"> Testo </p>
In sostanza la dichiarazione dello stile avviene a livello dei singoli tag
contenuti nella pagina e per questo si parla di fogli di stile in linea.
19

+
Combinare gli stili css
E’ possibile utilizzare in
contemporanea di più stili css:
• creiamo un foglio di stile css che
vada a collegarsi ai tre documenti
HTML
• creiamo un foglio di stile
incorporato (nel secondo
documento) per modificare una
sezione del documento stesso
• copiamo il foglio di stile
incorporato del secondo
documento nell'ultimo file HTML
che abbiamo a disposizione. A
quel punto dovremmo aggiungere
una regola in linea (proprio nel
terzo documento) che abbia
precedenza rispetto alla sezione
che si era andata a modificare con
il foglio di stile incorporato.
20
En rico Mainero - www.elamedia.it 25/11/14

+Vari tipi di selettori
Esistono differenti tipi di selettori
• Selettore universale, si esprime con un asterisco * e assegna una
determinata proprietà e valore a tutti gli elementi della pagina
* {color: red;}
• Selettore di tipo è formato dal nome di uno specifico elemento
HTML e serve principalmente a selezionare tutti gli elementi di
quel tipo presenti in un documento
h1 {color: green;}
21

+Vari tipi di selettori
• Selettore di classe è un selettore del tutto personalizzato
combinato con parole più o meno descrittive da utilizzare in
collegamento con determinati tag.
.testobianco {color: bianco;}
• Selettore ID viene usato per Identificare in modo univoco un
elemento.
#testobianco {color: bianco;}
22

+Guida all'utilizzo delle classi
Il selettore di classe, come già accennato, è un selettore
personalizzato che può essere combinato con parole più o meno
descrittive da utilizzare in collegamento con determinati tag.
In un foglio di stile (collegato o incorporato) creiamo una classe
digitando un punto seguito dal nome che si vuole associare.
<style>
h1 .elamedia {
color: #000000;
}
</style>
A questo punto occorre individuare, nel documento HTML oggetto del
nostro lavoro, l'elemento a cui si desidera associare questa classe.
<body>
<h1 class="elamedia">Web Agency</h1>
</body>
23

+Guida all'utilizzo degli identificatori
I selettori ID, ossia identificatori, servono per selezionare un unico
elemento presente nella pagina. In un foglio di stile in questo caso,
creiamo un identificatore digitando # e seguito dal nome che si vuole
associare:
<style>
#intestazione_elamedia {
color: #000000;
}
</style>
A questo punto occorre individuare, nel documento HTML oggetto del
nostro lavoro, l'elemento a cui si desidera associare questo ID.
<body>
<h1 id=“intestazione_elamedia">Web Agency</h1>
</body>
24

+Le differenze tra selettore di classe o id
Le differenze sostanziali di un selettore di classe e selettore id è
fondamentale:
• Una singola classe si può richiamare a più elementi all’interno del
documento HTML:
<h1 class=“testo_rosso”>…</h1>
<p class=“testo_rosso”>…</p>
<div class=“testo_rosso>…</div>
• Il selettore ID invece è univoco, ciò vorrà dire che non potrò
richiamarlo più di una volta:
<h1 id=“testo_blu>…</h1>
<p id=“testo_blu>…</p> questo attributo non funzionerà
25

+Il posizionamento nel CSS
Il posizionamento degli elementi tramite il HTML mostra ancora oggi
delle diverse limitazioni non ancora facilmente superabili. Il
posizionamento basato sui fogli di stile è totalmente un “altra storia” in
quanto rappresentano una forte potenzialità del CSS e saperli
conoscere e gestire risulta quasi obbligatorio per un web designer.
26

+Il posizionamento nel CSS
La proprietà position il modo più semplice per posizionare un
determinato elemento nella pagina web, ma non è l’unico. Questa
proprietà può essere definita attraverso quattro valori:
• Static
• Fixed
• Relative
• Absolute
27

+Posizioni CSS - Static
Position Static rappresenta la posizione di default, cioè la normale
posizione che gli elementi occupano nel flusso del documento.
<style>
.h1 {
position: static;
}
</style>
28

+Posizioni CSS - Fixed
Usando Position Fixed, l’elemento in questione viene “sottratto” al
normale scorrimento del documento HTML quindi non scorrerà
assieme tutto il documento ma rimarrà fisso al suo posto
29

+Posizioni CSS - Relative
Con Position Relative possiamo gestire un posizionamento relativo
rispetto al suo contenitore. In pratica si va a modificare la naturale
posizione di un elemento spostandolo attraverso gli attributi di
posizionamento: top (in alto), bottom (in basso), left e right
(specificando ovviamente un valore numerico seguito da un'unità di
misura:
<style>
.h1 {
position: relative;
top: 10px;
left: 20px;
}
</style>
30

Guida introduttiva al css

More Related Content

What's hot

Viewers also liked

Similar to Guida introduttiva al css

Guida introduttiva al css