Design webových stránek s CSS styly. Některé možnosti odstavce. Třídy ve specifikacích stylu

K čemu jsou styly?

Předchozí stránky jste vytvořili, protože byly vytvořeny před příchodem kaskádových stylů nebo CSS (Cascading Style Sheets).

Hlavní problémy, kterým vývojáři webových stránek čelili před příchodem CSS:

Problém s umístěním (rozvržení stránky). Přestože se k tomu začaly používat tabulky (původně k tomu nebyly určeny), všechny problémy nevyřešily. Není možné provést následující:
- Pro žádný blok nelze nastavit pevné velikosti. Například textový blok se bude pohybovat, když přeteče (i když je v tabulce).
- Nelze nastavit pevné souřadnice pro pozici bloku na stránce.
- Nemůžete položit jeden blok na druhý. Zkuste například umístit obrázek na stůl nebo jiný obrázek.

Druhý problém byl, že jsme pokaždé museli na stránkách nastavovat velikost a barvu písma, vlastnosti buněk tabulky atd. Tím se značně zvětšila velikost stránky, což znamená, že se načítala pomaleji. Pokud byste chtěli změnit barvu nebo velikost písma, museli byste upravit všechny stránky.

Třetí problém byl, že všechny prohlížeče mají individuální nastavení. Například v prohlížeči si můžete zvětšit písmo, čímž dojde k deformaci celé stránky.

S pomocí CSS lze tyto problémy vyřešit.

Způsoby použití CSS

Existují tři způsoby použití šablon stylů:

Interní styly(Inline Style Sheets) - pomocí speciálního atributu se umísťují přímo do HTML tagů.
Příklad HTML:

Příklad CSS:

Jak můžete vidět, kód Inline Style Sheet se ukázal být více než HTML. ISS by se proto měl používat pouze v případě, že potřebujete dát konkrétnímu prvku svůj vlastní osobní styl.
Pomocí dodatečného atributu style můžeme definovat parametry stylu, které potřebujeme v libovolné značce. Toto je nejjednodušší způsob a funguje pouze v rámci jedné značky. Představte si však, jak moc se zvětší velikost souboru a jak nepohodlné bude oprava, pokud u každé značky určíme styl.

Globální styly(Global Style Sheets) – definujte styl prvků v celém dokumentu.
K tomu slouží značka
...


Nevýhodou této metody je, že pravidla CSS globálních stylů se aplikují pouze na webovou stránku, na které jsou zapsána.

3. Třetí metodou jsou tzv. vestavěné neboli vnitřní styly. Chcete-li to provést, stačí umístit požadovaný html tag Atribut stylu, který zahrnuje sadu vlastností CSS jako parametry:

Odstavec s šedým pozadím a červeným textem

Vlastnosti uvedené v atributu style se navíc vztahují pouze na jeden prvek html. Obvykle se tento způsob propojení stylů používá ve fázi ladění návrhu webu a poté se výsledné vlastnosti CSS přenesou do souboru s externími styly.

Vytváření CSS stylů. Syntaxe kaskádových stylů - pravidla, vlastnosti, selektory.

Selektor (
Hodnota majetku;
Hodnota majetku;
...
Hodnota majetku
}

Tito. pravidlo stylu obsahuje selektor stylu a seznam vlastností stylu s jejich hodnotami ve složených závorkách („(“ a „“)):

• volič používá se k navázání na prvky webové stránky, na které má rozšířit svůj účinek;
• Páry „Vlastnost: Hodnota“ jsou odděleny středníkem („;“) a může jich být libovolný počet;
• mezi poslední dvojicí „Vlastnost: Hodnota“ a uzavírací složenou závorkou lze symbol středníku vynechat;
• stylová vlastnost představuje jeden z parametrů prvku html stránky: barva textu, typ písma, množství odsazení;
• mezery a zalomení řádků při psaní pravidel CSS nejsou kritické, prohlížeč je ignoruje, takže si můžete kód naformátovat, jak chcete;
• Kód také nerozlišuje malá a velká písmena.

Aby to bylo jasnější, podívejme se na pár příkladů.

Podívejme se na toto pravidlo CSS:

• body je selektor, který představuje název značky ;
• background — vlastnost stylu, která se používá k nastavení parametrů pozadí;
• #0000FF je hodnota vlastnosti stylu pozadí, což je kód barvy ve formátu RGB.

Výsledkem je, že tento styl bude aplikován na prvek těla webové stránky a obarví pozadí stránky zadanou barvou. Dotyčný styl se nazývá styl přepsání značky, protože selektor je název značky bez znaků< и >.

Podívejme se na další příklad:

h1 (
velikost písma: 24px;
barva: zelená;
}

Tento styl znamená, že prohlížeč zobrazí jakýkoli text umístěný ve značkách

zelená a nastaví velikost písma na 24 pixelů.

Jako selektor tagu můžete kromě názvu tagu zadat Třída:

Žlutý text (barva: žlutá)

Název třídy se musí skládat z písmen latinské abecedy, číslic a pomlček a musí začínat písmenem. A v definici pravidla CSS musí být před názvem třídy tečka, což znamená, že se definuje třída stylu. Tento styl bude aplikován na všechny značky, které mají zadané atribut třídy a jeho hodnota bude stejná název třídy stylu bez tečky:

Tento odstavec má oranžový text

V příkladu jsme se svázali s tagem

Css pravidlo používající název třídy yellowtext. V důsledku toho bude text v tomto odstavci zobrazen oranžově.

Jako hodnotu atributu clsss můžete zadat více názvů tříd stylu oddělených mezerami. V tomto případě bude akce tříd stylu:

Kurzivní text (styl písma: kurzíva)


žlutý text kurzívou

V tomto příkladu ke značce

Připojili jsme dvě třídy najednou: yellowtext a cursivtext. V důsledku toho bude obsah značky zobrazen žlutým a kurzívou.

Kromě tříd lze jako selektor použít pravidla css identifikátor, který určuje jedinečný název prvku. Zde je vše stejné jako v případě tříd stylu, jen je zde několik rozdílů:

• ve selektoru pravidel CSS je uveden také název identifikátoru, ale místo tečky před jeho názvem je umístěn symbol hash „#“;
• vazba na prvek html se provádí pomocí atribut id, jehož hodnota je nastavena na název stylu bez znaku hash;
• hodnota atributu id musí být v rámci stránky jedinečná, to znamená, že v html kódu může být pouze jeden prvek s danou hodnotou atributu id, jinak kód nebude platný.

Pro názornost se podívejme na příklad:

#textcenter(text-align: center;)


Střed textu

K prvku p (odstavec) je připojeno pravidlo css pomocí atributu id, který zarovná text na střed stránky. Na stránce již není povoleno vytvářet prvky s touto hodnotou atributu id, jinak nebude html kód platný.

Kromě uvažovaných metod popisu stylů vám css umožňuje vytvářet kombinované styly a nastavit několik stejných stylů najednou. Podívejme se na příklad:

h1.redtext, p silný (barva: červená)

V příkladu jsou specifikovány dva selektory oddělené čárkami: „h1.redtext“ a „p strong“. První selektor říká, že ve všech prvcích h1, jejichž hodnota atributu třídy je ekvivalentní červenému textu, bude text zobrazen červeně. Ve druhém selektoru se totéž stane pro všechny silné prvky, které jsou vnořeny do značky p:

Tento titul se zobrazí červeně




prostý text, červený text

1. Co jsou kaskádové styly CSS?

Ahoj moji milí čtenáři. Rozhodl jsem se otevřít novou část webu věnovanou práci s kaskádovými styly CSS.

Tak, co jsou kaskádové styly css?

css(Angličtina) Kaskádové styly — Kaskádové styly) je jazyk pro popis vzhledu dokumentu napsaného pomocí značkovacího jazyka.
Aby to začátečník snáze pochopil, jsou kaskádové styly css navrženy tak, aby vytvářely krásné a snadno upravitelné návrhy webových stránek HTML.

Kaskádové styly byly poprvé použity v 90. letech minulého století. Zpočátku ale nebyly tak populární jako nyní, protože různé prohlížeče vnímaly a zobrazovaly html stránky používající css odlišně.

Po nějaké době, aby se zjednodušila práce tvůrcům stránek, se prohlížeče začaly „přizpůsobovat“ stejným standardům. Dnes téměř všechny programy používané k prohlížení internetových stránek rovnoměrně reprodukují stránky, které používají kaskádové styly CSS.

Moje postřehy!!! Podle mých osobních pozorování takový nejnovější verze Prohlížeče jako Opera, Mazilla ForeFox, Maxthon, Google Chrome a Internet Explorer zobrazují stránky, které používají kaskádové styly téměř identicky, ale pokud prohlížeče nejsou nejnovější generace, pak samotné stránky webu budou vypadat jinak. A aby váš web vypadal téměř ve všech prohlížečích stejně, existují speciální technologie pro specifikaci kaskádových stylů.

Začneme tedy vytvářet novou šablonu stylů a připojíme ji k našemu dokumentu.

2. Jak vytvořit kaskádový styl css?

V této části článku vytvoříme a připojíme kaskádový styl k nejjednodušší html stránce.

Takže, pojďme na to:

1. Vytvoříme složku, která bude obsahovat naši html stránku a kaskádové styly.
Nechť se moje složka jmenuje "css"

2. Vytvoříme jednoduchou html stránku (index.html). Můžete si přečíst, jak se to dělá.

3. Nyní vytvoříme jednoduchý textový dokument (podobně jako při vytváření html stránky), stačí jej nazvat style.css.

V důsledku toho byste měli získat toto:

To je vše, soubor, který bude obsahovat css styly, je připraven.

Nyní propojíme vytvořenou šablonu stylů se souborem index.html.

3. Jak připojit kaskádový styl css?

Chcete-li tedy propojit šablonu stylů s html stránkou, musíte to udělat v souboru index.html ve značce přidat značku:

Zde v atributu href="style.css" je zadána cesta k souboru se styly css. V tomto případě jsou soubory css a index.html ve stejné složce.

Pokud by například náš soubor index.html měl následující kód:

Důležité!!! Mimochodem, nezapomeňte při ukládání souboru index.html v poznámkovém bloku nastavit kódování na 1251 (ANSI-Cyrillic). Protože pokud to neuděláte a uložíte soubor v jiném kódování, prohlížeč vám místo textů zobrazí „čmáranice“.

Pokud je vše hotovo a uloženo správně, pak v prohlížeči uvidíte následující:



To je vše, byl vytvořen soubor index.html a byly k němu připojeny i css styly.

Nyní zkontrolujeme fungování šablon stylů css.

Začněme tedy tou nejjednodušší věcí a nastavme značku nový styl, který definuje obrázek na pozadí html stránky, barvu pozadí stránky (pokud jsou v prohlížeči návštěvníka stránky zakázány obrázky), horní a spodní výplň, výchozí písmo, jeho velikost a barvu.

Chcete-li nastavit obrázek na pozadí, musíte jej označit ve složce s našimi soubory.

A pokud se plánujete naučit, jak vytvářet profesionální online obchody pomocí enginu Magento, pak je nejjednodušší to udělat s pomocí mého autorského video kurzu.

CSS styly, pokud vezmeme samotnou definici, je jazyk pro popis vzhledu dokumentu. To znamená, že HTML je zodpovědné za strukturu stránky a CSS styly jsou zodpovědné za celý design. Zde jsem sestavil informace, které vám umožní volně používat šablonu stylů. Nebudu psát o tom, jak je nutné to znát, protože to už je jasné – bez toho web do víceméně normální podoby nedovedete. Pokud se někdo teprve začíná učit CSS styly, pak tyto materiály budou stačit k tomu, aby se začal učit CSS.

1. Základní věci

Začnu od úplných základů. Když jsem založil tento web, napsal jsem malé návody na učení šablon stylů CSS. Lekce jsou vhodné jak pro začínající, tak i pro ty, kteří již něco umí, aby si osvěžili své znalosti. Vše je tam prezentováno na obrázcích a reálných příkladech.

Malá odbočka: Když jsem sám začal studovat téma tvorby webových stránek, naučil jsem se téměř všechny HTML tagy a moc mě nenadchly. Ale poté, co jsem začal studovat šablonu stylů CSS a snažil se aplikovat každou z vlastností, se mi to tak líbilo (nevytvořil bych to, kdyby se mi to nelíbilo). Viděl jsem, že s CSS můžete dělat úžasné věci. Toto není programovací jazyk, jehož učení trvá měsíce. Stylový list lze zvládnout za jeden (maximálně dva) týdny.

Samozřejmě nebudete studovat absolutně všechny vlastnosti a jejich významy a to není nutné! Stačí znát základy, abyste je mohli začít aplikovat a používat ve svých projektech. Jednou z důležitých nuancí je, že musíte OKAMŽITĚ aplikovat vlastnost, kterou jste se právě naučili, na skutečném příkladu. Ať je to vaše vlastní webová stránka nebo jednoduchá webová stránka HTML – není v tom žádný rozdíl. Důležité je, že si to zkusíte napsat sami a uvidíte výsledek.

Na svém webu mám spoustu příkladů, které používají CSS. Dohromady obsahují více než 100 lekcí! Když budete znát alespoň základy, pak můžete všechny příklady z lekcí bezpečně měnit a aplikovat.

Moje tutoriály o základech kaskádových stylů CSS

2. CSS a CSS3 cheaty

Naučili jste se základy a po pár dnech jste s „úspěchem“ na vše zapomněli a pravděpodobně si myslíte, že to není vaše věc a vše je složité. Chci vás hned trochu povzbudit - sám neznám všechny vlastnosti CSS. Ale co mi brání sledovat je na internetu?

Je pravda, že nyní půjdete na Yandex nebo Google a poté zadáte požadavek, který potřebujete. A pokud vám vyhledávání stále nedává to, co potřebujete. Můžete tak strávit spoustu času a přesto nenajdete to, co jste skutečně hledali.

Naštěstí dobří lidé sestavili velmi užitečné cheaty, které mi nejednou pomohly. Stačí přijít na to, kde co je a pak najít potřebné vlastnosti není těžké.

cheaty CSS a CSS3

To jsou prostě nenahraditelné materiály při rozvržení a vývoji designu webových stránek. Čas potřebný k rozptýlení a hledání popisů nemovitostí na internetu se mnohonásobně zkrátí.

Pravda, jak víte, čím více vytváříte webové stránky nebo děláte design, tím méně se musíte dívat na tuto nápovědu, protože všechny potřebné vlastnosti vždy zůstávají v paměti. Ale přesto nebude zbytečné mít tuto sadu cheatů po ruce.

Je to jako ve škole: i když nepoužíváte cheat sheet, vaše duše je s ním stále tak nějak klidnější 😆 .

Ruská část internetu roste den ode dne. Za poslední rok nebo dva se celkový objem ruskojazyčných stránek více než zdvojnásobil. Dnes v Rusku touto frází nikoho nepřekvapíte<домашняя страничка>nebo anglické slovo . Pokud dříve bylo vytváření webových stránek dílem několika vyvolených a v rozlehlosti Runetu vládli jen uznávaní<киты>webdesign, nyní i můj desetiletý syn ve volném čase ze školy v tichosti vytváří svou vlastní stránku a hodlá ji umístit na nějaký bezplatný server (např. narod.ru nebo boom.ru), kterých je také bylo mnoho v Runetu za poslední rok. Lidé, kteří se dnes nezabývají webdesignem, jsou pravděpodobně jen ti, kteří nejsou připojeni k internetu nebo jsou líní. Mnoho lidí, kteří se potulovali po internetu, dříve nebo později přemýšlí o vytvoření vlastní stránky. Právě pro ně byl tento článek napsán.

Budeme se tady bavit o<правильном>HTML pro začátečníky, konkrétně o některých dalších funkcích oficiálně schválených Internetovým konsorciem (http://www.w3.org/). Zejména o některých možnostech, které poskytuje dynamické HTML (DHTML). A ještě přesněji - o tom, jak pomocí CSS (kaskádových stylů nebo kaskádových stylů) vytvořit stránku, která bude vypadat lépe než stránky vytvořené pomocí<классического>HTML, přičemž zabírá méně místa, a proto se načítá rychleji.

Jen málo lidí, kteří se poprvé rozhodnou vytvořit si vlastní webovou prezentaci, se vyzbrojí Poznámkovým blokem nebo jiným textovým editorem, jako je HomeSite Začátečník obvykle uvažuje takto:<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - Tvořím texty v MS Word, prezentace v MS PowerPoint, takže na tvorbu webové stránky si vezmu podobný program - MS FrontPage...> Po takovém rozhodnutí se nově vyražený webový sochař dvakrát okradl.

Poprvé – ve smyslu racionálního využití webového prostoru. Do vytvořených stránek totiž vkládají všechny vizuální editory webových stránek, mezi které patří zmíněný MS FrontPage<отсебятину>- spousta zbytečných značek navíc. Výjimkou je snad Macromedia Dreamweaver (pro který si získal zaslouženou oblibu mezi začátečníky i profesionály). Ani on ale není v tomto ohledu ideální – zdrojový text rád zasypává uvozovkami (ve většině případů zcela zbytečnými) a také vkládá nezalomitelné mezery na ta nejnevhodnější místa. Abychom byli spravedliví, stojí za zmínku, že všechny vizuální editory poskytují uživateli možnost pracovat se zdrojovým kódem vytvářené stránky, ale mnohými tak milovaná FrontPage vše znovu předělá po svém, jakmile přepněte zpět do vizuálního režimu.

Z toho plyne, že již podruhé se začátečník okrádá právě o flexibilitu a úplnou kontrolu nad vytvořeným obsahem stránky - vizuální editory neposkytují stejnou volnost kreativity, jakou poskytne přímá práce se zdrojovým kódem vytvářené stránky. dát ti.

No a teď pojďme rovnou k věci – vytváření krásných a malých webových stránek pomocí kaskádových stylů (v dalším textu budu používat jejich zkrácený název – CSS). Předpokládá se, že vy, milí čtenáři, jste po přečtení úvodu se mnou souhlasili, opustili jste vizuální editory, sehnali jste si knihu o HTML, prostudovali jste alespoň malé množství základních značek a atributů a chcete vědět, co je CSS a co se používá s.

Logické a fyzické formátování

Klasická HTML verze 3.2, v současnosti nejrozšířenější na webu, nám poskytuje prostředky pro fyzické formátování dokumentů, pro které existují speciální značky (např. , , ) a mnoho různých atributů (velikost, barva, výška, šířka atd.). Vlastnosti formátování webu nás nutí tyto značky a atributy psát znovu a znovu pro každý nový odstavec, což samozřejmě značně zvětšuje velikost kódu stránky. Navíc při této metodě formátování zůstává v případě analýzy struktury dokumentu nejasné, proč je toto slovo zvýrazněno tučně – jen pro krásu nebo pro upoutání zvláštní pozornosti koncového uživatele? Pokud je ještě živý člověk schopen alespoň pochopit logickou stavbu stránek v klasickém HTML, pak se to nedá říct o vyhledávačích nebo třeba hlasových prohlížečích. Vyjměte je a vložte čistou logiku do struktury stránky. Je to právě proto<неподвластности>Pro logickou analýzu byla tato metoda formátování nazývána fyzické formátování. Naproti tomu při tvorbě nové specifikace HTML 4.0 bylo do popředí kladeno logické formátování, tedy formátování, ve kterém by byla jasně oddělena struktura a design dokumentu. Tuto metodu formátování doporučuje používat internetové konsorcium, protože poskytuje rozšířené možnosti pro vyhledávání informací na internetu, umožňuje přesněji strukturovat a analyzovat informace pomocí vyhledávačů a také výrazně snižuje velikost stránek a čas, který zaberou. plně načíst. Oddělení struktury dokumentu a designu je realizováno pomocí CSS.

Za zmínku stojí fakt, že počátky logického formátování byly přítomny i v klasických HTML značkách

,

,

, samozřejmě přispěl k rozdělení dokumentů do nějakých logických bloků. Mnoho autorů stránek však používalo a dodnes používá tyto značky pro jiné účely: kvůli nedostatku zdrojů pro návrh stránky byly například značky nadpisů použity ke zvýraznění prvků na stránce, které ve skutečnosti nadpisy nebyly. CSS na druhou stranu poskytuje dostatek stylingových nástrojů, které vám umožní blíže dodržovat logická pravidla formátování a skutečně oddělit strukturu stránky od její vizuální prezentace.

Přiřazení stylů jednotlivým prvkům stránky

CSS vám umožňuje přiřadit vlastní vizuální styl libovolné značce HTML, včetně . Pokud je pro značku nastaven styl , dědí jej všechny prvky (odstavce, nadpisy atd.) umístěné uvnitř této značky kontejneru, pokud pro tyto prvky neexistují žádné vlastní styly. Již tedy nemusíme psát značky a atributy barva, velikost atd. pro každý odstavec na stránce - stačí nastavit určitý styl pro značku a všechny odstavce na stránce se zobrazí podle tohoto stylu. Jak to udělat?

Řekněme, že chceme, aby byly všechny odstavce zobrazeny 12bodovým písmem Times New Roman v tmavě zelené barvě. Chcete-li to provést, musíte zadat atribut stylu značky , přiřaďte mu příslušnou hodnotu. Syntaxe je:

Všechny odstavce na stránce se tak zobrazují tak, jak jsme chtěli, a kód není ucpaný značkami a jejich atributy. Představte si úsporu velikosti souboru, pokud vaše stránka obsahuje hodně textu!

Vezměte prosím na vědomí, že když jsme specifikovali styl písma, za názvem Times New Roman jsme specifikovali patkový styl, což znamená jakékoli písmo s patkami. Pokud počítač koncového uživatele nemá nainstalované písmo Times New Roman, prohlížeč nahradí kterékoli z dostupných patkových písem a zobrazení stránky bude co nejblíže tomu, co jste zamýšleli. Uvedený příklad bude navíc srozumitelný pro IE (4.0 a vyšší) i NN (4.0 a vyšší). I když musíme okamžitě učinit výhradu, že Netscape Navigator nepodporuje všechny funkce poskytované CSS a DHTML, a to samozřejmě nezvyšuje počet jeho fanoušků.

Výše uvedený příklad využívá vložení stylu přímo do tagu dokumentu – tzv. inline styl. Tento způsob propojení CSS se souborem HTML se doporučuje v ojedinělých případech – pokud je plánováno použití tohoto stylu pouze na jeden prvek pouze na jedné stránce webu. Pokud musí být styl aplikován na několik prvků na stejné stránce nebo na několik stránek najednou, doporučují se jiné způsoby propojení CSS a HTML, které si probereme dále.

Přiřazení stylů více prvkům na stejné stránce – vytvoření vložené šablony stylů

Dosud jsme se bavili o nastavení pouze jednoho stylu pro jeden prvek. Nyní se naučíme vytvářet šablony stylů.

Řekněme, že chceme, aby všechny odstavce na stránce vypadaly jako v předchozím příkladu, se všemi nadpisy první úrovně zeleným 16bodovým tučným písmem Arial a všemi nadpisy druhé úrovně 14bodovým tučným písmem Helvetica žlutozeleným písmem. K tomu potřebujeme vytvořit v<голове>stránky (kdekoli mezi značkami A) vložený stylový list, do kterého napíšeme několik pravidel najednou. Chcete-li to provést, vytvořte kontejnerovou značku šablony stylů začínající úvodní značkou. Uvnitř této značky kontejneru můžeme volně definovat libovolný počet pravidel CSS, sestávajících ze selektoru (název značky HTML, na kterou bude pravidlo aplikováno) a její definice (přímo sada formátovačů), uzavřených ve složených závorkách. . Syntaxe pro výše uvedený příklad je:

... ...

Tento způsob propojení CSS a HTML se nazývá vkládání. Doporučuje se používat v případech, kdy se rozhodnete nastavit určitý soubor pravidel formátování pouze pro jednu stránku webu a podle vašeho plánu by všechny ostatní stránky měly vypadat jinak.

Přiřazení stylů několika stránkám webu současně

Kromě vkládání a vkládání se k propojení CSS a HTML používá import a propojení šablon stylů. Toto jsou samozřejmě nejlepší způsoby, jak poskytnout konzistentní vzhled a dojem více (nebo dokonce všem) stránkám stejného webu. V tomto případě je celá šablona stylů uložena v jednom souboru (přípona souboru musí být standardní - .css).

Zde je příklad obsahu takového souboru (například my.css):

Text ( rodina písma: "Times New Roman", patka; velikost písma: 12 bodů; barva: tmavězelená; ) h1 ( rodina písma: Arial, bezpatkové; velikost písma: 16 bodů; barva: zelená; váha písma : tučné; ) h2 ( rodina písma: Arial, bezpatkové; velikost písma: 14pt; barva: zelenožlutá; váha písma: tučné; styl písma: kurzíva; )

Pozor prosím: značky uvnitř souboru nejsou použity žádné šablony stylů – přípona .css prohlížeči jasně ukazuje, že soubor je šablona stylů. Jeden takový soubor lze propojit s několika stránkami najednou (nebo importovat do několika stránek najednou). V html souboru pro propojení musíte napsat kamkoli mezi značky A následující řádek:

... ...

Tento řádek označuje, že propojený soubor je šablona stylů (rel="stylesheet"), formát tohoto souboru je .css (type="text/css") a je umístěn ve stejném adresáři jako soubor html, nebo má jinou adresu URL (href="my.css"). Je zřejmé, že tento řádek můžeme zapsat do libovolného (nebo všech) našich html souborů. Bude tedy předepsán jeden návrh stylu pro několik stránek najednou.

Vezměte prosím na vědomí, že vložené styly (styly určené pro jednotlivé prvky stránky pomocí atributu style) a vložené styly (styly uvedené v<голове>stránky uvnitř značky kontejneru ...

Kromě adresy importované šablony stylů můžete napsat značku kontejneru ... ...

Otázka novináře

Odpověď dotazovaného

...



Ve výše uvedeném příkladu budou otázky novináře zobrazeny šedým písmem Arial, tučným písmem, kurzívou, 10 bodů, odsazenými 15 pixelů od levého okraje stránky. Odpovědi budou zobrazeny písmem Times New Roman, 12 bodů černé. Důležité je nezapomenout přiřadit parametr class k různým třídám odstavců přímo v html kódu. Pro libovolné prvky stránky můžete vytvořit libovolný počet tříd.

Volič ID

Vezměme si jiný případ. Řekněme, že chcete na stránce vytvořit nějaké jedinečné prvky, ke kterým plánujete v budoucnu přistupovat z programů JavaScript. Možná se tyto prvky budou opakovat na dalších stránkách a chtěli byste jim dát konzistentní vzhled pomocí CSS. V tomto případě mají kaskádové styly možnost přiřadit identifikátory (id) jedinečným prvkům. Nejčastěji se identifikátory používají u formulářových prvků, které mají ve specifikaci HTML 4.0 plnou nebo omezenou podporu CSS (v závislosti na prvku). Zde je příklad přiřazení pravidel ID a CSS k těmto prvkům:

... ... ...

Text zadaný do tohoto pole se zobrazí zeleně:

Text zadaný do tohoto pole se zobrazí červeně:

...



Stejně tak lze k libovolnému počtu prvků stránky přiřadit jedinečné identifikátory. To může být užitečné pro přístup k prvku z programu JavaScript a změnu stylu jeho zobrazení v reakci na vstup uživatele, což vám umožní vytvářet různé dynamické efekty.

Kontextové selektory

Řekněme, že jsme vytvořili šablonu stylů, podle které jsou všechny nadpisy první úrovně na stránce zobrazeny červeně na šedém pozadí, všechny odstavce jsou zobrazeny zeleně na žlutém pozadí a všechny zvýrazněny značkou 1 slova uvnitř odstavců - černě na stříbrném pozadí. Kód šablony stylů, jak jste možná uhodli, vypadá takto:

H1 ( barva: červená; barva pozadí: šedá; ) p ( barva: zelená; barva pozadí: žlutá; ) em ( barva: černá; barva pozadí: stříbrná; )

Předpokládejme, že chceme také zvýraznit některá slova v názvu pomocí stejné značky , ale nejsme spokojeni se vzhledem černého textu na stříbrném pozadí v záhlaví. Slova v nadpisu chceme zvýraznit vínovou barvou na šedém pozadí. K tomu existují kontextové selektory. Záznam pravidla, který za tímto účelem přidáme do šablony stylů, bude vypadat takto:

H1 em ( barva: #CC0000; barva pozadí: šedá; )

A zde je příklad kódu stránky pomocí tohoto kontextového selektoru:

... ... ...

Toto je nadpis první úrovně zvýrazněno ve slově

A toto je obyčejný odstavec s ve zvýrazněných slovech

...



To je pro dnešek vše. Příště si povíme o pravidlech pro formátování prvků blokové stránky, umístění prvků a dalších zajímavých a užitečných funkcích implementovaných pomocí CSS.