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!