Learn CSS: A teljes útmutató

építettünk egy teljes útmutató, hogy segítsen megtanulni CSS, akár csak most kezdődött el az alapokat, vagy szeretné felfedezni fejlettebb CSS.

CSS-szelektorok

tehát megtanultad a bázist id, class, és descendant szelektorok—majd egy napnak nevezted? Ha igen, akkor hiányzik egy hatalmas szintű rugalmasság. Tartozol magadnak azzal, hogy ezeket a fejlett CSS és CSS3 kiválasztókat a memóriába helyezd.

Alapválasztók

1., *

* { margin: 0; padding: 0;}

kopogtassuk ki a nyilvánvalókat a kezdőknek, mielőtt továbblépnénk a fejlettebb szelektorokra.

a csillag szimbólum az oldal minden egyes elemét megcélozza. Sok fejlesztő használja ezt a trükköt, hogy nullázza ki a margins és padding. Bár ez minden bizonnyal rendben van a gyors tesztekhez, azt tanácsolom, hogy soha ne használja ezt a gyártási kódban. Túl nagy súlyt ad a böngészőnek, szükségtelen.

a * gyermekválasztókkal is használható.,

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

Ez minden olyan elemet megcéloz, amely a #container div. Ismét próbáld meg nem nagyon használni ezt a technikát, ha valaha is.

2. #X

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

a hash szimbólum előválasztása lehetővé teszi a id cél elérését. Ez könnyen a leggyakoribb használat; azonban legyen óvatos, ha aid választókat használja.,

kérdezd meg magadtól: feltétlenül alkalmaznom kell egy id – ot erre az elemre a cél érdekében?

id a szelektorok merevek, és nem teszik lehetővé az újrafelhasználást. Ha lehetséges, először próbáljon meg címkét használni, az egyik új HTML5 elemet, vagy akár pszeudo-osztályt.

3. .X

.error { color: red;}

Ez egy class választó. A különbség a ids és classes között az, hogy az utóbbival több elemet is megcélozhat., Használja a class es értéket, ha azt szeretné, hogy a stílus egy elemcsoportra vonatkozzon. Alternatív megoldásként használja aids-t, hogy tűt találjon a szénakazalban, és csak az adott elemet stílusosítsa.

4. X

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

mi van, ha azt szeretnénk, hogy cél az összes elem egy oldalon, szerint a type, ahelyett, hogy egy id vagy classnév? Tartsa egyszerű, és használja a típusválasztó. Ha az összes rendezetlen listát meg kell céloznia, használja a ul {}parancsot.,

az Alapválasztók élő demója

Kombinátorválasztók

5. X y

li a { text-decoration: none;}

a következő leggyakoribb választó a descendant választó. Ha konkrétabbnak kell lennie a kiválasztókkal, akkor ezeket használja. Például, mi van, ha ahelyett, hogy az összes horgonycímkét célozná meg, csak azokat a horgonyokat kell céloznia, amelyek rendezetlen listán vannak? Ez kifejezetten, ha azt használja a leszármazott választó.

Pro-tip: ha a választó úgy néz ki, mint aX Y Z A B.error, rosszul csinálod., Mindig kérdezd meg magadtól, hogy feltétlenül szükséges-e ezt a súlyt alkalmazni.

6. X + Y

ul + p { color: red;}

ezt szomszédos választónak nevezik. Csak azt az elemet választja ki, amelyet közvetlenül az előző elem előz meg. Ebben az esetben csak az első bekezdés után minden ul lesz piros szöveg.

7., X > Y

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

a különbség a standardX YésX > Y között az, hogy ez utóbbi csak közvetlen gyermekeket választ. Vegyük például a következő jelölést.

 <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>

a #container > ul választója csak a uls-t célozza meg, amelyek a div of container., Nem célozza meg például a ul ez az első ligyermeke.

emiatt a gyermek kombinátor használata teljesítménybeli előnyökkel jár. Valójában ez különösen akkor ajánlott, ha JavaScript-alapú CSS választómotorokkal dolgozik.

8. X ~ Y

ul ~ p { color: red;}

Ez a testvér kombinátor hasonló a X + Y, de kevésbé szigorú., Míg egy szomszédos választó (ul + p) csak az első elemet választja ki, amelyet közvetlenül megelőz a korábbi választó, ez általánosabb. A fenti példánkra hivatkozva minden p elemet választ, mindaddig, amíg a ulértéket követik.

Kombinátorválasztók élő demója

Attribútumválasztók

9. X

a { color: green;}

attribútumválasztónak nevezik, a fenti példánkban ez csak azokat a horgonycímkéket választja ki, amelyek title attribútummal rendelkeznek., Horgonycímkék, amelyek nem kapják meg ezt a stílust. De mi van, ha konkrétabbnak kell lenned? Nézze meg a következő példát!

10. X

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

a fenti részlet minden horgonycímkét stílusosít, amelyek a https://code.tutsplus.com – hoz kapcsolódnak; megkapják a márkás zöld színünket. Az összes többi horgonycímke változatlan marad.

vegye figyelembe, hogy az értéket idézőjelekbe csomagoljuk. Ne feledje, hogy ezt is megteheti, ha JavaScript CSS választó motort használ. Ha lehetséges, mindig használja a CSS3 kiválasztókat nem hivatalos módszerekkel.,

Ez jól működik, bár kissé merev. Mi van, ha a link valóban közvetlenül az Envato Tuts+ – ra irányul, de talán az út code.tutsplus.com a teljes URL helyett? Ezekben az esetekben, tudjuk használni egy kicsit a reguláris kifejezések szintaxis.

11. X

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

ott megyünk; erre van szükségünk. A csillag azt jelzi, hogy az eljárás értékének valahol meg kell jelennie az attribútum értékében. Így, ez magában foglalja tutsplus.com, code.tutsplus.com, sőt webdesign.tutsplus.com.

ne feledje, hogy ez egy széles kijelentés., Mi van akkor, ha a horgonycímke kapcsolódik néhány nem Envato Webhelyhez a tutsplus karakterlánccal az URL-ben? Ha konkrétabbnak kell lennie, használja a ^ és $ hivatkozást egy karakterlánc elejére és végére.

12. X

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

valaha csoda, hogy egyes weboldalak képesek megjeleníteni egy kis ikon mellett a linkek, amelyek a külső? Biztos vagyok benne, hogy látta ezeket korábban; ezek szép emlékeztetők, hogy a link egy teljesen más weboldalra irányítja Önt.

Ez egy cinch a karát szimbólummal., Ez a leggyakrabban használt reguláris kifejezések, hogy kijelölje az elején egy string. Ha minden olyan horgonycímkét meg akarunk célozni, amelyek href – vel kezdődnek, amely a http – vel kezdődik, akkor a fent látható részlethez hasonló választót használhatunk.

figyeljük meg, hogy nem keressük a; ez szükségtelen, és nem veszi figyelembe azokat az URL-eket, amelyek

– vel kezdődnek, mi lenne, ha inkább az összes horgonyt stílusoznánk, amelyek egy fotóhoz kapcsolódnak?, Ezekben az esetekben keressük meg a karakterlánc végét.

13. X

a { color: red;}

ismét reguláris kifejezésszimbólumot használunk, $, hogy egy karakterlánc végére utaljunk. Ebben az esetben minden olyan horgonyt keresünk, amely egy képhez kapcsolódik—vagy legalább egy URL-t, amely .jpg – val végződik. Ne feledje, hogy ez nem fog GIF és PNG képeket rögzíteni.

14. X

a { color: red;}

hogyan kompenzáljuk az összes különböző képtípust?, Nos, több kiválasztót is létrehozhatunk, mint például:

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

de ez fájdalom, és nem hatékony. Egy másik lehetséges megoldás az egyéni attribútumok használata. Mi lenne, ha hozzáadnánk a saját data-filetype attribútumunkat minden olyan horgonyhoz, amely egy képhez kapcsolódik?

ezután azzal a kampóval a helyén egy szabványos attribútumválasztót használhatunk, hogy csak azokat a horgonyokat célozzuk meg.

a { color: red;}

15. X

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

itt van egy különleges, amely lenyűgözi barátait. Nem túl sok ember tud erről a trükkről., A tilde (~) szimbólum lehetővé teszi számunkra, hogy egy olyan attribútumot célozzunk meg, amely szóközzel elválasztott értéklistával rendelkezik.

a fenti 15-ös számú egyéni attribútummal együtt létrehozhatunk egy data-info attribútumot, amely egy szóközökkel elválasztott listát kaphat bármiről, amit meg kell jegyeznünk. Ebben az esetben tudomásul vesszük a külső linkeket, linkeket a képekhez—csak a példához.,

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

ezzel a jelöléssel a helyén, most már megcélozhatunk minden olyan címkét, amely rendelkezik ezekkel az értékekkel, a ~ attribútumok választó trükk használatával.

szép remek, mi?

az Attribútumválasztók élő demója

Álválasztók

16. X: visited and X: link

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

a :link álosztályt használjuk az összes olyan horgonycímke megcélzására, amelyre még nem kattintottak.,

Alternatív megoldásként a :visited pszeudo osztály is rendelkezésre áll, amely-ahogy az elvárható-lehetővé teszi számunkra, hogy speciális stílusokat alkalmazzunk az oldalon található horgonycímkékre, amelyekre kattintottak, vagy “meglátogatták”.

17. X: checked

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

Ez a pszeudo osztály csak olyan felhasználói felület elemet céloz meg, amelyet bejelöltek—például egy rádiógombot vagy jelölőnégyzetet. Ez ilyen egyszerű.

18. X: miután

a és after pszeudo osztályok nagyszerűek., Úgy tűnik, hogy az emberek minden nap új és kreatív módszereket találnak arra, hogy hatékonyan használják őket. Egyszerűen tartalmat generálnak a kiválasztott elem körül.

sokan először vezették be ezeket az osztályokat, amikor találkoztak a clear-fix hack.

Ez a hack használja a :after pszeudo osztály hozzáfűzni egy helyet az elem után, majd törölje azt. Ez egy kiváló trükk, hogy a szerszámtáska, különösen azokban az esetekben, amikor a overflow: hidden; módszer nem lehetséges.

ennek egy másik kreatív használatához olvassa el az árnyékok készítésének gyors tippjét.,

a CSS3 szelektorok specifikációja szerint technikailag két Colon :: álelem szintaxisát kell használni. Ahhoz azonban, hogy továbbra is kompatibilis, a felhasználó-ügynök elfogadja egyetlen colon használat is.

19. X: hover

div:hover { background: #e3e3e3;}

Oh ugyan már. Ezt te is tudod. A hivatalos kifejezés erre a “user action pseudo class”. Zavarónak hangzik, de valójában nem. szeretne konkrét stílusokat alkalmazni, amikor egy felhasználó egy elem fölé kerül? Ez meg fogja csinálni a munkát!,

ne feledje, hogy az Internet Explorer régebbi verziói nem válaszolnak, ha a :hover álosztályt nem horgonycímkére alkalmazzák.

ezt a választót leggyakrabban akkor használja, amikor például a border-bottom címkéket rögzít, amikor lebegett.

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

Pro-tip: border-bottom: 1px solid black;jobban néz ki, mint a text-decoration: underline;.

20., X: not (selector)

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

a negation pseudo osztály különösen hasznos. Tegyük fel, hogy ki akarom választani az összes divs, kivéve azt, amelynek azonosítója container. A fenti részlet tökéletesen kezeli ezt a feladatot.

vagy ha minden egyes elemet ki akartam választani (nem ajánlott), kivéve a bekezdéscímkéket, megtehetjük:

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

21., X::pseudoElement

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

használhatjuk pszeudo elem (által kijelölt ::), hogy a stílus töredékek egy elem, például az első sorban, illetve az első levelet. Ne feledje, hogy ezeket a blokkszintű elemekre kell alkalmazni a hatálybalépés érdekében.,

a pszeudo-elem két colonból áll: ::

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

Ez a töredék egy absztrakció, amely megtalálja az összes bekezdést az oldalon, majd csak az elem első betűjét célozza meg.

ezt leggyakrabban újságszerű stílus létrehozására használják egy cikk első betűjéhez.,

célozza meg a

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

Hasonlóképpen a ::first-line pszeudo elem a várakozásoknak megfelelően csak az elem első sorát formázza meg.

“A kompatibilitás a meglévő style sheets, felhasználói ügynökök is el kell fogadniuk, hogy az előző egy-vastagbél jelölés a pszeudo-elemeket vezetett be a CSS-ben a szinten 1, 2 (azaz :first-line, :first-letter, :before vagy :after). Ez a kompatibilitás nem engedélyezett az ebben a specifikációban bevezetett új pszeudo-elemek esetében.,”- W3C Selectors Specs

élő Demo of Pseudo Selectors

Nth Child and Type Selectors

22. X: nth-child (n)

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

emlékszel azokra a napokra, amikor nem volt módunk konkrét elemeket megcélozni egy kötegben? Anth-child pszeudo osztály megoldja ezt!

Felhívjuk figyelmét, hogy anth-child egy egész számot paraméterként fogad el, de ez nem nulla alapú. Ha a második listaelemet szeretné megcélozni, használja a li:nth-child(2)elemet.

ezt akár egy változó gyermekkészlet kiválasztására is felhasználhatjuk., Például megtehetjük ali:nth-child(4n) minden negyedik lista elem kiválasztásához.

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

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

mi lenne, ha lenne egy hatalmas tétellistája a ul – ban, és csak az utolsó elem harmadik eleméhez kellett hozzáférnie? A li:nth-child(397) helyett a nth-last-child pszeudo osztályt használhatja.

Ez a technika szinte azonos a fenti 16-os számmal. A különbség az, hogy a gyűjtemény végén kezdődik, és visszafelé halad.

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

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

lesznek idők, amikor a child kiválasztása helyett az elem type szerint kell választania.

képzelje el a jelölést, amely öt rendezetlen listát tartalmaz. Ha csak a harmadik ul – t akarta stílusosítani, és nem volt egyedi id a bekapcsoláshoz használhatja a nth-of-type(n) pszeudo osztályt. A fenti részletben csak a harmadik ul határ lesz körülötte.

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

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

és igen, ahhoz, hogy konzisztens maradjunk, a nth-last-of-type segítségével a szelektorok listájának végén elkezdhetjük a visszafelé vezető utat a kívánt elem megcélzásához.

26. X: first-child

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

Ez a szerkezeti pszeudoosztály lehetővé teszi számunkra, hogy csak az elem szülőjének első gyermekét célozzuk meg. Ezt gyakran arra használja, hogy eltávolítsa a szegélyeket az első és az utolsó listaelemekből.

például tegyük fel, hogy van egy sorlistád, és mindegyiknek van egy border-top és egy border-bottom., Nos, ezzel az elrendezéssel a készlet első és utolsó eleme kissé furcsának tűnik.

sok tervező a first és last osztályokat alkalmazza ennek kompenzálására. Ehelyett használhatja ezeket a pszeudo osztályokat.

27. X: Last-child

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

a first-child, last-child az elem szülőjének utolsó elemét célozza meg.

last-child választó példa

építsünk egy egyszerű példát ezen osztályok lehetséges használatának bemutatására., Létrehozunk egy stílusú lista elemet.

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

a jelöléshez nincs semmi különös: csak egy egyszerű lista.

itt van a CSS:

Ez a stílus beállítja a háttér, távolítsa el a böngésző alapértelmezett padding a ul, és alkalmazza határok minden li, hogy egy kicsit a mélység.

ha mélységet szeretne hozzáadni a listáihoz, alkalmazzon egy border-bottom mindegyik li ez egy vagy két sötétebb árnyalat, mint a li > ‘s háttér színe., Ezután alkalmazzon egy border-top – t, amely néhány árnyalattal könnyebb.

az egyetlen probléma, amint az a fenti képen látható, az, hogy a szegélyt a rendezetlen lista tetejére és aljára kell alkalmazni—ami furcsának tűnik. A javításhoz használjuk a :first-childés :last-child pszeudo osztályokat.

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

ott megyünk; ez javítja azt!

28., X: only-child

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

valószínűleg nem találja magát a only-child pszeudo osztály túl gyakran. Ennek ellenére elérhető, ha szüksége van rá.

lehetővé teszi, hogy olyan elemeket célozzon meg, amelyek a szülő egyetlen gyermeke. Például a fenti részletre hivatkozva csak az a bekezdés, amely a div egyetlen gyermeke, piros színű lesz.

tegyük fel a következő jelölést.,

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

ebben az esetben a másodikdivbekezdései nem kerülnek célzásra; csak az elsődiv. Amint egynél több gyermeket alkalmaz egy elemre ,aonly-child pszeudo osztály megszűnik.

29. X: csak-típusú

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

Ez a szerkezeti pszeudo osztály használható néhány okos módon. Olyan elemeket céloz meg, amelyeknek nincs testvére a szülőtartályában. Példaként az összes uls-t célozzuk meg, amelyeknek csak egyetlen listaeleme van.,

először kérdezd meg magadtól, hogyan végeznéd el ezt a feladatot. Meg tudná csinálni ul li, de ez az összes listaelemet célozza meg. Az egyetlen megoldás a only-of-typehasználata.

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

30. X: az első típus

afirst-of-type pszeudo osztály lehetővé teszi a típus első testvéreinek kiválasztását.

A Test

ennek jobb megértése érdekében teszteljük. Másolja a következő jelölést a kódszerkesztőbe:

<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>

most, további olvasás nélkül, próbálja meg kitalálni, hogyan lehet csak a “List Item 2” – et célozni., Ha kitalálta (vagy Feladta), olvassa tovább.

1. megoldás

a teszt megoldásának számos módja van. Átnézünk párat. Kezdjük a first-of-typehasználatával.

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

Ez a töredék lényegében azt mondja, hogy megtalálja az első rendezetlen listát az oldalon, majd keresse meg csak a közvetlen gyermekek, amelyek listaelemek. Ezután szűrje le ezt csak a készlet második listaelemére.

2. megoldás

egy másik lehetőség a szomszédos választó használata.,

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

ebben a forgatókönyvben megtaláljuk a ul – t, amely azonnal folytatja a p címkét, majd megtalálja az elem utolsó gyermekét.

3. megoldás

ugyanolyan ellenszenvesek vagy játékosak lehetünk, mint szeretnénk ezekkel a kiválasztókkal.

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

ezúttal megragadjuk az első ul oldalt, majd megtaláljuk az első listaelemet, de alulról kezdve!,

Live Demo n-Edik Gyermek Típus Választók

Következtetés

Ha kompenzálja a régebbi böngészők, mint az Internet Explorer 6, mindig kell, hogy legyen óvatos, amikor ezeket az újabb választók. De kérem, ne hagyja, hogy ez visszatartsa Önt attól, hogy megtanulja ezeket. Hatalmas kárt okoznál magadnak. Feltétlenül olvassa el itt a böngésző-kompatibilitási listát. Alternatív megoldásként használhatja Dean Edward kiváló IE9.js script, hogy támogassa ezeket a kiválasztókat a régebbi böngészők.,

másodszor, amikor JavaScript könyvtárakkal dolgozik, mint például a népszerű jQuery, mindig próbálja meg használni ezeket a natív CSS3 kiválasztókat a könyvtár egyedi módszerein/kiválasztóin, ha lehetséges. Gyorsabbá teszi a kódot, mivel a választómotor a böngésző natív elemzését használhatja, nem pedig a sajátját.

nagyszerű, hogy időt töltesz a webdesign alapjainak megtanulásával, de ha gyors megoldásra van szükséged, az egyik használatra kész CSS Sablon jó lehetőség lehet. Van néhány prémium CSS elem is, amelyet figyelembe kell vennie.,

• CSS3
  12 Elegáns CSS Árképzési Táblázatok A Legújabb Webes Projekt
  Monty Shokeen
• Bootstrap 4
  18 Legjobb Bootstrap 4 Dugó
  Monty Shokeen

Ingyenes Hozzáférést Envato Elemei 1 Hónap

Végre, itt egy nagyon különleges ajánlat, hogy segítsen felépíteni a professzionális oldalak, alkalmazások. Amellett, hogy ezeket a CSS-kiválasztókat használja, miért nem használja ki a kiváló minőségű stock fotókat, videofelvételeket, prémium betűtípusokat, grafikákat, illusztrációkat stb.,

általában ilyen erőforrásokért kell fizetnie. De most, elérheti több millió kreatív eszközök a kódolási projektek egy egész hónapig, teljesen ingyenes. És mi több, korlátlan letöltéseket kapsz, így annyit kapsz, amennyit csak akarsz abban a hónapban, és csak akkor fizetsz, ha úgy döntesz, hogy folytatod!,

az ajánlat kihasználásához kattintson erre a speciális regisztrációs linkre, vagy írja be az alábbi kódot a regisztrációs oldalon:

elements_cont_tuts-freemonth1-4bwkbp

ne várjon túl sokáig—az ajánlat csak korlátozott ideig érvényes!