Stílus létrehozása és alkalmazása

A stílus a formázási tulajdonságok olyan halmaza, amely a lépcsőzetes stílusalapokban (CSS) kerül meghatározásra. A stílusokat alkalmazhatja egy weblap tartalmára, beleértve a szöveget (egyes karakterek vagy teljes bekezdések), képeket, rétegeket, táblázatokat, vagy akár a teljes weblap törzsét. A stílusok lehetővé teszik a tulajdonságok és értékek egy halmazának hatékony újrafelhasználását anélkül, hogy a kívánt tulajdonságokat minden egyes alkalommal újra be kellene állítania.

Egy CSS stílusai, a globális stílus szabályok értelmében, a HTML-elemekre vonatkoznak, mindaddig míg ezt egy helyi szabály felül nem írja. Általában a helyi stílusszabályok elsőbbséget élveznek az általános stílusszabályokkal szemben. Például egy weblapon egy belső CSS-ben definiált stílus, felülbírálja a külső CSS-ben definiált stílust. Hasonlóképpen egy a weblapon található egyetlen HTML-elemben meghatározott sorközi CSS, felülbírál minden olyan az adott elemre vonatkozó stílust, amely a weblaphoz tartozó belső vagy külső CSS-ben került meghatározásra. A globális stílusszabályok azon hányada, amely nem ellentmondásos a helyi CSS stílusszabályaival, alkalmazásra kerül a HTML-elemekre még akkor is ha a helyi stílusok alkalmazva vannak.

Tartalom

Stílusok típusai

Stílus létrehozása

Stílus alkalmazása

Stílusok típusai

A külső vagy belső CSS-ben található stílus, három típusú lehet: osztály alapú, elem alapú, vagy azonosító alapú. Egy stílus, a szabálykészlete alapján kerül meghatározásra, amelyben egy szelektort egy tulajdonsági deklarációs blokk követ, mely egy bal oldali kapcsos zárójel ({) és egy jobb oldali kapcsos zárójel (}) között helyezkedik el. Az egyes stílus típusokat szelektorai különböztetik meg; egy osztály alapú stílus esetében a szelektort egy pont (.) előzi meg; egy azonosító alapú stílus esetében a szelektort egy kettős kereszt (#) előzi meg; míg az elem alapú stílus esetén, a szelektor csak egyetlen HTML-elemből áll, mint például a H1 elem.

Osztály alapú stílusok

Az osztályalapú stílusok lehetőséget biztosítanak arra, hogy egy weblap esetében olyan tulajdonságok halmazát határozza meg, amelyeket egy vagy több elemre szeretne alkalmazni. Ha bármikor szeretné a stílust módosítani, lehetősége van a stílus szabálykészletének szerkesztésére. Ezt követően minden olyan elem amelyre már az adott stílus alkalmazva lett, automatikusan tükrözni fogja a módosításokat.

A következő példában az „introduction” („bemutatás”) a stílus szelektora, és a „font-size:small” („betűméret: kicsi”) egy tulajdonsági deklaráció, amelyet egy második tulajdonsági deklaráció követ.

Példa: egy osztály alapú stílus szabálykészlete

.introduction {font-size: small; color: white}

Példa: osztály alapú stílus alkalmazása a <p> kódra

<p class="introduction">

Elem alapú stílusok

Meghatározhatja azon tulajdonságok halmazát, amelyet a weblapon egy bizonyos HTML-elem minden előfordulására alkalmazni szeretne . Ha például szeretne létrehozni egy 25 képpontos margót az összes bekezdés körül (<p> kód által körülzárt tartalom), létrehozhat egy elem alapú stílust, ahol a szelektor a p elem, amely tartalmazza a margó tulajdonsági deklarációját, amint ez alább is látható.

Példa: egy elem alapú stílus szabálykészlete

p { margin-left: 25px; margin-right: 25px }

Az azonosítóalapú stílusok

Az azonosítóalapú stílusok használata lehetőséget biztosít arra, hogy meghatározza olyan elem, vagy elemek halmazának tulajdonságait, amelyeket szeretne megkülönböztetni az összes többi tartalomtól, egy vagy több weblapon. Ha egy weblapon stílust szeretne alkalmazni egyetlen HTML-elemre, használja az azonosítóalapú stílust.

Példa: egy azonosítóalapú stílus szabálykészlete

#footer {background-color: #CCCCCC; margin: 15px}

Példa: az azonosító alapú stílusok szabálykészletének alkalmazása egy <p> kódra

<p id="footer">

Sorközi stílusok

Ha egy weblapon olyan stílust szeretne használni mely által meghatározhatja egy elem vagy elemek halmazának olyan tulajdonságait, melyeket nem szeretne ismét felhasználni, használja a sorközi stílust. Eltérően az azonosító alapú, elem alapú, és osztály alapú stílusoktól, amelyeknek tulajdonságai vagy a weblap fejlécében (fájlon belüli CSS) vagy egy külön CSS fájlban kerülnek meghatározásra, a sorközi stílusok (vagy sorközi CSS) tulajdonságai közvetlenül abban HTML-elemben kerülnek meghatározásra, melyben azokat használni szeretné.

Példa: egy sorközi stílus szabályszerkezete

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Vissza a lap tetejére

Stílus létrehozása

Létrehozhat új stílusokat az alapoktól, vagy egy már meglévő stílus másolásával. Mindkét módszer esetén az Új stílus párbeszédpanel teszi lehetővé, hogy mindent meghatározhasson az Ön új stílusával kapcsolatban, beleértve a szelektor típusát, tulajdonságokat, és a kívánt stíluslapot mely tartalmazni fogja stílusát. Ha szeretne létrehozni egy sorközi stílust, használhatja a CSS Tulajdonságok munkaablakot is. Ha gyorsan szeretne létrehozni, és alkalmazni egy új stílust az oldalán, a stílus tulajdonságainak beállítása nélkül, használhatja a Stílus eszköztárat is.

Stílus létrehozása az Új stílus párbeszédpanel használatával

  1. Az alábbi lehetőségek közül választhat:

    • Ha stílust kíván hozzáadni egy külső CSS-hez, nyissa meg a .css fájlt.

    • Ha stílust kíván hozzáadni egy belső CSS-hez, nyissa meg a weblapot.

    • Ha sorközi stílust kíván hozzáadni, nyissa meg a weblapot majd válassza ki a tartalmat melyhez a stílust szeretné rendelni.

  2. Az alábbi lehetőségek közül választhat:

    • Új stílus létrehozásához    kattintson az Új stílus parancsra, az alábbi helyek valamelyikén: Stílusok alkalmazása munkaablak vagy Stílusok kezelése munkaablak, Stílus eszköztár, vagy a Formátum menü.

    • Egy meglévő stílus másolásához    tegye az alábbiakat:

      • A Stílusok alkalmazása munkaablakban, mutasson a kívánt stílusra amelyet le szeretné másolni, majd kattintson a megjelenő lefelé mutató nyílra, és válassza az Új stílus másolása parancsot.

      • A Stílusok kezelése vagy a CSS tulajdonságai munkaablakban, kattintson jobb gombbal a másolni kívánt stílusra, majd válassza az Új stílus másolása parancsot.

  3. Az Új stílus párbeszédpanelen kövesse az alábbi lépéseket:

Ezt használja

Ehhez

Szelektor

  • Osztályválasztó használatához írjon be egy pontot (.), majd adjon meg egy egyedi nevet.

  • Azonosítóválasztó használatához írja be a kettős kereszt jelet (#), majd adjon meg egy egyedi nevet.

    Megjegyzés: Az osztály- és azonosítóválasztók nevében nem szerepelhet szóköz, kivéve ha összetett szelektort hoz létre.

  • Elemválasztó használatához vagy írja be egy HTML-elem nevét, vagy kattintson a Szelektor legördülő párbeszédpanelen a választott elem nevére.

  • Egy sorközi szelektor használatához, válassza ki a sorközi stílust.

  • Egy összetett szelektor létrehozásához adja meg a szelektort.

Meghatározás helye

Válasszon az alábbi lehetőségek közül:

  • Az Aktuális lap hozzáadja az új stílust a belső CSS-hez az aktuális weblapon.

  • Az Új stíluslap hozzáadja az új stílust egy új üres külső CSS-hez.

  • A Meglévő stíluslap hozzáadja az új stílust egy Ön által meghatározott, már létező külső CSS-hez.

Új stílus alkalmazása a kijelölésre

A stílus alkalmazása az aktuális kijelölésre az aktuális weblapon.

URL

Ha a kijelölte a Meglévő stíluslapot a Meghatározás helyében, írja be az URL-címet a CSS-fájlba.

Kategória

Jelölje ki az alábbiak valamelyikét, majd állítsa be a párbeszédpanelen jobbra megjelenő tulajdonságokat:

Tipp: A Kategória listában félkövéren megjelenő kategóriák tartalmazzák a tulajdonságok beállításait.

  • Betűtípus: Itt állíthatja be a betűtípus méretét, vastagságát, díszítését és színét.

  • Blokk: Itt állíthatja be a sormagasságot, a szöveg elrendezését, a behúzás mértékét és a térközt.

  • Háttér: Itt állíthatja be a háttér színét és a háttérkép tulajdonságait.

  • Szegély: Itt állíthatja be a szegélyt és annak tulajdonságait.

  • Mező: Itt állíthatja be a mező és a blokkszintű elemek kitöltését és margóját.

  • Elhelyezés: Itt állíthatja be a mező és a blokkszintű elemek méretét és elhelyezését.

  • Elrendezés: Itt állíthatja be a mező és a blokkszintű elemek láthatóságát, lebegését, körbefuttatását, kivágását és az egyéb elrendezési tulajdonságokat.

  • Lista: Itt állíthatja be a listaelemek tulajdonságait (típus, elhelyezés, kép...).

  • Táblázat: Itt állíthatja be a táblázattal kapcsolatos elemek tulajdonságait (térköz, elrendezés, szegély...).

Megjegyzés: Akár stílust is másolhat, az egyik CSS-ből a másikba. A Stílusok kezelése munkaablakban, húzza a stílust tartalmazó CSS-ből a kiválasztott stílust vagy annak a CSS-nek a nevére ahová másolni szeretné, vagy a stílusok listájának egy adott pontjára a cél CSS-ben.

Sorközi stílus létrehozása a CSS Tulajdonságai munkaablak használatával

  1. A weblapján a tervező, vagy kód nézetben, válassza ki azt a tartalmat melyhez sorközi stílust szeretne hozzárendelni.

  2. A CSS Tulajdonságai munkaablakban, az Alkalmazott szabályok alatt, vagy kattintson jobb gombbal arra a szelektorra melyre alkalmazni szeretné a stílust, vagy ha a ”(nincsenek alkalmazott szabályok)" jelenik meg, kattintson jobb gombbal bárhová az Alkalmazott szabályok alatt, majd kattintson az Új beágyazott stílusra a helyi menüben.

  3. A CSS Tulajdonságaiban állítsa be a kívánt tulajdonságokat.

Hozzon létre, és alkalmazzon egy új meg nem határozott stílust

Létrehozhat és elemekre alkalmazhat stílusokat, de később is meghatározhatja őket. Például ha egy grafikussal szeretne együtt dolgozni aki megtervezné oldalát, hozzá rendelhet meg nem határozott stílusokat oldalának elemeihez, így ráér egyeztetni a grafikussal a stílusok meghatározásáról akár később is.

  1. A weblapján a tervező, vagy kód nézetben, válassza ki azt a tartalmat melyhez stílust szeretne hozzárendelni.

  2. Egy tulajdonságok meghatározása nélküli új stílus létrehozásához és alkalmazásához, a Stílus eszköztárban, vagy az Osztály vagy az Azonosító mezőben, adja meg az új stílus egyedi nevét.

Vissza a lap tetejére

Stílusok alkalmazása

Használhatja a Stílusok alkalmazása munkaablakot, a Stílusok kezelése munkaablakot, vagy a Stílus eszköztárat az osztály alapú vagy az azonosító alapú stílusok alkalmazására, a belső és külső stíluslapok (CSS) esetében. A Stílusok Alkalmazása munkaablak esetében lehetősége van arra, hogy több stílust alkalmazzon a kijelölésre, míg a Stílusok kezelése munkaablak és a Stílus eszköztár csak egy stílus alkalmazását támogatja. A Stílus eszköztár lehetővé teszi, hogy gyorsan elnevezze és oldalán az új nem meghatározott stílusokat alkalmazza.

Nem szükséges olyan stílusokat alkalmazni melyek egy elemet szelektorként használnak, (elem alapú stílusok) mert ezek a típusú stílusok, a teljes weblapon automatikusan alkalmazásra kerülnek, a hozzájuk rendelt elem alapján. A Stílusok Alkalmazása munkaablak, elem alapú stílusokat listáz ki a Környezetfüggő Választási Lehetőségek alatt. A Stílusok kezelése munkaablakhoz hasonlóan, a stílus neve mellett pedig egy kék pont jelenik meg. A Stílus eszköztár nem listáz elem alapú stílusokat.

  1. A weblapján aTervező, vagy Kód nézetben, válassza ki azt a tartalmat melyhez stílust szeretne hozzárendelni.

  2. Az alábbi lehetőségek közül választhat:

    • Több meglévő stílus alkalmazásához    a Stílusok alkalmazása munkaablakon tartsa nyomva a CTRL billentyűt, és kattintson a használni kívánt stílusokra.

    • Egy meglévő stílus alkalmazásához    végezze el az alábbi műveleteket egyikét:

      • A Stílusok alkalmazása munkaablakban kattintson a kívánt osztály- vagy azonosítóstílusra.

      • A Stílus eszköztárban, vagy az Osztály vagy Azonosító legördülő párbeszédpanelen kattintson a kívánt stílusra.

      • A Stílusok kezelése munkaablakon, kattintson jobb gombbal a kívánt osztály- vagy azonosítóstílusra, majd kattintson a Stílus alkalmazására a helyi menüben.

    • Egy tulajdonságok meghatározása nélküli új stílus létrehozásához és alkalmazásához   , a Stílus eszköztárban, vagy az Osztály vagy Azonosító mezőben, adja meg az új stílus egyedi nevét.

Vissza a lap tetejére

Ismeretek bővítése
Oktatóanyagok megismerése
Új szolgáltatások listájának lekérése
Részvétel az Office Insider programban

Hasznos volt az információ?

Köszönjük a visszajelzését!

Köszönjük visszajelzését. Jobbnak látjuk, ha az Office egyik támogatási szakemberéhez irányítjuk.

×