Costruire un sito Web 7 – CSS – Parte 5

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&lt/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 7 – CSS – Parte 5