Guida introduttiva al css

+

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

+ 2 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)

25/11/14 Enrico Mainero - www.elamedia.it

2

+Web Academy Percorsi di specializzazione e di certificazione

+ 4 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

+ 5

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

+ 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

Internet

Transcript of Guida introduttiva al css