CSS3 generátory. Nejrelevantnější. Více obrázků na pozadí

– v procesu tvorby webu musíme hodně pracovat s textovými bloky, případně textovými frázemi. Jednoho dne jsem potřeboval přidat textovou frázi takovým způsobem, aby před touto textovou frází nějaká byla odsadit text od hrany html bloku, do kterého byl tento text přidán.

První metoda je tedy nejpřirozenější a nejjednodušší. Chcete-li odsadit před text, přidejte před text html kód mezera – html kód mezery můžete přidat v libovolném html editoru.

Zde je příklad pracovního kódu pro nastavení odsazení textu pomocí kódu mezery:

HTML levé odsazení textu, použít vesmírný kód

V tomto příkladu je před textem, který jsme vybrali, kód mezery  přidáno čtyřikrát, v důsledku toho dostaneme odsazení, které potřebujeme.

Víme, že kód prostoru zpracovává jakýkoli prohlížeč. Přidáním požadovaného počtu mezer před text tedy můžete získat požadované odsazení textu.

Tato metoda je dobrá, protože ji zaručeně zpracuje jakýkoli prohlížeč.

Ale tato metoda Existuje významný nedostatek. Aby byl text v html kódu dostatečně dlouhý, budete muset před text přidat velké množství mezer, což nemusí vypadat krásně, těžkopádně a neprofesionálně.

Jedním z řešení tohoto problému je další způsob odsazovací úkoly.

Odsazení textu HTML, metoda dvě – tato metoda je založena na vlastnostech značky blockquote. Tento tag nastavuje odsazení přibližně 40 pixelů vlevo a vpravo pro text v něm umístěný. Kromě toho je nahoře a dole specifikováno odsazení. Příklad html Kód pro použití této metody je uveden níže:

vlevo použijte značku blockquote

Jak vidíte, tento způsob nastavení odsazení textu je velmi snadno použitelný, ale tento způsob má také značnou nevýhodu. Odsazení, které značka nastavuje blockquote je pevná a vždy se rovná stejné hodnotě – 40px.

K nápravě situace a při přidávání html odsazení a pro text abychom mohli nastavit libovolnou hodnotu, použijeme třetí metodu.

Odsazení textu HTML, metoda tři.

Zde použijeme vlastnost text-indent CSS Cascading Style Sheets.

Pokud otevřeme CSS referenční knihu, na stránce s popisem vlastností text-indent uvidíme, že pomocí text-indent můžeme nastavit hodnotu odsazení prvního řádku nebo prvního odstavce, nebo libovolného bloku textu .

Díváme se na příklad s krátkým textovým blokem, takže vlastnosti odsazení textu docela vhodné pro náš případ.

Níže je html kód, který odsazuje text pomocí text-indent. Z příkladu je zřejmé, že nastavení pro text-odsazení různé významy argumenty, můžeme změnit velikost odsazení textu:

HTMLodsazenítext, CSS styl funguje - odsazení textu

Podle mého názoru je tento způsob nastavení odsazení pro text nejoptimálnější, ale přesto se podívejme na jiný způsob nastavení odsazení pomocí obrázků.

Odsazení HTML textu, čtvrtý způsob – zde použijeme obrázek pro nastavení odsazení.

Jako pracovní příklad se okamžitě podívejme na html kód, který ukazuje, jak tato metoda funguje:

vlevo použijte obrázek

Z výše uvedeného příkladu je jasně vidět, že změnou šířky obrázku můžeme změnit polohu textu, tedy nastavit požadované odsazení pro text.

Jako obrázek můžete použít obrázek, jehož šířka a výška se rovná jednomu pixelu. Aby obrázek, který používáme, nebyl na stránce vidět, nastavíme jeho barvu přesně stejnou jako pozadí stránky webu.

Podle mého názoru jsou výše uvedené metody pro nastavení odsazení textu dostačující k uspořádání odsazení, které potřebujete v jakékoli situaci při přidávání obsahu na stránku vašich stránek.

Dobrý den! Nastavení odsazení textu a obrázků je hlavním tématem dnešní publikace. Podívejme se blíže na to, jaké přístupy lze uplatnit v praxi.

Při tvorbě webu se webmaster zabývá textovými bloky a frázemi umístěnými na stránkách projektu. Řešení jednotlivých problémů zahrnuje použití HTML tagy přidáno do editoru. Existuje několik typů atributů, které vám umožňují přesouvat fráze nebo měnit umístění fragmentů elektronická stránka.

Nastavení odsazení vložením mezer

Podívejme se, jak odsadit text v HTML pomocí speciální značka, zajišťující vytvoření mezery. Musíte vložit kód požadované množství krát, abyste dosáhli požadované odchylky od okraje stránky.

Výše uvedený kód mohou zpracovat všechny typy prohlížečů a webmaster obdrží zaručený výsledek. Nevýhodou této metody jsou její omezené možnosti, protože pro zvětšení vzdálenosti je nutné přidat více tagy, a to zaneřádí dokument.

Použití citačního tagu

Při podrobném studiu toho, jak odsadit text v kódu HTML, můžete narazit alternativní metoda, dávání více možností.

Zde budete muset použít blockquote, který vám umožní posunout fragment vlevo a vpravo o cca 40 px. Stačí napsat kód shodný s uvedeným příkladem:

Metoda umožňuje manipulovat s frázemi v rámci pevné hodnoty 40 px. Za zmínku také stojí, že v tato značka obvykle končí citací.

Alternativní možnosti

Pokud plánujete přesunout nestandardní vzdálenost, budete muset použít parametr text-indent, který se týká stylu CSS tabulka. Uvažovaná metoda zajišťuje vytvoření odchylky prvního řádku o požadovaná vzdálenost. V editoru je třeba provést následující změny:

Když je potřeba změřit požadovaný počet pixelů z obrázku, dává se přednost jednoduchým, ale účinným kódům.

V prvním případě jsou nastaveny pouze hodnoty odsazení od okrajů obrázku. Ve druhém je poloha obrázku nastavena na levý okraj s textem tekoucím doprava a ve třetím - naopak.

Informace dospěly ke konci. Řekněte mi, našli jste informace, které jste hledali? Odpověď můžete napsat do komentářů.

Nakonec zmíním, že blog Workip je věnován především peněžním možnostem vydělávání peněz online. Víte, které metody jsou skutečně finančně perspektivní? Popisy některých z nich již byly zveřejněny.

Publikování materiálů pokračuje. Přihlaste se k odběru e-mailů pro aktualizace projektu. Uvidíme se později.

20. 11. 2013 9,4 tis

STÁHNOUT PŘÍKLADY

Pokud jste jako já, když uvidíte působivý příklad nové funkce CSS3, nemůžete se dočkat, až ji začnete používat na svých webových stránkách. Samozřejmě, pak si všimnete, že je k dispozici pouze v jednom nebo dvou hlavních prohlížečích (a nikdy mezi nimi IE), takže se častěji rozhodnete počkat.

mám pro tebe dobrá zpráva: Nejnovější verze prohlížečů představují skvělé funkce, které jsou konečně podporovány všude, a můžete je začít používat hned teď!

Upozornění: většina těchto funkcí nefunguje ve starších verzích IE (9 a nižší). Pokud tyto prohlížeče tvoří velké procento vašich návštěvníků, obávám se, že k implementaci těchto funkcí budete muset použít náhradní řešení. No, pro zbytek, zde je to, co nám mohou nabídnout moderní prohlížeče:

1. Animace a přechody pomocí CSS

Animace pomocí CSS konečně dostupné ve všech hlavních prohlížečích, dokonce i v IE (od verze 10). V CSS lze vytvářet animace dvěma způsoby.

První z nich je velmi jednoduchý, provádí se prostřednictvím animace změn Vlastnosti CSS pomocí deklarace přechodu. Pomocí přechodů můžete vytvářet efekty přejetí myší nebo kliknutí myší nebo můžete spustit animaci změnou stylu prvku z pomocí JavaScriptu. V níže uvedeném příkladu se přechod provádí najetím myši na planetu, což přinutí raketu přiblížit se.

Druhý způsob, jak definovat animaci, je trochu složitější – zahrnuje popis konkrétních momentů animace pomocí pravidla @keyframe. To vám umožní vytvořit opakující se animaci, která je nezávislá na akcích uživatele a není spouštěna Javascriptem.

HTML

CSS

Kontejner( šířka: 300px; výška:300px; okraj: 0 auto; poloha:relativní; přetečení:skryto; ) .planet( pozice:absolutní; nahoře:0; vlevo:0; šířka:100%; výška:100%; pozadí :url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) no-repeat center center ) .rocket( position:absolute ; nahoře:0; šířka:100 %; pozadí:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets /img/rocket.png) no-repeat 50px centrum /* Chrome stále vyžaduje předponu -webkit- */ -webkit-animation:orbit 2s linear infinite:orbit 2s linear infinite ) .container:hover .rocket( background-; position:80px center) /* Definice pravidel animace klíčových snímků */ @-webkit-keyframes orbit ( from ( -webkit-transform:rotate(0deg);) do ( -webkit-transform :rotate(360deg); ) ) @keyframes orbit ( from ( transform:rotate(0deg); /* Vlastnosti -webkit-transform jsou zde zahrnuty, protože Chrome může v budoucnu začít podporovat klíčové snímky bez prefixu, ale není jisté, že bude podporovat vlastnosti transformace bez prefixů */ -webkit-transform:rotate(0deg);) to (transform:rotate(360deg);

-webkit-transform:rotate(360deg); tento článek na Mozilla Developer Network (MDN). Pokud máte zájem o podporu prohlížeče, viz tuto tabulku kompatibility.

2. Vypočítejte hodnoty pomocí calc()

Další krásná nová CSS funkce– funkce calc(). Umožňuje provádět jednoduché aritmetické výpočty v CSS. Můžete jej použít všude, kde potřebujete délku nebo velikost. Ještě lepší je, že můžete libovolně míchat různé jednotky, jako jsou procenta a pixely. Díky tomu je mnoho značkovacích hacků, které jste pravděpodobně používali v minulosti, zastaralé. To ti nestačí? Funkce funguje v IE9 a vyšších, bez prefixů.

HTML

CSS

Container( /* Vypočítat šířku */ width: calc(100% - 40px); background-color:#CDEBC4; color:#6D8B64; text-align:center; padding:25px 0; margin: 0 auto; )

Zjistěte více o funkci calc() zde nebo se podívejte tabulka kompatibility.

3. Vylepšené selektory

V současné době, pokud přiřazujete ID prvkům jen proto, abyste na ně aplikovali styly, pravděpodobně to děláte špatně. CSS 2.1 a CSS 3 zavedly některé výkonné selektory, díky kterým bude vaše značení čistší a vaše šablony stylů chladnější.

Následující selektory jsou podporovány všemi hlavními prohlížeči, včetně IE9 a vyšších.

HTML

Je to jednoduchý odstavec textu s nějakým skvělým stylem CSS3...

/* Styly prvků (zde nic zajímavého) */ p( font-size: 16px; width: 420px; margin: 20px auto 0; text-align:center; ) .container( width: 420px; margin:50px auto 0; overflow : skryté; padding:5px; ) .elem( šířka:30px; výška:30px; okraj:4px; barva pozadí:#A0DFAC; float:left; ) .elem span( position:absolute; top:5px; left:5px ; right:5px bottom:5px; border:2px solid #fff ) /* Selektory, které vybírají první písmeno a první řádek: */ p::first-letter( background-color: #666; color: #FFF; velikost písma: 0 5px velikost písma: malá písmena; poslední prvky fialová */ .elem:first-child, .elem:last-child( background-color:#948bd8; ) /* Zaokrouhlí každý sudý prvek */ .elem:nth-child(liché)( border-radius:50% ; ) /* Šestý prvek změní na červenou */ .elem:nth-child(6)( background-color:#cb6364; ) /* Aplikuje styly na prvky obsahující prvek span */ .elem:not(:empty)( pozadí -color:#444 pozice:relativní; -webkit-transform:rotate(25deg); Oba prvky tomu vyhovují */ .elem( width: 16px; height: 16px; margin: 11px; ) /* Element, který následuje za prvkem s atributem data-foo="bar2" */ .elem + .elem( background- barva:#78ccd2)

Zjistěte více o těchto selektorech zde nebo se podívejte na které prohlížeče je podporují.

4. Generování obsahu a čítače

Generování obsahu – mocný nástroj v rukou vývojářů - stal se dostupným díky pseudoprvkům ::before a::after . Tato funkce umožňuje použít méně kódu HTML k dosažení stejných výsledků.

To je užitečné zejména v případech, kdy potřebujete další stíny nebo jiné vizuální prvky, které byste potřebovali doplňkové prvky span nebo div . Výsledek bude menší velikostí i sémanticky správný kód HTML.

CSS3 také poskytuje pseudoprvkům přístup k čítačům, které lze zvýšit pomocí pravidla CSS. Mohou také přistupovat k atributům rodičovské prvky obsahující je. Viz příklad kódu níže.

HTML

CSS

Container( /* Nastaví počítadlo cnt na 0 */ counter-reset: cnt; position:relative; text-align:center; padding:20px 0; width:420px; height: 160px; margin: 0 auto; ) /* You umí aplikovat styly na pseudoprvky a nastavit jejich obsah, jako by to byly skutečné prvky na stránce */ .container::before( display: block; content:"Najeďte myší na tyto prvky:"; font-size:18px; font- weight:bold; text-align:center:15px; kurzor:default ) /* Vytvoří čítač pseudoprvků */ .container span::after( /* Při každém provedení tohoto pravidla se hodnota čítače zvýší o 1 */ přírůstek čítače: cnt; /* Přidání; hodnota čítače jako součást obsahu */ content:" #" counter(cnt; display:inline-block; /* Pseudoprvky mohou dokonce přistupovat k atributům svých nadřazených prvků */ .container span:: before( position:); absolutní;

dole:0;

vlevo:0;

šířka:100%;

content:attr(data-title);

HTML

CSS

Generování obsahu je podporováno všude, včetně IE9 a vyšších.

Podívejte podrobný popis zde a tabulka kompatibility zde.

6. Písma

Dokážete si představit, že bývaly doby, kdy jsme byli omezeni pouze na hrstku „bezpečných webových“ písem a nic víc? Je těžké uvěřit, vzhledem k tomu, že dnes máme služby jako Písma Google nebo typkit, který vám umožní zahrnout krásná písma jednoduchým zahrnutím šablony stylů do kódu stránky.

Existují dokonce i ikonová písma jako fontawesome, která obsahují roztomilé vektorové ikony místo písmen a čísel. To vše je možné díky pravidlu @font-face, které umožňuje definovat název, vlastnosti a soubory zdrojový kód fonty, na které se pak můžete odkázat v deklaracích fontů/rodiny fontů.

HTML

Tady je moje krásné webové písmo!

CSS

h1( /* Použijte font obsažený v HTML kódu: */ font-family: Satisfy, cursive; font-weight: normal; font-size: 24px; padding-top: 60px; )

S malým vylepšením můžete zajistit, aby webová písma fungovala i v IE6. O tento problém se postarají dvě výše zmíněné služby písem, takže nemusíte dělat nic navíc.

7. Velikost bloku

Největší bolestí pro začátečníky v CSS je krabicový model. Tvůrci standardů měli pravděpodobně své důvody, ale není intuitivně jasné, proč je šířka a výška prvku ovlivněna výplní a ohraničením.

Tato malá (škodlivá) funkce narušuje značkování a způsobuje zkázu, ale konečně existuje způsob, jak obnovit zdravý rozum pomocí pravidla velikosti krabic. Můžete nastavit hodnotu border-box, díky které se prvky budou chovat přesně tak, jak jste zamýšleli. Přesvědčte se sami:

HTML

CSS

Container( text-align:center; ) .container div( /* Nastavte vlastnost box-sizing: */ box-sizing:border-box; /* Firefox stále vyžaduje předponu -moz */ -moz-box-sizing: border -box width:120px display:inline-blok:top /* Díky box-sizing si můžeme nastavit co chceme, a prvky zůstanou stejně velké */ # el1; ( color:#524480; background-color:#B2A4E0; ) #el2( padding:8px; border:10px solid #9ec551; background-color:#fff; ) #el3( padding:32px; background-color:#ccc ; )

Více o pravidle pro velikost krabice se dozvíte zde nebo se podívejte tabulka kompatibility.

8. Hranice ve formě obrázků

Vlastnost border-image umožňuje zobrazit vlastní okraje kolem prvků. Hranice jsou obsaženy v jediném obrázku (sprite), kde každá oblast obrázku odpovídá určité části hranice. Následující příklad používá obrázek jako ohraničení.

HTML

Pozdravte krásné okraje obrázků!

CSS

p( text-align:center; padding:20px; width:340px; margin: 0 auto; /* Nastavení ohraničení a vlastností obrázku pro ohraničení */ border:30px solid transparent; border-image:url(http:// demo tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 kol )

Další podrobnosti najdete na stránce MDN a v tomto článku o tricích CSS. Okraje obrázků jsou podporovány v všechny hlavní prohlížeče a IE11.

9. Pravidla dotazování na média

Pravidla pro dotazy na média jsou naprosto nezbytná, pokud to s webdesignem myslíte vážně. Jsou k dispozici již nějakou dobu a stojí za zmínku, že změnily způsob tvorby webových stránek.

Dříve jste museli vytvořit běžný web, který byl dostatečně široký, aby se do něj vešlo nejmenší rozlišení monitoru používané v té době; a samostatnou mobilní verzi Stránky, které nyní vytváříme, jsou responzivní: přizpůsobují se typu zařízení, orientaci obrazovky a rozlišení.

Pravidla pro dotazy na média se překvapivě snadno používají – stačí zabalit styly CSS do bloku s pravidlem @media. Každý blok @media se aktivuje, když je splněna jedna nebo více podmínek. Zkuste například změnit velikost této stránky. Také v níže uvedeném příkladu zkuste odstranit blok @media a uvidíte, co se změní.

HTML

CSS

/* Styluje hlavní obsah a boční blok */ .container( width:900px; margin: 0 auto; overflow:hidden; ) .main-section( background-color:#CDEBC4; color:#6D8B64; width:520px; float : left; height:500px; ) .sidebar( background-color:#ccc; width:350px; float:right; height:400px; ) .container p( padding-top:100px; text-align:center; ) .note ( text-align:center; padding-top:60px; font-style:italic; ) /* Tento jednoduchý mediální dotaz umístí sloupce pod sebe na malých obrazovkách */ @media (max-width:900px)( .container( width :100 % ) .main-section, .sidebar( width:auto; margin-bottom:20px; float:none; ) );

Pravidla dotazu na média mohou obsahovat kontroly rozlišení a orientace obrazovky zařízení, barevné hloubky, hustoty pixelů a mnoho dalšího. Podrobnosti najdete v tomto článku a také viz tabulka kompatibility.

10. Více obrázků na pozadí

Pomocí násobků obrázky na pozadí, mohou designéři dosáhnout velmi zajímavých efektů. Mohou vnutit různé obrázky nad sebou jako pozadí stejného prvku.

Každý obrázek (nebo vrstvu) lze jednotlivě přesouvat nebo animovat, jak je znázorněno na příkladu níže (najeďte myší na obrázek). Všechna pravidla CSS související s pozadím nyní mohou přijímat seznam vlastností oddělených čárkami, každou pro konkrétní obrázek na pozadí:

HTML

CSS

Space( /* Předejte seznam obrázků na pozadí oddělených čárkami: */ background:url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img /rocket_big. png") centrum bez opakování 70px, url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg") no-repeat bottom width:200px margin: 0 auto-radius:3px; background-position:35% 20px, vpravo nahoře)

Více informací o více obrázcích na pozadí naleznete zde. Tato funkce je široce podporována prohlížeči - všechny nové verze ji podporují ( viz tabulka).

11. Sloupce CSS

Rozvržení sloupců bylo notoricky obtížné implementovat v CSS. Obvykle by to zahrnovalo použití JavaScriptu nebo zpracování na straně serveru k rozdělení obsahu do různých prvků.

Tento proces je zbytečně komplikovaný a bere cenný čas vývojářům od věcí, na kterých opravdu záleží. Naštěstí nyní existuje způsob, jak toto použití obejít CSS pravidlo sloupce:

HTML

CSS

Container( width: 500px; margin: 0 auto; ) /* Vytváření sloupců je nyní tak snadné: */ .container p( -moz-columns:3; -webkit-columns:3; columns:3; )

Toto je pravidlo široce podporované, i když stále vyžaduje předpony. Kde je obsah rozdělen do sloupců, závisí na podpoře prohlížeče pro konkrétní pravidla rozvržení a dále rozdíly ve zpracování prohlížeče hraniční případy.

12. 3D transformace pomocí CSS

Nic nepotěší oko jako působivé 3D demo s použitím CSS. I když je použití tohoto typu transformace mimo ukázky nebo portály kontroverzní, 3D CSS nabízí výkonné funkce pro návrháře a vývojáře, které si mohou získat srdce uživatelů, pokud jsou dobře implementovány.

Podívejte se na následující příklad kódu:

HTML

CSS

Container( /* Jak výrazné by měly být 3D efekty */ perspektiva: 800px; -webkit-perspective: 800px; background: radial-gradient(#e0e0e0, #aaa); width:480px; height:480px; margin:0 auto; border -radius:6px position:relative ) .iphone-front, .iphone-back( /* Povolit 3D transformaci */ transform-style: zachování-3d; -webkit-transform-style: zachování-3d; /* We použít dvě individuální prvek div pro přední a zadní panel telefonu. Následující kód skryje div, když je převrácen, aby se zobrazila zadní strana: */ backface-visibility: hidden;

-webkit-backface-visibility: hidden; šířka:200px; výška:333px; poloha:absolutní; horní: 50 %; vlevo: 50 %; margin:-166px 0 0 -100px; background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/iphone.png) bez opakování vlevo uprostřed;

/* Animace přechodů */ přechod:0,8s; ) .iphone-back( /* Zadní panel je ve výchozím nastavení převrácen o 180 stupňů */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); background-position:right center; ) .container:hover .iphone - front( /* Když je myš nad kontejnerem, otočte přední panel a skryjte jej, ... */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); ) .container:hover . iphone-back( / * ... při zviditelnění zadního panelu */ transform:rotateY(360deg); -webkit-transform:rotateY(360deg);

Tento kód je založen na našem

přihlašovací formuláře

Jablečný styl . Pokud se chcete dozvědět více o 3D transformacích v CSS, podívejte se na toto podrobné pokyny

. Pokud nepotřebujete podporu pro starší verze IE, zbytek

podpora prohlížečů je dostatečně široký. Další metody, které stojí za zmínku Existují další nezapomenutelné funkce, které stojí za zmínku. Pokud jste to ještě neudělali, můžete zastavit předponu vlastností border-radius a box-shadow. Data-uris nyní můžete také používat jako obrázky na pozadí ve všech prohlížečích. Všude je také podporována neprůhlednost, stejně jako velmi užitečná vlastnost background-size.

Na podporu pro flexbox, @supports, filtry a CSS masky si budeme muset ještě chvíli počkat, ale myslím, že to čekání bude stát za to! Tato publikace je překladem článku „ 12 úžasných funkcí CSS3, které můžete konečně začít používat “, připravený přátelským projektovým týmem obrázky. Nyní máte možnost přikázat textovým i značkovacím blokům: „Vrhněte stíny nebo se staňte trochu průhlednými!“ a blokům: „Zaoblete rohy!“

Myslím, že to velmi pomůže návrhářům rozvržení, aby se v nich objevili CSS3 možnost, stejně jako v lesklých časopisech, vytvářet rozvržení stránky z několika sloupců. Zároveň jsou postaveni před dvě možnosti: buď rozdělit text do určitého počtu sloupců, nebo označit úpravu textu na určitou šířku sloupce.

Další typografickou funkcí je možnost zapnutí vlastní písma pomocí pravidla @font-face.

No, aby se vám oči úplně zatoulaly do stran - podpora barevných modelů HSL(Odstín, Sytost a Světlost – Tón, Sytost a Jas) a RGBA(Červená, zelená, modrá a alfa – červená, zelená, modrá a průhlednost).

Nové selektory

Všichni to používáme už dlouho selektory, vázané na skutečné entity. Volič typu spojujeme s elementem dokumentu. Odstavec prvku dokumentu, značka

Toto je selektor p, který může mít libovolný design, například p (barva: černá) (barva všech odstavců bude černá). K selektivnímu označení k některým odstavcům šedá text, použijte atribut class

Odpovídající selektor s pravidlem bude vypadat takto:
.stříbrná (barva: #aaa) . Můžete také použít atribut id

Potom bude selektor a pravidlo #antivampir (barva: #aaa) .
Uvedené selektory lze pro přesnější specifikaci kombinovat potřebné prvky dokument.

Kromě těch uvedených zde byly selektory atributů, pseudotřídy atd. CSS3 zvýšilo počet pomocných selektorů, které umožňují větší flexibilitu a přesnost prvků stylingu.

Voliče atributů

Tyto selektory používají atributy značek.

E
Je vybrán prvek E, jehož atribut foo začíná pruhem řetězce

Například: img - tento selektor bude odpovídat všem obrázkům, jejichž hodnota názvu začíná ohněm.

E
Je vybrán prvek E, jehož atribut foo končí pruhem řetězce

E
Je vybrán prvek E, jehož atribut foo obsahuje podřetězcový pruh

Strukturální pseudotřídy

Tyto selektory vám umožní to, co ostatní nemohou. Jejich práce je založena na rozšířených informacích, které přebírají ze stromu dokumentů.

E:kořen
Pomocí takového selektoru se můžete vždy dostat do kořenového adresáře dokumentu, u dokumentu HTML to bude značka , zatímco E je libovolný prvek dokumentu

E:n-té dítě()
V závorkách lze zadat buď výraz an+b, nebo hodnoty liché (liché) nebo sudé (sudé). aab jsou celá čísla a n ukazuje změnu čísel prvků počínaje nulou.

Tento selektor umožňuje vybrat prvek E mezi stejnými podřízenými prvky, jako je uvnitř nějakého předka, před kterým je tolik prvků, jak je uvedeno v závorkách.

Například: li:nth-child(2n) nebo li:nth-child(sudé) – budou vybrány všechny sudé prvky seznamy na stránce. li:nth-child(3n) - každý třetí prvek.

E:n-té-poslední-dítě()
Podobně jako u předchozího voliče, ale začíná od konce seznamu.

Například: p:nth-last-child(1) - tímto způsobem odkazujeme na poslední odstavce.

E:n-tý typ()
Podobné v akci jako selektor n-tého dítěte, charakteristický rys zohledňuje typ prvku. To znamená, že při výběru podřízených prvků budou odstavce a nadpisy reagovat na selektor nezávisle. Pomocí tohoto voliče můžete zobrazit například pouze obrázky.

Například: img:n-tého typu(liché)(zarovnat:vlevo) img:n-tého typu(sudé)(zarovnat:vpravo) všechny liché obrázky uvnitř nějakého kontejneru budou zarovnány doleva, všechny sudé doprava.

E:nth-last-of-type()
Akce je podobná jako u selektoru n-tého posledního dítěte, zohledňuje se typ prvku.

E: poslední dítě
Vybere prvek E, který je posledním podřízeným prvkem (Všimněte si, že E:first-child bylo dříve definováno v CSS2)

E: první typu
Je vybrán prvek E, který je prvním potomkem svého typu.

E: poslední typ
Je vybrán prvek E, který je posledním potomkem svého typu

E: jediné-dítě
Je vybrán prvek E, který je jediným podřízeným prvkem svého rodiče, pokud má nadřazený prvek více podřízených prvků, pak je selektor již neovlivní všechny

E: pouze typu
Je vybrán prvek E, který je jediným potomkem svého typu

E: prázdné
Vybere prvek E, který nemá žádné potomky (všimněte si, že to zahrnuje textové uzly)

Pseudotřídní cíl

E:cíl
Je vybrán prvek E, který je cílem ukazujícího URI. Takovým prvkem může být S atribut názvu nebo prvek s atributem id. Hodnoty těchto atributů se musí shodovat s URI.

Například: div:target(barva-pozadi: #efe;) toto pravidlo bude fungovat, pokud je na stránce prvek

, na který dojde k přechodu, a URI by mělo vypadat takto /index.html#about-me

Pseudotřídy stavů

E: povoleno
Vybere aktivní (se kterým lze manipulovat) ovládací prvek webové stránky E, jako je textové pole nebo zaškrtávací políčko

Například: input:enabled(ohraničení: #0f0 1px plný) Všechna aktivní jednořádková textová pole budou mít zelené okraje

E: zakázáno
Je vybrán neaktivní prvek E

E: zkontrolováno
Vyberte prvek E (přepínač nebo zaškrtávací políčko), vybraný uživatelem nebo povolený ve výchozím nastavení

Pseudotřídní negace

E:ne(y)
Je vybrán prvek E, který neodpovídá jednoduchému selektoru s. Jednoduchý selektor může být: třída, identifikátor, atribut, pseudotřída, značka, hvězdička.

Například: span:not(.progs) (barva: zelená) ve značkách , kterým není přiřazena třída progs, text zezelená.

Zobecněný související kombinátor

E~F
Vybere se prvek F, který se nachází za prvkem E a oba musí patřit ke stejnému předkovi ve stromu dokumentu.

Například: p:not(.trg) ~ div (barva pozadí:#f00) pozadí div blok, který se nachází za odstavcem bez třídy trg, bude červený.

Výše uvedené voliče budou fungovat dobře nejnovější verze populární prohlížeče. A pokud chcete, aby nezůstaly v dluzích ani starší prohlížeče, budete to muset vyřešit pomocí dalších html nebo css hacků.

Nové efekty

Uvedeme zde jen některé skvělé nástroje, které byly dodány s CSS3. Umožní vám zmírnit stres návrhářů rozvržení snížením počtu bloků pro vytvoření požadovaných efektů návrhu:

• pozadí (nyní můžete použít více pozadí)
• background-clip (definuje vzhled pozadí pod hranicí bloku)
• background-origin (umístění na pozadí, nefunguje, když je pozadí fixováno: opraveno)
• background-size (nastavuje algoritmus pro nastavení velikosti obrázku na pozadí)
• rádius ohraničení (zaoblené rohy)
• border-image (k vytvoření ohraničení bloku můžete použít obrázek)
• border-color (je možné vytvořit přechod rovnoběžný s okrajem)
• box-shadow (nastavuje stín bloků)
• box-sizing (změní algoritmus výpočtu velikosti bloku)
• neprůhlednost (zde je vše jasné - průhlednost)
• obrys-offset (čára kolem bloku, není zahrnuta v jeho velikosti)
• změnit velikost (definuje možnost změnit velikost textové oblasti)
• text-shadow (text vrhá stín)
• word-wrap (zalamování slov do bloku)

S těmito efekty budeme později určitě cvičit.

Rozložení s více sloupci

Časopisy a noviny vyvinuly pohodlnou prezentaci textu - ve sloupcích. Tuto možnost rozložení lze vytvořit pomocí CSS3 bez dalšího úsilí. Uvádíme dvě dostupné metody.

1. Použití majetku šířka sloupce(šířka sloupce). Vy pouze určíte, jak široký bude každý sloupec, a počet sloupců se vypočítá na základě šířky kontejneru a šířky sloupce.
2. Použití počet sloupců(počet sloupců). Definujete počet sloupců pro váš text a jejich šířka se vypočítá v závislosti na šířce kontejneru.

Navíc máte možnost určit sloupec-mezera(mezera mezi sloupci), ale projeví se při použití metody šířky sloupce. Ještě jeden užitečný doplněk je nemovitost sloupcové pravidlo, který umožňuje umístit ohraničení mezi sloupce. Konečně je tu vlastnost sloupec-prostor-distribuce, který určuje, jak by měl být zbývající prostor rozdělen mezi sloupce.

V současnosti jsou podporována rozvržení s více sloupci Prohlížeče Firefox, Chrome a Safari. Názvy parametrů je však potřeba mírně doplnit, aby tomu tak bylo požadovaný efekt vydělal. Pro Firefox potřebujete předponu -moz a pro Chrome -webkit.

Webová písma

Někteří z vás si řeknou – úžasné a nové je, že webová písma již byla dostupná v CSS2 a fungovala dobře v Internet společnosti Microsoft Průzkumník, počínaje verzí 5. Ano, to je pravda, ale je tu několik „ALE“. Nejprve (s dopadem na druhý) musíte použít proprietární formát písma .eot (Embedded Open Type). Za druhé, v důsledku toho žádný z ostatních prohlížečů toto nepodporuje. V důsledku toho se na webech založených na CSS2 nikdy nepoužívala webová písma.

Nyní však v nejnovějších verzích Firefoxu, Safari, Chrome a Opery můžete použít pravidlo @font-face pomocí libovolného licenčního .ttf (TrueType) nebo .otf (OpenType) fontu na vaší webové stránce.

Například: @font-face (rodina fontů: Alexa; src: url('Alexa.otf');). Poté použijte toto písmo ve svém CSS pravidla, jako například: článek p (rodina písem: Alexa, Arial, Helvetica, sans-serif;).

Také si musíte pamatovat, že písma jsou jako obrázky: pokud nejsou vaše, možná budete potřebovat povolení k jejich použití od držitelů autorských práv. Kromě toho si můžete zakoupit licenci k používání nebo stahování písem zdarma.

Další nové funkce

CSS3 také obsahuje mnoho dalších nových funkcí. Patří mezi ně: podpora nových barevných modelů, zejména HSL (Hue, Saturation, Lightness - Hue, Saturation, Brightness) a dvou s alfa kanálem - RGBA (Red, Green, Blue, Alpha - Red, Green, Blue, Alpha ) a HSLA (odstín, sytost, světlost, alfa).

Dotazy na média umožňují definovat styly pro různá zařízení na základě jejich velikosti oken. Můžete například poskytnout specifické styly pro zařízení s šířkou obrazovky menší než 500 pixelů (jako je smartphone, PDA nebo jiné mobilní zařízení).

Řečový modul CSS3 vám umožní ovládat vlastnosti řeči odečítače obrazovky, včetně hlasitosti hlasu, vyvážení, rychlosti, stresu a dalších.

Toto byla druhá část článku. Pokračování…