fbpx

Costruire un sito Web 5 – CSS – Parte 3

Costruire un sito Web 5 – CSS – Parte 3

Questa lezione vediamo come dare stile a un gruppo di tag, vediamo come gestire i colori per tutti i browser e per ultimo vedremo come posizionare gli elementi in una pagina.

I Divs

Nella lezione precedente abbiamo visto come dare stile ai tag. Il problema era che dovevo utilizzare le classi per ogni linea di codice. Se invece volessi dare lo stesso stile a più tag si utilizza <div></div>.

<html>

<head>

<title>Pagina web con CSS</title>

<style type=”text/css”>

.blue {

color:blue
background-color:pink;
text-align: justify;

}

<!– con text-align: justify; si giustifica il testo         background-color:pink; si il colore allo sfondo–>

</style>

<body>

<h1>Titolo</h1>

<!– con div tutto quello che sta all’interno viene modificato –>

<div class=”blue”>

<p>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>

<p>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>

</div>

Tutto molto semplice e veloce. Se noi creiamo molte classi con specifiche diverse all’inizio del codice, quando avremo bisogno di dare uno stile particolare non dovremo far altro che richiamarlo tutte le volte che vogliamo, vi ricordo che si posso usare più stili in una class.

I colori

Come avete visto i colori si possono inserire come parola in inglese, Blue=Blue, Rosa=Pink, Verde=green ect. ect. L’unico inconveniente che possiamo incorrere ad utilizzare il colori in questo modo è che ogni browser può decifrarli in modo diverso. Se vogliamo che i colori siamo uguali in tutti i browser dobbiamo utilizzare i colori in formato esadecimale. Basta cercare in rete. Vi metto due link HTML Color Codes e  Htmlcolorcodes.

  • Il rosso  Color:#FF0000;
  • Il Blu  Color:#0000FF;
  • Il nero  Color:#000000;
  • Il verde Color:#008000;
  • Il bianco Color:#FFFFFF;

Se poi vedere un colore particolare in un sito e vi piace ma non sapete come trovare il codice esadecimale, potete installare un’estensione di Crome. Dopo averla installata vi troverete il simbolo del contagocce. Basta andare sopra al colore che volete replicare che vi restituirà il codice esadecimale di quel colore. L’estensione di Crome si chiama ColorZilla

Il posizionamento

Fino a desso abbiamo visto che come creare paragrafi e come dargli dello stile. Per poterli posizionare in una determinata posizione dello schermo si utilizza il comando float:

div #myDIV {
  width:100px;
  background-color:red;
  float:left;
}

In questo modo il nostro paragrafo si posizionerà a sinistra. Ho introdotto un nuovo comando width. Nell’esempio sopra scrivendo width:100px; vuol dire che tutto il paragrafo sarà contenuto in 100 pixel col colore di ù
sfondo rosso e a sinistra. Per posizionarlo a destra si utilizza right.

Se invece non volessimo utilizzare il float si può posizionare il paragrafi in un’altro modo. Utilizzando l’elemento position.

div .relative {
  position:relative;
  left:30px;
}

L’esempio sopra vuol dire che do una posizione relativa e da quella mi sposto a sinistra di 30 pixel. Cosa cosa vuol dire posizione relativa?
Praticamente utilizzando relative diciamo al browser che sposteremo un paragrafo dalla posizione originaria. Si possono utilizzare anche valori negativi -50px. Per spostarsi in alto o in basso si utilizza l’elemento top: +o-px;

div .basso {
  position:relative;
  top:10px;
}

div .alto {
  position:relative;
  top:-10px;
}

 Ci altre due posizione che vi voglio spiegare. Fixed e absolute. Con position:absolute; quando vogliamo spostare un elemento il calcolo dei pixel verà calcolato da in alto a sinistra. Con position:fixed; il nostro elemento rimarrà fissato in quella posizione anche quando andremo a scorrere la pagina. Molto utile se voglio che il menù si sempre visibile nella pagina.

 

 

Info sull'autore

Lorenzo Lanfranchi administrator

Lascia una risposta

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