Esercizio - Usare i concetti relativi ai fogli di stile CSS

  • 7 minuti

Si vuole iniziare a modificare lo stile della pagina Web del curriculum. Si inizia selezionando il carattere e impostando le dimensioni per i vari elementi che si utilizzano nella pagina.

Questo modulo usa vscode.dev, una versione basata sul Web di Visual Studio Code, e CodeSwing. Questi strumenti consentono di semplificare il processo di sviluppo. Non è necessaria alcuna installazione locale per completare gli esercizi che seguono.

Creare un progetto

Si inizia creando una cartella, impostando gli strumenti e creando uno "swing" utilizzando CodeSwing in vscode.dev. Uno swing visualizzerà automaticamente i risultati del codice creato in vscode.dev. L'uso di Microsoft Visual Studio Code con CodeSwing consente di apportare rapidamente modifiche con un'anteprima degli aggiornamenti in tempo reale.

  1. Creare una cartella sul desktop denominata curriculum.
  2. Aprire vscode.dev.
  3. Selezionare Apri cartella.
  4. Passare alla cartella resume creata in precedenza e selezionare Seleziona cartella.
  5. Quando viene visualizzato il messaggio Consentir al sito di visualizzare i file, selezionare Visualizza file.
  6. Selezionare il pulsante Estensioni.

    Screenshot del pulsante Estensioni di Visual Studio.

  7. Nella casella di testo Cerca estensioni in Marketplace digitare CodeSwing.
  8. Selezionare Installa per installare CodeSwing.
  9. Aprire il riquadro comandi selezionando CTRL+MAIUSC+P o CMD+MAIUSC+P in un Mac.
  10. Digitare CodeSwing nel riquadro comandi e selezionare CodeSwing: New Swing in Directory.
  11. Selezionare Seleziona cartella per usare la directory corrente, ovvero quella creata in un passaggio precedente.
  12. Selezionare Basic: HTML/CSS/JavaScript.
  13. Se viene visualizzata la richiesta Salvare le modifiche a curriculum?, selezionare Salva modifiche.
  14. Seleziona la x accanto a script.js all'interno del vscode.dev per chiudere il file JavaScript poiché non utilizzi questo file durante l'esercizio.

Visual Studio Code crea due sezioni affiancate. Quella a sinistra sarà l'editor, in cui è possibile inserire il codice HTML e CSS. Il diritto si comporta come un browser, visualizzando i risultati del tuo codice.

Creare il codice HTML

L'utente utilizza l'HTML esistente per consentirci di concentrarsi esclusivamente sul CSS. Il codice HTML include l'elemento link per fare riferimento al file CSS.

  • Copiare il codice HTML seguente nella finestra index.html:

    <html>
    <head>
        <title>Your Name resume</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>Your Name</h1>
        <a href="mailto:your-email@example.com">your-email@example.com</a>

        <div id="social-media">
            <h2>Social media</h2>
            <ul>
                <li><a href="https://github.com/">GitHub</a></li>
                <li><a href="https://linkedin.com/in/">LinkedIn</a></li>
                <li><a href="https://x.com/">X</a></li>
            </ul>
        </div>

        <h2>Education</h2>
        <h3>School name</h3>
        <h4>Major</h4>
        <ul>
            <li>GPA: 4.0</li>
            <li>Years attended</li>
        </ul>

        <h2>Experience</h2>
        <div class="experience">
            <h3>Company name</h3>
            <h4>Title</h4>
        </div>
        <div class="experience">
            <h3>Cool hackathon</h3>
            <h4>Project title</h4>
        </div>

    </body>
</html>

Impostare il tipo e la dimensione del carattere

Per impostazione predefinita, la maggior parte dei browser utilizza un carattere serif come Times New Roman. Si vuole impostare la pagina predefinita su un tipo di carattere più diffuso. Inoltre, si vogliono impostare le dimensioni del tipo di carattere per la pagina e varie intestazioni.

  1. All'interno del file style.css aggiungere il codice CSS seguente per impostare la famiglia di caratteri su Verdana con opzioni di fallback e le dimensioni del carattere su 12 pixel nell'elemento html:

    html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

    L'elemento html verrà usato per aggiornare il tipo e le dimensioni del carattere radice. Con l'elemento consente di utilizzare html il rem dimensionamento.

  2. Si noti che la pagina viene aggiornata automaticamente con le modifiche.

  3. Aggiungere il codice CSS seguente alla fine di style.css per impostare le dimensioni per h1 tramite h4.

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem si basa sulle dimensioni radice, ovvero 14 pixel. Ad esempio, questo CSS imposta la dimensione di h1 22,4 pixel.

  4. La pagina viene aggiornata automaticamente in vscode.dev.

  5. Lasciare aperta la finestra perché verrà usata nell'esercizio successivo.

Risultato e passaggi successivi

Lo screenshot seguente è il risultato del codice CSS applicato in questo esercizio. Se si vogliono sperimentare tipi di carattere e dimensioni diversi, è possibile modificare il codice CSS come si desidera.

Screenshot della pagina finale visualizzata nel browser.