Costruire un sito Web 7 – CSS – Parte 5
I font
Vediamo come dare stile al nostro testo. Per il tipo di font si devono usare quelli che hanno tutti i pc per non evitate che il nostro sito vada in errore o che visualizzi un font che non avevamo scelto. I font che si trova in tutti i pc li trovate qui. Mentre se volete dei font particolari li trovate qui. Come vedete sono i font che mette a disposizione google gratuitamente. Una volta che avete scelto il vostro font e modificato come volete premete sul + a questo punto in basso a destra cliccate sulla barra che vi apparire e copiate il codice. es: <link href=”https://fonts.googleapis.com/css?family= Spartan:300&display=swap” rel=”stylesheet”> questa linea va messa in <head> . Sotto troverete il codice per richiamarlo. es. font-family: Spartan ; lo potete inserire nell’esempio che ho messo sotto al posto della linea font-style:italic;
<html>
<head>
<title>Webpage di stile</title>
<style type="text/css">
.bold {
font-weight: bold;
}
.italic {
font-style:italic;
}
.underlined {
text-decoration: underline;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:green;
}
.big {
font-size: 200%
}
</style>
</head>
<body>
<p class="bold">This is some bold text!</p>
<p class="italic">This is some italic text! <span class="bold">And this is bold and italic.</span></p>
<p class="underlined">This text is underlined!</p>
<a href="">This is a non-underlined link</a>
<p class="big">This text is BIG!</p<
</body>
</html>
Allineamento del testo
Di seguito metto un es. su come allineare il testo.
<html>
<head>
<title>;Webpage With Style</title>
<style type="text/css">
p {
text-align:right;
}
div {
width:300px;
background-color:green;
}
.centered {
text-align: center;
}
.justified {
text-align: justify;
}
</style>
</head>
<body>
<div>
<p>Questo testo è a destre</p>
<p class="centered">Questo testo è centrato</p>
<p class="justified">Nei primi tredici anni del suo impero il giovane imperatore dovette affrontare due guerre civili, causate - come testimonia Michele Psello nelle sue cronache - dai generali Barda Sclero e Barda Foca, che lo ritenevano troppo giovane per governare l'Impero. Una volta sconfitti i due generali ribelli, Basilio II conseguì notevoli risultati in ambito militare conquistando</p>
</div>
</body>
</html>
I Link
Vediamo come possiamo dare dello stile a dei link.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color:green;
}
</style>
</head>
<body>
<div>
<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://www.google.it" target="_blank">Google in a new tab</a></p>
</div>
</body>
</html>
Nel codice si sono quattro novità.
- text-decoration: none; Toglie il testo sottolineato che è standard nei link
- a:hover Hover è una pseudo classe che vuol dire quando il mouse va sopra alla linea text-decoration: underline; viene sottolineata
- a:visited visited è una speudo classe che vuol dire che quando un link è stato visitato color:green; cambia il colore in verde
- target=”_blank” se vogliamo che quando si clicca sul link si apra una pagina nuova
Se volete approfondire tutti gli argomenti fin qui trattati basta cercare su internet e troverete tutto.
Costruire un sito Web 4 – CSS – Parte 2
CLASSI e ID
Nel precedente articolo vi avevo parlato del CSS inline. Adesso cominciamo a vedere il CSS interno. Col CSS interno si può da stile a tutto quello che si vuole, vediamo come si fa.
All’interno del tag <head></head> si deve specificare che tutto quello che si scriverà sarà CSS. Si utilizza il tag <style></style> ma non basta bisogna specificare anche il tipo. Perciò <style type=”text/css”> </style>. In questo modo diciamo a HTML che tutto quello che scriviamo all’interno del tag <style> è CSS. Se voglia dare dello stile a tutti i paragrafi e cioè <p></p> basta aggiungere la p seguita dalle parentesi graffe. E tutto quello che scriviamo all’interno delle parentesi graffe di p mi darà stile a tutti i <p>. Di conseguenza se volessi cambiare lo stile al tag <h1> si procede come abbiamo fatto con <p>. La procedura è uguale per tutti i tag. La cosa importante che alla fine di ogni linea di comando è mettere il ;.
In questo modo noi possiamo dare stile uguale ad es. a tutti i paragrafi. Ma come faccio se ho più paragrafi e voglio cambiare stile a ogni paragrafo? Si devono usare le classi e gli ID.
<style type=”text/css”>
.size {
font-size:200%;
}</style>
</head>
<body>
<h1 class=”size”>Titolo</h1>
Praticamente noi creiamo una class dandogli il nome che vogliamo in questo esempio size. Per poterla richiamare dovremo utilizzare il punto davanti al nome .size, in questo modo noi possiamo utilizzare la class size in tutti i tag che vogliamo e dare lo stesso stile a tutti i tag, dove la utilizziamo in questo esempio utilizzando font-size:200% il testo sarà il 200% più grande dell’originale. Possiamo anche utilizzare più classi in un tag. Se noi avessimo delle classi che si chiamano size e font li potremo richiamare mettendoli all’interno delle virgolette distanziati dallo spazio. Es. <h1 class=”size font”>Titolo</h1> in questo modo utilizzeremo due classi. Per quanto riguarda gli ID la struttura è identica, l’unica differenza sarà che per richiamarli non si utilizzerà il punto ma bensì il #. E al posto di class si utilizza id.
<style type=”text/css”>
#size {
font-size:200%;
}</style>
</head>
<body>
<h1 id=”size”>Titolo</h1>
La domanda sporge spontanea, ma se sono uguali perché utilizzare sia le classi che gli id? Le classi servono per definire una tipologia di elementi, cioè per attribuire uno scopo e/o una presentazione ad un sottoinsieme di elementi con caratteristiche e funzionalità comuni di una pagina HTML. Gli id servono per definire un elemento unico in una pagina, con un unico e preciso scopo, nella maggior parte dei casi tale scopo è determinare una sezione in una pagina HTML. In sostanza, quando sappiamo che un elemento sarà unico useremo un id. Negli altri casi, se non disponiamo di alternative (come ad esempio il selettore discendente) possiamo usare una classe.
