Sei in Home - Articoli


Css Regole Stilistiche

scritta cssLe regole di stile vanno inserite tra <Head> e </Head>, nelle vostre pagine web, e determinano lo stile di ogni elemento presente nella vostra pagina web (vedremo sotto cosa si intende)

Vediamo, solo a titolo di esempio, alcuni dettagli sui fogli di stile. NON SPAVENTIAMOCI perchè le righe seguenti servono solo a capire il meccanismo di funzionamento dei CSS .

Questa è la classica struttura, in codice, di una pagina web con l'inserimento di alcune regole di stile:

<html>

<head>

<style type="text/css">

body { background-color:#cccccc; font-size: 10 px; font-family: Arial;
color: #000000; }

#header { background-color:#FFFFFF; font-size: 20 px; }

</style>

</head>

<body> <div id="header"> qui inseriamo il nostro nome del sito e il logo </div> qui inseriamo il nostro contenuto della pagina web </body>

</html>

Vediamo cosa succede. Avevamo parlato di inserire le REGOLE STILISTICHE tra <head> e </head> e così abbiamo fatto. Le abbiamo chiamate body e header (stesso nome della parte della pagina web che poi subirà le modifiche).

Così facendo, abbiamo detto alla nostra pagina che tutto quello compreso tra <body> e </body) (la parte visibile delle nostre pagine web) deve avere lo sfondo di un certo colore:cccccc (grigio), che la grandezza del testo deve essere di 10 pixel, il tipo di carattere da usare è Arial, e che il colore del testo deve essere 000000 (nero). Poi, abbiamo creato un Box (vedremo in seguito cosa si intende) chiamato Header con lo sfondo di colore FFFFFF(bianco) ed il carattere di dimensioni 20 px . Facile no? Abbiamo dato delle regole al "corpo" della nostra pagina web. Basterebbe cambiare un parametro che tutta la nostra pagina o sezione subirà la modifica.

E se potessimo inserire le nostre regole in un foglio separato, collegato alle nostre pagine web? Ad ogni modifica sul foglio di stile TUTTE le pagine modificherebbero di conseguenza. Un bel risparmio di tempo.

diversi-schermi XHTML 1.1 valid css valid eXTReMe Tracker