16
dic
2008

Cosa sono i CSS e perché sono fondamentali

Di staff, in CSS, Webmaster.

Commenta!

Quanti di voi hanno sentito parlare di fogli di stile (css) ?
Sono il pane del webmaster, possiamo fare una pagina internet con semplice html ma per renderlo accattivante, preciso e impaginato a dovere dobbiamo usare i CSS, delle semplici regole che dobbiamo adottare costantemente (un uso corretto di CSS agevola l’indicizzazione del sito).
Come si creano?
Le regole CSS hanno una struttura precisa ed è la seguente:

selettore {
proprietà1 : valore1;
proprietà2 : valore2, valore3;
}

Esempio

body {
background-image : url (‘zxc.jpg’);
overflow:auto;
padding:0px;
margin:0px;
width:100%;
height:100%;
}

Il selettore sta ad indicare una class, un id, oppure direttamente il tipo.
Come si inseriscono?
E’ una cosa semplicissima, premetto che comunque una base di html/xhtml dobbiamo averla.
Ogni script va messo nella sezione <head>..</head> singolarmente.. questo è quello che avete sempre fatto (o comunque molti di voi), cosa dobbiamo fare invece per una cosa precisa?
Preparare un foglio completamente fatto di css ( esempio.css ) e caricarlo successivamente nella pagina html tramite il comando @import url.
Esempio:

<html>
<head>
<title> xxx </title>
<style type=”text/css”>
@import url(esempio.css);
</style>
</head>

In questo modo le regole fissate su esempio.css vengono usate nella pagina intitolata xxx.
Le proprietà più diffuse:
• background. Definisce lo sfondo di un elemento. È la somma delle proprietà più specifiche background-attachment, background-color, background-image, background-position e background-repeat.
• border. Definisce il bordo di un elemento. È la somma delle proprietà più specifiche border-color, border-style e border-width.
• color. Definisce il colore del testo di un elemento. Per definire lo sfondo si utilizza la proprietà background.
• float. Questa proprietà definisce un blocco flottante, ovvero che permette la disposizione di altri elementi ai suoi lati.
• font. Definisce le proprietà del carattere. È la somma di proprietà più specifiche tra cui font-family, font-size e font-weight.
• margin e padding. Definiscono lo spazio circostante gli elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.
• text-align. Definisce l’allineamento del testo.
I Valori
Se una proprietà non viene specificata assume i valori di default, altrimenti i seguenti sono i valori che possiamo scegliere:
• inherit (specifica che la proprietà deve ereditare il valore dagli elementi da cui l’elemento discende)
•auto (indica al browser di usare il valore di default)
• numero
• percentuale
• colore
• URI
• font
• altri…