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.
