Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

CSS: sintassi di una regola CSS

Scrivere una regola CSS vuol dire applicare un particolare stile grafico ad un elemento che compone la pagina html.
Una regola si può comporre di una o più dichiarazioni, dove ciascuna dichiarazione influisce su una specifica proprietà dell’elemento.

Una regola è composta da:

  • un selettore;
  • il blocco delle dichiarazioni.

Il selettore serve a definire la parte del documento a cui verrà applicata la regola, il blocco delle dichiarazioni invece sarà un elenco di proprietà.

Vediamo in pratica, la nostra prima regola CSS:

h1 {
	color : red;
	background-color : black;
}

Traduciamo così la regola appena vista:

tutti gli elementi <h1> presenti nella pagina a cui è associata questo foglio di stile, visualizzeranno il contenuto di tale tag con un font di colore rosso e uno sfondo di colore nero.

Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni.
Esse sono sempre composte da una coppia:

  • proprietà;
  • valore.

La proprietà definisce un aspetto dell’elemento da modificare (margini, colore di sfondo, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti.

Una limitazione fondamentale da rispettare è che per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori.

Pertanto la seguente regola è errata:

body {color background: black;}

Mentre questa è perfettamente valida:

div {font: 12px Verdana, arial;}

Inoltre se in un blocco si definiscono più dichiarazioni, come nell’esempio del tag <h1>, esse vanno separate dal punto e virgola.
Il linguaggio non impone che si metta il punto e virgola dopo l’ultima dichiarazione, ma alcuni browser più datati lo richiedono, quindi è buona norma aggiungerlo sempre per sicurezza e per una maggiore compatibilità.
Gli spazi bianchi lasciati all’interno di una regola non influiscono sul risultato. Il consiglio, anzi, è di lasciare sempre uno spazio tra le varie parti per una migliore leggibilità.

Applicare un foglio di stile ad una pagina

Riprendiamo la regola CSS vista nel paragrafo precedente:

h1 {
	color : red;
	background-color : black;
}

Per applicare questa dichiarazione ad una pagina html è necessario procedere in uno dei modi analizzati in precedenza. Dobbiamo quindi scegliere in che modo incorporare il CSS in un codice html. Per rientrare negli standard di corretta programmazione, realizziamo un file di stile esterno.

Salviamo quindi la nostra regola in un file di testo con estensione .css, che chiameremo ad esempio stile.css.

Il passo successivo sarà quello di associare ad una pagina html il foglio di stile:

<link href="stile.css" type="text/css" rel="stylesheet" />

Vediamo quindi il codice completo di una pagina html:

<html>
<head>
	<title>STILE CSS</title>
	<link href="stile.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<h1>I Promessi Sposi</h1>
	<p align='justify'>
        Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti...
	</p>
</body>
</html>

Il risultato nella finestra del browser è il seguente:

La prima regola CSS

Inserire commenti

Così come per l’html anche il CSS permette l’inserimento di commenti da parte dello sviluppatore.
Per inserire un commento la sintassi è la seguente:

/*
   questo è un commento per fogli di stile…
*/

I commenti posso essere posizionati sia fuori che dentro le singole regole. E’ buona norma utilizzarli soprattutto per chi leggerà e modificherà successivamente il file css.

/* Regola di stile per i titoli di livello h1 */
h1 {
	/* Imposto colore del testo a rosso e sfondo a nero */
	color : red;
	background-color : black;
}
Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Ti potrebbe piacere anche

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
09/02/2021
14:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Letteratura, Lingua e Cultura Italiana - Lettere
09/02/2021
14:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere
09/02/2021
17:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere
09/02/2021
17:30
Esame Abilità Informatiche e Telematiche - Cds Letteratura, Arte, Musica e Spettacolo - Lettere
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×