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 6 – CSS – Parte 4
Oggi parliamo di Margin, Padding e Border.
Margin
Margin serve per dare un margine tutto intorno a una fotografia piuttosto che a un paragrafo ect. Se noi scriviamo Margin:100px; vuol dire che metteremo 100px tutto intorno all’oggetto. Possiamo anche decidere di fare dei margini diversi. Se invece di un varolo ne mettiamo due Margin:100px 50px; metterono 100px sopra e sotto e 50px a destra e sinistra. Volendo possiamo anche cambiare il margine per ogni lato Margin:100px 50px 20px 40px; in questo caso avremo 100px sopra, 50px a destra, 20px sotto e 40px a sinistra del nostro oggetto. Esiste un’altro modo per dare margine.
- margin-top:100px;
- margin-left:50px;
- margin-bottom:20px;
- margin-right:40px;
In questo modo se lo desideriamo possiamo avere i margini dove vogliamo in modo più leggibile.
Padding
Il Padding funzione allo stesso modo di margin. La differenza sostanziale è che mentre margine da del margine intorno all’oggetto, padding da margine all’interno dell’oggetto stesso.
<html>
<head>
<title>Pagina web con CSS</title>
<style type=”text/css”>
.secondo {
color:pink;
background-color:#000080;
width:200px;
float:left;
text-align: justify;
position:relative;
padding:50px ;}
</style>
</head>
<body>
<p class=”secondo”>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.</p>
</body>
</html>
Il risultato.
Come vedete tutto intorno al testo abbiamo del margine. Senza padding il risultato è questo:
Border
Border si utilizza per dare uno stile al bordo dell’oggetto. Es:
<html>
<head>
<title>Webpage With Style </title>
<style type="text/css">
#quadrato-red {
background-color:red;
border: 10px yellow solid;
}
#quadrato-blue {
background-color:blue;
border-style: ridge solid dotted dashed;
border-color: green beige pink palegoldenrod;
border-width: 10px 5px 2px 1px;
}
#quadrato-green {
background-color:green;
border-radius:50%;
}
.quadrato{
width:400px;
height:400px;
margin:40px;
float:left;
}
</style>
</head>
<body>
<div id="quadrato-red" class="quadrato"> </div>
<div id="quadrato-blue" class="quadrato"> </div>
<div id="quadrato-green" class="quadrato"> </div>
</body>
</html>
Potete copiare il codice e vedere quello che fa. Col border bisogna specificare tre valore; la grandezza del bordo il colore e lo stile. border: 10px yellow solid;
- border-style:ridge solid dotted dashed; si da uno stile diverso per ogni bordo
- border-color: green beige pink palegoldenrod; si da un colore diverso per ogni bordo
- border-width: 10px 5px 2px 1px; si da una grandezza diversa per ogni bordo
- border-radius:50%; per creare dei cerchi o se utilizzate px anche bordi arrotondati
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.
