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.
Lascia una risposta
Lascia una risposta
Info sull'autore