Corso di CSS / Applicare CSS con stili inline, interni ed esterni

Puoi applicare CSS attraverso l'attributo style di un elemento, un elemento style nel documento HTML, o un foglio di stile esterno collegato. I fogli di stile esterni sono generalmente più facili da mantenere su più pagine, mentre gli altri metodi sono adatti a usi più piccoli e specifici.

Confronta i tre modi per applicare CSS

Tutti e tre i metodi applicano CSS. Le regole interne ed esterne ordinarie competono secondo la cascata, compresi i loro selettori e l'ordine di origine; un file esterno non è intrinsecamente più debole. Le dichiarazioni inline di solito hanno precedenza sulle dichiarazioni normali del foglio di stile dell'autore, ma condizioni come !important cambiano questo confronto. Per ulteriori dettagli, vedere Ereditarietà, specificità e cascata CSS.

Scrivi stili inline e interni

Negli stili inline, scrivi la dichiarazione all’interno dell’attributo style dell'elemento che vuoi decorare. Non sono inclusi selettori o parentesi esterne. Il codice seguente specifica il colore e lo sfondo per un solo testo guida.

<p style="color: #087f5b; background-color: #e9f7ef;">
  We open at 9 a.m. every day.
</p>

Nel foglio di stile interno, le regole, inclusi selettori e parentesi graffe, vengono scritte nell'elemento style all'interno di head. Più frasi con la stessa classe possono essere decorate con una sola regola. Nell'esempio sottostante, il valore della classe HTML è notice e il selettore CSS è .notice.

<head>
  <style>
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>

Entrambi gli esempi sono frammenti HTML da confrontare su dove vengono scritti. Quando si modificano i metodi in questo esercizio, rimuovere eventuali dichiarazioni delle stesse proprietà introdotte con il metodo precedente. Lasciare più metodi contemporaneamente rende difficile distinguere tra guasti di connessione e conflitti di regole.

Collegare un foglio di stile esterno

Creare una cartella garden vuota e salvare i seguenti tre file: Il file CSS contiene solo CSS e non include il tag <style>. Entrambi i file HTML collegano a style.css nella stessa cartella.

garden/
├─ index.html
├─ visit.html
└─ style.css

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <a href="visit.html">View visitor information</a>
</body>
</html>

visit.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visitor Information</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Visitor Information</h1>
  <p class="notice">Bring a water bottle and comfortable shoes.</p>
  <a href="index.html">Return to the garden introduction</a>
</body>
</html>

style.css

body {
  margin: 24px;
  font-family: sans-serif;
  line-height: 1.7;
}
h1 { color: #087f5b; }
.notice {
  padding: 16px;
  border: 1px solid #087f5b;
  background-color: #e9f7ef;
}

rel="stylesheet" significa che il file collegato è un foglio di stile, e href="style.css" è la posizione del file da leggere. Nei documenti HTML5, non è necessario scrivere separatamente type="text/css" nelle connessioni CSS standard. Questo esercizio, che apre file locali direttamente, non richiede server o librerie aggiuntive.

Quando apri index.html nel tuo browser, vedrai un titolo verde e una casella informativa chiara. Fai clic su “View visitor information” (informazioni per i visitatori) per andare a visit.html, e anche se il contenuto è diverso, il colore del titolo e la forma della casella informativa sono gli stessi. Se cambi il colore del titolo di style.css in #1d4ed8 e poi ricarichi entrambe le pagine, entrambi i titoli diventeranno blu. Questo è il vantaggio dell’utilizzo di file comuni.

Scegli un percorso per la struttura delle cartelle

Il percorso sottostante viene letto in base alla posizione del documento HTML. Come nell'esempio, la premessa è un documento normale il cui URL di base non è stato sostituito con l'elemento base. Se sposti il file CSS, devi cambiare non solo il nome del file ma anche href.

garden/
├─ pages/
│  └─ index.html
└─ css/
   └─ style.css

Per l'ultima disposizione delle cartelle, scrivi <link rel="stylesheet" href="../css/style.css"> in pages/index.html. Il segmento ../ sale di una directory. I percorsi web usano le barre (slash) in avanti. Una barra iniziale, come in /css/style.css, si risolve a partire dalla radice del sito e ha un significato diverso da questo percorso relativo al file locale. Vedi MDN: Introduzione.

Diagnostica problemi di caricamento, corrispondenza e cascata

1. Prima di tutto, verifica la connessione del file. Controlla che l'estensione non sia salvata come .css.txt e che l'href e la posizione effettiva della cartella corrispondano. Su molti server web i nomi dei file distinguono le maiuscole dalle minuscole; usa sempre la stessa grafia nel percorso e nel nome effettivo. Se la pagina viene aperta su un server web, puoi controllare la richiesta e la risposta CSS in Rete negli Strumenti per sviluppatori. I file locali potrebbero non mostrare lo stesso codice di stato HTTP.
2. Verifica che l'elemento target sia corretto. È class="notice" in HTML, ma se .notcie è scritto in CSS, l'avviso non cambierà anche se il file viene letto normalmente. Negli Strumenti per sviluppatori, vedi il nome effettivo della classe in Elementi e cerca la regola CSS nel pannello Styles (Stili).
3. Verifica se la regola è stata sovrascritta. Se una dichiarazione di colore diversa prevale più tardi, la dichiarazione originale potrebbe apparire barrata negli Stili. Controlla separatamente le regole di applicazione finale rispetto ai problemi con file CSS mancanti.

Per verificare se il foglio di stile viene caricato, aggiungi temporaneamente body { background-color: #fff4cc; } alla sua fine e aggiorna la pagina. Una pagina gialla conferma che il file è collegato. Poi controlla se il selettore di avviso corrisponde e se un'altra dichiarazione prevale. Rimuovi la regola temporanea successivamente. !important non può riparare un file mancante o un selettore scritto male. Per ulteriori dettagli, vedi Esaminare CSS con DevTools: Styles e Computed.