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>
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>
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à.
Se volete approfondire tutti gli argomenti fin qui trattati basta cercare su internet e troverete tutto.
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.
Info sull'autore