Wikiszótár

Cascading Style Sheets

Angol

Főnév

Cascading Style Sheets (tsz. Cascading Style Sheetses)

  1. (informatika) A CSS (Cascading Style Sheets, magyarul „Lépcsőzetes stíluslapok”) egy olyan nyelv, amelyet arra használnak, hogy meghatározzák a weboldalak vizuális megjelenését. A CSS segítségével testre szabható a HTML elemek stílusa, például a színek, betűtípusok, méretek, elrendezések, és sok más dizájn elem. Míg a HTML a weboldal szerkezetét és tartalmát írja le, a CSS a megjelenésért felel.

Főbb jellemzői:

  1. Elválasztja a tartalmat a megjelenéstől: A CSS lehetővé teszi, hogy a tartalom (HTML) és a megjelenés (CSS) különálló fájlokban legyenek kezelve. Ez megkönnyíti az oldal karbantartását és dizájnjának változtatását, anélkül, hogy minden egyes HTML-fájlt manuálisan kellene szerkeszteni.
  2. Lépcsőzetes hatás: A CSS-ben a stílusokat hierarchikusan alkalmazzák. Ez azt jelenti, hogy ha több szabály is érvényes egy adott elemre, akkor a szabályok sorrendje és specifikussága alapján dől el, melyik érvényesül. Az alacsonyabb szinten lévő stílusok felülírhatók a magasabb szintűekkel, innen ered a “lépcsőzetes” elnevezés.
  3. Reszponzív tervezés: A CSS lehetővé teszi, hogy a weboldal különböző eszközökön (például mobilon, tableten és asztali számítógépen) is jól nézzen ki. A media query-k segítségével megadhatók különböző stílusok az eltérő képernyőméretekhez.
  4. Elrendezés vezérlése: A CSS segítségével pontosan szabályozhatjuk az oldal elemeinek elrendezését, például a grid, flexbox vagy hagyományos float technikák segítségével. Ezek a módszerek lehetővé teszik, hogy az elemek rugalmasan helyezkedjenek el az oldal különböző részein, optimalizálva az oldalt a különféle kijelzőkön való megjelenítéshez.

Hogyan működik a CSS?

A CSS szabályokat ad meg a HTML elemek kinézetére vonatkozóan. Egy CSS szabály két fő részből áll: a szelektorból és a deklarációs blokkból.

  • Szelektor: Meghatározza, hogy mely HTML elemekre vonatkozik a stílus. Például egy h1 szelektor minden <h1> címkével ellátott elemre hatással lesz.

  • Deklarációs blokk: Meghatározza, hogy az adott elemek milyen stílust kapnak. Ez több stílusbeállításból (tulajdonság: érték) áll. Például:

    h1 {
    color: blue;
    font-size: 24px;
}

Ebben a példában a h1 címkéjű elemek kék színűek lesznek, és a betűméretük 24px-re állítódik.

CSS beépítése a weboldalba:

A CSS háromféleképpen használható a HTML-ben:

  1. Inline stílusok: A stílusokat közvetlenül a HTML elemekbe ágyazhatjuk az style attribútum segítségével. Ez nem túl hatékony, mivel minden elemnél egyenként kell megadni a stílusokat.

    <h1 style="color: red;">Példa cím</h1>

  2. Belső stíluslapok: A stílusokat a HTML dokumentum **

    <head>

    ** részében definiálhatjuk egy **

    <style>

    ** blokkon belül. Ez hasznos, ha csak egy oldalon belül szeretnénk használni az adott stílusokat.

    <style>
    h1 {
        color: red;
    }
</style>

  3. Külső stíluslapok: A leggyakoribb és leginkább ajánlott megoldás, amikor a CSS egy külön fájlban van tárolva, és a HTML dokumentum hivatkozik rá. Ez lehetővé teszi, hogy az összes oldal ugyanazt a CSS fájlt használja, így központilag kezelhető a stílusok karbantartása.

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

CSS tulajdonságok:

A CSS számos tulajdonságot támogat, amelyekkel a HTML elemek kinézetét szabályozhatjuk. Néhány példa a leggyakoribb CSS tulajdonságokra:

  1. Színek:
    • color: Meghatározza az elem szövegének színét. Példa: color: blue;
    • background-color: Meghatározza az elem háttérszínét. Példa: background-color: yellow;
  2. Szövegformázás:
    • font-size: A szöveg méretét határozza meg. Példa: font-size: 16px;
    • font-family: A betűtípust adja meg. Példa: font-family: Arial, sans-serif;
    • text-align: A szöveg igazítását szabályozza. Példa: text-align: center;
  3. Méretek és elrendezés:
    • width: Az elem szélességét adja meg. Példa: width: 50%;
    • height: Az elem magasságát adja meg. Példa: height: 100px;
    • margin: Külső távolságot ad az elem és más elemek között. Példa: margin: 20px;
    • padding: Belső távolságot ad az elem tartalma és a határai között. Példa: padding: 10px;
  4. Elrendezés:
    • display: Az elem megjelenítési módját szabályozza. Például: display: block;, display: inline;, display: flex;
    • position: Az elem pozícióját határozza meg a többi elemhez képest. Példák: position: static;, position: relative;, position: absolute;
  5. Képek és háttér:
    • background-image: Háttérképet állít be az elemhez. Példa: background-image: url('kep.jpg');
    • background-size: A háttérkép méretezésére szolgál. Példa: background-size: cover;

Reszponzív dizájn a CSS-ben:

A reszponzív dizájn biztosítja, hogy a weboldalak különböző eszközökön (asztali gépek, mobiltelefonok, tabletek) is jól nézzenek ki. A CSS segítségével ez egyszerűen megvalósítható, például a media query-k használatával, amelyek lehetővé teszik, hogy a stílusok eltérjenek a különböző képernyőméreteken.

Például: 

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Ebben az esetben, ha a képernyő szélessége 600px alá esik (pl. mobil eszközökön), a weboldal háttérszíne világoskék lesz.

Modern elrendezési eszközök:

  1. Flexbox: A flexbox egy elrendezési modell, amely rugalmasan kezeli az elemek igazítását és elrendezését, és ideális a dinamikus, reszponzív weboldalak kialakításához. Például:

    .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

  2. CSS Grid: A CSS Grid egy kétdimenziós elrendezési rendszer, amely komplex elrendezéseket tesz lehetővé anélkül, hogy sok extra HTML-t vagy CSS trükköt kellene alkalmazni. Például: ```css .grid

-container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; } ```

Összefoglalás:

A CSS a weboldalak megjelenésének kulcsfontosságú eszköze, amely lehetővé teszi a tartalom vizuális testreszabását és az oldalak reszponzívvá tételét. A CSS segítségével könnyen elkészíthetők professzionális megjelenésű weboldalak, amelyek különböző eszközökön és kijelzőméreteken is jól működnek.

További információk

A lap eredeti címe: „https://hu.wiktionary.org/w/index.php?title=Cascading_Style_Sheets&oldid=3453119”