Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
vuoi
o PayPal
tutte le volte che vuoi
PROPRIETA' FONT-SIZE CSS
I CSS possono essere utilizzati anche per modificare la misura del testo.
Ad esempio per rendere il nostro testo più piccolo, nel tag <style> inseriamo una regola CSS per il
tag <body>, includendo la proprietà font-size e per indicare il suo valore ad esempio possiamo
utilizzare i pixel, e quindi scrivendo 11px, come mostra la figura qui sotto:
Scrivendo 11 pixel, ogni elemento diventerà più piccolo, titoli compresi, e questo perchè lo stile di
default del Browser per i titoli non è specificato in pixel ma in unità di misura differente chiamata
em, ovvero un unità relativa che permette che la dimensione dei testi scali proporzionalmente al
font del corpo.
Ad esempio nella regola h2 sotto <Style> scriviamo font-size: 2em, il 2 perchè vogliamo che i
titoli h2 siano 2 volte più grandi rispetto al corpo del testo, e quindi che misurino 22 pixel.
STILI DEL FONT E SCORCIATOIE CSS
Un'altra proprietà del CSS è chiamata font-weight e scrivendo in seguito i 2 punti e poi il termine
bold, quindi font-weight: bold (sempre all'interno del tag <style>), trasformeremo un'intero
paragrafo in grassetto.
Utilizzando invece la proprietà CSS font-style possiamo rendere ad esempio in corsivo un intero
paragrafo scrivendo font-style: italic, come mostra la figura qui sotto:
Le tre proprietà che puoi leggere nell'immagine precedente, ovvero font-family: fantasy, font-
size:13px e font-style: italic, si possono cancellare e riassumere in una proprietà singola, cioè
scrivendo font: italic 13px fantasy. Questo tipo di proprietà viene chiamata Shorthand, poiché
semplifica molto la dicitura. ALTRE PROPRIETA' TEXT CSS
1. Per cambiare l'ampiezza dell'interlinea di un testo, si utilizza la proprietà line-height e specificare
qualcosa come 15 pixel, e quindi scrivere: line-height: 15px.
2. Per allineare al centro un testo, bisogna utilizzare la proprietà text-align: center
3. Se invece vogliamo sottolineare un paragrafo, utilizziamo la proprietà text-decoration:
underline.
4. Se vogliamo rimuovere la sottolineatura dei Link, aggiungiamo la regola text-decoration: none.
Come puoi vedere la sottolineatura su “Wikipedia” è sparita.
EREDITARIETA' CSS
Alcune proprietà del CSS sono ereditabili, ovvero si trasmettono a tutti i tag figli ad essi
sottostanti, per esempio la font-family è una proprietà ereditata e solo inserendola nel tag body verrà
scelta automaticamente per i tag figli come intestazione e paragrafi.
Un'altra proprietà che si eredita è il colore: se si stabilisce un colore per il corpo del testo, questa
regola verrà applicata per tutti i tag contenuti nel tag body.
Vi sono però anche proprietà non ereditabili.
STRUMENTI DI SVILUPPO PER IL WEB
In qualunque editor che userai, assicurati di salvare il tuo file con un nome che finisca in ".html"—
questa è l'estensione che si utilizza per tutte le pagine HTML per essere sicuri che sia gli editor sia i
browser sappiano di cosa si tratta.
Editor online: può essere utile usare un editor online se hai un computer che non ti permette di
scaricare app, come un ChromeBook. Gli editor online spesso hanno anche strumenti di modifica
collettiva, se può interessarti. Alcuni famosi editor online sono Cloud9.io, nitrous.io, e Koding.com.
Ecco un video in cui modifico una pagina web in Cloud9.
Editor Desktop: Un'app viene scaricata sul tuo computer e salva i file sul tuo disco rigido. Ci sono
moltissimi editor desktop tra cui scegliere, in base al sistema operativo e al prezzo. Alcuni famosi
editor desktop sono Sublime Text, Coda, Atom e Adobe Brackets. Ecco un video in cui modifico
una pagina web in Sublime Text.
Editor da riga di comando: se ami digitare e navigare con la tastiera anziché con il mouse, potresti
scoprire di amare gli strumenti della riga di comando. Due famosi editor da riga di comando sono
Emacs e Vim, e sono spesso già installati sui sistemi basati su Unix come Mac e Linux. Ecco un
video in cui modifico una pagina web in Vim.
CSS ELEMENTI GROUP
I CSS sono utilizzabili anche per cambiare il layout della pagina, spostando elementi o
cambiandone la grandezza.
Per spostare un gruppo di elementi (come ad esempio un paragrafo e un titolo), dobbiamo
introdurre 2 nuovi tag HTML che vengono definiti elementi raggruppati.
Da soli, ovvero non combinati con i CSS, non hanno alcun significato per il browser.
Il primo tag è il tag <span> ed è usato per raggruppare una selezione del testo. Ad esempio se
vogliamo colorare di rosso la parola “love”, digitiamo prima della parola “love” il tag <span> e poi
anche il tag di chiusura così: <span>Love</span>.
Volendo ora raggruppare alcuni eventi sotto il tag <span> , potremmo inserire una regola per
colorare di rosso tutti gli <span> della pagina.
Quindi diamo allo <span> la classe di “lovey-dove” e aggiungiamo una regola solo per l'elemento
che ha la classe lovey-dove. Quindi .lovey-dovey {color: red;}
Quindi i tag <span> sono utili per raggruppare selezioni di testo.
Ma come si possono raggruppare insieme elementi diversi?
A questo punto dobbiamo ricorrere al tag <div>.
Volendo raggruppare la sezione inferiori, l'immagine, il paragrafo ecc.. bisogna scrivere prima del
paragrafo il tag <div> e poi alla fine del paragrafo finale il tag di chiusura </div>.
Ora dobbiamo occuparci del suo stile. Per formattarlo bisogna dargli un id="official-info”,
aggiungendo poi una regola per questo id.
Quindi se dovessimo colorarlo di grigio, #official-info {
background: rgb(230, 230, 230);
LARGHEZZA, ALTEZZA E OVERFLOW CSS
Spesso si usano i <div> per dividere la pagina in riquadri differenti, ridefinire la misura di questi
riquadri e spostarli.
Vediamo quindi come modificare la pagina.
Cominciamo cambiando la misura del <div> official info. Di default un div occupa fino al 100%
della larghezza disponibile. Se vuoi che occupi solo 300 pixel, bisogna aggiungere un'altra proprietà
alle regole del CSS, ovvero width: 300px, come mostra l'immagine nella pagina seguente:
Oppure si può anche scrivere in % così:
Per poter scorrere all'interno del riquadro per vedere il testo si può scrivere overflow: auto.
Grazie alle proprietà width e height possiamo ingrandire l'immagine del gatto.
Prima di tutto diamo all'immagine l'id cute cat, cancellando l'attributo della sua misura, e nella
regola di formattazione scrivi #cute-cat {
width: 120px; } RIQUADRI CSS
Ogni elemento della tua pagina è considerato un riquadro da Browser, indipendentemente dal fatto
che lo sembri o meno (titoli, paragrafi ecc..).
Il Box Model: il riquadro di ogni elemento ha 4 parti, ovvero il contenuto, il bordo, il margine e il
riempimento.
Puoi usare i CSS per modificare il riempimento, il bordo e il margine.
Cominciamo dai margini: per specificare un margine ad esempio su ogni lato del riquadro “official
info”, è possibile scrivere margin: 15px.
Per avere un margine diverso per ogni lato, si possono inserire questi valori in senso orario e quindi
in alto (15px), a destra (0px), in basso (10px) e a sinistra (6px).
Esiste inoltre un valore particolare per i margini e per mostrartelo aggiungiamo un <div> intorno a
un'intera pagina e gli diamo l'id container.
Aggiungiamo poi una regola per questo <div> per dargli la larghezza di 400 px e centrarlo sulla
pagina. Per centrare il div scriverò margin: auto.
Ora che abbiamo centrato questo div, potremmo aggiungere un bordo intorno, usando le proprietà
dei bordi dei CSS. Allora per aggiungere un bordo rosso a questo div scriviamo border: e
specifichiamo lo spessore del bordo, lo stile e il colore e quindi: border: 1px solid rgb(145, 0, 0).
Se vogliamo inserire un bordo sopra viola possiamo scrivere: border-top: 10px solid purple.
Per aggiungere una cornice all'immagine e tornando su #cute cat scriviamo border: 6px ridge red.
Ogni volta che aggiungi ai tuoi elementi un colore di sfondo e un bordo quasi sempre ritieni sia
meglio aggiungere anche un riempimento per creare un po' di spazio e quindi nel #container
scriviamo padding: 15px. POSIZIONE CSS
Ora useremo i CSS per muovere realmente le cose.
Le posizioni dei vari elementi nel browser si definiscono statiche o normali.
Gli elementi come le immagini sono posizionati da sinistra a destra, mentre gli elementi come i
paragrafi sono posizionati dall'alto.
Si può cambiare questa strategia di posizionamento con le proprietà dei CSS.
Proviamo con l'immagine del paesaggio e quindi digitiamo la posizione e poi il valore relativo (
#landscape {width: 250px;
position: relative;
La strategia di posizionamento relativo implica il normale posizionamento dell'elemento e il
successivo contro bilanciamento. Per comunicare al Browser quale valore dobbiamo equilibrare
dobbiamo usare le combinazioni di top, bottom, left e right.
Posso inoltre usare il posizionamento assoluto per prendere un elemento completamente fuori dal
normale ordine e metterlo ovunque sullo schermo. Per fare questo bisogna cambiare il relative in
absolute.
Ora inseriamo una regola per un'altra immagine e diamogli una posizione assoluta, poi scriviamo
top 50 px e left 50 px.
Inoltre la proprietà z-index comunica al browser l'ordine esatto in cui posizionare gli elementi,
attribuendo loro differenti zi-index.
Cominciamo con il paesaggio, cui attribuiremo z-index 1, winston avrà z-index 2 e hopper z-
index 3.
Un'altra opzione è il posizionamento fisso che fa si che le cose sembrino non muoversi per niente.
CSS ELEMENTI FLOAT
La proprietà float permette di far “fluttuare” gli elementi dentro e intorno ad altri elementi ed è
perfetta per posizionare i testi intorno alle immagini.
Quindi nella regola scriviamo float: decidendo e se vuoi che l'immagine sia verso il lato sinistro,
scrivi dopo i 2 punti left,
E' possibile muovere anche elementi che non siano immagini ad esempio una lista di Link.
MODULO 2
DISEGNARE CON LA PROGRAMMAZIONE
Iniziamo a disegnare una faccia con i cerchi.
Per disegnare un cerchio bisogna scrivere nell'editor il comando ellipse.
Dopo aver scritto il nome di un comando in un programma bisogna sempre scrivere (); e quindi
ellipse();
Ora dobbiamo fornire le informazioni riguardo a dove disegnare l'ellipse e le dimensioni che deve
avere. Dato che voglio disegnare una faccia voglio che l'ellipse sia al centro dello sfondo e che sia
abbastanza grande.
E quindi dentro le parentesi tonde scriviamo 4 numeri: il primo (200) controlla la distanza
dell'ellisse da
Accedi a tutti gli appunti
Tutor AI: studia meglio e in meno tempo
