Gyakorlat – CSS-fogalmak használata

  • 7 perc

Meg szeretné kezdeni az önéletrajz weblapjának stílusát. Először válassza ki a betűtípust és állítsa be az oldalon használt különböző elemek méretét.

Ez a modul vscode.dev - a Visual Studio Code és a CodeSwing webes verzióját használja. Ezek az eszközök megkönnyítik a fejlesztési folyamatot. Az alábbi gyakorlatok elvégzéséhez nincs szükség helyi telepítésre.

Projekt létrehozása

Először hozzon létre egy mappát, állítsa be a szükséges környezetet, és hozzon létre egy "swinget" a CodeSwing segítségével a vscode.dev-ben. A swing automatikusan megjeleníti a kód eredményeit a vscode.dev. A Microsoft Visual Studio Code és a CodeSwing használatával gyorsan módosíthatja a frissítések előnézetét valós időben.

  1. Hozzon létre egy mappát az asztalon önéletrajz néven.
  2. Nyissa meg a vscode.dev.
  3. Válassza a Mappa megnyitása lehetőséget.
  4. Lépjen a korábban létrehozott önéletrajzmappára , és válassza a Mappa kiválasztása lehetőséget.
  5. Amikor a rendszer kéri, hogy engedélyezze a webhely számára a fájlok megtekintését, válassza a Fájlok megtekintését.
  6. Válassza a Bővítmények gombot.

    Képernyőkép a Visual Studio bővítmények gombjáról.

  7. Írja be a CodeSwing kifejezést a Marketplace-bővítmények keresése mezőbe.
  8. A CodeSwing telepítéséhez válassza a Telepítés lehetőséget.
  9. A Parancskatalógus megnyitásához válassza a Ctrl+Shift+P vagy a Cmd-Shift-P billentyűkombinációt Mac gépen.
  10. Írja be a CodeSwingot a parancskatalógusba, és válassza a CodeSwing: New Swing in Directory lehetőséget.
  11. Válassza a Mappa kijelölése lehetőséget az aktuális könyvtár használatához (amely az előző lépésben létrehozott könyvtár).
  12. Válassza az Alapszintű: HTML/CSS/JavaScript lehetőséget.
  13. Ha a rendszer a módosítások mentésére kéri a folytatáshoz, válassza a Módosítások mentése lehetőséget.
  14. Válassza ki a script.js melletti x-et a vscode.dev belül a JavaScript fájl bezárásához, mivel nem használja ezt a fájlt az edzés során.

A Visual Studio Code két szakaszt hoz létre egymás mellett. A bal oldalon lesznek a szerkesztők, ahol beírhatja a HTML-t és a CSS-t. A jobb oldal úgy viselkedik, mint egy böngésző, és megjeleníti a kód eredményeit.

A HTML létrehozása

A meglévő HTML-t használod, hogy kizárólag a CSS-re összpontosíthassunk. A HTML tartalmazza a link CSS-fájlra hivatkozó elemet.

  • Másolja a következő HTML-fájlt a index.htmlcímű ablakba:

    <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>

Betűtípus és betűméret beállítása

Alapértelmezés szerint a legtöbb böngésző talpas betűtípust használ, például a Times New Romant. A lap alapértelmezett értékét egy népszerűbb betűtípusra szeretné beállítani. Emellett meg szeretné adni az oldal betűtípusának és a különböző fejléceknek a méretét.

  1. A style.css című fájlban adjon hozzá a következő CSS-t a betűtípuscsalád Verdana értékre való beállításához tartalék opciókkal, és a betűméretet 12 képpontra az html elemen.

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

    Az elem használatával frissíti a html gyökér betűtípust és a méretezést. html Az elemmel lehetővé teszi a rem méretezést.

  2. Figyelje meg, hogy a lap automatikusan frissül a módosításokkal.

  3. Adja hozzá a következő CSS-kódot a style.css végéhez 

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem a gyökérméreten alapul, amely 14 képpont. Például ez a CSS 22,4 képpontra állítja be a méretet h1 .

  4. A lap automatikusan frissül vscode.dev.

  5. Hagyja nyitva az ablakot, ahogy a következő gyakorlatban használni fogja.

Eredmény és a következő lépések

Az alábbi képernyőkép az ebben a gyakorlatban alkalmazott CSS eredménye. Ha különböző betűtípusokkal és méretekkel szeretne kísérletezni, tetszés szerint módosíthatja a CSS-t.

Képernyőkép a böngészőben megjelenített utolsó oldalról.