Blog Informatica & Programmazione

La differenza tra Id e Classi

Gli Id e le Classi sono strumenti che è possibile utilizzare in CSS (ma non solo), per poter identificare gli elementi all'interno della pagina, infatti in CSS è possibile modificare, per esempio, l'allineamento di un titolo fatto con il tag <h1> con il seguente codice:

In questo caso tutti i titoli fatti con il tag <h1> verranno allineati al centro, ma supponiamo di avere più titoli fatti con questo tag all'interno della pagina, come facciamo ad allineare un solo <h1> ? non è difficile, bisogna solo capire i concetti di Id e Class.

Innanzitutto è bene specificare che gli Id e le Classi non sono strutture opposte, anzi sono praticamente identici, l'unica differenza è che gli Id possono essere utilizzati su un singolo elemento, mentre le Classi possono essere usate più volte.
Quindi riprendendo l'esempio precedente, con gli Id sarà possibile cambiare l'allineamento di un solo <h1> , mentre con le class quanti se ne vogliono.

In pratica, gli Id e le Classi sono dei selettori, che a differenza dei normali elementi vengono preceduti da un punto "." (classi) o da un cancelletto "#" (id), successivamente vengono richiamati all'interno del codice HTML, nell'elemento a cui si vuole applicare lo stile, ecco un esempio pratico:

Read the whole post...

Immagine con didascalia semitrasparente

È possibile creare delle immagini con didascalia semitrasparente, al passaggio del mouse in modo abbastanza semplice, ma per prima cosa esaminiamo il codice HTML:


il div contiene tutta l'immagine con la didascalia, lo span è un blocco di testo che racchiuderà il testo che verrà utilizzato come didascalia, mentre lo strong contiene il titolo del testo nella didascalia.

Andiamo ad esaminare bene il codice CSS:
1. Come primo passaggio modifichiamo lo stile della classe contenitore, che è quella che contiene l'intera immagine con la didascalia:

il float permette di spostare l'intera didascalia a sinistra, sull'immagine, i margini è meglio che entrambi siano impostati a 0, il font-size indica invece la grandezza del testo dello span, il font-family indica invece il carattere utilizzato, e l'overflow con valore hidden non permette la presenza di scrollbar.

2. Come secondo passaggio andiamo a modificare lo stile dell'immagine:

Anche nell'immagine consiglio di azzerare i margini, per quanto riguarda il bordo decidete voi quale effetto applicare, a mio parere in questo caso ...

Read the whole post...

Cambiare puntatore del mouse con i CSS

In CSS è possibile cambiare la normale visualizzazione del puntatore del mouse su un elemento con la seguente sintassi:


Alcuni dei tipi di cursore che possiamo utilizzare sono i seguenti:

• pointer: la manina che compare quando per esempio si punta il mouse su un collegamento ipertestuale;


• default: il normale puntatore del mouse, la freccia che solitamente compare di default;


• wait: è il cursore che appare al caricamento di una finestra o di un oggetto;


• crosshair: è un cursore che fa comparire una specie di croce;


• text: è il cursore che normalmente appare quando si punta il mouse sopra ad un testo;


• help: è un cursore con un punto interrogativo vicino


• move: è un cursore che solitamente appare quando si sta spostando un oggetto in una finestra

Per inserire un'immagine personalizzata come cursore è possibile utilizzare la seguente sintassi, tenendo in considerazione che il cursore deve obbligatoriamente essere in uno di questi 3 formati: .cur .ico .ani , anche per Forumfree.

Gli attributi dello sfondo

Come ben saprete, in CSS gli sfondi sono molto più personalizzabili rispetto all'HTML, infatti mentre in HTML ci è possibile solamente inserire un'immagine o un colore di sfondo, in CSS possiamo fare molto di più.

Anche in CSS possiamo inserire un'immagine o un colore di sfondo con la seguente sintassi:


La ripetizione dello sfondo
Ma che cosa possiamo fare in più in CSS rispetto all'HTML?
Beh per rispondere a questa domanda, possiamo pensare un attimo ai limiti degli sfondi in HTML: cosa accade se inserisco un'immagine di sfondo più piccola della risoluzione schermo? essa comincia a ripetersi! e se io volessi evitare questa cosa? molto semplice possiamo utilizzare una proprietà degli sfondi in CSS!

Utilizzando la sintassi riportata, l'immagine di sfondo non verrà ripetuta.
Nel caso invece volessimo far ripetere l'immagine solo orizzontalmente o verticalmente basta prendere in considerazione il piano cartesiano:


Il posizionamento dello sfondo
se ora dopo aver rimosso le ripetizioni, come immagine di sfondo volessi un immagine molto piccola che fosse centrata? beh possiamo utilizzare la proprietà background-position, a cui possiamo assegnare il valore center, in modo da centrare l'immagine:

Oppure se non volete centrare l'immagine potete utilizzare dei valori espressi in un'unità di misura (solitamente pixel), in cui al posto del primo center dovrete inserire la distanza dal bordo superiore, mentre al posto del secondo center dovrete inserire la distanza dell'immagine dal bo...

Read the whole post...

Bordi Arrotondati in CSS

Per tutti coloro che vogliono realizzare un effetto di arrotondamento dei bordi, senza dover ricorrere ad un programma grafico per modificare è possibile utilizzare il seguente codice:



I valori si riferiscono a:

1. Angolo superiore sinistro;


2. Angolo superiore destro;


3. Angolo inferiore sinistro;


4. Angolo inferiore destro;

Poiché questo codice potrebbe dare problemi di compatibilità con Browser come Chrome e Firefox viene offerta una valida alternativa per questi browser:
Per Mozilla Firefox:

Per Safari e Chrome:

E per quanto riguarda Internet Explorer, è funzionante solo dalla versione 9 in poi.

Cosa cambia nei CSS3

Le specifiche del CSS3 non sono ancora state rese ufficiali dal W3C, ma si suppone che ben presto verranno ufficializzate e permetteranno una gestione migliore degli sfondi e consentirà la realizzazione di bordi arrotondati.
Tuttavia, solo perché non sono stati resi ufficiali, non significa che già oggi non possiamo fare niente con questa nuova versione, infatti con l'introduzione di questo nuovo linguaggio sono stati migliorate tutte le funzionalità oramai mature e supportate, come per esempio i selettori o anche nuovi modi di creare layout.
Elencando le principali modifiche che si realizzano nel CSS3 rispetto al CSS2 sono le seguenti:
.Il CSS3 si può considerare l'evoluzione del CSS2, infatti tutte le proprietà valide e tutto ciò che è funzionante in CSS2 lo è anche in CSS3;
.Nel CSS3, vengono aggiunte molte nuove proprietà oltre a quelle presenti in CSS2, infatti si stima che le proprietà arriveranno fino a 245, quando in CSS2 le proprietà erano intorno ai 120;
.Sono organizzati in moduli, e ciascuno occupa una determinata area dei CSS;

Quando lì avrò imparati, certamente farò una guida per imparare tutte le nuove funzioni

Edited by giratina23 - 7/4/2012, 17:11