Compito precedente
Introduzione a HTML e CSS2/13
Torna all'elenco delle attività
  1. 1. Andiamo!
  2. 2. CSS in azione
  3. 3. Consolidamento
  4. 4. Nozioni di base di HTML
  5. 5. Singoli tag HTML
  6. 6. Attributi dei tag HTML
  7. 7. Ricerca di errori in HTML
  8. 8. Le basi dei CSS
  9. 9. Altri modi per collegare il CSS
  10. 10. Selettori CSS
  11. 11. Classi in CSS
  12. 12. Proprietà e valori CSS
  13. 13. Ricerca di errori nei CSS
Compito successivo
  • Corsi
  • Registrazione
  • Accedi

Caricamento...
In pochi secondi sarà pronto.

  • Teoria
  • Teoria

CSS in azione

Nell'ultimo compito, avete modificato il codice nell'editor HTML e vi siete assicurati che il contenuto della pagina cambiasse.

In questo compito, lavorerete con l'editor CSS e vedrete come potete modificare il layout di una pagina con poche righe di codice.

Non ci soffermeremo sul significato di ogni proprietà CSS in questo momento. Ci limiteremo a vedere i CSS in azione! Per attivare il codice CSS, è necessario rimuovere i caratteri di commento che lo "disattivano".

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>CSS in azione</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>CSS</h1> <p>Il CSS è ancora più semplice dell'HTML. Consiste in molte regole, come queste:</p> <pre><code>selettore { property1: <em>value1</em>; property2: <em>value2</em>; }</code></pre> <p>Le regole sono molto semplici. Ma c'è un problema: ci sono <em>molte</em> proprietà.</p> <p>La maggior parte del corso si concentrerà specificamente sui CSS.</p> <p>Ora lavorate con l'editor inferiore.</p> </body> </html>
CSS
/* body { padding: 0 20px; font-size: 16px; font-family: "Arial", sans-serif; } h1 { color: #618ad2; text-shadow: 2px 2px 0 #cccccc; } pre { padding: 10px; font-size: 14px; line-height: 20px; background-color: #f5f5f5; border: 1px solid #cccccc; border-radius: 3px; } em { color: #618ad2; } */

Il codice è cambiato, fai clic su "Aggiorna" o attiva l'esecuzione automatica.

Sei passato a un'altra pagina

Fare clic all'interno del mini-browser per evidenziare questa finestra.

100%
ObiettiviFatto
0
    1. Rimuovere i caratteri /* nella prima riga dell'editor CSS e vedere come viene trasformato il testo della pagina.

    © 2023-2024, codegym.study