Numëruesit caktohen nga identifikuesit (shih seksionet në numërues për më shumë informacion mbi vetitë kundër-rritjes dhe kundër-rivendosjes). Identifikuesi përdoret si vlerë numëruesi, vlera e paracaktuar është një numër.

Një sekuencë numëruesish të mbivendosur caktohet si më poshtë: "counters ( , ) numëruesit "ose" ( , , )".

Në CSS2, vlera e numëruesve mund të vendoset përmes vetive "përmbajtje". Lejohet të përdoret asnjë si vlerë e vetive "përmbajtje", e cila është ekuivalente me një listë boshe.

Shembulli i mëposhtëm krijon një stil që numëron elementet "P" për çdo element "H1", secili paragraf i numëruar me numra romakë të ndjekur nga një pikë dhe një hapësirë.

Një numërues që shkon përtej kufijve të vendosur për të nga parametri "kundër-rivendosje" rivendoset dhe bëhet 0

Numëruesit krijohen duke përdorur funksionet e mëposhtme shtesë numëruesi (emri) ose numëruesi (emri, stili). Emri - do të thotë emri i numëruesit, stili - lloji i numërimit (të gjitha llojet përcaktohen sipas vetive të tipit list-style)

Numërimi automatik në CSS2 krijohet duke përdorur përmbajtjen automatike (vetia e përmbajtjes) përveç veçorive kundër-rivendosje dhe kundër-rritje.

Fillimisht, emri i numëruesit duhet të specifikohet me parametrin e dytë opsional që përcakton stilin numërimi automatik, Për shembull

Numërimi automatik në CSS2 kontrollohet nga dy kundër-rivendosje dhe kundër-rritje të vetive. Kundër-rivendosja krijon nënseksione duke përdorur numërimin automatik. Kjo veti, si vetia kundër-rritjes, mund të përmbajë emrin e numëruesit dhe një rritje opsionale si vlerë.

Specifikimi CSS2.1 përmban një teknikë që lejon një zhvillues të kombinojë tre Karakteristikat e CSS dhe një pseudo-element për të krijuar një numërues automatik në rritje, si ai i përdorur në një listë të renditur.

Ndryshe nga numëruesi i listës, i cili vlen vetëm për artikujt

ose
dhe me vetëm një rritje të thjeshtë, metoda e re e organizimit të një numëruesi të prezantuar në CSS2.1 mund të përdoret me çdo grup elementësh dhe ka më shumë fleksibilitet në organizimin e një numërimi.

Kjo metodë mund të jetë konfuze sepse përdor disa veti dhe është e ndryshme nga CSS e zakonshme. Në mësim, ne do të përpiqemi të sqarojmë përdorimin e një numëruesi të tillë dhe të tregojmë avantazhet dhe disavantazhet e tij.

Sintaksë

Kodi i numëruesit CSS duket si ky:

Seksioni i ndarjes (kundër-rivendosja: titujt 0;) h2: përpara (kundër-rritja: titujt 1; përmbajtja: numëruesi i "Kapitullit" (titujt, dhjetorë) ":";)

Siç u përmend, përdoren tre veti CSS: kundër-rivendosje, kundër-rritje dhe përmbajtje. Nëse ndonjë nga vetitë e specifikuara hiqet, metoda nuk do të funksionojë.

Analizimi i sintaksës

Pra, le të kuptojmë sintaksën dhe për çfarë janë çiftet e vetive / vlerës:

Treguesi i kontekstit

Blloku i parë i deklaratave (përzgjedhësi i seksionit të ndarjes) tregon se cili seksion në shënimin përmban grupin e elementeve që do të kenë një vlerë të numrit të plotë që rritet automatikisht. Është e rëndësishme të kuptohet ndryshimi midis deklarimit të këtij blloku dhe atij të ardhshëm. Ky artikull i veçantë (

) nuk do të ketë një numër të plotë numërues paraprak. Është thjesht një "kontejner" ose "kontekst" në të cilin ndodhen artikujt që përdorin sportelin.
Por për kontekstin, duhet të përcaktoni emrin e numëruesit që do të përdoret për elementët e deklaruar në bllokun tjetër.
Rivendos numëruesin
Vetia e kundër-rivendosjes duhet të përdoret së bashku me një përzgjedhës që përcakton kontekstin, siç përshkruhet më sipër. Pjesa e parë e vlerës është një emër i personalizuar që i jepni numëruesit. Kjo është pjesa e kërkuar. Emri mund të jetë çdo gjë tjetër përveç fjalëve të rezervuara CSS (për shembull, nuk mund t'i jepni numëruesit një emër "Asnjë", "trashëgojë", ose "fillestare").
Pjesa e dytë e vlerës për vetinë kundër-rivendosje është opsionale. Parazgjedhja është “0 ″. Ky numër tregon pikën e fillimit për numëruesin. Është e rëndësishme të mbani mend se numërimi fillon në vlerën e numrit të plotë pas vlerës së rivendosur. Prandaj, nëse vendosni vlerën në "0", numëruesi do të fillojë me "1". Dhe nëse është vendosur "-5", numëruesi do të fillojë në "-4", e kështu me radhë.
Artikuj të numëruar
Blloku i dytë i reklamave (përzgjedhësi h2) përdor: para pseudo-elementit për të treguar se ku do të vendoset përmbajtja specifike (duke përdorur veçorinë e përmbajtjes) përpara të gjithë elementëve të synuar (në rastin tonë, këto janë
).
Rritja e numëruesit
Vetia kundër rritjes tregon se me cilin kontekst lidhet numëruesi. Pra, vlera e parë (e detyrueshme) është emri përkatës i numëruesit të personalizuar nga vetia kundër-rivendosur në ID-në e kontekstit nga blloku i parë i deklarimit.
Vlera e dytë për vetinë kundër rritjes është opsionale. Ai përfaqëson shumën me të cilën numëruesi duhet të rritet (ose të zvogëlohet nëse keni specifikuar një vlerë negative). Parazgjedhja është “1″.
Përmbajtja e kutisë
Ne përdorim veçorinë e përmbajtjes për të specifikuar saktësisht se çfarë duhet të futet përpara çdo elementi në grupin e dhënë (elemente
).
Vlera e vetme e kërkuar për veçorinë e përmbajtjes është funksioni numërues (), por zakonisht diçka tjetër (si hapësirat) shtohet para ose pas (shih shembullin e mësipërm) për t'i dhënë numëruesit një pamje të këndshme.
Funksioni numërues ().
Funksioni counter () mund të marrë dy argumente, të ndara me presje. Argumenti i parë tregon vlerën aktuale të numëruesit të emërtuar. Argumenti i dytë është opsional dhe specifikon formatin për nxjerrjen e vlerës së kundërt. Parazgjedhja është " dhjetore", Por ju mund të specifikoni" romake e lartë”, “sipër-alfa”, Dhe kështu me radhë (si dhe për veçorinë e tipit të stilit të listës së një liste të renditur).
Ju gjithashtu mund të përdorni funksionin numërues () dhe të organizoni numërues të ndërthurur, por ne nuk do t'i mbulojmë ato për këtë tutorial.
Përgjithësim grafik
Nëse të gjitha sa më sipër tingëllojnë të ndërlikuara, infografia e mëposhtme përshkruan elementet bazë të një numëruesi CSS:
Mbështetja dhe disavantazhet e shfletuesit
Disa numërues që përdoren për të njëjtin kontekst (për të ndërtuar një kaskadë numërimi) duhet të deklarohen së bashku. Shembulli i mëposhtëm nuk do të funksionojë:
Div.numbered (kundër-rivendosur: titujt 0) div.numbered (kundër-rivendosur: nëntitujt 0)
Vetëm numëruesi i dytë do të hyjë në fuqi sepse e tejkalon atë të mëparshëm. Kështu, të dy numëruesit duhet të deklarohen në të njëjtën linjë:
Div.numberuar (kundër-rivendosje: titujt 0 nëntitujt 0)
Një dobësi e mundshme për përdorimin e numëruesve është përzierja e përmbajtjes dhe prezantimit. Sidomos, kjo deklaratë ka të bëjë me pronën e përmbajtjes. Vija ndarëse midis përmbajtjes dhe prezantimit është e paqartë.
Tre vetitë dhe pseudo-elementi që përshkruajnë funksionalitetin e numëruesit CSS nuk mbështeten në IE 7 dhe më të vjetër dhe mund të kenë probleme në IE8, Opera dhe Safari. Firefox dhe Chrome mbështesin të gjitha vetitë e përshkruara pa problem.
Përfitimet dhe përdorimi praktik
Numëruesit CSS kanë avantazhin e dukshëm për të mos u shqetësuar për numërimin e paragrafëve të ndryshëm në përmbajtjen tuaj. Ashtu si listat e renditura, përmbajtja nuk ka numra realë. Mund të futni artikuj, t'i fshini artikujt, t'i ndërroni ato dhe treguesit dixhitalë do të korrigjohen automatikisht.
Disa shembuj të përdorimit praktik:
• Emërtimi dhe numërimi i kapitujve (si në shembullin tonë)
• Numërimi i rreshtave të një tabele ose qelizave të saj
• Numërimi i titullit HTML
• Përmirësimi / ndryshimi i pamjes ose rritja e vlerës për listat e renditura të rregullta
A mund të përdoren numëruesit CSS?
Meqenëse ato nuk mbështeten në IE6 dhe IE7, faqet e klientëve nuk duhet të përdorin numërues CSS ose të kërkojnë një zëvendësim të përshtatshëm. Por për faqet e internetit dhe aplikacionet që synojnë një audiencë më teknike (për shembull, një sajt për përdorim në pajisje celulare me shfletues që mbështesin CSS3), numërues të tillë mund të jenë një mënyrë efektive për të krijuar një sistem numërimi të pikave të përmbajtjes pa pasur nevojë për kodim.
Në faqen demo, mund të shihni një shembull të përdorimit të numëruesve CSS për titujt.
Nga autori: Në këtë artikull të shkurtër, ne do t'i hedhim një vështrim sporteleve CSS, një pronë e dobishme, por jo ende e njohur. Pas demonstrimit tonë, ne do t'i hedhim një vështrim shembujve të botës reale të sajteve që përdorin numërues CSS.
Objektivi kryesor: Stilimi i një liste të numëruar
Së pari, le të shohim se çfarë duhet të marrim:

Asgjë e komplikuar, apo jo? Por ka një "por" të vogël: kur krijojmë shënues, do të përdorim shënimin semantik dhe, nëse është e mundur, do të shmangim sa më shumë që të jetë e mundur ndarjet dhe shtrirjet e panevojshme. Le të analizojmë një metodë fleksibël dhe të kuptueshme!
Numëruesit CSS
Për të krijuar këtë shabllon, ju vetëm duhet të krijoni një listë të numëruar. Në këtë pikë, mund të thuash, "A nuk mund të marr një element tjetër apo edhe jo një listë." Përgjigja është po, por mbani mend se vetëm një listë e numëruar përshkruan me saktësi strukturën e faqes sonë.
Pyetja e dytë me sa duket do të jetë "A është e mundur të ribëhet plotësisht pamja e numrave në listë?" Stilizimi i një liste të numëruar është mjaft i ndërlikuar, por për fat ka një mënyrë tjetër ndër-shfletuesi. Pra, le të fshehim numrat e listës dhe të përdorim numëruesit CSS.
Sintaksë
Duke përdorur numëruesit CSS, mund të gjeneroni numra nga elementë të përsëritur dhe t'i stiloni ato. Mendoni për numëruesit si variabla që mund të rriten. Le të hedhim një vështrim në sintaksën bazë:

Krijimi i një sporteli të ri. Figura e mësipërme tregon se si të krijoni një numërues për një listë të numëruar dhe të vendosni shtrirjen e saj. Ne kemi përdorur veçorinë e kundër-rivendosjes.
Vlera e parë është emri i numëruesit
Kjo pasohet nga një parametër opsional që vendos pikën e fillimit të numëruesit (parazgjedhja 0). Vini re se numëruesi gjithmonë numëron lart, d.m.th. vlera jonë e parë do të jetë 1.

Stilimi i elementeve të fëmijëve. Në imazhin e dytë, mund të shihni se ne po shtojmë stile për :: përpara pseudo-klasës në artikullin e listës li.
Vetia e përmbajtjes i është caktuar një vlerë. Duke përdorur numëruesit CSS me veçorinë e përmbajtjes, ne mund t'i lidhim numrat e gjeneruar me vargje.
Tregohet emri i sportelit
Dhe lloji vendoset në dhjetor (sistemi i numrave dhjetorë). Vlerat pozitive janë të njëjta me vlerat për pronën e tipit të stilit të listës.
Në vetinë kundër rritjes, ne përsëri specifikojmë emrin e numëruesit
Pastaj, sipas dëshirës, ​​mund të specifikoni hapin e rritjes. Parazgjedhja është 1.
Markup
Bazuar në sa më sipër, shënimi do të duket si ky:
1. Artikulli i listës

   Disa tekst këtu.

2. Artikulli i listës

   Disa tekst këtu.

<-- еще элементы списка -->
< ol > < li > < h4 >Artikulli i listës< / h4 > < / li > < li > < h4 >Artikulli i listës< / h4 > < / li > < -- ещеэлементысписка-- > < / ol >
ol (kundër-rivendosja: seksioni;) li (lloji i stilit të listës: asnjë; madhësia e shkronjave: 1,5 rem; mbushja: 30 px; diferenca e poshtme: 15 px; sfondi: # 0e0fee; ngjyra: #fff;) li :: përpara (përmbajtja: numëruesi (seksioni); kundër-rritja: seksioni; ekrani: blloku në linjë; pozicioni: absolut; majtas: -75 px; lart: 50%; transformimi: translateY (-50%); mbushja: 12 px; font- madhësia: 2 rem; gjerësia: 25 px; lartësia: 25 px; rreshtimi i tekstit: në qendër; ngjyra: # 000; rrezja e kufirit: 50%; kufiri: 3 px solid # 000;)
ol ( kundër - rivendos: seksion; li ( listë - stil - lloji: asnjë; font - madhësia: 1.5rem; mbushje: 30 px; margjina - fundi: 15px; sfond: # 0e0fee; ngjyra: #fff; li :: me pare ( përmbajtja: sporteli (seksioni); kundër - rritje: seksion; shfaqja: inline - bllok; pozicioni: absolut; majtas: - 75px; lartë: 50%; transformoj: translateY (- 50%); mbushje: 12 px; font - madhësia: 2rem; gjerësia: 25 px; lartësia: 25 px; Kufizimet Është e rëndësishme të theksohet se pseudo-klasat nuk janë 100% të disponueshme për momentin. Për ta zbuluar, bëra një provë të shpejtë: instalova NVDA dhe hapa demonstrimin nga Chrome 50, Firefox 45 dhe Internet Explorer 11. Zbulova se kur përdor Internet Explorer, Narrator nuk e fliste përmbajtjen e krijuar. Për momentin, shumica e lexuesve të ekranit normalisht do ta njohin këtë përmbajtje. Sidoqoftë, për të kuptuar se çfarë mund të gjenerohet duke përdorur pseudo-elemente dhe çfarë jo, thjesht duhet të dini këto kufizime. Shembuj të numëruesve CSS Ne kemi mësuar bazat e punës me numëruesit CSS dhe tani mund t'ju tregojmë disa shembuj të përdorimit të tyre të mundshëm. Sportelet CSS përdoren kryesisht në versionet online të gazetave. Ata shpesh do të vendosen në shiritat anësor: Numëruesit CSS mund të përdoren gjithashtu në seksione ku përshkruhen hapat ose tregohet drejtimi i veprimit. Shembuj: Shembuj me kod shtesë HTML Më sipër, ne kemi dhënë dy shembuj të versioneve online të botimeve që përdorin numërues CSS. Tani le të shohim dy shembuj të tjerë, por tani në vend të numëruesve, ne përdorim kod të panevojshëm HTML (megjithëse përmbajtja është e disponueshme në të): konkluzioni Në këtë artikull të shkurtër, mësuam se si të stilojmë listat e numëruara duke përdorur numëruesit CSS. Përmblidhni: Numëruesit CSS janë të shkëlqyeshëm për çdo projekt me lista të numëruara dinamike dhe stile të personalizuara. Sidoqoftë, kjo metodë nuk është 100% e disponueshme. Është e nevojshme të kuptohen dobësitë e tij dhe ta përdorin atë vetëm kur është e përshtatshme. Për të krijuar një numërues, duhet të vendosni dy veti (kundër-rivendosje, kundër-rritje) dhe një funksion (counter () ose numërues ())). Numëruesi shfaqet përmes një pseudo-elementi. Vetia e përmbajtjes merr pjesë në punën e numëruesit dhe disponohet vetëm nën pseudoelementin. A keni përdorur ndonjëherë numërues CSS në projektet tuaja? Nëse po, mos ngurroni të ndani punën tuaj!
Reg.ru: domenet dhe pritja
Regjistruesi dhe ofruesi më i madh i pritjes në Rusi.
Më shumë se 2 milion emra domenesh në shërbim.
Promovim, postë për domain, zgjidhje biznesi.
Më shumë se 700 mijë klientë në mbarë botën kanë bërë tashmë zgjedhjen e tyre.
* Rri pezull miun për të ndalur lëvizjen.
Kthehu përpara
12 veçori mbresëlënëse CSS
Nëse jeni si unë, atëherë kur shihni një demo mbresëlënëse të një efekti të ri CSS3, thjesht nuk mund të mos filloni ta përdorni atë në punën tuaj.
Natyrisht, më vonë zbuloni se mund ta përdorni këtë efekt në 2 ose 3 shfletues kryesorë (natyrisht IE, si gjithmonë, pi duhan me nervozizëm mënjanë dhe nuk përfshihet në këtë listë) dhe zakonisht vendosni të prisni.
Prisni që ky efekt të mbështetet nga të gjithë shfletuesit. Por une Lajme te mira Për ty! Me përditësimin më të fundit të shfletuesit, ka disa gjëra të shkëlqyera CSS3 që mbështeten nga të gjithë shfletuesit dhe mund të filloni t'i përdorni ato që tani!
Digresioni lirik: shumica e këtyre efekteve nuk funksionojnë në versionet më të vjetra të IE (nga versioni 9 dhe më poshtë). Nëse ndodh që në vendin tuaj këta shfletues përdoren kudo, atëherë kam frikë se do t'ju shqetësoj, ky mësim nuk është për ju. Por për pjesën tjetër, ja çfarë kanë për të na ofruar shfletues modern:
1. Animacionet dhe tranzicionet CSS
CSS Animation është më në fund i disponueshëm për të gjithë shfletuesit kryesorë, madje edhe IE! (duke filluar me versionin 10). Ka 2 mënyra për të duke krijuar CSS animacionet. E para është shumë e thjeshtë dhe funksionon përmes pronës tranzicionit.
Duke përdorur këtë pronë, ju mund të krijoni efekte mbi faktin e lëvizjes së miut ose, anasjelltas, largimin e tij nga një zonë e caktuar, ose mund të aktivizoni animacionin duke përdorur JavaScript për të ndryshuar vetitë e një objekti.
Si një demonstrim i tranzicioneve të tilla të bazuara në pronë tranzicionit, më sipër është një shembull efekti hover me një planet dhe një raketë. Kur rri pezull mbi një planet, raketa rrotullohet më afër tij.
Mënyra e dytë e animacionit është pak më e ndërlikuar - lidhet me përshkrimin e animacionit përmes rregullit @keyframe, i cili ju lejon të krijoni animacione të përsëritura ose të qarkulluara të pavarura nga veprimi i përdoruesit ose aktivizimi i javascript.
Kodi i efektit tregohet më poshtë:
Kontejneri (gjerësia: 300 px; lartësia: 300 px; diferenca: 0 automatik; pozicioni: relative; tejmbushja: i fshehur;) .planet (pozicioni: absolut; lart: 0; majtas: 0; gjerësia: 100%; lartësia: 100%; sfondi : url (http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) qendra e qendrës pa përsëritje;) .raketë (pozicioni: absolute ; lart: 0; majtas: 0; gjerësia: 100%; lartësia: 100%; sfondi: url (http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets /img/rocket.png) qendra pa përsëritje 50 px; / * Chrome kërkon ende prefiksin -webkit- * / -webkit-animation: orbitë 2s lineare e pafundme; animacion: orbitë 2s lineare e pafundme; tranzicioni: pozicioni i sfondit 0,8s; ) .container: hover .rocket (sfondi-pozicioni: 80px në qendër;) / * Vendos kornizat kyçe për animacion * / @ -orbita e ueb-kit-kornizave kyçe (nga (-webkit-transform: rrotullo (0 gradë);) në (-webkit-transformoj : rotate (360deg);)) @keyframes orbita (nga (transform: rotate (0deg); / * Kam përfshirë vetinë -webkit-transform sepse , Google Chrome mund të fillojë të mbështesë kornizat kryesore pa prefiksa në të ardhmen * / -webkit-transform: rotate (0deg);) to (transform: rotate (360deg); -webkit-transform: rrotullo (360deg); ))
Këtu ka shumë për animacionin CSS, dhe supozoj se do të filloni me këtë artikull. Nëse jeni kurioz nëse shfletuesi juaj e mbështet këtë efekt apo jo, ju lutemi ta doni dhe favorizoni këtë tabelë.
2. Numërimi i vlerave duke përdorur një pronë kalc ()
Një tjetër gizmo e re e re e CSS është funksioni kalc ()... Kjo ju lejon të bëni më të thjeshtën llogaritjet aritmetike në CSS. Ju mund ta përdorni këtë kudo që ju nevojitet për t'u marrë me gjatësinë ose gjerësinë.
Por ajo që është edhe më e ftohtë është se ju mund të përzieni me siguri dimensione të ndryshme, qofshin ato pikselë apo përqindje.
Kjo ju lejon të krijoni sasi e madhe truket dhe teknikat e ndryshme (për shembull, me shtresa dhe pozicionim), duke vendosur mbi shpatullat tuaja të gjitha truket që mund t'ju është dashur të përdorni për të marrë të njëjtin rezultat. Çfarë mund të jetë më mirë? Dhe ja çfarë, funksionon me IE 9th (hurray!) Versioni e lart dhe pa parashtesa shtesë.
Kjo ndarje ka 20 px në të dyja anët.
/ * Llogaritni gjerësinë * / .container (gjerësia: llogaritur (100% - 40 px); ngjyra e sfondit: # CDEBC4; ngjyra: # 6D8B64; rreshtimi i tekstit: në qendër; mbushja: 25 px 0; diferenca: 0 automatik;)
3. Përzgjedhës të avancuar
Sot, nëse i bashkëngjitni ID-të elementeve vetëm për të aplikuar veçoritë e stilimit të tyre, e keni thelbësisht gabim. Meqenëse përfshihen CSS2.1 dhe CSS3 nje numer i madh i përzgjedhës të fuqishëm për t'i bërë paraqitjet tuaja më të pastra dhe fletët e stilit tuaj më të ftohta.
Kjo mbështetet nga të gjithë shfletuesit kryesorë duke përfshirë IE9 e lart.
Shembull:
Një paragraf teksti që është i pandashëm me etiketa dhe id-shnik të tjerë, me një sasi të caktuar css interesante stilet
/ * Stilet CSS - asgjë interesante këtu * / p (madhësia e shkronjave: 16 px; gjerësia: 420 px; margjina: 20 px automatike 0; rreshtimi i tekstit: në qendër;) .container (gjerësia: 420 px; diferenca: 50 px automatike 0; tejmbushja: e fshehur; mbushje: 5 px;) .elem (gjerësia: 30 px; lartësia: 30 px; diferenca: 4 px; ngjyra e sfondit: # A0DFAC; float: majtas;) Hapësira .elem (pozicioni: absolute; lart: 5 px; majtas: 5 px; djathtas: 5 px; fundi: 5 px; kufiri: 2 px solid #fff;) / * Një përzgjedhës që zbaton vetitë për shkronjën e parë dhe rreshtin e parë të paragrafit tonë * / p :: shkronja e parë (ngjyra e sfondit: # 666; ngjyra: # FFF; madhësia e shkronjave: 24 px; stili i shkronjave: normale; ekrani: blloku i brendshëm; mbushja: 0 5 px; rreze-kufi: 3 px; margjina-djathtas: 2 px; font-familja: serif;) p :: rreshti i parë (madhësia e shkronjave: 18 px; transformimi i tekstit: shkronja të vogla; stili i shkronjave: italic; dekorimi i tekstit: nënvizoni;) / * Bëni elementin e parë dhe të fundit vjollcë * / .elem: fëmija i parë, .elem: i fundit -child ( background-color: # 948bd8;) / * Bëni të gjithë elementët e tjerë të rrumbullakosur * / .elem: n-të-fëmija (tek) (border-radiu s: 50%; ) / * Bëje çdo element të 6-të të kuq * / .elem: nth-child (6) (ngjyra e sfondit: # cb6364;) / * Stili i elementit që përmban etiketën span * / .elem: jo (: bosh) ( sfondi-color: # 444; pozicioni: relative; -webkit-transform: rrotullo (25deg); transformim: rrotullo (25deg);) / * Elementet e synuar sipas atributit * / .elem (ngjyra e sfondit: #aaa;) .elem (ngjyra e sfondit: # d7cb89;) / * Vlera e atributit duhet të fillojë me "bar". që nga viti kjo korrespondon me dy elementët e mësipërm * / .elem (gjerësia: 16 px; lartësia: 16 px; diferenca: 11 px;) / * Elementi tjetër pas atij me data-foo = "bar2" * / .elem + .elem (sfondi -ngjyra: # 78ccd2;)
4. Përmbajtje dhe numërues të gjeneruar
Përmbajtja e krijuar është mjet i fuqishëm në duart e zhvilluesit, i cili bëhet i disponueshëm pas aplikimit të pseudo-elementeve :: më parë dhe :: pas.
Kjo veçori do t'ju lejojë të përdorni më pak HTML sesa mund të ishte. Kjo është veçanërisht e dobishme në rastet kur duhet të aplikoni hije në blloqe ose të tjera efektet vizuale që kërkojnë etiketa shtrirje ose div... Si rezultat, do të përfundoni me një kod HTML më minimalist dhe semantik.
CSS3 gjithashtu u jep pseudo-elementeve akses në numërues që mund të shtohen nga rregullat CSS. Ata gjithashtu mund të marrin vlerat e atributeve nga elementet mëmë që i përmban ato. Shih shembullin më poshtë:
Butoni Butoni Butoni Butoni
Container (/ * Vendos numëruesin me emrin cnt e barabartë me zero* / kundër-rivendosje: cnt; pozicioni: i afërm; text-align: qendër; mbushje: 20 px 0; gjerësia: 420 px; lartësia: 160 px; marzhi: 0 auto; ) / * Mund të stiloni pseudoelementët dhe t'u jepni atyre përmbajtje sikur të ishin elementë të vërtetë në faqe * / .container :: përpara (ekrani: bllok; përmbajtja: "Hover mbi këto artikuj:"; madhësia e shkronjave: 18 px ; pesha e shkronjave: bold; rreshtimi i tekstit: në qendër; mbushja: 15 px;) .hapësira e kontejnerit (ekrani: blloku i brendshëm; mbushja: 2 px 6 px; ngjyra e sfondit: # 78CCD2; ngjyra: # 186C72; rrezja e kufirit: 4 px ; margjina: 3 px; kursori: i parazgjedhur;) / * Krijo një numërues me një pseudo-element * / .hapësirë ​​kontejneri :: pas (/ * Sa herë që zbatohet ky rregull, numëruesi do të rritet me 1 * / kundër-rritje: cnt; / * Shtoni një pjesë të përmbajtjes në vlerën e numëruesit * / përmbajtje: numëruesi "#" (cnt); ekrani: blloku i linjës; mbushja: 4 px;) / * Pseudo-elementet mund të kenë akses në atributet e prindërve të tyre * / .container hapësirë ​​:: përpara ( pozicioni: absolut; poshtë: 0; majtas: 0; gjerësia: 100%; përmbajtja: attr (titulli i të dhënave); ngjyra: # 666; opaciteti: 0; / * Animacioni i tranzicionit * / -webkit-transition : opacity 0,4s; tranzicioni: opac ity 0.4s; ) .hapësirë ​​e kontejnerit: rri pezull :: përpara (opaciteti: 1;)
Përmbajtja e krijuar mbështetet kudo, duke përfshirë IE9 e lart.
Gradientët u japin dizajnerëve të internetit aftësinë për të krijuar tranzicione të qetë ndërmjet ngjyrave pa përdorur imazhe. Gradientët CSS gjithashtu duken të shkëlqyera në ekranet e retinës, sepse ato krijohen në fluturim.
Ato mund të jenë lineare ose radiale dhe mund të vendosen të përsëriten. Për disa kohë ato ishin të paarritshme për të gjithë, por pas disa muajsh dhe një numri të caktuar ndryshimesh në sintaksë, ato u bënë të disponueshme pothuajse për të gjithë, pa parashtesa shtesë.
Linear
Radiale
Duke përsëritur Lin.
Duke përsëritur Rad.
CS.container (rreshtimi i tekstit: në qendër; mbushja: 20 px 0; gjerësia: 450 px; margjina: 0 automatik;) .div kontejneri (gjerësia: 100 px; lartësia: 100 px; ekrani: blloku i brendshëm; diferenca: 2 px; hije e kutisë : 0 0 1px rgba (0, 0, 0, 0.5) futje, 0 1px 1px #DDD; rreze-kufi: 2px; ngjyra: # 666; rreshtimi vertikal: lart; lartësia e rreshtit: 230 px; madhësia e shkronjave: 12 px ;) # el1 (sfondi: gradient linear (në fund, # 8dd2d9, # 58c0c7);) # el2 (sfondi: gradient radial (# 77d19e, # 46c17b);) # el3 (sfondi: përsëritës-gradient linear ( -45deg, # de9dd4, # de9dd4 5px, e bardhë 5px, e bardhë 10px);) # el4 (sfondi: përsëritës-radial-gradient (# b8e7bf, # b8e7bf 5px, e bardhë 5px, e bardhë 10px);
A mund ta imagjinoni një kohë kur ne ishim të kufizuar në disa shkronja të vizatuara me dorë që padyshim funksionojnë në të gjithë shfletuesit? Vështirë të besohet, por sot falë shërbimeve si p.sh Fontet e Google dhe typekit, të cilat ju lejojnë të përdorni fonte të shkëlqyera thjesht duke i futur ato në stile në faqen tuaj.
Ka edhe fonte ikonash, si fontawesome, të cilat përmbajnë ikona të lezetshme vektoriale në vend të shkronjave ose numrave. E gjithë kjo mundësohet nga rregulli @ font-face që ju lejon të vendosni emrin, karakteristikat dhe burimin e fontit, i cili më vonë mund të referohet përmes vetive font / font-familje.
Këtu është fonti im i bukur!)
H1 (/ * Duke përdorur fontin e zgjedhur ne lidhemi me HTML * / font-family: Satisfy, cursive; pesha e shkronjave: normale; madhësia e shkronjave: 24 px; mbushja e sipërme: 60 px;)
Me disa zgjidhje, fontet funksionojnë në shfletues duke filluar me IE 6. Megjithatë, ka 2 shërbime që u përshkruan më lart, kështu që nuk ju nevojiten këto zgjidhje tani.
7. Madhësia e bllokut. Pronës përmasat e kutisë
Dhimbja e vetme më e madhe e kokës për fillestarët në CSS është modeli i kutisë.
Kishte disa arsye të mira për të standardizuar këtë model, por ai mbeti intuitivisht i pakuptueshëm, për shembull, në rastet kur vendosni lartësinë dhe gjerësinë e një blloku, por ato ndryshonin në varësi të vlerës. mbushje ose kufiri.
Kjo shkelje e vogël thyen gjithçka, por më në fund ne kemi një mënyrë për të rikthyer mendjen dhe për të hequr qafe dhimbjen e kokës. Përmbushni rregullin përmasat e kutisë! Tani mund të pyesni kuti-kufi i cili i mban elementet pikërisht ashtu siç do të dëshironit të ishin. Shihni vetë:
Elementi 1
Elementi 2
Elementi 3
Container (text-align: center;) .container div (/ * Vendosja e metodës së madhësisë së kutisë * / box-sizing: border-box; / * Firefox është i veçantë për ne, kështu që kërkon ende parashtesa * / -moz-box -madhësia : kutia e kufirit; gjerësia: 120 px; lartësia: 120 px; ekrani: blloku i linjës; rreshtimi vertikal: lart;) / * Falë rregullit të madhësisë së kutisë, ne mund të vendosim vlerat e mbushjes dhe kufirit në çdo gjë ne duam, dhe elementët do të qëndrojnë në të njëjtën madhësi siç ishin * / # el1 (ngjyra: # 524480; ngjyra e sfondit: # B2A4E0;) # el2 (mbushja: 8 px; kufiri: 10 px solid # 9ec551; ngjyra e sfondit: #fff;) # el3 (mbushje: 32 px; ngjyra e sfondit: #ccc;)
8. Imazhet si kufij ose pronë kufiri-imazh
Pronës kufiri-imazh ju lejon të shfaqni imazhe të dizajnuara posaçërisht rreth elementeve si një goditje. Disa kufij të përfshirë në një imazh ose sprite korrespondojnë me ose korrespondojnë me kufij të caktuar elementet e bllokut... Shihni një shembull për ta kuptuar më qartë këtë:
Thuaj përshëndetje goditjeve të lezetshme të bllokut të fotografive!
P (lidhja e tekstit: në qendër; mbushja: 20 pikselë; gjerësia: 340 pikselë; margjina: 0 automatikisht; / * Vendosni vetitë për kufirin dhe për imazhin e përdorur si kufi * / kufiri: 30 pikselë transparente; imazhi i kufirit: url ( http : //demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 raund;)
Për një studim më të detajuar, shihni këtë faqe dhe këtë paragraf. Mbështetet nga të gjithë shfletuesit kryesorë dhe IE 11.
Pyetjet në media janë një domosdoshmëri nëse do të jeni serioz në lidhje me dizajnin e uebit. Prej pak kohësh janë aty, por ja vlen të përmenden ashtu siç janë. ata ndryshuan mënyrën se si ne ndërtojmë faqet e internetit.
Kjo përdoret kur keni nevojë që një faqe interneti të duket e njëjtë në pajisje të ndryshme (për shembull pajisje celulare- tableta, telefona inteligjentë, laptopë etj.) me gjerësi të ndryshme ekrani. Sot ne krijojmë faqe që duhet të jenë në gjendje të përshtaten me llojin e pajisjes, orientimin e saj dhe rezolucionin e monitorit të saj.
Pyetjet e medias janë tepër të lehta për t'u përdorur: gjithçka që duhet të bëni është të mbështillni stilet tuaja CSS në një bllok rregullash. @media. Secili @media blloku aktivizohet kur plotësohen një ose më shumë kushte.
Përmbajtja kryesore e artikullit shkon këtu
/ * Stili për përmbajtjen kryesore dhe shiritin anësor * / .container (gjerësia: 900 pikselë; kufiri: 0 automatik; tejmbushja: i fshehur;) .seksioni kryesor (ngjyra e sfondit: # CDEBC4; ngjyra: # 6D8B64; gjerësia: 520 px; lundrues : majtas; lartësia: 500 px;) .bari anësor (ngjyra e sfondit: #cccc; gjerësia: 350 px; notimi: djathtas; lartësia: 400 px;) .kontejneri p (mbushje-lart: 100 px; rreshtimi i tekstit: në qendër;) .shënim ( rreshtimi i tekstit: në qendër; mbushja e sipërme: 60 px; stili i shkronjave: italic;) / * Këto pyetje të thjeshta mediatike lejojnë që blloqet të përshtaten me gjerësinë e ekranit tuaj * / @media (gjerësia maksimale: 900 px) (.container (gjerësia : 100 %;) .seksioni kryesor, .bari anësor (gjerësia: automatik; kufiri i poshtëm: 20 px; lundrues: asnjë;))
Kërkesat e medias mund të përfshijnë kontrolle për rezolucionin e ekranit të pajisjes, orientimin, thellësinë e ngjyrave dhe më shumë. Ju mund të lexoni për të gjitha këto dhe të shihni tabelën e përputhshmërisë.
10. Sfondet në shtresa të ndryshme
Me këtë veçori, dizajnerët krijojnë efekte tepër interesante. Ata mund të bashkojnë një imazh të tërë nga pjesët e tij të ndryshme të vendosura në shtresa të ndryshme.
Çdo shtresë e tillë (imazh) mund të lëvizë dhe të animojë në mënyrën e vet, për shembull, si demonstrimi më poshtë (lëvizni kursorin e miut mbi foto dhe shikoni se çfarë ndodh). Të gjitha vetitë e sfondit CSS tani mund të pranojnë një listë të veçorive të ndara me presje për secilën shtresë individuale:
Hapësira (/ * Vendosni një listë të sfondeve të ndara me presje * / sfond: url ("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big. png" ) qendra pa përsëritje 70 px, url ("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg") pa përsëritje qendra e poshtme; gjerësia: 200 px; lartësia: 200 px; diferenca: 0 automatik; rreze kufiri: 3 px; / * Pozicioni i animuar për të dy sfondet * / tranzicioni: pozicioni i sfondit 1s;) .hapësira: rri pezull (/ * E njëjta gjë për vetitë? të tilla si pozicioni i sfondit dhe përsëritja * / pozicioni i sfondit: 35% 20 px, lart djathtas;)
Për më shumë informacion, shikoni këtu. Shumë mbështetje e mirë shfletuesit - të gjithë shfletuesit modern mbështesin këtë rregull. .
Paraqitjet e bazuara në kolona kanë qenë një problem i madh për ata që punojnë me CSS. Zakonisht një server ose javascript përfshihej në këtë për të ndarë tekstin në pjesë / kolona të barabarta. Kjo e bëri detyrën tepër të vështirë dhe gjithashtu humbi shumë kohë të vlefshme të zhvilluesit. Më në fund, tani është e lehtë të bëhet me një rregull CSS. kolonat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecena pellentesque urna nec eros ornare, ac tristique diam porta. Donec fermentum velit eget dignissim condimentum. Sed rutrum libero sit amet enim viverra tristique. Mauris ultricies ornare arcu non adipiscing. Sed id ipsum vitae libero facilisis pulvinar id nec lacus. Ut lobortis neque et luctus mattis. Morbi nunc diam, elementum rutrum tellus non, viverra mattis diam. Vestibulum sed arcu tincidunt, auctor ligula ut, feugiat nisi. Phasellus adipiscing eros ut iaculis sagittis. Sed posuere vehicula elit vel tincidunt. Duis feugiat feugiat libero bibendum consectetur. Ut in felis non nisl egestas lacinia. Fusce interdum vitae nunc eget elementum. Quisque dignissim luctus magna et elementum. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Sed nunc lorem, convallis consequat fermentum eget, aliquet sit amet libero.
Kontejneri (gjerësia: 500 px; diferenca: 0 automatik;) / * Ashtu si kjo, krijoni kolonat * / .container p (-moz-kolonat: 3; -kollonat e ueb-kit: 3; kolonat: 3;)
Ka një mbështetje të mirë për këtë rregull, por ai ende kërkon parashtesa. Por ka disa dallime dhe nuanca midis shfletuesve që janë të rëndësishme për t'u ditur.
12. Transformimet 3D CSS
Nuk ka asgjë më tërheqëse dhe më të mrekullueshme në ueb sesa një demonstrim mbresëlënës 3D CSS. Ndërsa dobia e kësaj jashtë demo dhe jashtë portofolit është disi e diskutueshme, 3D CSS ofron disa karakteristikat më të fuqishme për projektues dhe zhvillues që mund të fitojnë zemrat e përdoruesve nëse përdoren siç duhet.
Hidhini një sy shembullit të kodit më poshtë:
Kontejneri (/ * Si duhet të shprehen efektet 3D * / perspektiva: 800 pikselë; -kit-ueb-perspektiva: 800 px; sfondi: gradienti radial (# e0e0e0, #aaa); gjerësia: 480 px; lartësia: 480 px; diferenca: 0 automatik; kufiri -rrezja: 6px; pozicioni: relative;) .iphone-front, .iphone-back (/ * Lidhja e transformimit 3D * / transform-style: ruaj-3d; -webkit-transform-style: ruaj-3d; / * Ne përdorim 2 div të ndryshme për pjesën e përparme dhe të pasme të telefonit Kjo veçori fsheh div kur rrotullohet, kështu që ana e kundërt do të shfaqet * / dukshmëria e pasme: e fshehur; pozicioni: absolut; lart: 50%; majtas: 50%; diferenca: -166px 0 0 -100px; sfond: url (http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally - përdor / asset / img / iphone.png) pa përsëritje në qendër të majtë; / * Animacioni i tranzicionit * / tranzicioni: 0,8 s;) .iphone-back (/ * Ana e pasme rrotullohet 180 gradë si parazgjedhje * / transformimi: rotateY (180 gradë); - ueb-kit-transformim: rrotulloY (180 gradë); sfond-pozicioni: në qendër të djathtë; ) .container: hover .iphone-front (/ * Kur kontejneri është pezulluar mbi dhe aktivizohet pezullimi, rrotullojeni pjesën e përparme dhe fshihni atë * / transformoni: rotateY (180deg); -webkit-transform: rotateY (180deg);) . kontejner : rri pezull .iphone-mbrapa (/ * ... në të njëjtën kohë rrotullohet pjesa e pasme dhe bëje të dukshme * / transformo: rrotulloY (360 gradë); -webkit-transform: rotateY (360deg); )
Ky kod është modeluar sipas këtij tutoriali, të cilin unë rekomandoj ta shikoni.
Nëse dëshironi të mësoni më shumë rreth 3D CSS, hidhini një sy hyrjes së detajuar. Nëse nuk po synoni shfletues më të vjetër IE, atëherë mbështetja e shfletuesit për 3D CSS është gjithashtu shumë e mirë.
Të mira të tjera që ia vlen të përmenden
Nëse përdorni ende parashtesat për kufi-rrezja dhe kuti-hije, tani mund ta harroni me siguri.
Gjithashtu tani mund të filloni të përdorni data-uri për imazhet e sfondit, për të gjithë shfletuesit.
Pronës errësirë tani e disponueshme dhe e mbështetur kudo, do të jetë gjithashtu shumë e dobishme të njihni pronën madhësia e sfondit.
Do të duhet pak kohë përpara se të mbështetet ndër-shfletuesit për flexbox, @mbështet, filtra dhe maska ​​CSS, por jam i sigurt që ia vlen të presësh!
Numëruesit CSS ju lejon të rregulloni pamjen e përmbajtjes bazuar në vendndodhjen e saj në një dokument. Për shembull, mund të përdorni numërues për të numëruar automatikisht titujt në një faqe interneti. Numëruesit janë, në thelb, variabla të mbajtura nga CSS, vlerat e të cilave mund të rriten nga rregullat e CSS për të gjurmuar sa herë "përdoren".
Përdorimi i numëruesve
Manipulimi i vlerës së një numëruesi
Për të përdorur një numërues CSS, ai fillimisht duhet të inicializohet në një vlerë me vetinë e kundër-rivendosjes (0 sipas parazgjedhjes). E njëjta pronë mund të përdoret gjithashtu për të ndryshuar vlerën e saj në çdo numër specifik. Pasi të inicializohet, vlera e numëruesit "s" mund të rritet ose zvogëlohet me kundër-rritje. Emri i numëruesit nuk duhet të jetë "asnjë", "të trashëgojë" ose "fillestar"; përndryshe deklarata shpërfillet.
Shfaqja e një numëruesi
Vlera e një numëruesi mund të shfaqet duke përdorur funksionin numërues () ose numërues () në një veçori të përmbajtjes.
Funksioni numërues () ka dy forma: "counter (emri)" ose "counter (emri, stili)". Teksti i krijuar është vlera e numëruesit më të brendshëm të emrit të dhënë në shtrirje në pseudoelementin e dhënë. Formatohet në stilin e specifikuar (decimal si parazgjedhje).
Funksioni numërues () ka gjithashtu dy forma: "counters (emri, vargu)" ose "counters (emri, vargu, stili)". Teksti i gjeneruar është vlera e të gjithë numëruesve me emrin e dhënë në shtrirje në pseudoelementin e dhënë, nga më i jashtëmi tek më i brendshmi, të ndarë nga vargu i specifikuar. Numëruesit jepen në stilin e treguar (decimal sipas parazgjedhjes).
Shembull themelor
Ky shembull shton "Seksion:" në fillim të çdo titulli.
CSS
trupi (kundër-rivendosja: seksioni; / * Vendosni një numërues të quajtur "seksion", dhe vlera e tij fillestare është 0. * /) h3 :: përpara (kundër-rritje: seksioni; / * Rritni vlerën e numëruesit të seksionit me 1 * / përmbajtja: numëruesi (seksioni); / * Shfaq vlerën e numëruesit të seksionit * /)
HTML
Prezantimi
Trupi
konkluzioni
Rezultati
Numërues folezues
Një numërues CSS mund të jetë veçanërisht i dobishëm për krijimin e listave të përshkruara, sepse një shembull i ri i numëruesit krijohet automatikisht në elementët fëmijë. Duke përdorur funksionin numërues (), teksti ndarës mund të futet ndërmjet niveleve të ndryshme të numëruesve të ndërthurur.
Shembull i një numëruesi të mbivendosur
CSS
ol (kundër-rivendosje: seksioni; / * Krijon një shembull të ri të numëruesit të seksionit me çdo element ol * / list-style-type: asnjë;) li :: përpara (kundër-rritje: seksioni; / * Rrit vetëm këtë shembull i numëruesit të seksionit * / përmbajtja: numëruesit (seksioni, ".") ""; / * Kombinon vlerat e të gjitha rasteve të numëruesit të seksionit, të ndara me një pikë * /)
HTML
1. artikull
2. artikull
   1. artikull
   2. artikull
   3. artikull
      1. artikull
      2. artikull
      1. artikull
      2. artikull
      3. artikull
   4. artikull
3. artikull
4. artikull
1. artikull
2. artikull