fbpx

Archivio dei tag lorenzo lanfranchi

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à.

  1. text-decoration: none; Toglie il testo sottolineato che è standard nei link
  2. a:hover Hover è una pseudo classe che vuol dire quando il mouse va sopra alla linea text-decoration: underline; viene sottolineata
  3. a:visited visited è una speudo classe che vuol dire che quando un link è stato visitato color:green; cambia il colore in verde
  4. 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.

css2

 

 

 

 

 

 

 

 

Come vedete tutto intorno al testo abbiamo del margine. Senza padding il risultato è questo:

css3

 

 

 

 

 

 

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.

 

Translate »

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi