CSS : cosa sono?
I CSS o Cascading Style Sheets o meglio conosciuti in italia come fogli di stile, solo lo strumento base per definire il layout di un sito html.
CSS : Selettori
Un selettore è un elemento HTML a cui vanno applicate le regole di stile, i selettori più usati sono :
> tag [selettore HTML] : si può dare una regola generale per un tag es : Div o P
> .classe [selettore di classe] : da una regola di classe che si applica a tutti gli elementi che hanno l’attributo class=”classe”
> #nome [selettore ID] : da una regola agli elementi che hanno come id=”nome”
> * [selettore universale] : da una regola a tutti gli elementi presenti nella pagina
> div.classe [selettore dependent class] : da una regola alle div che hanno l’attributo class=”classe”
> div#nome [selettore dependent id] : da una regola alle div che hanno l’attributo id=”menu”
CSS : Regole
Una regola è una serie di blocco di definizione attribuito ad un selettore, di seguito un semplice esempio :
selettore {color:#ff0000; padding:0 0 0 0;}
dove
{color:#ff0000; padding:0 0 0 0;} è il blocco di definizione.
CSS : Come associare le regole all’HTML
1 > Con l’attributo style direttamente all’interno dell’HTML
Esempio :
<h1 style=”font:italic”>
2 > Con il tag style direttamente all’interno dell’HTML
Esempio :
<style type=”text/css” media=”all”>h1 {font:italic}</style>
3 > Importazione di un file css tramite il tag link
Esempio :
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”all” />
CSS : Il Listato
Il listato definisce una serie di regole di stile utilizzando i vari selettori di seguito un esempio :
/*
Regole CSS
*/
body {
margin:0;
}
.classe {
font:italic;
}
div.classe{
border:1px;
}
E’ possibile inoltre attribuire la stessa regola a più selettori/elementi ecco un esempio :
body,p,div {margin:0px;}
Selettori Combinati
I selettori combinati sono caretterizzati dal rapporto padre/figlio in scala gerarchica ben definita, i selettori combinati più utilizzati sono usati come nel seguente esempio :
<article><header><hgroup><h1><h4></h4></h1></hgroup></header><footer></footer></article>
Selettori Combinati : Descendant Combinator esempio :
article h1 { color:#ff0000 }
Selettori Combinati : Child Combinator esempio :
hgroup > h4 { color:#ff0000 }
Selettori Combinati : Adjacent Sibling esempio :
h1 + h4 { color:#ff0000 }
Selettori Combinati : General Sibling Combinator esempio :
header ~ footer {background-color:#ff0000}
Vuoi far diventare
la tua azienda una mucca viola?
Contattaci!