vai al menu sezioni pagina

'Stile' dal sito 4elementi.info ~ accessolibero

sei su: Home [0] > Presentazione > Lo stile


Contenuti

primo stadio sassi sott'acqua a riva a Mandrassecondo stadio sassi sott'acqua a riva a Mandras

menu di navigazione [2] ~ contenuti [3] ~ menu lingua [7]


Se provenite dalla pagina 'Il codice', e siete d'accordo che sviluppare un sito significhi stendere un codice ordinato per sezioni e senza ulteriori informazioni rispetto ai contenuti, andiamo a vedere quale divertente intrigo è dare alle pagine web una veste grafica.

La mia pagina web è collegata a un Foglio di stile esterno con una stringa contenuta nell'Head come la seguente:
<link rel="stylesheet" href="stile.css>,
dove si rimanda al Foglio di stile "stile.css" per la definizione di stile di tutti i tag.

COME?

Il Foglio di stile è un documento semplice che contiene i nomi delle classi e le loro definizioni.

Una classe è un'interfaccia tra un elemento tag (come il blocco <div> o il paragrafo <p>) e il Foglio di stile stesso.

Decido che il contenuto di uno più elementi della pagina web (ad esempio alcuni paragrafi <p>) debbano essere formattati in grassetto e col colore rosso: creo una classe, che posso chiamare 'rossogrosso' semplicemente digitando nell'ancora bianchissimo Foglio di stile un punto e il nome della classe
.rossogrosso
per poi passare a definirla.

Per la definizione della classe ho bisogno delle parentesi graffe, aperta e chiusa.
Per aprire la parentesi graffa devo premere e tenere premuto il tasto 'Alt' sulla tastiera e digitare '123' sul tastierino numerico.
Per chiudere la parentesi graffa devo digitare con lo stesso procedimento '125'.

Tra le parentesi graffe digito un attributo per riga, separati da punto e virgola, così:
.rossogrosso{
font-weight:bold;
color:#ff0000;}

dove <font-weight:bold;> definisce il grassetto e 'color:#ff0000' il colore rosso, con riferimento alla tabella dei colori esadecimali sicuri che trovi su Internet.

Poi devo richiamare la classe nel codice Html.
Immaginiamo di voler applicare la classe a un paragrafo, lo definirò come <p class="rossogrosso"> e proseguirò a scrivervi dentro i contenuti.

Se sei sicuro che una formattazione debba essere applicata a un solo elemento della tua pagina web, puoi definirla come 'id' anzichè come classe facendola precedere nel Foglio di stile da '#', così:
#rossogrosso{
font-weight:bold;
color:#ff0000;}

e richiamarla nel codice Html con <p id="rossogrosso">.

Per ulteriori approfondimenti sui Fogli di stile ti affido alla guida di Cesare Lamanna e alla guida di ConStile.

vai al menu sezioni pagina

Certificati di accessibilità e contatto con il webmaster

webmaster: dalziani [6]

xhtml valido

css valido

vai al menu sezioni pagina

Menu di navigazione

vai al menu sezioni pagina

Menu di scelta della lingua

vai al menu sezioni pagina
fine documento