Questa pagina è parte della guida
Come creare un sito da zero, passo a passo..
Come includere le regole di stile (CSS)
Qualunque regola css può essere inserita direttamente nella sezione "head" o nella sezione "body" del codice html di una pagina, racchiudendolo tra questi tag:
<style>
regole
</style>
Le regole CSS possono essere anche inserite inline direttamente nell'elemento. Per esempio, nel caso di un div a cui vogliamo dare colore di fondo giallo:
<div style="background-color: yellow"></div>
Altre regole possono essere aggiunte separandole con punto e virgola.
Le regole CSS possono essere anche inserite in un foglio di stile esterno, cosa normalmente opportuna. Perche`?
Perchè in questo modo, al momento di creare una nuova pagina del sito, non dovremo riportare tutto il codice css, ma solo inserire il link che lo richiama.
Non solo, ma la cosa sarà molto utile anche per effettuare, in seguito, modifiche senza doverle effettuare su ogni singola pagina.
Basterà, infatti, modificare le regole del foglio di stile esterno per applicare le modifiche a tutte le pagine che sono ad esso collegate.
Vediamo, quindi, come creare un file
.css che conterrà tutto il codice CSS che determinerà l'aspetto del nostro sito.
Le regole css devono essere inserite nel file css senza i tag <style></style> che le contengono quando sono inserite direttamente nel codice della pagina.
Per approfondimento leggi: "Il foglio di stile.
Collegare il file.css alla pagina:
Ora, dobbiamo mettere tra i tag <head></head> il link che richiamerà il file.css (foglio di stile). Questo è il link che dovete usare:
<link rel="stylesheet" type="text/css" href="file.css">
Al posto di
file.css dovete mettere il nome del vostro file.css (foglio di stile). Questo file dovrà essere nella stessa cartella delle pagine del sito. Se si trovasse in un'altra cartella, sarebbe necessario scriverne il percorso esatto, come già visto in precedenza per i file delle pagine.
Es: cartella/file.css
Alla fine, il nostro codice html risulterà composto così:
<html>
<head>
<link rel="stylesheet" type="text/css" href="
file.css">
</head>
<body>
contenuti pagina
</body>
</html>
Perfetto, ora, se proverete ad aprire questa pagina del sito di test che stiamo progettando, vedrete che avrà esattamente le stesse caratteristiche delle altre pagine che avevano il codice css incorporato.
Fate lo stesso lavoro su tutte le pagine, compresa la pagina index.
Ecco fatto, da questo momento, se farete delle modifiche al foglio di stile, queste modifiche si rifletteranno, in automatico in tutte le pagine del sito in cui il foglio viene richiamato.
È possibile creare più fogli di stile, se fosse necessario. Per esempio nel caso in cui si volesse dare un aspetto diverso ad una pagina rispetto alle altre pagine.
Includere un file css in un altro file css
Nel caso fosse necessario, è possibile includere un file css in un altro file css usando questa regola:
@import "file.css";
Includere regole di stile via javascript
Qualora necessario, le regole di stile possono essere incluse tramite javascript.
Applicare regole di stile ad un solo div con id "test":
<div id="test">Esempio</div>
<script>
document.getElementById("test").style.cssText = "color:green;background-color:orange";
</script>
Il div e solo lui, perchè l'id è univoco, avrà colore di fondo arancione e il testo contenuto sarà di colore verde.
Applicare regole di stile ad un solo div con classe "test":
<div class="test">Esempio</div>
<script>
document.getElementsByClassName('uno')[0].style.cssText= 'color:green;background-color:orange';
</script>
Il div avrà colore di fondo arancione e il testo contenuto sarà di colore verde.
Lo [0] serve ad indicare che le regole sono applicate, in questo caso, al primo div con la classe "test", dato che lo 0 è il primo numero da cui si inizia a contare. L'indicazione del numero è indispansabile dato che una classe identifica una serie di elementi in sequenza.
Applicare regole di stile a molteplici div nella stessa pagina:
<div class="test">Example</div>
<div class="test">Example</div>
<script>
var ele = document.getElementsByClassName('test');
for (var i = 0; i < ele.length; i++ ) {
ele[i].style.cssText = "color:green;background-color:orange";
}
</script>
Tutti i div con classe "test" avranno colore di fondo arancione e il testo sarà di colore verde.
Applicare, o modificare, regole di stile allo scroll della pagina
In questo esempio il nav diventa fisso allo scroll della pagina dopo i primi 45 px di altezza:
<script>
window.addEventListener( 'scroll', function() {
if (window.scrollY > 45) {
document.querySelector('nav').style.position = 'fixed'
}
</script>
Includere le Media Query
In questo esempio il nav diventa fisso se la larghezza dello schermo è uguale, o maggiore di 768px:
let myMediaQuery = window.matchMedia('(min-width: 768px)')
if (myMediaQuery.matches) {
document.querySelector('nav').style.position = 'fixed'
}
Metodi differenti per selezionare elementi DOM
Il DOM (Document Object Model) è il modello ad oggetti che compone la struttura e il contenuto di un documento web.
Leggi anche:
Il DOM, leggerlo e comprenderlo
Gli elementi del DOM possono essere selezionati per poter applicare determinate regole di stile.
Il metodo getElement è supportato da tutti i browser. Il metodo querySelector è supportato dai browser moderni.
document.querySelectorAll('.test');
Questo metodo viene utilizzato per selezionare più elementi in base alla classe. Nell'esempio restituisce tutti gli elementi della pagina con classe "test".
Possibile utilizzarlo anche per gruppi di classi o id in questo modo: document.querySelectorAll(".test1, .test2, .test3, .test4");
document.querySelector('#test');
Questo metodo viene utilizzato per selezionare l'elemento della pagina con id univoco "test". Restituisce un solo elemento. Nell'esempio restituisce l'elemento con id "test":
document.querySelector('.test');
Questo metodo viene utilizzato per selezionare un elemento in base alla classe. Restituisce solo il primo elemento corrispondente. Nell'esempio restituisce il primo degli elementi con classe "test" della pagina.
document.getElementById('test');
Questo metodo viene utilizzato per selezionare l'elemento della pagina con id univoco "test". Restituisce un solo elemento. Nell'esempio restituisce l'elemento con id "test":
NOTA: getElementById(test) è più veloce di querySelector(.test) perché deve individuare un solo elemento, mentre querySelector(.test) deve individuare più elementi per poi restituire la prima corrispondenza.
Tuttavia, il metodo querySelector è più versatile, perchè permette di selezionare un unico elemento non solo per ID, ma anche per classe o altro tipo di selettore, mentre con il metodo getElementById l'elemento singolo è selezionabile solo tramite ID.
document.getElementByClassName('test');
Questo metodo viene utilizzato per selezionare gli elementi in base alla classe. Nell'esempio restituisce tutti gli elementi della pagina con classe "test".
Per più classi: document.getElementsByClassName("test1 test2");
document.getElementByTagName('p');
Questo metodo viene utilizzato per selezionare gli elementi in base al nome del tag. Restituisce tutti gli elementi corrispondenti. Nell'esempio restituisce tutti gli elementi con tag "p".
document.getElementByName('test');
Questo metodo viene utilizzato per selezionare gli elementi in base al nome specificato all'interno di un array ( Es: <input name="animal" type="checkbox" value="Dogs"). Restituisce tutti gli elementi corrispondenti. Nell'esempio restituisce tutti gli elementi con name "test".
Per approfondire la differenza tra class e id e molto altro, vai alla guida:
Il foglio di stile.
Come includere un file javascript (JS)
Qualunque codice javascript può essere inserito direttamente nella sezione "head", o nella sezione "body" del codice html di una pagina, racchiudendolo tra questi tag:
<script>
codice
</script>
Come per il codice css, anche il codice JS, soprattutto se lungo e complesso, può essere inserito in un file
.js esterno e richiamato nelle pagine in questo modo:
<script src="file.js"></script>
Il codice deve essere messo nel file js senza i tag <script></script> che lo racchiudono quando viene inserito direttamente nel codice della pagina.
Dove inserire il codice javascript:
Sezione HEAD:
In questa sezione si mettono solo gli script indispensabili alla prima visualizzazione pagina.
Sezione BODY:
In questa sezione (normalmente subito prima della chiusura </body>) si mettono tutti gli script che possono essere caricati dopo il caricamento della pagina.
Questo è importante per non rallentare la velocità di caricamento della pagina.
Caricare script di terze parti via javascript
Se necessario, i file js di terze parti possono essere caricati, oltre che con normale collegamento, anche via javascript, in questo modo:
(function(){
const script = document.createElement('script');
script.setAttribute(
'src',
'https://file.js',
);
script.setAttribute('async', '');
document.body.appendChild(script);
})()
Aggiornare i file
Se modificate i file e desiderate che vengano ricaricati dal browser per vedere subito le modifiche apportate,il problema che incontrate è quello della memorizzazione nella cache.
In pratica, tutti i browser memorizzano i file caricati nella cache e ripropongono la medesima versione fino alla scadenza della cache stessa.
Per forzare il browser a ricaricare un file esterno, si usa questo trucco:
<script src="path/file.js?v=1.0"></script>
Si aggiunge ?v=1.0 per indicare al browser che c'è una nuova versione del file e che, quindi, deve ricaricarlo.
Ad ogni nuova modifica, si cambierà il numero della versione in sequenza (1.1, 1.2, 1.3, 1.4....).
La medesima cosa per i file CSS.
Ok, adesso che la parte impegnativa è stata superata, vi potete divertire a modificare il vostro sito, ma voglio darvi ancora un consiglio: per fare gli "esperimenti", create sempre una copia della cartella che contiene il sito di base e lavorate su quella.
Allo stesso modo, quando ottenete un buon risultato, per provare altri cambiamenti, fatene un'ulteriore copia. In poche parole, mettete sempre da parte le imprese ben riuscite, per non rischiare di rovinarle :-))
Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse in più da scaricare.
Per il caricamento di file esterni, leggi: Come includere il contenuto di un file esterno
Aiuta il sito! Condividi questa pagina su:
Elenco argomenti di questa guida:
Altro di interesse
Torna alla pagina principale:
Creare un sito da zero ->>