Testo

Css con Front Page
La sintassi
Creare un foglio
Applicare uno stile
Le classi
Gli elenchi
I moduli
I puntatori
Css in linea
Sfondi
Testo
Selettori
Links
Margini e bordi
Fonts
Le tabelle
Le immagini e i piani

Css con FP

Colori del testo

Come abbiamo visto nella lezione precedente, anziché un'immagine di sfondo, si può inserire un colore di sfondo per la pagina con la seguente stringa:.

<html>

<head>

<title>Titolo del documento</title>

</style>

</head>

<body>

<p>I contenuti della pagina vanno qui</p>

</body>

</html>

Se sarai stato attento alle spiegazioni, non ti sarà sfuggito il fatto che, oltre al colore di sfondo richiamato dalla stringa background:#FFFF00 è stato inserito un altro attributo, separato da un punto e virgola, cioè color:#000000 equivalente al nero.

Ebbene, questa stringa definisce il colore del carattere delle scritte poste sulla pagina. In effetti, in ogni elemento di stile che richiama un colore di sfondo occorre anche indicare un colore del testo e viceversa. Questa è una precisa raccomandazione sugli standard dei fogli di stile CSS1 e CSS2 emanata dal World Wide Web Consortium (W3C), organizzazione che si occupa della standardizzazione dei linguaggi per il WEB per una omogeneità nello sviluppo di Internet.

Il colore indicato nell'elemento di stile body ha effetto sull'intero documento, cioè, nel nostro caso, ogni parola sarà scritta in nero. Un po' limitativo, non trovi?

Ma con i fogli di stile possiamo agire su ogni singolo elemento e determinarne le caratteristiche e quindi anche i colori. Supponiamo che tu voglia il titolo in rosso ed il testo in corsivo in blu. Utilizzeremo una stringa come la seguente:

<html>

<head>

<title>Titolo del documento</title>

body { background:#FFFFD1; color:#0000FF }

h1 { background:#FFFFD1; color:red }

em { background:#FFFFD1; color:green }

</style>

</head>

<body>

<h1>Il titolo è in rosso</h1>

<p>Il testo normale sarà blu, ma</p>

<em>il corsivo sarà in verde</em>

</body>

</html>

La prima stringa la conosciamo già:

body {background:#FFFFD1; color:#0000FF} ci dice che lo sfondo della pagina sarà giallo chiaro, mentre le scritte saranno in giallo.

La seconda stringa definisce invece l'aspetto dei titoli identificati in HTML con i tag <h1>, <h2> ecc.:

h1 {background:#FFFFD1; color:red} ci dice che tutto ciò che sarà contenuto nel primo titolo, cioè tra i tag <h1> e </h1> avrà sempre lo sfondo giallo chiaro, ma sarà scritto in rosso.

La terza stringa definisce infine l'aspetto di tutto ciò che nella pagina sarà in corsivo (il corsivo in HTML è indicato con il tag <em> ):

em {background:#FFFFD1; color:green} ci dice che tutto ciò che sarà in corsivo nella pagina sarà colorato di verde.

E' possibile raggruppare anche elementi di stile comuni tra di loro. Se tu volessi, ad esempio, tutti i titoli in rosso e tutte le scritte in corsivo in blu, potresti raggruppare i vari elementi nel modo che segue:

<html>

<head>

<title>Titolo del documento</title>

body { background:#FFFFD1; color:#000000 }

h1, h2, h3, h4 { background:#FFFFD1; color:red }

em { background:#FFFFD1; color:blue }

</style>

</head>

<body>

<h1>Titolo 1</h1>

<h2>Titolo 2</h2>

<h3>Titolo 3</h3>

<h4>Titolo 4</h4>

<em>Testo in corsivo</em>

</body>

</html>

Nota: Gli argomenti raggruppati sono separati tra di loro da una virgola.

Se avessimo voluto, anziché un foglio di stile interno, utilizzarne uno esterno chiamato, ad esempio, miostile.css posizionato nella stessa cartella del file HTML che lo richiama, la stessa pagina HTML sarebbe apparsa così:

<html>

<head>

<title>Titolo del documento</title>

</head>

<body>

<h1>Titolo 1</h1>

<h2>Titolo 2</h2>

<h3>Titolo 3</h3>

<h4>Titolo 4</h4>

<em>Testo in corsivo</em>

</body>

</html>

Il file miostile.css, creato con il BloccoNote di Windows© o con un qualunque altro editor di testo e salvato nella stessa cartella che contiene la pagina HTML che lo richiama avrebbe avuto questa struttura:

body {

background:#FFFFD1;

color:#000000

}

h1, h2, h3, h4 {

background:#FFFFD1;

color:red

}

em {

background:#FFFFD1;

color:blue

}