Ciao,
ho notato con molto piacere( :gren: ) che molte discussioni vengono aperte su come personalizzare e formattare i link ( colore, dimensione e carattere ... ) nelle proprie pagine web. Questo processo non è prevde anni di studi e rifelssioni e i questa pillola che spero possa servire a qualche anima in disperazione.
Iniziamo :
Modifice colore testo
Uno dei problemi più quotati è quello di modificare il colore dei link che di default è :
Modificare queste impostazioni base non è molto complicato , anzì ci si può arrivare da soli: infatti per modificare i colori bisogna agire sui colori dopo l'attributo "color" in questo modo :codice:a:link { color: blue; } a:active { color: red; } a:visited { color: #660066; }
Aggiungiamo ora a:hover , ovvero quando il mouse dell'utente passa sul link; infatti si può modificare i link del tipo onmouseover =" " .codice:a:link { color: #colore_default_link; } a:active { color: #colore_default_active; } a:visited { color: #colore_default_link_visitato }
Il suo utilizzo è uguale agli altri a:xxxx , ovvero :
Queste sono le modifiche da apportare per modificare il colore , semplice no !codice:a:hover { color: #colore_mouse_over ;}
Formattare il testo
Con formattare il testo intendo :
- formato testo ( i, b, u )
- bordi
- sfondo
- carattere generale
Carattere generale
Per modificare il testo dei link in size, carattere, stili ...
Per modificare la family del link è uguale ai css del body ovvero :
Dove il primo carattere ( arial ) è la prima scelta, se l'utente non ha il carattere Arial, si passa alla seconda scelta ( Verdana ) e così via .codice:a:link {font-family: Arial, Verdana, sans-serif;}
Si può pure modificare il size dei link agendo in questo modo :
I valori del size possono essere espressi sia in pixel (px), centimetri (cm), millimetri (mm), punti (pt), picas (pc), pollici (in), x-height(ex) .codice:a:link { font-size: 10px; }
Si può pure modificare il carattere più in generale con "smaller o larger ".
Modifichiamo lo style dei link in questo modo :
Dove al posto di xxx si può mettere :codice:a:link {font-style: xxxx;}
normal: serve spiegazioni
italic: cambia il testo in corsivo
oblique: trasforma il testo in italic
Text-decoration
Text-decoration serve per modificare la sottolineatura , sinea sopra o linea in mezzo . Spiego meglio :
underline : il testo viene sottolineato
overline : il testo avrà una linea sopra
line-through : la barra coprirà in mezzo al testo
Di deafault bisogna ricodare che ilink sono underline !!
Modificare i bordi
Per modificare i bordi dei link , ovvero il bordo sopra ,sotto ,destra , sinistra ....
Allora bando alle chance e partiamo ai fatti , allora :
I bordi :
per decidere quale bordo avere sottolineato o non #border-xxxx ; lo spessore del bordo viene modificato in px dopo #border-xxx: .codice:#border-bottom: 1px dashed #000000;
Il colore e lo stile delle sottolineature si scrive esattamente dopo la grandezza e lo style dei link senza altri codici .
I stile dei bordi si possono avere così:
- se lasciate senza niente rimarrà solo sottolineato
- ridge : in rilievo
- dotted : punteggiato
- dashed : tratteggiato
- groove : incassato
- inset : interno
- outset : esterno
- double : doppio
Modificare lo sfondo
Si può infine pure modificare lo sfondo dei link che di defaut è in "automatico" dello stesso colore dello sfondo della pagina .
Classicodice:a:link {background-color: #xxxxxx ;}
I codici per i link vengono isneriti tra <head> e </head> tra <style> e <style> . I link verranno però solo tutti con lo stesso stile. Se si vogliono un pò di link di un tipo e altri di un'altro usando le classi :
facendo a.classe.link {....} e nei vari link inseriamo class="classe" il link non avrà lo stile di tutti gli altri link, ma quelli stabiliti in a.calsse:link . Le classi si costruiscono mettendo a.nome classe :tipo link . Il punto dopo "a" è indispensabile !!!
In questo modo si possono fare 1000 tipi di link diversi per pagina.
Per il momento ho un terminato, se mi vengono in mente altre cianfrusaglie aggiungerò le news alla pillola quindi siate pronti ad aggiornamenti !!
Commenti e suggerimenti saranno ben accetti ( mah !
ciao e tutti e grazie dell'attenzione ( sempre che me la abbiate prestata ! )
Rispondi quotando
