'Stile' dal sito 4elementi.info ~ accessolibero
sei su: Home [0] > Presentazione > Lo stile
Menu sezioni pagina
- intestazione
- contenuti [3]
- menu di navigazione [2]
- menu scelta lingua [7]
- certificati di accessibilità web e contatto webmaster
fine menu sezioni pagina
Contenuti
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 paginaCertificati di accessibilità e contatto con il webmaster
webmaster: dalziani [6]
xhtml valido
css valido
vai al menu sezioni pagina