In questa video lezione proposta si spiega la correlazione fra i nuovi tag semantici dell’HTML 5 e il CSS3. In particolare, si evidenzia la possibilità di sfruttare i tag semantici dell’HTML 5 e di costruire su di essi un design attraverso l’uso di un foglio di stile CSS3.
Il foglio di stile css può essere incorporato come già peraltro viso nella lezione pratica n.1 HTML e CSS con il tag <link> che all’interno deve contenere tre attributi e quindi nella sintassi completa è:
<link rel=”stylesheet” href=”url file css” type=”text/css”>
questo tag inserito prima del tag <head> e comunque dopo il tag <html> consente di collegare un foglio di stile CSS esterno al nostro documento HTML. I tag che sono coinvolti sono <header> e <footer> per l’intestazione il pié di pagina per un blocco logico (in un documento HTML possono essere presenti come già visto più blocchi logici distinti), il tag <nav> per la barra di navigazione per costruire un menu con un elenco puntato, e il tag <main> che rappresenta il blocco principale del documento HTML da non confondere con il tag <body> dell’intera pagina.
In particolare molto utilizzato è il selettore display che può assumere come valori più importanti “block”, “inline”, “block-ingline” e “none”. Quando un contenitore logico HTML ha una classe CSS associata dove è presente il selettore display il Browser effettua un rendering del blocco secondo quelle che sono le prescrizioni del selettore display.
In particolare se il selettore ha il valore su block allora gli elementi dell’elemento di pagina coinvolti sono disposti in verticale mentre nel caso di valore “inline” in orizzontale. Nel caso in cui il selettore abbia il valore “block-inline” si comporta come un blocco ma i contenuti del blocco fluiscono da sinistra verso destra fino ad occupare lo spazio a loro concesso. Se ad esempio quell’elemento di pagina ha una larghezza del 25% impostata sul selettore width della classe CSS, nella modalità mista block-inline i contenuti dell’elemento fluiscono da sinistra verso destra ma sono confinati nel blocco impostato.
Il foglio di stile di esempio che può essere modificato a piacimento esporto nell’esercitazione video è:
.intestazione {
margin-left: 2.5em;
}
.menu-nav {
display: block;
width: 25%;
background-color: #D50909;
}
.item {
color: yellow;
text-decoration: overline;
padding-left: 0.5em;
}
.piede {
font-size: 0.75em;
color: gray;
}
.sfondo {
background-color: lime;
width: 70%;
}
Sono definite varie classi che applichiamo alla pagina HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<title>Pagina HTML 5 con CSS n.2</title>
</head>
<link rel="stylesheet" href="css2v1.css" type="text/css">
<nav class="menu-nav">
<header class="intestazione">Menu di scelta rapida</header>
<ul>
<li class="item">Voce di Menu 1</li>
<li class="item">Voce di Menù 2</li>
<li class="item">Voce di Menù 3</li>
</ul>
</nav>
<main class="sfondo">
<header class="intestazione">Contenuto n.1</header>
<p>Sintassi dell'HTML 5 con il CSS 3</p>
<footer class="piede">Realizzato da Team Informatica OpenSource</footer>
</main>
</html>
Sono state applicate varie classi CSS al documento HTML che forniscono un design caratterizzato dal foglio CSS presentato.