-
.
Definire gli stili in CSS
Salve a tutti, nel precedente post ho spiegato in maniera molto semplice quali sono le basi per la creazione di una pagina HTML funzionante; in questo nuovo topic vi spiegherò invece come vanno definiti gli stili (cioè colori, sfondi, dimensioni e quant'altro) in CSS
Allora, partiamo dal presupposto di aver creato una pagina HTML di base, che chiamerò "ProvaHTML" che sarà collegata per la definizione degli stili a un'altra pagina che chiamerò "ProvaCSS".
La pagina HTML iniziale sarà fatta come segue:SPOILER (clicca per visualizzare)HTML<html>
</head>
<title>Prova HTML</title>
<LINK rel="stylesheet"
type="text/css"
href="ProvaCSS.css">
</head>
<body>
</body>
</html>
La prima cosa che vogliamo definire all'interno della pagina sono gli stili del body, in cui, almeno per ora metteremo solo lo sfondo.
all'interno della pagina CSS per definire gli stili è sufficiente mettere il nome (presente nella pagine HTML) di ciò che vogliamo definire e poi inserire i dettagli tra le parentesi graffe.
di conseguenza se io vorrò, ad esempio, uno sfondo di colore rosso, nel CSS scriverò:
body {background-color: red; } oppure {background-color: #FF0000; } se lo voglio inserire con il codice esadecimale (che è ciò che vi consiglio di fare).
è anche possibile voler utilizzare come sfondo un'immagine (vi ricordo che tutto il materiale che fa parte del lavoro cioè pagina HMTL, CSS eventuali immagini, video o tracce, vanno inserite tutte all'interno della stessa cartella, questo per evitare il problema della definizione del percorso)
in tal caso il codice sarà
body {background-image: url(immagine.gif); } così facendo, l'immagine inserita come sfondo, andrà a ripetersi per tutta la grandezza della pagina, se noi vogliamo invece un risultato differente possiamo aggiungere, ad esempio, la ripetizione verticale o orizzontale; al codice aggiungeremo quindi una seconda parte:
body {background-image: url(immagine.gif); background-repeat: repeat-x; } per la ripetizione orizzontale o repeat-y per la ripetizione verticale. sì può utilizzare anche la clausola "no-repat" se non vogliamo che l'immagine venga ripetuta.
La prossima propietà che è necessario conoscere per le immagini di sfondo è "background-attachment"
Con questa proprietà si imposta il comportamento dell’immagine di sfondo rispetto all’elemento cui è applicata e all’intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa.
in tal caso si aggiungerà {background-attachment: valore;} il valore può essere "fixed" oppure "scroll"
Esiste poi una propietà che ci consente di decidere dova andrà a finire l'immagine di sfondo
in tal caso la sintassi sarà {background-position: valoreOriz | valoreVert;}
e i valori potranno essere- percentuali
- con unità di misura
- o con parole chiave e la loro combinazione quali
- top
- left
- right
- bottom
.
