The Best Geek Forum

Regole CSS base

Buttiamo i rullini e diamoci al CSS! Puoi creare grafica professionale scrivendo! Ti sembra strano? Vieni a dare un'occhiata!

Moderatore: Moderatore in prova

Regole CSS base

:welcomeani:

Prima di tutto, come accennato nella guida Introduzione al CSS, è possibile creare pagine CSS o inserire direttamente i codici in pagine HTML o PHP. Nel caso si vogliano creare pagine CSS, sarà necessario collegare quindi pagine CSS e pagine HTML attraverso un comando specifico nella pagina HTML come da esempio:

Codice: Seleziona tutto

QUESTA E' UNA PAGINE HTML O PHP
<html>
	<head>
		<link href="NOME-DEL-FILE-CSS.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	</body>
</html>	
Come da esempio esempio, è molto importante ricordarsi che la linea di codice va inserita nell' HEAD della pagina. Se invece vogliamo inserire linee di codice CSS nella nostra pagina HTML o PHP dobbiamo utilizzare la seguente sintassi:

Codice: Seleziona tutto

QUESTA E' UNA PAGINE HTML O PHP
<html>
	<head>
	</head>
	<body>
		  <style type="text/css"> 
 		 	(inserire qui dentro le linee CSS)
  		</style>
	</body>
</html>	
Come ogni codice (HTML, PHP...) anche il CSS necessita di regole fondamentali e valori esatti. Con regole fondamentali, intendiamo tutti quelli accorgimenti che ci permettono di non commettere errori durante la stesura di un codice.

Uno degli errori molto frequenti in un testo CSS per chi è alle prime armi è il seguente:

Codice: Seleziona tutto

SBAGLIATO:
testo{
width: 300 px
height: 300 px;
}

GIUSTO:
testo{
width: 300px
height: 300px;
}
Come da esempio, nel primo caso vi è un distaccamento tra valore e unità di misura. Molto importante quindi non lasciare mai spazi tra valore e unità di misura, altrimenti quella riga di codice verrà ignorata e non verrà eseguita.

Un secondo errore molto frequente consiste nel mettere le virgolette ai valori degli attributi. Questo è molto sbagliato, sappiamo che in alcuni linguaggi si usa così... ma non in questo. In questo linguaggio sono permesse le virgolette solo quando vengono utilizzate frasi con più parole. ES.

Codice: Seleziona tutto

SBAGLIATO:
testo{
font-family: "Arial";
}

GIUSTO:
testo{
font-family: Arial;
}
Nel primo esempio presentato, ho utilizzato come unità di misura i px ovvero i PIXELS. Per chi fosse interessato ad utilizzare altri unità di misura, di seguito ne presento alcune :

-in (POLLICI)
-cm (CENTIMETRI)
-mm (MILLIMETRI)
-pt (POINTS, utilizzata per stabilire la dimensione dei Font)

Vi è inoltre un'altra unità di misura particolare e molto utile all'occorrenza: % (PERCENTUALE) . Questa unità di misura è diversa dalle altre poichè non agisce autonomamente, ma è eseguito rispetto ad un'altro valore. Per essere più precisi, supponiamo di avere un contenitore padre e un contenitore figlio. Se attribuiamo al contenitore figlio un valore percentuale, il valore verrà regolato in base alle dimensioni del contenitore padre.

:thanks:
Ottima guida! Semplice e chiara!