A CSS fogalmainak megismerása

  • 4 perc

CSS-struktúra

Ha azt szeretné, hogy a HTML-oldal az összes szöveget narancssárga színnel jelenítse meg a h1 címkék között, használhatja az alábbi CSS-kódot.

h1 {
    color: orange;
}

A fenti CSS-kód (h1) a stílushoz használni kívánt HTML-fájlt választja ki. A h1 mintában lévőt választónak nevezzük.

Figyelje meg a kapcsos zárójelben lévő kódot, color: orange;t határozza meg, hogy a kijelölt h1 címke hogyan legyen stílusban. A kapcsos zárójelek közötti CSS-kód, mint például { }, nevezzük color: orange;.

A mintadeklaráció tartalmaz egy tulajdonságotjelöli.

Feljegyzés

Nem kell megjegyezni az összes elérhető tulajdonságot és értéket a CSS-ben. Számos webhelyre hivatkozhat. Emellett az olyan eszközök, mint a vscode.dev vagy a Visual Studio Code automatikus kiegészítési lehetőségeket kínálnak, amelyek segíthetnek a CSS létrehozásakor.

CSS-fájl beágyazása

A stílusinformációk hozzáadásának egyik gyors módja, ha egy attribútum használatával head a style HTML-oldal címkéi közé helyezi őket. Ez a módszer nem tekinthető az ajánlott eljárásnak, de a tanuláshoz és teszteléshez jól használható.

Az alábbi példa a címkét adja hozzá a <style> szürkéhez tartozó stílusinformációkkal h1 . Mivel ez az egyetlen stílus, a HTML többi része a böngésző alapértelmezett stílusával jelenik meg.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

Ha egy böngészőben megtekintik, a címkén az <h1> "Üdvözlő" szöveg szürke színű lesz.

A renderelt H T M L lap képernyőképe az 1. címsort szürke színnel jeleníti meg.

Stílusok alkalmazása HTML-fájlra CSS használatával

Ha stílusokat ad hozzá a Hypertext Markup Language (HTML) nyelvhez, a legjobb, ha egy külön CSS-fájlban használja a stílust. Ha több HTML fájl ugyanazt a CSS-t használja, akkor egységes megjelenésűek lesznek. Ráadásul egy CSS-fájl frissítése egyszerűbb, mint az egyes HTML-fájlok frissítése.

A CSS-fájlra való hivatkozáshoz használja az link elemet.

link két attribútummal rendelkezik, rel és href. rel a hivatkozott erőforrástípus, például stíluslap azonosítására szolgál. href a CSS-fájl elérési útjának azonosítására szolgál. Ha a CSS-fájl ugyanabban a mappában volt, mint a HTML-fájl, és a neve style.css volt, az alábbi hivatkozással hivatkozhat rá a lapról:

<link rel="stylesheet" href="style.css">

Most már legalább két fájlja van, egy .html fájl és egy .css fájl. Az előző példában lenne egy HTML-fájl, amely a CSS-hez kapcsolódik.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>