Počítadlo CSS s automatickým přírůstkem pro jakékoli prvky stránky HTML. Pozadí v různých vrstvách

Reg.ru: domény a hosting

Největší registrátor a poskytovatel hostingu v Rusku.

V provozu je více než 2 miliony doménových jmen.

Propagace, doménová pošta, obchodní řešení.

Již si vybralo více než 700 tisíc zákazníků po celém světě.

*Najetím myší pozastavíte rolování.

Zpět dopředu

12 úžasných funkcí CSS

Pokud jste jako já, když uvidíte působivou ukázku nového efektu CSS3, nemůžete si pomoct a nezačněte jej používat ve své práci.

Samozřejmě později zjistíte, že tento efekt můžete použít ve 2 nebo 3 hlavních prohlížečích (IE samozřejmě jako vždy nervózně pokuřuje a není v tomto seznamu zahrnut) a obvykle se rozhodnete počkat.

Počkej do tento efekt budou podporovány všemi prohlížeči. Ale mám pro vás dobrou zprávu! S nejnovější aktualizací prohlížeče existuje několik skvělých věcí CSS3, které jsou podporovány všemi prohlížeči, a můžete je začít používat hned teď!

Lyrická odbočka: Většina těchto efektů nefunguje ve starších verzích IE (od verze 9 a nižší). Pokud se tak stane, že ve vaší zemi se tyto prohlížeče používají všude, pak se obávám, že vás budu muset naštvat, tato lekce není pro vás. Ale pro ty, kteří zůstanou, nám toto mohou nabídnout moderní prohlížeče:

1. CSS animace a přechody

CSS animace je konečně dostupná pro všechny hlavní prohlížeče, dokonce i pro IE! (od verze 10). Existují 2 způsoby, jak Tvorba CSS animace. První z nich je velmi jednoduchý a funguje prostřednictvím vlastnosti přechod.

Pomocí této vlastnosti můžete vytvářet efekty při najetí myší nebo naopak oddálení konkrétní oblast, nebo můžete spustit animaci pomocí JavaScriptu a změnit vlastnosti konkrétního objektu.

Jako ukázka takových přechodů na základě vlastnosti přechod, výše je příklad efekt vznášení s planetou a raketou. Když se vznášíte nad planetou, raketa se otočí blíže k ní.

Druhý způsob animace je o něco složitější – je spojen s popisem animace pomocí pravidla @klíčový snímek, která umožňuje vytvořit opakující se nebo cyklickou animaci, která je nezávislá na akci uživatele nebo spouštěči JavaScriptu.

Kód efektu je zobrazen níže:

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) /* Nastaví klíčové snímky pro animaci */ @-webkit-keyframes orbit ( from ( -webkit-transform:rotate(0deg);) do ( -webkit-transform :rotate(360deg); ) ) @keyframes orbit ( from ( transform:rotate(0deg); /* Zahrnul jsem vlastnost -webkit-transform, protože Google Chrome může v budoucnu začít podporovat klíčové snímky bez předpon */ -webkit-transform :rotate(0deg);) do ( transform: otáčet (360 stupňů); -webkit-transform:rotate(360deg); ))

Je toho tady hodně CSS animace, a předpokládám, že začnete tímto článkem. Pokud jste zvědaví, zda váš prohlížeč tento efekt podporuje nebo ne, pak si prosím tuto tabulku zamilujte.

2. Počítání hodnot pomocí vlastnosti calc()

Další skvělou novinkou CSS je funkce calc(). Umožňuje vám provádět jednoduché aritmetické výpočty v CSS. Tu využijete všude, kde potřebujete řešit délku nebo šířku.

Co je ale ještě cool je, že můžete snadno míchat různé rozměry, ať už jde o pixely nebo procenta.

To vám umožní vytvořit obrovské množství různých triků a technik (například s vrstvami a umístěním), čímž eliminujete všechny triky, ke kterým jste se museli uchýlit, abyste dosáhli podobného výsledku. Co by mohlo být lepší? Ale jde o to: funguje s IE verze 9 (yay!) a vyšší a bez dalších předpon.

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

3. Pokročilé voliče

Pokud dnes k prvkům připojujete ID jen proto, abyste na ně aplikovali vlastnosti stylu, děláte něco úplně špatně. Protože CSS2.1 a CSS3 povoleny velký počet výkonné selektory, díky kterým budou vaše rozvržení čistší a vaše šablony stylů chladnější.

Toto je podporováno všemi hlavními prohlížeči, včetně IE9 a vyšších.

Příklad:

Odstavec textu, který je neoddělitelný od ostatních značek a ID, s určitým počtem zajímavých stylů CSS

/* CSS styly- 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: hidden; 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; ) /* Selektor, který aplikuje vlastnosti na první písmeno a na první řádek našeho odstavce */ p::first-letter( background-color: #666; color: #FFF font- size: font-style: 0 5px; text-transform: malá písmena; a poslední prvek fialový */ .elem:first-child, .elem:last-child( background-color: #948bd8; ) /* Zaokrouhlí všechny ostatní prvky */ .elem:nth-child(liché)( border-radius :50% ) /* Udělat každý 6. prvek červený */ .elem:nth-child(6 )( background-color:#cb6364; ) /* Upravte styl prvku, který obsahuje značku span */ .elem:not(:empty)( background-color:#444; position:relative; -webkit-transform:rotate(25deg); transform:rotate(25deg); ) /* Cílení na prvky podle atributu */ .elem( background-color:#aaa; ) .elem( background-color:#d7cb89; ) /* Hodnota atributu musí začínat "bar". protože to odpovídá dvěma prvkům popsaným výše*/ .elem( šířka: 16px; výška: 16px; okraj: 11px; ) /* Prvek následující po prvku s data-foo="bar2"*/ .elem + .elem ( pozadí -barva:#78ccd2;

4. Generovaný obsah a počítadla

Vygenerovaný obsah je Výkonný nástroj v rukou vývojáře, který se stane dostupným po aplikaci pseudoprvků ::před A ::po.

Tato funkce vám umožní používat méně HTML, než by tomu bylo jinak. To je výhodné zejména v případech, kdy potřebujete použít blokové stíny nebo jiné vizuální efekty které vyžadují značky rozpětí nebo div. V důsledku toho získáte minimalističtější a sémanticky správný kód HTML.

CSS3 také poskytuje pseudoprvkům přístup k čítačům, které lze zvýšit pomocí pravidel CSS. Mohou také přijímat hodnoty atributů z nadřazených prvků, které je obsahují. Příklad níže:

Container( /* Nastaví počítadlo s názvem cnt na nulu */ counter-reset: cnt; position:relative; text-align:center; padding:20px 0; width:420px; height: 160px; margin: 0 auto; ) /* Pseudoprvky můžete stylovat a dát jim obsah, jako by to byly skutečné prvky na stránce */ .container::before( display: block; content:"Najeďte myší na tyto položky:"; font-size:18px; font- weight :bold; text-align:center:15px; .container span( display:inline-block; padding:2px 6px; background-color:#78CCD2; color:#186C72; border-radius:4px; margin:3px; ; kurzor:default ) /*Vytvoří počítadlo s pseudoprvkem*/ .container span::after( /* Pokaždé, když je toto pravidlo aplikováno, počítadlo se zvýší o 1 */ počítadlo: cnt; /; * Přidat k hodnotě čítače část obsahu */ content:" #" counter(cnt) display:inline-block /* Pseudoprvky mají přístup k atributům svých rodičů */ .container span::before( position:absolute); ; dole:0; vlevo:0; šířka:100%; content:attr(data-title); barva:#666; neprůhlednost:0; /* Animace přechodů */ -webkit-transition:opacity 0,4s; přechod:opacity 0,4s; ) .container span:hover::before( opacity:1; )

Generovaný obsah je podporován všude, včetně IE9 a vyšších.

Přechody dávají webovým designérům možnost tvořit hladké přechody mezi barvami bez použití obrázků. Přechody CSS také vypadají skvěle na obrazovkách sítnice, protože jsou generovány za běhu.

Mohou být lineární nebo radiální a lze je nastavit na opakování. Nějakou dobu byly pro všechny nepřístupné, ale po pár měsících a určité množství změny v syntaxi se staly dostupné téměř všem, bez dalších předpon.

CS.container( text-align:center; padding:20px 0; width:450px; margin: 0 auto; ) .container div( width:100px; height:100px; display:inline-block; margin:2px; box-shadow : 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px #DDD color:#666; vertical-align: 230px ) #el1( background:linear-gradient(to bottom, #8dd2d9; #58c0c7) #el2( background:radial-gradient(#77d19e,#46c17b); ) #el3( background:repeating-linear-gradient( -45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px); #el4( background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px); )

Dokážete si představit dobu, kdy jsme byli omezeni na pár ručně vyrobených písem, které přesně pasovaly do všech prohlížečů? Je těžké tomu uvěřit, ale dnes díky službám jako je např Písma Google a typkit, které vám umožňují používat skvělá písma jednoduše jejich připojením ke stylům na vaší stránce.

Existují dokonce i ikonová písma, jako je fontawesome, která obsahují roztomilé vektorové ikony namísto písmen nebo čísel. To vše bylo umožněno pomocí pravidla @font-face, který umožňuje zadat název, vlastnosti a zdroj písma, na které lze později odkazovat prostřednictvím vlastnosti font/font-family.

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

H1( /* Připojíme použití vybraného fontu k HTML */ font-family: Satisfy, cursive; font-weight: normal; font-size:24px; padding-top: 60px; )

S několika řešeními fungují písma v prohlížečích počínaje IE 6. Existují však 2 služby, které byly popsány výše, takže tato řešení nyní nepotřebujete.

7. Velikost bloku. Vlastnictví box-size

Jedinou největší příčinou bolesti hlavy pro začátečníky v CSS je model krabice.

Pro standardizaci tohoto modelu existovalo několik dobrých důvodů, ale zůstal neintuitivní, například v případech, kdy nastavíte výšku a šířku bloku, ale ty se mění v závislosti na hodnotě vycpávka nebo okraj.

Toto drobné opomenutí všechno rozbije, ale konečně máme způsob, jak obnovit zdravý rozum a zbavit se bolesti hlavy. Dodržujte pravidlo box-size! Nyní se můžete ptát border-box, díky kterému zůstanou prvky přesně takové, jaké byste je chtěli mít. Podívej se sám:

Container( text-align:center; ) .container div( /*Nastavení metody velikosti boxu */ box-sizing:border-box; /*Máme speciální Firefox, takže stále vyžaduje předpony*/ -moz-box -sizing :border-box width:120px display:inline-blok:top /* Díky pravidlu velikosti boxu můžeme nastavit hodnoty padding a border; chcete a prvky zůstanou stejné velikosti, jak byly*/ #el1( color:#524480; background-color:#B2A4E0; ) #el2( padding:8px; border:10px solid #9ec551; background-color. :#fff; ) #el3( padding:32px ; barva pozadí:#ccc )

8. Obrázky jako hranice nebo vlastnost border-image

Vlastnictví border-image umožňuje zobrazit obrázky, které jste speciálně navrhli kolem prvků, jako obrys. Určité hranice obsažené v obrázku nebo spritu odpovídají nebo odpovídají určitým hranicím prvků bloku. Chcete-li to lépe pochopit, podívejte se na příklad:

Pozdravte roztomilé obrysy bloků obrázků!

P( text-align:center; padding:20px; width:340px; margin: 0 auto; /*Nastavit vlastnosti pro ohraničení a pro obrázek použitý jako 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 kolo)

Pro podrobnější pohled se podívejte na tuto stránku a tento odstavec. Podporováno všemi hlavními prohlížeči a IE 11.

Mediální dotazy jsou nutností, pokud se chcete dostat do webdesignu na seriózní úrovni. Jsou tu už nějakou dobu, ale stojí za zmínku, protože... změnily způsob, jakým vytváříme webové stránky.

To se používá, když potřebujete, aby web vypadal stejně správně na různých zařízeních (například mobilních zařízeních – tabletech, chytrých telefonech, noteboocích atd.) s různou šířkou obrazovky. Dnes tvoříme weby, které se musí umět přizpůsobit typu zařízení, jeho orientaci a rozlišení jeho monitoru.

Dotazy na média se používají neuvěřitelně snadno: vše, co musíte udělat, je zabalit styly CSS do bloku pravidel @media. Každý @media blok se aktivuje, když je splněna jedna nebo více podmínek.

/* Styl hlavního obsahu a postranního panelu */ .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:60px font-style:italic) /* Tyto jednoduché dotazy na média umožňují, aby se bloky přizpůsobily šířce vaší obrazovky */ @media (max-width:900px)( .container( width; :100 % ) .main-section, .sidebar( width:auto; margin-bottom:20px; float:none; ) );

Dotazy na média mohou zahrnovat kontroly rozlišení obrazovky zařízení, orientace, barevné hloubky a další. O tom všem si můžete přečíst a podívat se na tabulku kompatibility.

10. Pozadí v různých vrstvách

Pomocí této funkce vytvářejí návrháři neuvěřitelně zajímavé efekty. Mohou sestavit celý obrázek z jeho různých částí umístěných v různých vrstvách.

Každá taková vrstva (obrázek) se může pohybovat a animovat svým vlastním způsobem, například jako ukázka níže (najeďte myší na obrázek a uvidíte, co se stane). Všechny vlastnosti pozadí v CSS nyní mohou přijímat čárkami oddělený seznam vlastností pro každou jednotlivou vrstvu:

Space( /* Nastavení seznamu pozadí oddělených čárkami */ background:url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big .png" ) střed bez opakování 70px, url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg") ne- opakovat dole uprostřed ; výška: 200px okraj: 0 auto; jako je pozice na pozadí a opakování */ pozice na pozadí: 35 % 20 pixelů, vpravo nahoře)

Více informací naleznete zde. Velmi dobrá podpora prohlížeče - všechny moderní prohlížeče podporují toto pravidlo. .

Rozvržení založené na sloupcích bylo pro uživatele CSS velkým problémem. Obvykle do toho byl zapojen server nebo JavaScript, aby se text rozdělil na stejné části/sloupce. To úkol neuvěřitelně zkomplikovalo a také zabilo spoustu cenného času vývojářů. Konečně, nyní je snadné to udělat pomocí pravidla CSS sloupců.

Container( width: 500px; margin: 0 auto; ) /* Takto jednoduše vytvoříme sloupce */ .container p( -moz-columns:3; -webkit-columns:3; columns:3; )

Toto pravidlo má dobrou podporu, ale stále vyžaduje předpony. Mezi prohlížeči však existují určité rozdíly a nuance, o kterých je důležité vědět.

12. 3D CSS transformace

Na webu není nic atraktivnějšího a úžasnějšího než působivé 3D CSS demo. Zatímco užitečnost toho mimo demo a mimo portfolio je poněkud sporná, 3D CSS jich nabízí několik nejvýkonnější funkce pro designéry a vývojáře, kteří si při správném použití mohou získat srdce uživatelů.

Podívejte se na ukázkový kód níže:

Container( /* Jak by měly být vyjádřeny 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( /* Připojení 3D transformace */ transform-style: zachování-3d; -webkit-transform-style: zachování-3d; /*Používáme; 2 různé divy pro přední a zadní stranu telefonu Tato vlastnost skryje div, když je otočen, takže se zobrazí opačná strana */ backface-visibility: hidden height:333px; :absolutně; nahoře:50%; okraj:-166px 0 -100px; use/assets/img/iphone.png) bez opakování vlevo uprostřed /* Animace přechodu */ přechod:0,8s ) .iphone-back( /*Zpět se ve výchozím nastavení otočí o 180 stupňů*/ transform:rotateY(180deg) ) ; -webkit-transform:rotateY(180deg); pozadí-pozice:pravý střed; ) .container:hover .iphone-front( /*Když na kontejner najedete myší a spustíte hover, otočte přední část a skryjte ji */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg) ; ) .kontejner :hover .iphone-back( /*... současně rotovat zadní a zviditelnit*/ transform:rotateY(360deg); -webkit-transform:rotateY(360deg); )

Tento kód byl modelován podle tohoto tutoriálu, který doporučuji vyzkoušet.

Pokud se chcete o 3D CSS dozvědět více, podívejte se na podrobný úvod. Pokud necílíte na starší prohlížeče IE, podpora prohlížeče pro 3D CSS je také docela dobrá.

Další výhody stojí za zmínku

Pokud používáte také předpony k hraniční poloměr A box-shadow, tak teď na to můžete klidně zapomenout.

Nyní můžete také začít používat data-uri pro obrázky na pozadí, pro všechny prohlížeče.

Vlastnictví neprůhlednost je nyní dostupná a všude podporovaná, bude také velmi užitečné znát nemovitost velikost pozadí.

Bude ještě nějakou dobu trvat, než bude k dispozici podpora napříč prohlížeči flexbox, @podporuje, filtry a masky CSS, ale jsem si jistý, že to stojí za to počkat!

Specifikace CSS2.1 obsahuje techniku, která umožňuje vývojáři kombinovat tři Vlastnosti CSS a pseudoprvek pro vytvoření automaticky se zvyšujícího čítače, podobného tomu, který se používá v uspořádaném seznamu.

Na rozdíl od počítadla seznamu, které má použití pouze pro položky

nebo
a s pouhým jednoduchým přírůstkem lze novou metodu čítače zavedenou v CSS2.1 použít s jakoukoli sadou prvků a má více dostatek příležitostí organizace účtu.

Tato metoda může být matoucí, protože používá více vlastností a liší se od běžného kódu CSS. V tomto návodu se pokusíme objasnit použití takového čítače a naznačit jeho výhody a nevýhody.

Syntax

CSS kód čítače vypadá takto:

Oddíl ( counter-reset: nadpisy 0; ) h2:before ( protipřírůstek: nadpisy 1; obsah: "Kapitola " counter(nadpisy, desetinné číslo) ": "; )

Jak již bylo zmíněno, používají se tři vlastnosti CSS: counter-reset , counter-increment a content . Pokud některá ze zadaných vlastností chybí, metoda nebude fungovat.

Analýza syntaxe

Pojďme si tedy porozumět syntaxi a k ​​čemu jsou páry vlastnost/hodnota:

Indikátor kontextu

První blok deklarací (selektor div.section) určuje, která sekce v označení obsahuje sadu prvků, které budou mít automaticky se zvyšující celočíselnou hodnotu. Je důležité pochopit rozdíl mezi deklarací tohoto bloku a následujícím. Tento konkrétní prvek (

) nebude mít předchozí celočíselnou hodnotu čítače. Je to jednoduše „kontejner“ nebo „kontext“, ve kterém jsou umístěny prvky, které pult využívají.
Ale pro kontext je třeba definovat název čítače, který bude použit pro prvky deklarované v dalším bloku.
Reset počítadla
Vlastnost counter-reset musí být použita ve spojení s selektorem, který určuje kontext, jak je popsáno výše. První část hodnoty je vlastní název, který dáte počítadlu. Toto je povinná součást. Název může být jakýkoli kromě vyhrazených slov pro CSS (například nemůžete pojmenovat počítadlo "žádný", "zdědit" nebo "počáteční").
Druhá část hodnoty pro vlastnost counter-reset je volitelná. Výchozí hodnota je „0“. Toto číslo označuje počáteční bod počítadla. Je důležité si pamatovat, že počítání začíná od další celočíselné hodnoty po resetované hodnotě. Pokud tedy nastavíte hodnotu na „0“, počítadlo začne od „1“. A pokud bylo nastaveno "-5", počítadlo začne od "-4" a tak dále.
Číslované prvky
Druhý reklamní blok (selektor h2) používá pseudoprvek:before k označení, kam by měl být konkrétní obsah umístěn (pomocí vlastnosti content) před všemi cílové prvky(v našem případě se jedná o prvky
).
Zvýšení počítadla
Vlastnost counter-increment označuje, ke kterému kontextu je čítač skutečně přidružen. Takže první hodnota (povinná) je odpovídající název vlastního čítače z vlastnosti counter-reset v ID kontextu z prvního bloku deklarace.
Druhá hodnota vlastnosti counter-increment je volitelná. Představuje částku, o kterou se má počítadlo zvýšit (nebo snížit, pokud jste zadali zápornou hodnotu). Výchozí hodnota je „1“.
Obsah vložky
Pomocí vlastnosti content přesně specifikujeme, co se má vložit před každý prvek v dané sadě (prvky
).
Jedinou požadovanou hodnotou pro vlastnost content je funkce counter(), ale obvykle se před nebo za (viz příklad výše) přidá něco jiného (například mezery), aby počítadlo vypadalo hezky.
funkce counter().
Funkce counter() může mít dva argumenty oddělené čárkou. První argument ukazuje na aktuální hodnotu pojmenovaného čítače. Druhý argument je volitelný a určuje výstupní formát pro hodnotu čítače. Výchozí hodnota je „ desetinný“, ale můžete zadat „ horní římský”, “horní alfa“, a tak dále (stejné jako u vlastnosti typu list-style-type uspořádaného seznamu).
Můžete také použít funkci counters() a uspořádat vnořené čítače, ale v tomto tutoriálu se jimi nebudeme zabývat.
Grafické shrnutí
Pokud se vše výše uvedené zdá komplikované, níže uvedený infogram popisuje základní prvky CSS spinneru:
Podpora a nevýhody prohlížeče
Několik čítačů, které se používají pro stejný kontext (k vytvoření kaskády číslování), musí být deklarováno společně. Následující příklad nebude fungovat:
Div.numbered ( counter-reset: nadpisy 0 ) div.numbered ( counter-reset: subheads 0 )
Uplatní se pouze druhý čítač, protože přepíše předchozí. Oba čítače tedy musí být deklarovány na stejném řádku:
Div.numbered ( counter-reset: nadpisy 0 podnadpisy 0 )
Potenciální nevýhodou používání počítadel je míchání obsahu a prezentace. Toto prohlášení se týká zejména vlastnosti obsahu. Dělící čára mezi obsahem a prezentací je nejasná.
Tři uvedené vlastnosti a pseudoprvek, které popisují funkci čítače CSS, nejsou podporovány v IE verze 7 a novější a mohou mít problémy v IE8, Opeře a Safari. Firefox a Chrome všechny popsané vlastnosti bez problémů podporují.
Výhody a praktické využití
Počítadla CSS mají zjevnou výhodu v tom, že se nemusíte starat o číslování různých bodů v obsahu. Stejně jako uspořádané seznamy nemá obsah žádná reálná čísla. Můžete vkládat položky, odebírat položky, zaměňovat položky a číselné znaky se automaticky opraví.
Několik příkladů praktického použití:
• Pojmenování a číslování kapitol (jako v našem příkladu)
• Číslování řádků tabulky nebo buněk tabulky
• HTML číslování záhlaví
• Vylepšete/změňte vzhled nebo zvýšení hodnoty pro běžné uspořádané seznamy
Lze použít čítače CSS?
Vzhledem k tomu, že nejsou podporovány v IE6 a IE7, neměli byste pro klientské weby používat čítače CSS, případně za ně musíte hledat vhodnou náhradu. Ale pro weby a aplikace zaměřené na techničtější publikum (například web pro použití na mobilních zařízeních, jejichž prohlížeče podporují CSS3), mohou být takové čítače efektivním způsobem, jak vytvořit systém pro číslování bodů obsahu bez použití kódování.
Podívejte se na ukázkovou stránku pro příklad použití CSS čítačů pro nadpisy.
Čítače jsou identifikovány pomocí identifikátorů (další informace naleznete v části o čítačích, které obsahují informace o vlastnostech přírůstku čítače a resetování čítače). Hodnota čítače je identifikátor;
Posloupnost vnořených čítačů je označena takto: "čítače( , )" nebo "počítadla ( , , )".
V CSS2 lze hodnotu čítačů nastavit pomocí vlastnosti "content". Je přijatelné použít none jako hodnotu vlastnosti "content", která je ekvivalentní prázdnému seznamu.
Následující příklad vytvoří styl, ve kterém jsou očíslované prvky "P" pro každý prvek "H1", přičemž každý odstavec je očíslován římskými číslicemi, za nimiž následuje tečka a mezera.
1.
2.	H1 (counter-reset: par-num)
3.	P:before (content: counter(par-num, upper-roman) ".")
4.
Čítač, který překročí limity stanovené pro něj parametrem "counter-reset", se vynuluje a získá hodnotu 0
Čítače se vytvářejí pomocí následujících doplňkových funkcí čítač(název) nebo čítač(název, styl). Název – znamená název počítadla, styl – typ číslování (všechny typy se nastavují podle vlastnosti list-style-type)
1.
2.
3.
4.
5.
10.
11.
12.
13.	První kapitola
14.	Kapitola dvě
15.	Kapitola třetí
16.	Kapitola čtyři
17.
18.
19.
20.
Automatické číslování v CSS2 je vytvořeno pomocí automatického obsahu (vlastnost content) kromě vlastností counter-reset a counter-increment.
Zpočátku musí být název počítadla specifikován druhým volitelným parametrem definujícím styl automatického číslování, např.
Automatické číslování v CSS2 je řízeno dvěma vlastnostmi: counter-reset a counter-increment. Counter-reset vytváří podsekce při použití automatického číslování. Tato vlastnost, stejně jako vlastnost counter-increment, může obsahovat název čítače a volitelný přírůstek jako hodnotu.
1.
2.
3.
4.
5.
19.
20.
21.	Kapitola
22.	Podsekce
23.	Náš charakter je výsledkem našeho chování.
24.	Kapitola
25.	Podsekce
26.	Není nic patetičtějšího
27.	a velkolepější než člověk.
28.	Podsekce
29.	Mezi všemi druhy tvorů, kteří dýchají a chodí,
30.	zde, na naší zemi, je člověk nanejvýš politováníhodný.
31.	Podsekce
32.	Všude, kde je člověk
33.	je tu prostor pro dobré skutky.
34.
35.
36.
Od autora: V tomto krátkém článku se seznámíme s CSS čítači – užitečnou, ale zatím nepříliš známou vlastností. Po našem demu se podíváme na reálné příklady webů, které používají čítače CSS.
Hlavní úkol: stylizace číslovaného seznamu
Nejprve se podívejme na to, co bychom měli získat:

Nic složitého, že? Je tu ale malé „ale“: při vytváření značek použijeme sémantické označení a pokud možno se vyvarujeme zbytečných divů a rozpětí. Podívejme se na flexibilní a srozumitelnou metodu!
CSS čítače
Chcete-li vytvořit tuto šablonu, stačí vytvořit číslovaný seznam. Zde byste mohli říci „je možné vzít další prvek nebo dokonce ne seznam“. Odpověď je ano, ale musíme si uvědomit, že pouze očíslovaný seznam přesně popisuje strukturu naší stránky.
Druhá otázka bude pravděpodobně znít: „Je možné to úplně předělat vzhled seznam čísel? Stylizace číslovaného seznamu je poměrně obtížný úkol, ale naštěstí existuje i jiný způsob použití napříč prohlížeči. Skryjme tedy čísla seznamu a použijme čítače CSS.
Syntax
Pomocí CSS čítačů můžete generovat čísla na základě opakujících se prvků a upravovat je. Představte si čítače jako proměnné, jejichž hodnoty lze zvyšovat. Podívejme se na základní syntaxi:

Vytvoření nového počítadla. Obrázek výše ukazuje, jak vytvořit počítadlo pro číslovaný seznam a nastavit jeho rozsah. Použili jsme vlastnost counter-reset.
První hodnota je název čítače
Následuje volitelný parametr, který určuje počáteční bod čítače (výchozí 0). Upozorňujeme, že počítadlo vždy načítá, tzn. naše první hodnota bude 1.

Stylizace podřízené prvky. Na druhém obrázku můžete vidět, že přidáváme styly pro pseudotřídu ::before na prvek seznamu li.
Vlastnost content byla nastavena na hodnotu. Pomocí CSS čítačů s vlastností content můžeme vygenerovaná čísla zřetězit s řetězci.
Je uveden název počítadla
A typ je nastaven na desítkové ( desítková soustava zúčtování). Kladné hodnoty jsou stejné jako hodnoty pro vlastnosti typu list-style.
Ve vlastnosti counter-increment opět uvedeme název čítače
Potom můžete volitelně zadat krok přírůstku. Výchozí hodnota je 1.
Označení
Na základě výše uvedeného bude označení vypadat takto:
1. Položka seznamu

   Nějaký text zde.

2. Položka seznamu

   Nějaký text zde.

<-- еще элементы списка -->
< ol > < li > < h4 >Položka seznamu< / h4 > < / li > < li > < h4 >Položka seznamu< / h4 > < / li > < -- ещеэлементысписка-- > < / ol >
ol ( counter-reset: section; ) li ( list-style-type: none; font-size: 1.5rem; padding: 30px; margin-bottom: 15px; background: #0e0fee; color: #fff; ) li:: před ( content: counter(section); counter-increment: section; display: inline-block; position: absolute; left: -75px; top: 50%; transform: translateY(-50%); padding: 12px; font- velikost: 2rem výška: 25px; barva: #000;
ol ( reset počítadla : sekce ; li ( seznam - styl - typ : žádný ; velikost písma: 1,5rem; výplň: 30px; okraj - dole: 15px; pozadí : #0e0fee; barva : #fff; li::před( obsah: pult(sekce); čítač - přírůstek : sekce ; zobrazení: inline - blok; pozice: absolutní; vlevo : - 75px ; horní: 50 %; transformace: translateY(-50%); výplň: 12px; velikost písma: 2rem; šířka: 25px; výška: 25px; Omezení Je důležité si uvědomit, že pseudotřídy nejsou v tuto chvíli 100% dostupné. Abych to zjistil, provedl jsem rychlý test: Nainstaloval jsem NVDA a otevřel demo z Chrome 50, Firefox 45 a internet Explorer 11. Zjistil jsem, že při používání Internet Exploreru nebude Narrator mluvit generovaný obsah. V tuto chvíli většina čtečky obrazovky takový obsah normálně rozpoznat. Abyste však pochopili, co lze pomocí pseudoprvků generovat a co nikoli, musíte tato omezení jednoduše znát. Příklady CSS čítačů Probrali jsme základy práce s čítači CSS a nyní si můžeme ukázat pár příkladů jejich potenciálního využití. Za prvé, CSS čítače se často používají v online verzích novin. Často budou umístěny v postranních panelech: CSS čítače lze také použít v částech, kde jsou popsány určité kroky nebo je naznačen směr akce. Příklady: Příklady s extra HTML kódem Výše jsme uvedli dva příklady online verzí publikací, které používají čítače CSS. Nyní se podívejme na další dva příklady, ale nyní místo čítačů používáme redundantní HTML kód (i když je obsah dostupný): Závěr V tomto krátkém článku jsme se naučili stylizovat číslované seznamy pomocí čítačů CSS. Shrnout: Počítadla CSS jsou ideální pro jakýkoli projekt s dynamickými číslovanými seznamy a vlastní styly. nicméně tato metoda není 100% k dispozici. Je potřeba tomu rozumět slabé stránky a používejte pouze ve vhodných případech. Chcete-li vytvořit čítač, musíte nastavit dvě vlastnosti (counter-reset, counter-increment) a jednu funkci (counter() nebo counters())). Čítač se zobrazuje pomocí pseudoprvku. Operace čítače zahrnuje vlastnost content a je přístupná pouze pod pseudoprvkem. Použili jste někdy ve svých projektech čítače CSS? Pokud ano, neváhejte se o svou práci podělit!
CSS čítače umožňují upravit vzhled obsahu na základě jeho umístění v dokumentu. Počítadla můžete například použít k automatickému číslování nadpisů na webové stránce. Čítače jsou v podstatě proměnné spravované CSS, jejichž hodnoty mohou být zvyšovány pravidly CSS, aby bylo možné sledovat, kolikrát jsou použity.
Pomocí čítačů
Manipulace s hodnotou počítadla
Chcete-li použít čítač CSS, musí být nejprve inicializován na hodnotu s vlastností counter-reset (ve výchozím nastavení 0). Stejnou vlastnost lze také použít ke změně její hodnoty na libovolné konkrétní číslo. Po inicializaci lze hodnotu čítače zvýšit nebo snížit s přírůstkem čítače. Název čítače nesmí být „žádný“, „dědit“ nebo „počáteční“; jinak je deklarace ignorována.
Zobrazení počítadla
Hodnotu čítače lze zobrazit pomocí funkce counter() nebo counters() ve vlastnosti content.
Funkce counter() má dvě podoby: "counter(name)" nebo "counter(name , style)". Vygenerovaný text je hodnota nejvnitřnějšího čítače daného jména v rozsahu na daném pseudoprvku. Je naformátován v zadaném stylu (ve výchozím nastavení v desítkové soustavě).
Funkce counters() má také dvě podoby: "counters(name , string)" nebo "counters(name , string , style)". Vygenerovaný text je hodnota všech čítačů s daným názvem v rozsahu v daném pseudoprvku, od nejvzdálenějších po nejvnitřnější, oddělených zadaným řetězcem. Čítače jsou vykresleny v uvedeném stylu (ve výchozím nastavení v desítkové soustavě).
Základní příklad
Tento příklad přidá na začátek každého nadpisu „Sekce:“.
CSS
body ( counter-reset: section; /* Nastaví čítač s názvem "section" a jeho počáteční hodnota je 0. */ ) h3::before ( counter-increment: section; /* Zvýší hodnotu čítače sekce o 1 * / content: counter(section /* Zobrazení hodnoty čítače sekce */ )
HTML
Úvod
Tělo
Závěr
Výsledek
Hnízdní čítače
Počítadlo CSS může být zvláště užitečné pro vytváření přehledových seznamů, protože v podřízených prvcích se automaticky vytvoří nová instance čítače. Pomocí funkce counters() lze vložit oddělovací text mezi různé úrovně vnořených čítačů.
Příklad vnořeného čítače
CSS
ol ( counter-reset: section; /* Vytvoří novou instanci čítače sekcí s každým prvkem ol */ list-style-type: none; ) li::before ( counter-increment: section; /* Zvýší pouze tuto instanci počítadla sekcí */ obsah: čítače(sekce, ".") " " /* Kombinuje hodnoty všech výskytů počítadla sekcí oddělené tečkou */ )
HTML
1. položka
2. položka
   1. položka
   2. položka
   3. položka
      1. položka
      2. položka
      1. položka
      2. položka
      3. položka
   4. položka
3. položka
4. položka
1. položka
2. položka



Oblíbené v kategorii:

Jak sloučit vrstvy ve Photoshopu do jedné nebo je spojit do skupiny...
číst

Přenos kontaktů do nového telefonu Android
číst

Samsung Galaxy se sám restartuje – řešení Galaxy Note...
číst

Klíčové vlastnosti Kaspersky Rescue Disk
číst