Posts written by *Runarea*

→ normale link

→ link attivato

→ link visitato

→ link al passaggio del mouse

---

Questi selettori possono avere tutti i valori di elementi come font, background, color, border, padding, margin, etc

---

Il TAG che richiama un collegamento ipertestuale all'interno della pagina web è :

→ nel caso si voglia un link testuale
→ ESEMPIO

→ nel caso si voglia un'immagine come link
→ IMMAGINI ESEMPIO

---

Se si desidera che il link si apra in una nuova pagina si dovrà aggiungere target="_blank"

Border="0" viene utilizzato per evitare che l'immagine abbia un bordo di default (viceversa basta sostituire 0 con 1,2...in base allo spessore)

Il TAG puo' essere personalizzato tramite css, richiamando i valori con il selettore CLASS

---

Nel CSS i 4 selettori possono essere cosi' scritti :

oppure

oppure


→ ed ecco qua un link

MARGIN

proprietà che determina i margini esterni degli elementi.


→ margine esterno

→ margine esterno sinistro

→ margine esterno destro

→ margine esterno superiore

→ margine esterno inferiore

→ come valori sono utilizzabili : pixels (PX) , centimetri (CM) o em ("M" in tipografia)

→ 1 PX = 1 CM o 16 EM
→ 1 EM = 0,06 PX o 0,4 CM
→ 1 CM = 37,7 PX o 2,37 EM

→ AUTO : il browser calcola automaticamente i margini
→ % : specifica i margini esterni in percentuale, calcolandola sulla struttura della pagina web

---

Le 4 proprietà possono essere elencate anche in questo modo :



oppure annidate, ricordandosi l'ordine dei 4 bordi TOP-RIGHT-BOTTOM-LEFT



NB : diminuendo il numero dei valori ( 4 ) i margini si accorperanno automaticamente cosi' :
→ 4 VALORI : 4 MARGINI
→ 3 VALORI : MARGINE SUPERIORE, MARGINE SINISTRO+DESTRO, MARGINE INFERIORE
→ 2 VALORI : MARGINE SUPERIORE +INFERIORE, MARGINE DESTRO+SINISTRO

---

PADDING

proprietà che determina i margini interni degli elementi, la distanza tra loro ed i bordi esterni o la dimensione del loro background.


→ margine interno totale

→ margine interno sinistro

→ margine interno destro

→ margine interno superiore

→ margine interno inferiore

→ come valori sono utilizzabili : pixels (PX) , centimetri (CM) o em ("M" in tipografia)

→ 1 PX = 1 CM o 16 EM
→ 1 EM = 0,06 PX o 0,4 CM
→ 1 CM = 37,7 PX o 2,37 EM

→ AUTO : il browser calcola automaticamente i margini
→ % : specifica i margini interni in percentuale, calcolandola sui margini esterni

---

Le 4 proprietà possono essere elencate anche in questo modo :



oppure annidate, ricordandosi l'ordine dei 4 bordi TOP-RIGHT-BOTTOM-LEFT



NB : diminuendo il numero dei valori ( 4 ) i margini si accorperanno automaticamente cosi' :
→ 4 VALORI : 4 MARGINI
→ 3 VALORI : MARGINE SUPERIORE, MARGINE SINISTRO+DESTRO, MARGINE INFERIORE
→ 2 VALORI : MARGINE SUPERIORE +INFERIORE, MARGINE DESTRO+SINISTRO

FONT

proprietà che determina famiglia, dimensioni, colore e stile dei caratteri



→ definisce una specifica famiglia di caratteri.
L'elemento deve essere indicato con un SELETTORE (ex p) a cui verranno dati VALORI


→ come valori sono utilizzabili :

→ i fonts piu' comuni , già inclusi nei nostri pc : VERDANA, TIMES NEW ROMAN, SANS-SERIF, GEORGIA, COURIER, ARIAL...
→ i fonts scaricabili (gratuitamente o a pagamento da siti specializzati) facendo attenzione a non sceglierne di troppo particolari, che rischiano di essere visualizzati solo dal pc su cui sono istallati.

E' buona norma scegliere piu' famiglie, di modo che se il primo font non potesse essere visualizzato il browser passera' automaticamente al secondo impostato, senza variare troppo l'aspetto della pagina web.

N.B: le famiglie cui nome non è formato da una singola parola vanno messe tra virgolette " " per essere visualizzate

---

→ definisce lo stile dei caratteri.
L'elemento deve essere indicato con un SELETTORE (ex p) a cui verranno dati VALORI


→ come valori sono utilizzabili :

→ NORMAL : carattere normale
→ ITALIC : carattere corsivo


→ corsivo

---

→ definisce lo spessore dei caratteri.
L'elemento deve essere indicato con un SELETTORE (ex p) a cui verranno dati VALORI


→ come valori sono utilizzabili :

→ NORMAL : carattere normale
→ BOLD : carattere grassetto


→ grassetto

---

→ definisce la grandezza dei caratteri.
L'elemento deve essere indicato con un SELETTORE (ex p) a cui verranno dati VALORI


→ come valori sono utilizzabili : pixels (PX) , centimetri (CM) o em ("M" in tipografia)

→ 1 PX = 1 CM o 16 EM
→ 1 EM = 0,06 PX o 0,4 CM
→ 1 CM = 37,7 PX o 2,37 EM

→ testo di 20px

---

TEXT

proprietà che determina allineamento, decorazione, colore ,altezza e stile del testo


→ definisce il colore del testo.
L'elemento deve essere indicato con un SELETTORE (ex div) a cui verranno dati VALORI


→ come valori sono utilizzabili :

→ i codici esadecimali dei colori ( #NUMEROCOLORE )


→ colore nero

---

→ determina l'allineamento del testo
L'elemento deve essere indicato con un SELETTORE (ex div) a cui verranno dati VALORI


→ come valori sono utilizzabili :

→ RIGHT: allineamento a destra
→ LEFT: allineamento a sinistra
→ JUSTIFY: allineamento giustificato
→ CENTER : allineamento centrale

testo centrato

---

→ determina eventuali decorazioni del testo
L'elemento deve essere indicato con un SELETTORE (ex div) a cui verranno dati VALORI


→ come valori sono utilizzabili :

→ NONE: nessun decoro
→ OVERLINE: il testo sarà sovrastato da una linea
→ LINE -TROUGH: il testo sarà attraversato da una linea
→ UNDERLINE : il testo sarà sottolineato


→ testo barrato

---

→ determina l'aspetto del testo
L'elemento deve essere indicato con un SELETTORE (ex div) a cui verranno dati VALORI


→ come valori sono utilizzabili :

→ UPPERCASE: tutto il testo sara' maiuscolo
→ LOWERCASE: tutto il testo sarà minuscolo
→ CAPITALIZED: solo la prima lettera sarà maiuscola


→ testo maiuscolo

---

→ determina l'ombreggiatura del testo
L'elemento deve essere indicato con un SELETTORE (ex div) a cui verranno dati VALORI


→ come valori sono utilizzabili : pixels (PX) , centimetri (CM) o em ("M" in tipografia)

→ 1 PX = 1 CM o 16 EM
→ 1 EM = 0,06 PX o 0,4 CM
→ 1 CM = 37,7 PX o 2,37 EM

→ i codici esadecimali dei colori ( #NUMEROCOLORE )

I valori seguiranno questa tabella :



→ il testo avrà un 'ombreggiatura orizzontale di 1px, una verticale di 2px ed entrambe di colore nero

border

questa proprietà permette di specificare stile, spessore e colore del bordo di un elemento :


→ bordo intero

→ bordo sinistro

→ bordo destro

→ bordo superiore

→ bordo inferiore

---

→ indica lo stile del bordo che verrà mostrato
L'elemento deve essere indicato con un SELETTORE (ex title) a cui verranno dati VALORI

→ come valori sono utilizzabili :

→ SOLID : il bordo presenterà una riga unica
→ DASHED : il bordo sarà composto di trattini
→ DOTTED : il bordo sarà composto di puntini
→ DOUBLE : il bordo presenterà due righe
→ INSET : il bordo presenterà una marcatura maggiore superiore
→ OUTSET : il bordo presenterà una marcatura maggiore inferiore
→ RIDGE : il bordo presenterà una sfumatura 3d superiore
→ GROOVE : il bordo presenterà una sfumatura 3d inferiore
→ NONE : nessun bordo

---

→ indica lo spessore del bordo
L'elemento deve essere indicato con un SELETTORE (ex title) a cui verranno dati VALORI

→ come valori sono utilizzabili : pixels (PX) , centimetri (CM) o em ("M" in tipografia)

→ 1 PX = 1 CM o 16 EM
→ 1 EM = 0,06 PX o 0,4 CM
→ 1 CM = 37,7 PX o 2,37 EM

---

→ indica il colore del bordo
L'elemento deve essere indicato con un SELETTORE (ex title) a cui verranno dati VALORI

→ come valori sono utilizzabili :

→ codici esadecimali dei colori ( #NUMEROCOLORE )
→ TRANSPARENT : se si vuole in trasparenza il colore sottostante

---

Le 3 proprietà possono essere elencate anche in questo modo :



oppure annidate, ricordandosi l'ordine dei 4 bordi TOP-RIGHT-BOTTOM-LEFT



NB : diminuendo il numero dei valori ( 4 ) i bordi si accorperanno automaticamente cosi' :
→ 4 VALORI : 4 BORDI
→ 3 VALORI : BORDO SUPERIORE, BORDO SINISTRO+DESTRO, BORDO INFERIORE
→ 2 VALORI : BORDO SUPERIORE +INFERIORE, BORDO DESTRO+SINISTRO

BACKGROUND

letteralmente “ambiente, contesto”, questa PROPRIETA' permette di personalizzare lo sfondo degli elementi della pagina web.


→ definisce il colore di sfondo di un elemento.
L'elemento deve essere indicato con un SELETTORE (ex body) a cui verranno dati VALORI


→ come valori sono utilizzabili :

→ codici esadecimali dei colori ( #NUMEROCOLORE )
→ NONE : se non si vuole alcun colore di sfondo
→ TRANSPARENT : se si vuole in trasparenza il colore sottostante


→ colore di sfondo bianco

---

→ definisce l’immagine da usare come sfondo di un elemento.
L'elemento deve essere indicato con un SELETTORE (ex body) a cui verranno dati VALORI


→ come valori sono utilizzabili :

→ l'URL dell 'immagine precedentemente caricata su un hosting o sul proprio spazio web.
→ NONE se non si vuole alcuna immagine di sfondo.


→ nessuna immagine di sfondo

---

→ definisce la direzione in cui l’immagine di sfondo viene ripetuta.
L'elemento deve essere indicato con un SELETTORE (ex body) a cui verranno dati VALORI


→ come valori sono utilizzabili :

→ REPEAT : ripetizione in orizzontale e verticale.
→ REPEAT-X : ripetizione in orizzontale.
→ REPEAT-Y : ripetizione in verticale.
→ NO-REPEAT : nessuna ripetizione.


→ immagine ripetuta sia in verticale che in orizzontale

---

→ determina se l'immagine debba scorrere insieme al contenuto o rimanere fissa.
L'elemento deve essere indicato con un SELETTORE (ex body) a cui verranno dati VALORI


→ come valori sono utilizzabili :

→ SCROLL : se si vuole che pagina e immagine scorrano assieme
→ FIXED : se si vuole che l'immagine di sfondo resti fissa mentre la pagina scorre


→ l'immagine resta fissa mentre la pagina scorre

---

Questa pagina ha le seguenti dichiarazioni ( proprietà + valori) :

Siamo arrivati al CSS ( acronimo di Cascading Style Sheets, in italiano fogli di stile a cascata) ovvero il cuore di ogni pagina web. La domanda che salta subito fuori è "ma cosa sono 'sti fogli di stile o style" ?


Un tempo poco utilizzato in favore della formattazione tramite tags, adesso indispensabile.

→ Perchè?

1) praticità : inizialmente in termini di lunghezza le pagine web erano veri e propri papiri, mentre con un solo foglio di stile , presente nella TESTA (HEAD) si comanda "un intero sito" , senza andare ad allungare e rendere ingestibile il "CORPO" ( BODY)
2) tempistica ( una sola variazione nel css basta per essere visualizzata in tutto il sito).
3) universalità : il css e' visualizzabile da piu' browsers e compatibile con smartphone, tablet e relativi monitor.

Un foglio di stile puo' essere inserito manualmente tra i tags :



in questo modo :



oppure tramite un link ad un foglio esterno alla pagina ( sistema pratico per eventuali modifiche ) :

---

→ SELETTORI

Nel CSS le regole vengono dette SELETTORI, a loro volta costituiti da PROPRIETA' racchiuse tra parentesi { } ed i loro VALORI ( PROPRIETA' e VALORE assieme vengono detti DICHIARAZIONE)



→ i selettori vengono categorizzati in :

SELETTORI DI TIPO

applicano le proprietà a tutti gli elementi del SELETTORE determinato.



SELETTORI DI CLASSE

applicano le proprieta' ad ogni documento,immagine,contenuto che richiami il nome del selettore, indicato da un .

→ ed un esempio della stringa di richiamo


SELETTORI DI IDENTIFICAZIONE

simile alla classe ma identifica in modo univoco un elemento, viene richiamato con una stringa differente ed è indicato con #

→ ed un esempio della stringa di richiamo


PSEUDOCLASSI

indicano elementi in base alle loro proprietà.
→ I piu' comuni :

→ che definisce la formattazione dei collegamenti ipertestuali presenti nella nostra pagina

→ che definisce la formattazione dei suddetti attivi

→ che definisce la formattazione dei suddetti al passaggio del mouse

---

PROPRIETA'

Le proprietà dei selettori sono numerose, ma quelle utilizzate piu' comunemente nella personalizzazione di una pagina web sono :


→ definisce il colore di sfondo di un elemento

→ definisce i bordi di un elemento

→ definisce caratteri e testo

→ definisce i margini esterni degli elementi

→ definisce i margini interni degli elementi

→ definisce il colore del testo

→ definisce la formattazione del testo

Infine un esempio di SELETTORE con le sue DICHIARAZIONI.



→ e si ottiene QUESTO LINK

Nelle pagine web quasi tutta la formattazione, le caratteristiche, l'aspetto e l'impaginazione vengono decisi tramite i CSS ( fogli di style o cascading style sheets), racchiusi tra i tags

molto pratici per tempistica (un unico foglio di style puo' "comandare" la formattazione di tutte le pagine di un sito) e comodità ( basta una sola variazione e sarà visualizzata in ogni parte del sito).

---

All'interno della sezione di

- che racchiude la parte visualizzabile del documento- si utilizzano alcuni tags specifici previsti per il controllo di:

1 intestazioni (titoli)
2 strutture di testo (paragrafi)
3 aspetto del testo (grassetto, corsivo...)
4 elenchi e liste
5 tabelle
6 moduli elettronici (campi compilabili dall'utente, campi selezionabili, menu a tendina, pulsanti,format...)
7 collegamenti ipertestuali (links)
8 layout generico del documento
9 inserimento di immagini
10 inserimento di contenuti multimediali (audio, video...)
11 inserimento di contenuti interattivi (script...)

---

PARAGRAFO



→ definisce un paragrafo

questo è un paragrafo

anche questo

→ Note: i browsers aggiungono automaticamente dei margini bianchi, prima e dopo ogni paragrafo.

---

tra i suoi attributi :

ALLINEAMENTO


→ determina l'allineamento del testo :

testo centrato

testo allineato a sinistra

testo giustificato

testo allineato a destra

---

STILE


→ definisce ..lo stile del paragrafo ( e del suo contenuto)

---

i suoi "sotto attributi" sono :

COLORE


→ che definisce il colore delle scritte contenute nel paragrafo

→ che definisce il colore di sfondo del paragrafo

a cui si aggiungerà il codice esadecimale del colore che si desidera Lista dei colori

→ testo

→ testo colorato

---

CARATTERE


→ determina il tipo del carattere

N.B : non tutti i fonts sono visualizzabili da pc a pc e da browser a browser, buona norma quindi utilizzare i classici : Verdana, Helvetica, Georgia, Arial, Sans Serif, Courier, Times New Roman...

→ carattere Verdana

---

→ determina la dimensione dei caratteri

→ testo di 16px

---

→ determina lo stile del carattere

→ testo obliquo

→ testo corsivo

→ testo normale

---

→ determina lo spessore dei caratteri

→ testo grassetto

---

Ed infine possiamo annidare (raggruppare) tutti gli attributi, dividendoli sempre con ; e racchiudendoli tra " " :

Et voilà

rules

° sul forum vige una sola regola per il quieto vivere:
→ carini e coccolosi ←

---

terms of use

° To view larger layouts, click on the previews
-Per visualizzare i layouts cliccate sulle anteprima grafiche.
° for copy the code click the white text box on the layouts, right click and copy
-il codice di ogni layout si trova all'interno delle anteprima, basta cliccare sul banner ,copiare ed incollare sulla vostra pagina
° Credits may not be changed or removed.
-e' vietato rimuovere i crediti presenti o variarli (possono esserne aggiunti di nuovi in base ai vostri contenuti)
° Original coding and design may not be altered or copied.
-e' vietato modificare, copiare o riutilizzare codice e la grafica dei layouts in ogni loro parte.
° Do not hotlink/direct link images from here: save them in your own servers or hosts.
- il mio sito non permette i links esterni, quindi salvatevi pure tutte le immagini sul pc <3
° Be original, do not claim any designs/layouts as your own.
- non spacciate i miei lavori per vostri ( ù_ù macchivelofaffa?)

---

disclaimer

° This is a personal forum . It is not used for commercial purposes.
° Any views or opinions represented in this forum are personal and belong solely to the forum owner.
° All the images belongs to their respective owners.
° All credits are listed there .
° The forum owner is not responsible for the content in comments.
° The forum owner reserves the right to edit or delete any comments submitted to this blog.
° No part of this forum shall be copied, altered or imitated in any way.

---

copyright

° All materials on this forum is protected by copyright and intellectual property laws and are the property of the author.
° Unless otherwise stated, the user may access and download the materials offered on this forum .
° All original work which this forum author's work has been derived from are copyrighted to their original creators and have been used for non-commercial purposes.
° No ill-intention was involved in the process of making the derivative works presented.

---

---

Layout fisso a due colonne, ottimizzato per schermi con risoluzione 1366x768px e superiori e visibile su ogni browser.
Font, colori e sezioni sono completamente personalizzabili.
Vietato rimuovere i crediti e/o copiare la grafica in ogni sua parte.

---

♠ Se avete domande su WORLD OF WONDER consultate ↓ questa sezione ↓ ♠

---

Layout fisso a tre colonne, ottimizzato per schermi con risoluzione 1366x768px e superiori e visibile su ogni browser.
Font, colori e sezioni sono completamente personalizzabili.
Vietato rimuovere i crediti e/o copiare la grafica in ogni sua parte.

---

♠ Se avete domande su UNDER A VIOLET MOON consultate ↓ questa sezione ↓ ♠

---

Layout fisso a due colonne, ottimizzato per schermi con risoluzione 1366x768px e superiori e visibile su ogni browser.
Font, colori e sezioni sono completamente personalizzabili.
Vietato rimuovere i crediti e/o copiare la grafica in ogni sua parte.

---

♠ Se avete domande su UNDER THE SEA consultate ↓ questa sezione ↓ ♠

---

Layout fisso a tre colonne, ottimizzato per schermi con risoluzione 1366x768px e superiori e visibile su ogni browser.
Font, colori e sezioni sono completamente personalizzabili.
Vietato rimuovere i crediti e/o copiare la grafica in ogni sua parte.

---

♠ Se avete domande su TWO SOULS consultate ↓ questa sezione ↓ ♠

---

Layout fisso a tre colonne, ottimizzato per schermi con risoluzione 1366x768px e superiori e visibile su ogni browser.
Font, colori e sezioni sono completamente personalizzabili.
Vietato rimuovere i crediti e/o copiare la grafica in ogni sua parte.

---

♠ Se avete domande su TIME ONLY KNOWS consultate ↓ questa sezione ↓ ♠

---

Layout fisso a due colonne, ottimizzato per schermi con risoluzione 1366x768px e superiori e visibile su ogni browser.
Font, colori e sezioni sono completamente personalizzabili.
Vietato rimuovere i crediti e/o copiare la grafica in ogni sua parte.

---

♠ Se avete domande su THE MESSANGER consultate ↓ questa sezione ↓ ♠

---

Layout fisso a due colonne, ottimizzato per schermi con risoluzione 800x600px e superiori e visibile su ogni browser.
Font, colori e sezioni sono completamente personalizzabili.
Vietato rimuovere i crediti e/o copiare la grafica in ogni sua parte.

---

♠ Se avete domande su THE LAST UNICORN consultate ↓ questa sezione ↓ ♠