Vytvoření a použití stylu

Důležité :  Tento článek je strojově přeložený – přečtěte si toto upozornění. Anglickou verzi tohoto článku pro referenci najdete tady.

Styl je sada formátování, které jsou definované v šablonu stylů (CSS). Použití stylů obsahu do webové stránky, včetně textu (jednotlivých znaků nebo celého odstavce), grafiku, tabulky, vrstvy a dokonce i do těla celou webovou stránku. Styly umožňují efektivně znovu použít sadu vlastností a hodnot, aniž by bylo nutné nastavit vlastnosti pokaždé, když chcete používat.

Znamená, že globální styl pravidla platí pro prvky HTML, pokud místní pravidla stylů přepsat je použití kaskádových stylů CSS. Obecně místní pravidla stylů přednost pravidla obecné stylů. Například styl definovaný interní šablony stylů CSS na webové stránce přepíše styl podle externí šablony stylů CSS. Podobně vložené šablony stylů CSS definované v rámci jeden element HTML na webovou stránku potlačí styly definované pro tento element interní a externí šablony stylů CSS na webové stránce. Části globální pravidla stylů, které nejsou protikladu místní pravidla stylů CSS platí pro prvky HTML i v případě místních stylů použijí.

V tomto článku

Typy stylů

Vytvoření stylu

Použití stylu

Typy stylů

Styl, který je umístěn v vnější nebo vnitřní CSS můžou být založených na třídách, založených na prvku nebo založených na id. Styl je definován jeho nastavením pravidlo, které tvoří selektor, následovaný blokem deklarací vlastností, které se objeví mezi levá složená závorka ({}) a pravá složená závorka (}). Každý typ stylu jsou odlišeny z jiných typů stylů volič; Výběr stylu založených na třídách; předchází tečkou (.) křížek (#) předchází na volič stylů založených na id; a na volič stylů založených na prvku obsahuje pouze element HTML, například prvek H1.

Styly založených na třídách

Pomocí stylů založených na třídách definují množinu vlastnosti, které chcete použít na jednu nebo více položek na webové stránce. Když někdy budete chtít změnit styl, můžete upravit pravidlo požadovaný styl: nastavení a jednotlivé položky, které jste použili styl, který chcete automaticky projeví změny.

V následujícím příkladu je "Úvod" výběr požadovaný styl a "velikost písma: malé" je jedna deklarace vlastnost následovat druhý deklarace vlastnosti.

Příklad sadu pravidel pro stylů založených na třídách

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

Příklad od založených na třídách styl značku < p >

<p class="introduction">

Styly založených na prvku

Umožňuje definovat sadu vlastností, které chcete, aby všechny výskyty konkrétní element HTML použít na webové stránce založených na prvku styly. Například vytvořit okraj 25 pixelů kolem odstavce (obsah uzavřen značky < p >) na webové stránce, vytvoříte styl založených na prvku, který využívá p element jako jeho volič a obsahuje deklarace pro vlastnosti okraje, jak je vidět v následujícím kódu.

Příklad sadu pravidel pro stylů založených na prvku

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

Stylů založených na ID

Pomocí stylů založených na id, když budete chtít definují množinu vlastností pro jednu položku nebo bloku položek, které mají odlišit od ostatního obsahu do jedné nebo více webových stránek. Použití stylů založených na id, když budete chtít stylu jeden element HTML na webovou stránku.

Příklad sadu pravidel pro stylů založených na id

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

Příklad založených na id stylem < p > Označit

<p id="footer">

Vložených stylů

Vložený styl použijte, když chcete definovat sadu vlastností pro jednu položku nebo bloku položek na webovou stránku a nechcete, aby se znovu použít tento styl. Na rozdíl od založených na id založených na prvku a založených na třídách styly, jehož vlastnosti jsou definované v hlavní část webové stránky (interní CSS) nebo externí soubor CSS vlastností vložené styly (nebo vložené šablony stylů CSS) jsou definované přímo v elementu HTML, který chcete použít styl.

Příklad sadu pravidel pro vložených stylů

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

Začátek stránky

Vytvoření stylu

Nové styly můžete vytvořit úplně od začátku nebo zkopírováním existující styl. V obou případech dialogové okno Nový styl umožňuje definovat vše o nového stylu, včetně typ výběru, vlastnosti a stylů, která bude obsahovat požadovaný styl. Když budete chtít vytvořit nový styl textu, můžete také použít podokno úloh Vlastnosti šablon stylů CSS. Když chcete rychle vytvářet a použít nový styl na stránce nechci nastavovat jakékoli vlastnosti stylu, můžete taky nástrojů styl.

Vytvoření stylu pomocí dialogového okna Nový styl

  1. Proveďte některou z následujících akcí:

    • Přidání stylu do externí šablony stylů CSS, otevřete soubor CSS.

    • Přidání stylu do interního CSS, otevřete webovou stránku.

    • Pokud chcete přidat vložený styl, otevřete webovou stránku a vyberte obsah, který chcete styl.

  2. Proveďte některou z následujících akcí:

    • Vytvoření nového stylu    Klikněte na Nový styl v jednom z těchto míst: požadované podokno úloh Použít styl nebo podokno úloh Spravovat styly, nástrojů styl nebo v nabídce Formát.

    • Chcete-li zkopírovat existující styl    Udělejte jednu z následujících akcí:

      • V podokně úloh Použít styl najeďte myší na styl, který chcete zkopírovat, klikněte na zobrazenou šipku dolů a vyberte Kopírovat nový styl.

      • V podokně úloh Spravovat styly nebo podokno úloh Vlastnosti šablon stylů CSS klikněte pravým tlačítkem myši na styl, který chcete zkopírovat a vyberte Kopírovat nový styl.

  3. V dialogovém okně Nový styl postupujte takto:

Pomocí tohoto příkazu

Akce

Výběr

  • Pokud chcete použít volič třídy, zadejte tečku (.) a za ním uveďte jedinečný název.

  • Pokud chcete použít volič id, zadejte křížek (#) a za ním uveďte jedinečný název.

    Poznámka : Výběr názvy tříd a id nesmí obsahovat mezery, pokud vytváříte složité výběr.

  • Použití výběr prvku, zadejte název HTML element nebo klikněte na rozevírací seznam Selektor a vyberte název prvku.

  • Použití volič řádku, vybrat přiřazený styl.

  • Pokud chcete vytvořit složité selektor, zadejte selektor.

Definování v

Vyberte jednu z následujících možností:

  • Aktuální stránky přidá nový styl interní šablon stylů CSS na webové stránce aktuální.

  • Nová šablona stylů přidá nový styl nové prázdné externí šablony stylů CSS.

  • Existující šablony stylů přidá nový styl na existující externí šablony CSS zadané.

Použít nový styl pro výběr dokumentu

Použití stylu na aktuální výběr na webové stránce aktuální.

ADRESA URL

Pokud jste vybrali v definovat vexistující šablonu stylů, zadejte adresu URL soubor CSS.

Kategorie

Vyberte jednu z následujících akcí a pak nastavte vlastnosti, které se objeví napravo v dialogovém okně:

Tip : V seznamu druh tučné písmo kategorií, které se zobrazují v obsahují nastavení vlastností.

  • Písmo nastaví vlastnosti písma, včetně velikost, weight (váha), ozdob a barvu.

  • Blokování Nastaví výšky řádku, zarovnání textu, odsazení a mezery v textu.

  • Pozadí Nastaví pozadí, barev a pozadí vlastnosti obrázku.

  • Ohraničení nastaví ohraničení a jeho vlastnosti.

  • Pole Nastaví odsazení a okrajů vlastnosti pole a elementy na úrovni bloku.

  • Pozice Nastaví rozměry a umístění pole a elementy na úrovni bloku.

  • Rozložení nastaví viditelnost, plovoucí a obtékání chování, výřez a jiné rozložení vlastnosti pole a elementy na úrovni bloku.

  • Seznam nastaví vlastnosti seznam prvky, včetně typ, umístění a obrázek.

  • Tabulka se nastavuje vlastnosti prvků souvisejících s tabulkami, obsahujících mezery, rozložení a vlastnosti ohraničení.

Poznámka : Můžete taky zkopírovat styl z jednoho šablony stylů CSS na jiný. V podokně úloh Spravovat styly přetáhněte styl z šablony stylů CSS, který obsahuje tento styl buď na název šablony stylů CSS chcete kopírovat, nebo na určité místo v seznamu styly v cílovém šablon stylů CSS.

Vytvoření vloženého stylu pomocí podokna úloh vlastnosti šablon stylů CSS

  1. V návrhovém zobrazení nebo zobrazení Kód v webové stránky vyberte obsah, který chcete přidat vložený styl, který.

  2. V podokně úloh Vlastnosti šablon stylů CSS v části Použitá pravidla klikněte pravým tlačítkem myši výběr, který chcete použít styl vložené nebo, pokud se zobrazí "(bez použitými pravidly) ", klikněte pravým tlačítkem myši klikněte v části Použitá pravidla a v místní nabídce klikněte na příkaz Nový styl textu.

  3. V části Vlastnosti šablon stylů CSS nastavte požadované vlastnosti.

Vytvoření a použití nového stylu Nedefinováno

Můžete vytvořit styly a použít k položkám a pak definovat styly později. Například pokud chcete pracovat s návrhářem vytvořte požadovaný vzhled stránky, můžete použít Nedefinováno styly položek na stránce a potom sejít s návrhářem můžete definovat styly později.

  1. V návrhovém zobrazení nebo zobrazení Kód v webovou stránku vyberte položku, kterou chcete použít styl.

  2. Vytvoření a použití nového stylu bez definování jakékoli vlastnosti na panelu nástrojů styl v předmětu nebo ID pole, zadejte jedinečný název pro nový styl.

Začátek stránky

Použití stylu

Podokno úloh Použít styl, podokno úloh Spravovat styly nebo panel nástrojů styl slouží k použití stylů založených na třídách nebo založených na id z vaší interním a externím šablony stylů (CSS). Podokno úloh Použít styl umožňuje používat více stylů na výběr a podokno úloh Spravovat styly a styl nástrojů se omezí na jeden stylu. Panel nástrojů stylu umožňuje rychlé název a použití nového Nedefinováno stylů na stránce.

Chcete-li použít styly, které používali prvku pro výběr (stylů založených na prvku) tyto typ styly automaticky zaevidují do jejich přidruženého prvku v celém na webovou stránku nepotřebujete. Podokno úloh Použít styl seznamy stylů založených na prvku pod Kontextovou voliče a spolu s úloh Spravovat styly v podokně se zobrazí modrá tečka vedle názvu požadovaný styl. Panel nástrojů styl nezobrazuje stylů založených na prvku.

  1. V návrhovém zobrazení nebo zobrazení kód v webovou stránku vyberte položku, kterou chcete použít styl.

  2. Proveďte některou z následujících akcí:

    • Chcete-li použít více stávajících stylů    V podokně úloh Použít styl podržte stisknutou klávesu CTRL, postupně klikněte na požadovaný styl.

    • Použití jednoho stávajících stylů    Udělejte jednu z následujících akcí:

      • V podokně úloh Použít styl klikněte na požadovaný styl předmětu nebo id.

      • Na panelu nástrojů styl v předmětu nebo ID rozevírací seznam klikněte na požadovaný styl.

      • V podokně úloh Spravovat styly klikněte pravým tlačítkem myši předmětu nebo id styl a potom v místní nabídce klikněte na tlačítko Použít styl.

    • Vytvoření a použití nového stylu bez definování jakékoli vlastnosti    Na panelu nástrojů stylu v předmětu nebo ID pole, zadejte jedinečný název pro nový styl.

Začátek stránky

Poznámka : Upozornění ke strojovému překladu: Tento článek přeložil počítačový systém bez zásahu člověka. Společnost Microsoft nabízí tyto strojové překlady proto, aby umožnila uživatelům, kteří nemluví anglicky, získat informace o produktech, službách a technologiích této společnosti. Protože je tento článek strojově přeložený, může obsahovat slovní, syntaktické nebo gramatické chyby.

Rozšiřte své znalosti a dovednosti
Projít školení
Získejte nové funkce jako první
Připojte se k účastníkům programu Office Insiders

Byly tyto informace užitečné?

Děkujeme vám za zpětnou vazbu.

Děkujeme vám za váš názor. Vypadá to, že bude užitečné, když vás spojíme s některým z našich agentů z podpory Office.

×