I CSS: Lezione I
I css, detti anche fogli di stile, sono nati con il preciso compito di occuparsi della formattazione di una pagina web, cosa che prima era demandata al linguaggio html.
Oggi, i contenitori vengono sempre creati con i tag html mentre per la formattazione il loro uso è deprecato a favore dei fogli di stile.
Formattare un testo in css vuol dire anche creare un codice che può essere utilizzato per un intero sito web senza che si debba modificare a mano ogni singola pagina.
I css, Cascading Style Sheets, possono essere utilizzati in tre modi:
- Come fogli di stile in linea
- come fogli di stile incorporati
- come fogli di stile esterni
- Fogli di stile in linea
In questo caso non ci spostiamo molto da quello che è l'utilizzo dell'html, infatti le proprietà verranno dichiarate nel contenitore (ricordiamo che esso può essere ad esempio un paragrafo <p> o <div> o <span>), e avrà effetto solo ed esclusivamente su questo contenitore.
Ad esempio:
<div style = “font-size: 8px; color: red”> testo in rosso </div>
Come avrai già notato gli attributi vengono seguiti dai due punti invece che dall'uguale, questa è una prima differenza nella sintassi dei Css.
- Fogli di stile incorporati
Le proprietà vengono inserite nell'head della pagina html e hanno effetto su tutta la pagina, non sul tutto il sito web, utilizzando il tag <style type= “text/css”>
Ad esempio:
<html>
<head>
<style type = “text/css”>
body {background-color: red;}
</style> </head>
Nota che:
- Sono utilizzate le parentesi graffe
- Al posto dell'uguale utilizziamo i due punti
- Gli argomenti sono separati dal punto e virgola invece della virgola
- Non vi sono le virgolette
Una migliore indentazione sarebbe:
<html>
<head>
<style type = “text/css”>
H1 {
font-size: 13px;
font-family: Arial;
color: red;
}
</style>
</head>
Con gli argomenti uno sotto l'altro.
In questo caso tutti gli elementi racchiusi tra i tag H1 avranno il colore rosso, font Arial e grandezza 13.
- Fogli di stile esterni
All'interno dell'head viene richiamato un foglio si stile esterno alla pagina:
<html>
<head>
<link rel="stylesheet" type="text/css" href="fogliodistile.css">
</head>
Stando ben attenti a inserire il percorso corretto in cui si trova il foglio di stile, in questo modo potremo applicare la stessa formattazione a tutte le nostre pagine web, basta inserire questa dicitura nell'head delle pagine in cui vogliamo utilizzarlo.
Vedremo meglio la sintassi dei css nelle prossime lezioni....
Nessun commento:
Posta un commento