I Fogli di Stile (CSS) di Web-Link: Tutto per la costruzione delle tue pagine web

Pubblicità

Sharing is caring!

Pubblicità

CSSVisita il sito di Web-Link

 
Menù Argomenti
Home Page Web-Link
Introduzione
Sintassi
In Linea
Nella Pagina
Nel Foglio Esterno
Le Classi
I Selettori ID
La Grafica
I Links
Attributi di Testo
Attrib. Carattere
Attrib. Colore Sfondo
Attrib. di Posizione
Parametri
Conclusioni
Forum di supporto

Valid CSS!

Valid HTML 4.01 Transitional

  Rev. 3.0 – Agosto 2005    Ver. 1.0 – Novembre 1999

Gli attributi per il testo 

Prima di passare in rassegna le categorie di attributi vorrei ricordare la loro sintassi per poterli adoperare, e questo qualunque sia il modo che deciderete di usare.

Gli attributi devono essere inseriti all’interno di parentesi graffe { } e laddove in HTML verrebbe usato un “=” (uguale) viene invece usato “:” (due punti). Argomenti consecutivi sono separati da “;” (punto e virgola) invece che da “,” (virgola). Inoltre molti argomenti sono divisi da – (trattini) anche se questi fanno parte integrante del nome stesso.

Per i parametri ad essi associabili fare riferimento a questa tabellina.

Passiamo in rassegna gli attributi del testo:


text-align : center | left | right | justify ; Allineamento del testo, valori possibili : centrato , sinistra, destra , giustificato. Meglio evitare se possibile il giustificato in quanto produce effetti diversi nei due browser.

P {text-align: center;} DIV {text-align: left;}

text-align: center

text-align: left

text-align: right


text-decoration : overline | underline | line-through | none ; Decorazione del testo, valori possibili : overline = sopralineato, underline = sottolineato, line-through = sbarrato, none = nessuno. E’ anche possibile combinarne più di uno, per esempio inserendo sia underline che overline. NS non supporta underline. None lo si adopera in particolar modo con i link in quanto toglie la fastidiosa sottolineatura che altrimenti avrebbero per default.

P {text-decoration: none;} h1 {text-decoration: underline;}

text-decoration:overline sopralineato

text-decoration:none nessuno

text-decoration:underline sottolineato

text-decoration:line-through sbarrato

text-decoration:overline underline entrambi sopralineato e sottolineato.


text-indent : lunghezza | percentuale ; Rientro della prima riga di un blocco. E’ possibile fare uso anche di numeri negativi per un rientro esterno.

P {text-indent: 12px;} DIV {text-indent: 20%;}

text-indent : -5px
       text-indent : 15px


text-transform : capitalize | uppercase | lowercase | none ; Trasformazione in maiuscolo o minuscolo dell’interno blocco di testo (uppercase lowercase). Capitalize trasforma in maiuscola la prima lettera di ogni parola.

P {text-transform: lowercase;} h2 {text-transform: capitalize;}

text transform: lowercase
text transform: uppercase
text trasform: capitalize


line-height : normal | numero | lunghezza | percentuale ; Altezza della riga del testo, valori possibili : normal , numero , lunghezza , percentuale. Con il valore normal il testo non avrà alcuna variazione.

P {line-height: 3em;} DIV {line-height: 50%;}

line-height: 3em
line-height: 50%


letter-spacing : numero ; Spazio fra le lettere che compongono il testo. il numero puo essere espresso in tutti i modi possibili come riportato alla tabella parametri.

P {letter-spacing: 1em;} DIV {letter-spacing: 2px;}

letter-spacing: 1em
letter-spacing: 2px


vertical-align : baseline | sub | super | top | middle | bottom | text-top | text-bottom ; Allineamento verticale del testo rispetto ad un riferimento assoluto o all’elemento che lo include.

P {vertical-align: middle;} DIV {vertical-align: top;} SUB {vertical-align: 60%;}

vertical-align: baseline rispetto all’immagine di lato.

vertical-align: sub rispetto all’immagine di lato.

vertical-align: super rispetto all’immagine di lato.

vertical-align: top rispetto all’immagine di lato.


Continua: Attributi per il carattere

    Andrea Bianchi 
   

per stampare questa pagina


Potete fare domande e discutere l’argomento sul Forum gratuito di supporto.

© Andrea Bianchi 1997 ~ 2006

Valid CSS!

Valid HTML 4.01 Transitional

Pubblicità
shares
%d blogger hanno fatto clic su Mi Piace per questo: