Naučit CSS: Kompletní Průvodce

vytvořili Jsme kompletní průvodce, aby vám pomohou naučit CSS, ať už jste právě začali se základy, nebo chcete prozkoumat více pokročilé CSS.

CSS Selektory

Takže jste se naučili základní id class descendant voliče—a pak nazval to den? Pokud ano, přicházíte o obrovskou úroveň flexibility. Dlužíte si, že tyto pokročilé CSS a CSS3 selektory odevzdáte do paměti.

základní selektory

1., *

* { margin: 0; padding: 0;}

pojďme zaklepat ty zřejmé, pro začátečníky, než přejdeme k pokročilejším selektorům.

symbol hvězdy se zaměří na každý jednotlivý prvek na stránce. Mnoho vývojářů použije tento trik k nulování margins a padding. I když je to určitě v pořádku pro rychlé testy, Radil bych vám, abyste to nikdy nepoužívali ve výrobním kódu. Přidává příliš velkou váhu v prohlížeči a je zbytečná.

* lze také použít s dětskými selektory.,

#container * { border: 1px solid black;}

Tento se zaměří na každý prvek, který je dítě #container div. Opět se snažte tuto techniku nepoužívat, pokud vůbec.

2. #X

#container { width: 960px; margin: auto;}

Prefixování hash symbolu na volič nám umožňuje cílit id. To je snadno nejběžnější použití; nicméně, buďte opatrní při použitíid selektory.,

Zeptejte se sami sebe: opravdu potřebuji použít id tohoto prvku v pořádku do cíle?

id selektory jsou tuhé a neumožňují opětovné použití. Pokud je to možné, nejprve zkuste použít název značky, jeden z nových prvků HTML5 nebo dokonce pseudo-třídu.

3. .X

.error { color: red;}

jedná se o class selector. Rozdíl mezi idclasses je to, že druhé, můžete cílit na více prvků., Použijte classes, pokud chcete, aby se váš styl vztahoval na skupinu prvků. Alternativně použijte id s k nalezení jehly v kupce sena a styl pouze tohoto specifického prvku.

4. X

a { color: red; }ul { margin-left: 0; }

Co když chcete cílit na všechny prvky na stránce, podle jejich type, nikoli id nebo classjméno? Udržujte to jednoduché a použijte volič typu. Pokud potřebujete cílit na všechny neuspořádané seznamy, použijte ul {}.,

živé Demo základních selektorů

Kombinátorové selektory

5. X y

li a { text-decoration: none;}

dalším nejčastějším voličem je descendant volič. Když potřebujete být konkrétnější se svými selektory, použijete je. Například, co když, spíše než cílení na všechny kotevní značky, stačí zaměřit kotvy, které jsou v neuspořádaném seznamu? To je konkrétně, když byste použili volič potomků.

Pro-tip: Pokud váš volič vypadá jako X Y Z A B.error, děláte to špatně., Vždy se zeptejte sami sebe, zda je naprosto nezbytné použít celou tuto váhu.

6. X + Y

ul + p { color: red;}

toto se označuje jako sousední volič. Vybere pouze prvek, kterému bezprostředně předchází bývalý prvek. V tomto případě bude mít červený text pouze první odstavec po každém ul.

7., X > Y

div#container > ul { border: 1px solid black;}

rozdíl mezi standardní X Y X > Y je, že tento bude vybrat pouze přímý děti. Zvažte například následující označení.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

volič #container > ul bude pouze cíl uly, které jsou přímé potomky div id container., Nebude se zaměřovat například na ul to je dítě prvního li.

z tohoto důvodu existují výhody výkonu při používání dětského kombinátoru. Ve skutečnosti se doporučuje zejména při práci s JavaScript na bázi CSS voliče motorů.

8. X ~ Y

ul ~ p { color: red;}

Tento sourozenec combinator je podobný X + Y, ale to je méně přísná., Zatímco sousední volič (ul + p) vybere pouze první prvek, kterému bezprostředně předchází bývalý volič, tento je zobecněn. Vybere, s odkazem na náš příklad výše, libovolné prvky p, pokud budou následovat ul.

živé Demo kombinačních selektorů

selektorů atributů

9. X

a { color: green;}

označovány jako atributy voliče, v našem příkladu výše, bude vybrat pouze tagy, které mají title atribut., Kotevní značky, které neobdrží tento konkrétní styl. Ale co když potřebujete být konkrétnější? Podívejte se na další příklad!

10. X

a { color: #83b348; /* Envato green */}

úryvku výše bude styl všechny tagy, které odkaz na https://code.tutsplus.com; budou přijímat naše značkové zelené barvy. Všechny ostatní kotevní značky zůstanou nedotčeny.

Všimněte si, že balíme hodnotu v uvozovkách. Nezapomeňte to také provést při použití JavaScript CSS selector engine. Pokud je to možné, vždy používejte selektory CSS3 nad neoficiálními metodami.,

to funguje dobře, i když je to trochu tuhé. Co když odkaz skutečně směřuje k Envato Tuts+, ale možná je cesta code.tutsplus.com spíše než plné URL? V těchto případech můžeme použít trochu syntaxe regulárních výrazů.

11. X

a { color: #83b348; /* Envato green */}

tam jdeme; to je to, co potřebujeme. Hvězda označuje, že hodnota postupu se musí objevit někde v hodnotě atributu. Tímto způsobem se to vztahuje tutsplus.com, code.tutsplus.com, a dokonce webdesign.tutsplus.com.

mějte na paměti, že se jedná o široké prohlášení., Co když je kotevní značka spojena s některým webem Non-Envato s řetězcem tutsplus v URL? Pokud potřebujete být konkrétnější, použijte ^ a $ pro odkaz na začátek a konec řetězce.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

někdy zajímalo, jak některé webové stránky jsou schopny zobrazit malou ikonu vedle odkazů, které jsou externí? Jsem si jistý, že jste je viděli dříve; jsou to pěkné připomenutí, že odkaz vás nasměruje na zcela jiný web.

jedná se o cinch se symbolem karátu., Nejčastěji se používá v regulárních výrazech k označení začátku řetězce. Pokud chceme, aby zaměřit se na všechny tagy, které mají href, které začíná s http, můžeme použít volič podobný úryvek je uvedeno výše.

Všimněte si, že nehledáme , to je zbytečné, a nemá účet pro adresy Url, které začínají

Nyní, co kdybychom chtěli namísto styl všechny kotvy, které odkazují na, řekněme, foto?, V těchto případech hledejme konec řetězce.

13. X

a { color: red;}

opět používáme symbol regulárních výrazů, $, odkazující na konec řetězce. V tomto případě hledáme všechny kotvy, které odkazují na obrázek-nebo alespoň URL, která končí .jpg. Mějte na paměti, že to nezachytí obrázky GIF a PNG.

14. X

a { color: red;}

jak kompenzujeme všechny různé typy obrázků?, Mohli bychom vytvořit více selektorů, například:

a,a,a,a { color: red;}

ale to je bolest a je to neefektivní. Dalším možným řešením je použití vlastních atributů. Co kdybychom přidali vlastní atribut data-filetype ke každé kotvě, která odkazuje na obrázek?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

pak, s tímto háčkem na místě, můžeme použít standardní volič atributů k cílení pouze na tyto kotvy.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

zde je speciální, který zapůsobí na vaše přátele. O tomto triku neví příliš mnoho lidí., Symbol tilde (~) nám umožňuje cílit na atribut, který má seznam hodnot oddělených mezerou.

spolu s naší vlastní atribut z čísla 15, výše, můžeme vytvořit data-info atribut, který může přijímat prostor oddělený seznam všechno, co potřebujeme, aby se vědomí. V tomto případě si všimneme externích odkazů a odkazů na obrázky—jen pro příklad.,

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

S tím, že značky na místě, teď se můžeme zaměřit na všechny tagy, které mají některou z těchto hodnot, pomocí ~ atributy volič trik.

docela šikovný, co?

živé Demo selektorů atributů

Pseudo selektorů

16. X:navštívil a X:link

a:link { color: red; }a:visited { color: purple; }

použijeme :link pseudo-třída zaměřit se na všechny tagy, které mají zatím být klikli.,

Případně, máme také :visited pseudo třídy, který, jak se dalo čekat, nám umožňuje aplikovat na konkrétní styl pouze tagy na stránce, které byly klikli na, nebo „navštívil“.

17. X: zaškrtnuto

input:checked { border: 1px solid black;}

tato pseudo třída se zaměří pouze na prvek uživatelského rozhraní, který byl zaškrtnut—jako tlačítko rádia nebo zaškrtávací políčko. Je to tak jednoduché.

18. X:po

before after pseudo-třídy jsou skvělé., Každý den se zdá, že lidé hledají nové a kreativní způsoby, jak je efektivně využívat. Jednoduše generují obsah kolem vybraného prvku.

mnoho z nich bylo poprvé představeno těmto třídám, když se setkali s hackerem clear-fix.

Tento hack používá třídu :after pseudo k připojení mezery za prvkem a jeho vymazání. Je to vynikající trik, který máte v tašce na nářadí, zejména v případech, kdy metoda overflow: hidden; není možná.

pro další kreativní použití se podívejte na můj rychlý tip na vytváření stínů.,

Podle CSS3 Selektory specifikací, ty by technicky použít pseudo element syntaxe dvě dvojtečky ::. Chcete-li však zůstat kompatibilní, uživatelský agent přijme také jedno použití dvojtečky.

19. X: hover

div:hover { background: #e3e3e3;}

Oh No tak. Tuhle znáš. Oficiálním termínem je „pseudo třída akce uživatele“. Zní to matoucí, ale opravdu není. chcete použít konkrétní styl, když se uživatel vznáší nad prvkem? To bude mít práci!,

Mějte na paměti, že starší verze aplikace Internet Explorer, nechci reagovat, když :hover pseudo třída je použita na něco jiného, než kotva tag.

Budete nejčastěji používat tento volič při použití, například border-bottom tagy, když se vznášel nad.

a:hover { border-bottom: 1px solid black;}

Pro-tip: border-bottom: 1px solid black; vypadá lépe než text-decoration: underline;.

20., X: ne (volič)

div:not(#container) { color: blue;}

pseudo třída negace je zvláště užitečná. Řekněme, že chci vybrat vše divs, s výjimkou toho, který má id container. Úryvek výše bude tento úkol dokonale zvládat.

nebo, pokud jsem chtěl vybrat každý jednotlivý prvek (nedoporučuje se) kromě značek odstavců, mohli bychom udělat:

*:not(p) { color: green;}

21., X::pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

můžeme používat pseudo prvky (určený pomocí ::) styl fragmenty prvek, jako je první řádek nebo první písmeno. Mějte na paměti, že tyto musí být použity pro prvky blokové úrovně, aby se projevily.,

pseudo-prvek je složen ze dvou dvojteček: ::

Cíl První Písmeno Odstavce

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Tento úryvek je abstrakce, která bude najít všechny odstavce na stránce, a pak dílčí cíl pouze první písmeno tohoto prvku.

toto se nejčastěji používá k vytvoření novinového stylu pro první písmeno článku.,

Cíl První Řádek Odstavce

p::first-line { font-weight: bold; font-size: 1.2em;}

Podobně ::first-line pseudo element bude, jak se dalo očekávat, styl prvního řádku prvku.

„Pro kompatibilitu s existující styl listů, uživatelské agenty, musí rovněž akceptovat předchozí-tlustého střeva zápis pro pseudo-prvky zavedené v CSS úrovně 1 a 2 (tj. :first-line :first-letter :before :after). Tato kompatibilita není povolena pro nové pseudo-prvky uvedené v této specifikaci.,“- W3C selektory SPECIFIKACE

živé Demo Pseudo selektorů

Nth dítě a typ selektory

22. X: nth-child (n)

li:nth-child(3) { color: red;}

nezapomeňte na dny, kdy jsme neměli způsob, jak zacílit na konkrétní prvky v zásobníku? nth-child pseudo Třída to řeší!

vezměte Prosím na vědomí, že nth-child přijímá celé číslo jako parametr, ale to není na nule. Pokud chcete cílit na druhou položku seznamu, použijte li:nth-child(2).

můžeme dokonce použít k výběru proměnné sady dětí., Například bychom mohli udělat li:nth-child(4n) pro výběr každé čtvrté položky seznamu.

23. X:nth-last-child(n)

li:nth-last-child(2) { color: red;}

Co kdyby jste měli obrovský seznam položek v ul a ty jen potřebné pro přístup k, řekněme, třetí na poslední položce? Spíše než dělat li:nth-child(397), můžete místo toho použít nth-last-child pseudo třídy.

tato technika funguje téměř shodně s číslem 16 výše. Rozdíl je v tom, že začíná na konci sbírky a pracuje zpět.

24., X:nth-of-type(n)

ul:nth-of-type(3) { border: 1px solid black;}

Tam bude chvíle, kdy, spíše než výběru child, místo toho je třeba vybrat podle type elementu.

Představte si značku, která obsahuje pět neuspořádaných seznamů. Pokud byste chtěli, aby styl teprve třetí ul, a neměl jedinečný id hák do, můžete použít nth-of-type(n) pseudo třídy. Ve výše uvedeném úryvku bude mít kolem něj ohraničení pouze třetí ul.

25., X:nth-last-of-type(n)

ul:nth-last-of-type(3) { border: 1px solid black;}

A ano, zůstat konzistentní, můžeme také použít nth-last-of-type začít na konci selektory seznamu a práci si cestu zpět do cíle požadovaný prvek.

26. X: první dítě

ul li:first-child { border-top: none;}

tato strukturální pseudo třída nám umožňuje zaměřit se pouze na první dítě rodiče prvku. Často to použijete k odstranění okrajů z prvních a posledních položek seznamu.

například, řekněme, že máte seznam řádků, a každý z nich má border-top border-bottom., S tímto uspořádáním bude první a poslední položka v této sadě vypadat trochu divně.

Mnozí návrháři použít třídy first last kompenzovat. Místo toho můžete použít tyto pseudo třídy.

27. X:last-child

ul > li:last-child { color: green;}

naopak first-child last-child cíl poslední položka z elementu rodič.

last-child Volič Příklad:

Pojďme vytvořit jednoduchý příklad ukazuje jeden z možných využití těchto tříd., Vytvoříme stylizovanou položku seznamu.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

pro označení není nic zvláštního: jen jednoduchý seznam.

Tady je CSS:

Tento styl bude nastavit pozadí, odstranit výchozí prohlížeč polstrování na ul, a aplikovat hranice, aby každý li poskytnout trochu hloubky.

přidat hloubku pro vaše seznamy, použít border-bottom li, který je o odstín či dva tmavší, než je li‚barva pozadí., Dále použijte border-top což je o několik odstínů světlejší.

jediný problém, jak je znázorněno na obrázku výše, je, že hranice bude použita na velmi horní a dolní části nečíslovaný seznam—což vypadá divně. Pro opravu použijte:first-child a:last-child pseudo třídy.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

tam jdeme; to to opravuje!

28., X: only-child

div p:only-child { color: red;}

pravdivě se pravděpodobně nenajdete pomocíonly-child pseudo class příliš často. Nicméně, je k dispozici, pokud ji potřebujete.

umožňuje cílit na prvky, které jsou jediným dítětem jeho rodiče. Například s odkazem na výše uvedený úryvek bude pouze odstavec, který je jediným dítětem div, zbarven červeně.

předpokládejme následující značení.,

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

V tomto případě, druhý div‚s body nebude cílené; pouze první div. Jakmile na prvek použijete více než jedno dítě, přestane platit pseudo třída only-child.

29. X: pouze typu

li:only-of-type { font-weight: bold;}

tato strukturální pseudo třída může být použita několika chytrými způsoby. Zaměří se na prvky, které v mateřském kontejneru nemají žádné sourozence. Jako příklad se zaměřme na všechny uls, které mají pouze jednu položku seznamu.,

nejprve se zeptejte sami sebe, jak byste tento úkol splnili. Můžete to udělat ul li, ale to by se zaměřilo na všechny položky seznamu. Jediným řešením je použití only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: první typ

first-of-type pseudo třída umožňuje vybrat první sourozence svého typu.

Test

abychom to lépe porozuměli, pojďme si vyzkoušet. Zkopírujte následující značku do editoru kódu:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

nyní se bez dalšího čtení pokuste zjistit, jak cílit pouze na „položku seznamu 2“., Když jste na to přišli(nebo se vzdali), přečtěte si.

řešení 1

existuje celá řada způsobů řešení tohoto testu. Přezkoumáme jich několik. Začněme pomocí first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

tento úryvek v podstatě říká, najít první neuspořádaný seznam na stránce, pak najít pouze bezprostřední děti, které jsou položky seznamu. Dále to filtrujte pouze na druhou položku seznamu v této sadě.

řešení 2

Další možností je použít sousední volič.,

p + ul li:last-child { font-weight: bold;}

V tomto případě, musíme najít ul, který okamžitě výnosy p tag, a pak najít to poslední dítě prvku.

Řešení 3

s těmito selektory můžeme být stejně nepříjemní nebo hraví, jak chceme.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

tentokrát uchopíme první ul na stránce a pak najdeme první položku seznamu, ale začínající od dna!,

živé Demo Nth Child a Type Selectors

závěr

Pokud kompenzujete starší prohlížeče, jako je Internet Explorer 6, musíte být při používání těchto novějších selektorů stále opatrní. Ale prosím, nenechte se odradit od učení těchto. Udělal bys pro sebe obrovskou službu. Nezapomeňte se zde podívat na seznam kompatibility prohlížeče. Případně můžete použít vynikající IE9 Deana Edwarda.JS script přinést podporu pro tyto selektory do starších prohlížečů.,

Zadruhé, při práci s knihovnami JavaScriptu, jako je populární jQuery, se vždy pokuste použít tyto nativní selektory CSS3 nad vlastními metodami/selektory knihovny, pokud je to možné. Bude to váš kód rychlejší, protože volič motor může používat nativní analýzu prohlížeče, spíše než jeho vlastní.

je skvělé, že trávíte čas učením základů webového designu, ale pokud potřebujete rychlé řešení, může být jednou z našich připravených šablon CSS dobrou volbou. Máme také několik prémiových položek CSS, které můžete zvážit.,

• CSS3
  12 Elegantní CSS Ceny Tabulky pro Svůj Nejnovější Web Projektu
  Monty Shokeen
• Bootstrap 4
  18 Nejlepší Bootstrap 4 Pluginy
  Monty Shokeen

Volný Přístup na Envato Prvků na 1 Měsíc

a Konečně, tady je velmi speciální nabídku, aby vám pomohou vytvořit profesionálně vypadající stránky a aplikace. Stejně jako použití těchto selektorů CSS, proč nevyužít vysoce kvalitních fotografií, videozáznamů, prémiových písem, grafiky, ilustrací a dalších?,

normálně byste museli platit za takové zdroje. Ale právě teď, můžete přistupovat k milionům kreativních aktiv pro vaše kódovací projekty po celý měsíc, zcela zdarma. A co víc, získáte neomezené stahování, takže během tohoto měsíce můžete chytit tolik, kolik chcete, a platit pouze tehdy, pokud se rozhodnete pokračovat!,

Chcete využít této nabídky, klikněte na tento zvláštní registrační odkaz nebo zadejte níže uvedený kód na registrační stránce:

elements_cont_tuts-freemonth1-4bwkbp

nemusíte čekat příliš dlouho—nabídka je platná pouze po omezenou dobu!