Menù Principale

Chiudi il Webmaster

Chiudi Politica a Latisana

Chiudi Links e Banners

Chiudi Pubblicità Amici

WebTools - Scripts

Chiudi Dossier Antivirus

Chiudi Grafica & Design

Chiudi Guida PHP

Chiudi Guida ai Css

Chiudi Guide al Javascript

Chiudi HTML - XHTML - XML

Chiudi Software Programmi Utili

Chiudi Tools Webmaster

Chiudi Utilità Varie

Chiudi Utilità e Script in Flash

Chiudi Video Guide Manuali

Altri Miei Siti

Pubblicità Amici !
LegaNord Latisana anclignano pertegada calcio yorkshire susy


Don.Severino Valvason
il vostro Webmaster
Webmaster - Infos
Mini Tchat
Entra in Chat
Photo Gallery

Guida ai Css - "Le Classi" per Css

Le Classi del Css <p class="...">

Le classi  Se abbiamo optato per un foglio di style, esterno o interno che sia, non è detto che dobbiamo necessariamente ridefinire tutti o alcuni elementi (tags) di Html, anzi, lasciamoli stare così come sono e creiamone di nuovi facendo uso delle classi, un sistema molto più comodo e pratico, ve lo assicuro; visto poi che se ne possono creare quante e quelle che ci pare, così facendo si sfrutteranno al meglio le potenzialità dei CSS (fogli di style).

E' infatti possibile definire con estrema semplicità delle proprie classi di stile, saranno queste ad essere richiamate dall'interno dei vari elementi html. Pensate al fatto che lo stesso elemento potrebbe richiamare quando una classe, quando un'altra, come dire: si ottengono dallo stesso elemento risultati completamente diversi a seconda di quale classe viene ad esso associata.

Esempio: Definiamo una classe, per farlo è sufficiente editare un nome preceduto da un punto, quale nome? Non ha importanza, decidetelo voi, meglio se attinente con l'effetto che dovrà produrre in modo tale da essere ricordato con maggiore facilità quando avremo bisogno di adoperarlo.

Vediamo praticamente come fare, immaginiamo di volere qualcosa che serva per la nostra firma, quella che di solito si mette a fine pagina. Creeremo una classe col nome firma che faccia uso di un font piccolo e di colore rosso in stile italico.

Richiamiamo dal nostro editor il file .css (se si trattava di un foglio esterno), altrimenti portatevi all'interno della zona style, posizionandovi fuori da eventuali parentesi graffe, possiamo descrivere la nostra classe firma, assegnandole i vari attributi:

.firma {
font-family : Verdana,Arial,Helvetica;
      color : #ff0000;
  font-size : 12pt;
 text-align : center;
font-weight : lighter;
 font-style : italic;
 }

Da notare che fra il . (punto) iniziale e la scritta firma non ci sono spazi vuoti. Vediamo cosa fanno le singole voci inserite in questa nuova classe firma:

 
font-family : Verdana,Arial,Helvetica;
significa che adopererà il font verdana (il primo dichiarato), se questo non fosse installato sul PC del visitatore si cercherà Arial (il secondo dichiarato), nel caso mancasse anche quello si passerà a Helvetica; si possono specificare fino a tre fonts alternativi, nel caso in cui nessuno dei tre fosse installato, verrà visualizzato quello standard di default.

color : #ff0000;
Colore rosso, si possono esprimere i colori in formato esadecimale, come in questo caso, facendoli precedere dal segno pound # (cancelletto), oppure scrivendo il relativo nome del colore in lingua inglese. Anche red avrebbe prodotto lo stesso risultato. (Su  >>questa pagina<<  potete trovare nomi e codici esadecimali per i colori più comuni)
 
font-size : 12pt;
Dimensioni del font: 12 punti, potevamo esprimere il valore anche in pixel o in centimetri o anche in altri modi che vedremo in seguito. In pixel forse è addirittura meglio che in punti perchè si adatterà perfettamente alla risoluzione video qualunque essa sia. Da notare che non ci sono limiti alle dimensioni come accadeva per il font max 7 di html.
 
text-align
Allineamento del testo, in questo caso centrato, si poteva scegliere fra destro, sinistro o giustificato; adoperando i relativi termini in lingua inglese: left, right, justify.
 
font-weight : lighter;
Consistenza del font, lighter; leggera, potevamo adoperare: normal, bolder, bold o anche numeri: 400, 500 ecc. ecc.
 
font-style : italic;
Stile Italico, avevamo a disposizione anche :normal, oblique.

E adesso ? Adesso la classe è pronta, non resta che richiamarla ogni volta che serve... Come ?

Semplice, ogni elemento (tag) di HTML supporta l'attributo class, quindi dovendo scrivere una parte di testo e volendo che questa parte faccia uso degli attributi appena inseriti nella classe firma, basterà assegnare "firma" all'elemento (tag) prescelto, nel nostro caso <p>.

Tutto ciò che verrà scritto all'interno di questo paragrafo, rispetterà i parametri della classe, mi raccomando la relativa chiusura dell'elemento (tag) </p>

Avrete certamente capito che a questo punto l'elemento html altro non è che un contenitore, per cui potremo continuare ad usare <p> con classi diverse ed avere così paragrafi formattati in modo completamente diverso, basterà semplicemente cambiare il nome della classe facendogli richiamare una classe creata precedentemente. Da questo modo di lavorare la vera versatilità e potenza svolta dai fogli di style.

Un esempio chiarirà molto meglio tutto quanto:

<p class="firma">questo testo rispetta gli attributi della classe firma </p>

Questo il risultato:

questo testo rispetta gli attributi della classe firma

Si possono addirittura combinare le varie classi nidificandole al loro interno grazie ai contenitori quali <span> </span>, la cosa però non sempre è fattibile e si raccomanda una certa dimestichezza onde evitare pasticci indecifrabili.

Vi sarete resi conto che non è poi così difficile, possiamo creare tutte le classi che ci servono e battezzarle con i nomi che vogliamo per poi assegnare loro i parametri più svariati. Se all'interno del vostro sito, fatto di una o di cento pagine html, vi fosse anche una sola piccola parte di testo che non vi convince, sarà sufficiente assegnargli la giusta classe o crearne una ad ok che faccia al caso vostro.


Per ricordo due indirizzi sui quali reperire ulteriori informazioni:  specifiche del W3C ,dove troverete tutti gli attributi e i parametri ammessi e supportati dai CSS1 e :specifiche per i nuovi CSS2   dove alcuni di questi non sono ancora supportati da nessun browser.

 


Data creazione : 19/11/2021 @ 21:15
Ultima modifica : 19/11/2021 @ 22:05
Categoria : Guida ai Css
Pagina letta 11 volte


Stampa pagina Stampa pagina

 
Opinioni su questo articolo

Nessuno ha lasciato un commento.
Diventa il primo a farlo!

 
Comunicazioni del Webmaster !
 
Slideshow notice
  • tesseramento-online.jpg

    Tesseramento 2015 Lega Nord online

  • enea-codotto.jpg
 
Contatteci
Connessione...
 Lista utenti registrati Utenti : 117

Username:

Password:

[ Registrazione ]


Utente online:  Utente online:
Anonimi online:  Anonimi online: 4

Visite totali Visite totali: 1762480  

Webmaster - Infos

Ip: 3.92.28.52

NewsLetters
Per ricevere informazioni sulle novità di questo sito, puoi iscriverti alla nostra Newsletter.
Captcha
Ricopia il codice :
Traduction Site
Eventi Calendario
Sondaggio
cosa pensi del Sito ?
 
Eccellente !
Ottimo
nella Media
Boh.....
C'è di Meglio
Risultati
Visites

   visitatori

   visitatori online

^ Torna in alto ^