Contoarele sunt identificate prin identificatori (pentru mai multe informații, consultați secțiunile despre contoare, care conțin informații despre proprietățile de creștere a contorului și de resetare a contorului). Valoarea contorului este un identificator, valoarea implicită este un număr.

O succesiune de contoare imbricate se notează după cum urmează: „contoare( , )" sau "contoare( , , )".

În CSS2, valoarea contoarelor poate fi setată prin proprietatea „conținut”. Este legal să folosiți niciunul ca valoare a proprietății „conținut”, ceea ce este echivalent cu o listă goală.

Următorul exemplu a creat un stil care a numerotat elementele „P” pentru fiecare element „H1”, fiecare paragraf numerotat cu cifre romane urmate de un punct și un spațiu.

Contorul care depășește limitele stabilite pentru el de parametrul „counter-reset” este resetat și capătă o valoare egală cu 0

Contoarele sunt create folosind următoarele funcții suplimentare counter(name) sau counter(name, style). Nume - înseamnă numele contorului, stilul - tipul de numerotare (toate tipurile sunt setate conform proprietății list-style-type)

Numerotarea automată în CSS2 este creată utilizând conținut automat (proprietatea conținutului) în plus față de proprietățile de resetare a contorului și de incrementare a contorului.

Inițial, numele contorului trebuie specificat cu un al doilea parametru opțional care definește stilul numerotare automată, De exemplu

Numerotarea automată în CSS2 este controlată de două proprietăți contra-resetare și contra-incrementare. Resetarea contorului creează subsecțiuni atunci când se utilizează numerotarea automată. Această proprietate, precum și proprietatea de contor-increment, pot conține numele contorului și o creștere opțională ca valoare.

Specificația CSS2.1 conține o tehnică care permite unui dezvoltator să combine cele trei proprietăți cssși un pseudo-element pentru crearea unui contor cu incrementare automată precum cel folosit într-o listă ordonată.

Spre deosebire de contorul de listă, care se aplică doar elementelor

sau
și doar cu o simplă creștere, noua metodă de numărare introdusă în CSS2.1 poate fi folosită cu orice set de elemente și are mai multe opțiuni de organizare a numărării.

Această metodă poate fi confuză, deoarece utilizează mai multe proprietăți și este diferită de codul CSS obișnuit. În lecție, vom încerca să clarificăm utilizarea unui astfel de contor și să indicăm avantajele și dezavantajele acestuia.

Sintaxă

Codul CSS pentru contor arată astfel:

Secțiunea div. ( resetare contor: titluri 0; ) h2: înainte ( incrementare contor: titluri 1; conținut: contor „Capitol „(titluri, zecimală) „: „; )

După cum am menționat, sunt utilizate trei proprietăți CSS: counter-reset , counter-increment și content . Dacă oricare dintre proprietățile specificate este omisă, metoda nu va funcționa.

Analiza sintaxei

Deci, să ne uităm la sintaxă și la ce sunt perechile proprietate/valoare:

Indicator de context

Primul bloc de declarație (selectorul div.section) specifică ce secțiune din marcaj conține un set de elemente care vor avea o valoare întreagă cu autoincrementare. Este important să înțelegem diferența dintre declararea acestui bloc și următoarea. Acest element special (

) nu va avea o valoare anterioară de contor întreg. Este doar un „container” sau „context” care conține elementele care folosesc contorul.
Dar pentru context, trebuie să definiți numele contorului care va fi folosit pentru elementele declarate în blocul următor.
Resetează contorul
Proprietatea contraresetare trebuie utilizată împreună cu un selector care specifică un context, așa cum este descris mai sus. Prima parte a valorii este un nume personalizat pe care îl furnizați pentru contor. Aceasta este o parte obligatorie. Numele poate fi orice, cu excepția cuvintelor rezervate pentru CSS (de exemplu, nu puteți da un nume contorului „niciunul”, „moștenește”, sau "iniţială").
A doua parte a valorii proprietății contraresetare este opțională. Valoarea implicită este „0″. Acest număr specifică punctul de pornire al contorului. Este important să ne amintim că numărarea începe la următoarea valoare întreagă după valoarea de resetare. Deci, dacă setați valoarea la „0”, contorul va începe de la „1”. Și dacă a fost setat „-5”, contorul va începe la „-4” și așa mai departe.
Elemente numerotate
Al doilea bloc de declarare (selectorul h2) folosește pseudo-elementul :before pentru a specifica unde trebuie plasat un anumit conținut (folosind proprietatea conținut) înaintea oricăror elemente țintă (în cazul nostru, acestea sunt
).
Contracreștere
Proprietatea counter-increment specifică contextul cu care este asociat efectiv contorul. Deci prima valoare (obligatorie) este numele contorului personalizat corespunzător din proprietatea de resetare a contorului din identificatorul de context din primul bloc de declarare.
A doua valoare a proprietății contra-increment este opțională. Reprezintă suma cu care contorul ar trebui să fie incrementat (sau decrementat dacă îl setați la o valoare negativă). Valoarea implicită este „1”.
Inserați conținut
Cu proprietatea content, specificăm exact ce trebuie inserat înaintea fiecărui element dintr-un anumit set (elements
).
Singura valoare necesară pentru proprietatea conținut este funcția counter(), dar de obicei se adaugă altceva (cum ar fi spații) înainte sau după (vezi exemplul de mai sus) pentru a da contorului un aspect plăcut.
funcția counter().
Funcția counter() poate lua două argumente separate prin virgulă. Primul argument indică valoarea curentă a contorului numit. Al doilea argument este opțional și specifică formatul de ieșire al valorii contorului. Valoarea implicită este " zecimal”, dar puteți specifica „ roman superior”, “alfa superioară”, și așa mai departe (la fel ca și pentru proprietatea de tip list-style-type a unei liste ordonate).
De asemenea, puteți utiliza funcția counters() și puteți organiza contoare imbricate, dar nu le vom trata în această lecție.
Rezumat grafic
Dacă toate cele de mai sus sună complicate, infograma de mai jos descrie elementele principale ale unui contor CSS:
Suport pentru browser și dezavantaje
Mai multe contoare care sunt folosite pentru același context (pentru a construi cascada de numerotare) trebuie declarate împreună. Următorul exemplu nu va funcționa:
div.numbered ( counter-reset: titluri 0 ) div.numbered ( counter-reset: subtitluri 0 )
Doar al doilea contor va avea efect deoarece îl înlocuiește pe cel anterior. Astfel, ambele contoare trebuie declarate pe aceeași linie:
Div.numbered (contor-resetare: titluri 0 subtitluri 0)
Un potențial dezavantaj al folosirii contoarelor este amestecarea conținutului și a prezentării. În special, această declarație se referă la proprietatea conținutului. Linia de demarcație dintre conținut și prezentare este neclară.
Cele trei proprietăți enumerate și pseudo-elementul care descriu funcționalitatea contorului CSS nu sunt acceptate în IE 7 și versiuni ulterioare și pot avea probleme în IE8, Opera și Safari. Firefox și Chrome acceptă toate funcțiile descrise fără probleme.
Beneficii și utilizare practică
Contoarele CSS au avantajul evident că nu trebuie să vă faceți griji cu privire la numerotarea diferitelor elemente din conținut. Ca și listele ordonate, conținutul nu are numere reale. Puteți introduce elemente, șterge elemente, le puteți schimba, iar pointerii digitale se vor corecta automat.
Câteva exemple de utilizare practică:
• Denumirea și numerotarea capitolelor (ca în exemplul nostru)
• Numerotarea rândurilor unui tabel sau a celulelor acestuia
• Numerotarea titlurilor HTML
• Îmbunătățiți/Modificați aspectul sau valoarea incrementală pentru listele ordonate normal
Este posibil să folosiți contoare CSS?
Deoarece nu sunt acceptate în IE6 și IE7, nu ar trebui să utilizați contoare CSS pentru site-urile client sau ar trebui să căutați un înlocuitor potrivit pentru acestea. Dar pentru site-urile web și aplicațiile destinate unui public mai tehnic (de exemplu, un site pentru utilizarea pe dispozitive mobile care acceptă browsere CSS3), astfel de contoare pot fi o modalitate eficientă de a crea un sistem de numerotare a conținutului fără utilizarea programării.
Pe pagina demonstrativă, puteți vedea un exemplu de utilizare a contoarelor CSS pentru titluri.
De la autor:În acest scurt articol, vom arunca o privire asupra contoarelor CSS, o caracteristică utilă, dar încă necunoscută. După demonstrația noastră, ne vom uita la exemple reale de site-uri care folosesc contoare CSS.
Sarcina principală: stilarea listei numerotate
Mai întâi, să ne uităm la ce ar trebui să obținem:

Nimic dificil, nu? Dar există un mic „dar”: atunci când creăm markeri, vom folosi marcajul semantic și vom evita pe cât posibil div-urile și intervalele inutile. Să analizăm o metodă flexibilă și de înțeles!
Contoare CSS
Pentru a crea acest șablon, trebuie doar să creați o listă numerotată. Aici ai putea spune „este posibil să luăm un alt element sau chiar nu o listă”. Răspunsul este da, dar amintiți-vă că doar o listă numerotată descrie cu exactitate structura paginii noastre.
A doua întrebare ar trebui să fie „Este posibil să se reproiecteze complet aspectul numerelor din listă?”. Stilizarea unei liste numerotate este o sarcină destul de dificilă, dar, din fericire, există o altă modalitate între browsere. Deci, să ascundem numerele din listă și să folosim contoare CSS.
Sintaxă
Folosind contoare CSS, puteți genera numere pe baza elementelor repetate și le puteți stila. Gândiți-vă la contoare ca la variabile care pot fi incrementate. Luați în considerare sintaxa de bază:

Crearea unui nou contor. Figura de mai sus arată cum să creați un contor pentru o listă numerotată și să setați domeniul acesteia. Am folosit proprietatea counter-reset.
Prima valoare este numele contorului
Urmează un parametru opțional care setează punctul de pornire al contorului (0 în mod implicit). Rețineți că contorul numără întotdeauna în sus, de exemplu. prima noastră valoare va fi 1.

Stilizarea elementelor copil. În a doua imagine, puteți vedea că adăugăm stiluri pentru pseudoclasa ::before pe elementul li list.
Proprietății de conținut i s-a atribuit o valoare. Folosind contoare CSS cu proprietatea conținut, putem concatena numerele generate cu șiruri de caractere.
Este specificat numele contorului
Și tipul zecimal este setat (sistem de numere zecimale). Valorile pozitive sunt aceleași cu valorile pentru proprietatea de tip listă.
În proprietatea counter-increment, specificăm din nou numele contorului
Apoi, opțional, puteți specifica pasul de creștere. Valoarea implicită este 1.
marcare
Pe baza celor de mai sus, marcajul ar fi:
1. Element din listă

   Un text aici.

2. Element din listă

   Un text aici.

<-- еще элементы списка -->
< ol > < li > < h4 >Element din listă< / h4 > < / li > < li > < h4 >Element din listă< / h4 > < / li > < -- ещеэлементысписка-- > < / ol >
ol ( counter-reset: section; ) li ( list-style-type: none; font-size: 1.5rem; padding: 30px; margin-bottom: 15px; fundal: #0e0fee; culoare: #fff; ) li:: înainte de ( conținut: contor(secțiune); contor-increment: secțiune; afișare: bloc inline; poziție: absolut; stânga: -75px; sus: 50%; transformare: translateY(-50%); padding: 12px; font- dimensiune: 2 rem; lățime: 25 px; înălțime: 25 px; aliniere text: centru; culoare: #000; rază chenar: 50%; chenar: 3 px solid #000; )
ol( counter - reset : sectiune ; li ( list-style-type: niciunul; dimensiunea fontului: 1.5rem; umplutură: 30px margine - jos : 15px ; fundal: #0e0fee; culoare: #fff; li ::inainte( continut : contor(sectiune); contor-increment: sectiune; afisare: bloc inline; poziție: absolută; stânga : - 75px ; sus: 50%; transform : translateY (- 50% ) ; umplutură: 12px dimensiunea fontului: 2rem; latime: 25px inaltime: 25px; Restricții Este important de menționat că pseudo-clasele nu sunt disponibile 100% în acest moment. Pentru a afla, am făcut un test rapid: am instalat NVDA și am deschis demo-ul sub Chrome 50, Firefox 45 și Internet Explorer 11. Am descoperit că atunci când folosești Internet Explorer, Naratorul nu a vorbit conținutul generat. În acest moment, majoritatea cititorilor de ecran recunosc în mod normal un astfel de conținut. Totuși, pentru a înțelege ce poate și nu poate fi generat folosind pseudo-elemente, este pur și simplu necesar să cunoaștem aceste limitări. Exemple de contoare CSS Am acoperit elementele de bază ale contoarelor CSS și acum vă putem arăta câteva exemple de utilizări potențiale ale acestora. În primul rând, contoarele CSS sunt adesea folosite în versiunile online ale ziarelor. Adesea, acestea vor fi amplasate în barele laterale: Contoarele CSS pot fi folosite și în secțiuni care descriu unii pași sau indică direcția de acțiune. Exemple: Exemple cu cod HTML suplimentar Mai sus am dat două exemple de versiuni online ale publicațiilor care folosesc contoare CSS. Acum să ne uităm la încă două exemple, dar acum, în loc de contoare, se folosește cod HTML redundant (deși conținutul acestuia este disponibil): Concluzie În acest scurt articol, am învățat cum să stilăm listele numerotate cu contoare CSS. Rezuma: Contoarele CSS sunt excelente pentru orice proiect cu liste numerotate dinamice și stiluri personalizate. Cu toate acestea, această metodă nu este disponibilă 100%. Este necesar să înțelegeți punctele sale slabe și să-l folosiți numai în cazuri adecvate. Pentru a crea un contor, trebuie să setați două proprietăți (counter-reset, counter-increment) și o funcție (counter() sau counters())). Contorul este afișat printr-un pseudo element. Proprietatea de conținut este implicată în activitatea contorului și este disponibilă numai sub pseudo-element. Ați folosit vreodată contoare CSS în proiectele dvs.? Dacă da, nu ezitați să vă împărtășiți munca!
Reg.ru: domenii și găzduire
Cel mai mare registrator și furnizor de găzduire din Rusia.
Peste 2 milioane de nume de domenii în serviciu.
Promovare, mail pentru domeniu, solutii pentru afaceri.
Peste 700 de mii de clienți din întreaga lume și-au făcut deja alegerea.
* Treceți cu mouse-ul pentru a întrerupe derularea.
Inapoi inainte
12 caracteristici CSS impresionante
Dacă sunteți ca mine, când vedeți o demonstrație impresionantă a noului efect CSS3, pur și simplu nu puteți să nu începeți să îl utilizați în munca dvs.
Desigur, mai târziu afli că poți folosi acest efect în 2 sau 3 browsere majore (desigur, IE, ca întotdeauna, fumează nervos pe margine și nu este inclus în această listă) și de obicei te hotărăști să aștepți.
Așteptați până când acest efect este acceptat de toate browserele. Dar eu Vești bune Pentru dumneavoastră! Cu cea mai recentă actualizare a browserului, există câteva funcții CSS3 excelente care sunt acceptate de toate browserele și puteți începe să le utilizați chiar acum!
Digresiune lirică: majoritatea acestor efecte nu funcționează în versiunile mai vechi de IE (versiunea 9 și mai jos). Dacă s-a întâmplat ca în țara ta aceste browsere să fie folosite peste tot, atunci mi-e teamă că trebuie să te supăr, această lecție nu este pentru tine. Dar pentru restul, iată ce ne pot oferi browsere moderne:
1. Animații și tranziții CSS
Animația CSS este în sfârșit disponibilă pentru toate browserele majore, chiar și pentru IE! (începând cu versiunea 10). Există 2 moduri de a crearea css animatii. Primul este foarte simplu și funcționează prin proprietate tranziție.
Cu această proprietate, puteți crea efecte la trecerea cu mouse-ul sau deplasarea mouse-ului departe de o anumită zonă sau puteți declanșa o animație folosind JavaScript pentru a schimba proprietățile unui obiect.
Ca o demonstrație a unor astfel de tranziții bazate pe proprietate tranziție, mai sus este un exemplu efect de hover cu planetă și rachetă. Când plutește deasupra unei planete, racheta se rotește mai aproape de ea.
A doua metodă de animație este puțin mai complicată - este legată de descrierea animației prin regulă @cheie, care vă permite să creați o animație repetată sau în buclă care nu depinde de acțiunile utilizatorului sau de un declanșator JavaScript.
Codul efectului este prezentat mai jos:
Container( lățime: 300 px; înălțime: 300 px; margine: 0 automat; poziție: relativă; overflow: ascuns; ) .planet( poziție: absolut; sus: 0; stânga: 0; lățime: 100%; înălțime: 100%; fundal :url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) centru centru fără repetare; ) .rocket( poziție: absolut ; sus:0; stânga:0; lățime:100%; înălțime:100%; fundal:url /img/rocket.png) centru de 50 px fără repetare; /* Chrome necesită încă prefix -webkit- */ -webkit-animation :orbit 2s linear infinit;animation:orbit 2s linear infinit;transition:background-position 0.8s; ) .container:hover .rocket( background-position:80px center; ) /* Setați cadre cheie pentru animație */ @-webkit-keyframes orbita ( de la ( -webkit-transform:rotate(0deg);) la ( -webkit-transform :rotate(360deg); ) ) @keyframes orbita (de la ( transform:rotate(0deg); /* Am inclus -webkit-) transformă proprietatea deoarece Google Chrome poate începe să accepte cadre cheie fără prefix în viitor */ -webkit-transform :rotate(0deg);) to ( transform:rotate(360deg); -webkit-transform:rotate(360deg); ) )
Există o mulțime de animații CSS aici și bănuiesc că veți începe cu acest articol. Dacă sunteți curios dacă browserul dvs. acceptă acest efect sau nu, atunci vă rugăm să iubiți și să favorizați acest tabel.
2. Numărarea valorilor cu o proprietate calc()
Un alt nou lucru CSS cool este funcția calc(). Vă permite să faceți cel mai simplu calcule aritmeticeîn CSS. Puteți utiliza acest lucru oriunde aveți nevoie pentru a vă ocupa de lungime sau lățime.
Dar ceea ce este și mai tare este că poți amesteca fără întreruperi diferite dimensiuni, fie că este vorba de pixeli sau de un procent.
Acest lucru vă permite să creați o cantitate mare diverse trucuri și trucuri (cum ar fi stratificarea și poziționarea) care pun toate trucurile la care ar fi trebuit să apelezi pentru a obține un rezultat similar pe omoplați. Ce ar putea fi mai bun? Dar ce, funcționează cu versiunea IE a 9-a (ura!) și superioară și fără prefixe suplimentare.
Acest div are 20px pe fiecare parte.
/* Calculați lățimea */ .container( lățime: calc(100% - 40px); background-color:#CDEBC4; color:#6D8B64; text-align:center; padding:25px 0; margin: 0 auto; )
3. Selectoare avansate
Astăzi, dacă atașați ID-uri elementelor doar pentru a le aplica proprietăți de stil, faceți lucrul greșit. Începând cu CSS2.1 și CSS3 activate un numar mare de selectoare puternice pentru a face layout-urile mai curate, iar foile de stil să arate mai cool.
Acest lucru este acceptat de toate browserele majore, inclusiv IE9 și versiuni ulterioare.
Exemplu:
Un paragraf de text care este inseparabil de alte etichete și id-shnik-uri, cu un anumit număr de interesant css stiluri
/* Stil CSS - nimic interesant aici */ p( dimensiunea fontului: 16px; lățime: 420px; margine: 20px auto 0; text-align:center; ) .container( lățime: 420px; margine: 50px auto 0; overflow: ascuns; padding:5px; ) .elem( lățime:30px; înălțime:30px; margin:4px; background-color:#A0DFAC; float:left; ) .elem span( poziție:absolute; sus:5px; stânga:5px; dreapta:5px; jos:5px; chenar:2px solid #fff; ) /* Un selector care aplică proprietăți primei litere și primului rând din paragraful nostru */ p::first-letter( background-color: #666 ; culoare: # FFF; dimensiunea fontului: 24px; stilul fontului: normal; afișare: bloc inline; umplutură: 0 5px; raza chenar: 3px; marginea dreapta: 2px; familia fonturilor: serif; ) p: :first-line (font-size: 18px; text-transform: smallcaps; font-style: italic; text-decoration: underline; ) /* Faceți primul și ultimul element violet */ .elem:first-child, .elem: last-child( background-color:#948bd8; ) /* Faceți toate celelalte elemente rotunjite */ .elem:nth-child(odd)( border-radius:50%; ) /* Faceți fiecare al șaselea element roșu */ .elem:nth-child(6)( background-color:#cb6364; ) /* Stilați elementul care conține eticheta span */ .elem:not(:empty)( background -color:#444; position:relative; -webkit-transform:rotate(25deg); transform:rotate(25deg); ) /* Elemente țintă după atribut */ .elem( background-color:#aaa; ) .elem ( background-color:#d7cb89; ) /* Valoarea atributului trebuie să înceapă cu „bar”. deoarece aceasta se potrivește cu cele două elemente de mai sus*/ .elem( lățime: 16px; înălțime: 16px; margine: 11px; ) /* Elementul după cel cu data-foo="bar2"*/ .elem + .elem ( culoare de fundal :#78ccd2; )
4. Conținut generat și contoare
Conținutul generat este Unealtă puternicăîn mâinile dezvoltatorului, care devine disponibil după aplicarea pseudo-elementelor ::inainte deȘi ::după.
Această caracteristică vă va permite să utilizați mai puțin HTML decât ați putea altfel. Acest lucru este benefic în special în cazurile în care trebuie să aplicați umbre bloc sau altele efecte vizuale care necesită etichete span sau div. Ca rezultat, veți obține un cod HTML mai minimalist și mai corect din punct de vedere semantic.
CSS3 de asemenea, oferă acces pseudo-elementelor la contoare care pot fi incrementate de regulile CSS. De asemenea, pot obține valori ale atributelor de la elementele părinte care le conţine. Exemplu de mai jos:
Buton Buton Buton Buton
Container( /* Configurați un contor numit cnt zero*/ contraresetare: cnt; poziție:relativă; text-align:center; umplutură: 20px 0; lățime: 420px; înălțime: 160px; marja: 0 auto; ) /*Puteți stiliza pseudo-elemente și le puteți oferi conținut ca și cum ar fi elemente reale pe pagină */ .container::before( display: block; content:"Hover over these items:"; font-size:18px ; font-weight:bold; text-align:center; padding:15px; ) .container span( display:inline-block; padding:2px 6px; background-color:#78CCD2; color:#186C72; border-radius:4px ; margin:3px; cursor:default; ) /*Creează un contor cu pseudo-element*/ .container span::after( /* De fiecare dată când se aplică această regulă, valoarea contorului va fi incrementată cu 1 */ counter-increment: cnt; /* Adăugați conținut la valoarea contorului */ conținut:" #" counter(cnt); display:inline-block; padding:4px; ) /* Pseudo-elementele pot accesa atribute de la părinții lor */ .container span ::before( poziție:absolut; jos:0; stânga:0; lățime:100%; conținut:attr(titlu-date); culoare:#666; opacitate:0; /* Animație de tranziție */ -webkit-transition: opacitate 0,4 s; tranziție: opacitate 0,4 s; ) .container span:hover::before( opacitate:1; )
Conținutul generat este acceptat peste tot, inclusiv IE9 și versiuni ulterioare.
Gradienții oferă designerilor web capacitatea de a crea tranziții netedeîntre culori fără a utiliza imagini. Gradienții CSS arată grozav și pe ecranele retină, deoarece sunt generați din mers.
Ele pot fi liniare sau radiale și pot fi setate să se repete. O perioadă nu au fost disponibile pentru toată lumea, dar după câteva luni și un anumit număr de modificări ale sintaxei, au devenit disponibile pentru aproape toată lumea, fără prefixe suplimentare.
Liniar
Radial
Linie care se repetă.
Repetând Rad.
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; chenar-radius:2px; color:#666; vertical-align: top; line-height: 230px; font-size: 12px ; ) #el1( fundal:gradient-liniar(în jos, #8dd2d9, #58c0c7); ) #el2( fundal:gradient-radial(#77d19e,#46c17b); ) #el3( fundal:gradient-liniar-repetat( -45deg, #de9dd4, #de9dd4 5px, alb 5px, alb 10px); ) #el4( background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, alb 5px, alb 10px); )
Vă puteți imagina o perioadă în care ne limitam la câteva fonturi scrise de mână care se potrivesc exact tuturor browserelor? E greu de crezut, dar astăzi, datorită unor servicii precum Fonturi Googleși typekit , care vă permit să utilizați fonturi excelente prin simpla includere a acestora în stiluri pe pagina dvs.
Există chiar și fonturi de pictograme, cum ar fi fontawesome , care conțin pictograme destul de vector în loc de litere sau numere. Toate acestea sunt posibile prin regulă @font-face, care vă permite să setați numele, caracteristicile și sursa fontului, care mai târziu poate fi referit prin proprietate font/familie-font.
Iată fontul meu frumos!)
H1( /* Utilizarea fontului selectat includem în familia HTML */ font-family: Satisfy, cursive; font-weight:normal; font-size:24px; padding-top: 60px; )
Cu câteva soluții, fonturile funcționează în browsere care încep cu IE 6. Cu toate acestea, există 2 servicii care au fost descrise mai sus, așa că acum nu aveți nevoie de aceste soluții.
7. Dimensiunea blocului. Proprietate dimensionarea cutiei
Cea mai mare durere de cap pentru începătorii CSS este modelul cutie.
Au existat anumite motive întemeiate pentru a standardiza acest model, cu toate acestea nu a fost intuitiv, de exemplu, în cazurile în care ați setat înălțimea și lățimea blocului, dar acestea se schimbau în funcție de valoare. căptușeală sau frontieră.
Această mică omisiune rupe totul, dar în cele din urmă avem o modalitate de a restabili sănătatea mintală și de a scăpa de durerea de cap. Îndeplinește regula dimensionarea cutiei! Acum poți să întrebi cutie-chenar, care păstrează elementele exact așa cum doriți să fie. Convinge-te singur:
Elementul 1
elementul 2
Elementul 3
Container( text-align:center; ) .container div( /*Setarea metodei de dimensionare a casetei */ box-sizing:border-box; /*Firefox este special, deci mai necesită prefixe*/ -moz-box-sizing :border-box; width:120px; height:120px; display:inline-block; vertical-align:top; ) /*Datorită regulii de dimensionare a casetei, putem seta umplutura și chenarul la orice dorim, iar elementele vor rămâne la aceeași dimensiune, așa cum erau*/ #el1( color:#524480; background-color:#B2A4E0; ) #el2( padding:8px; border:10px solid #9ec551; background-color:#fff; ) #el3( padding:32px ; background-color:#ccc; )
8. Imaginile ca margini sau proprietate chenar-imagine
Proprietate chenar-imagine vă permite să afișați imagini personalizate în jurul elementelor, ca un accident vascular cerebral. Anumite limite conținute într-o imagine sau sprite urmează sau se conformează anumitor limite elemente de bloc. Vedeți un exemplu pentru a înțelege acest lucru mai clar:
Salutați contururile blocurilor drăguțe sub formă de imagini!
P( text-align:center; padding:20px; width:340px; margin: 0 auto; /*Setați proprietățile pentru chenar și pentru imaginea folosită ca chenar*/ 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 rundă; )
Consultați această pagină și acest paragraf pentru mai multe detalii. Sprijinit de toate browserele majore și IE 11.
Interogările media sunt o necesitate de învățat dacă vrei să fii serios în ceea ce privește designul web. Sunt folosite de ceva timp, dar merită menționate, pentru că au schimbat modul în care construim site-uri web.
Acesta este utilizat atunci când aveți nevoie ca site-ul web să arate la fel de corect pe diferite dispozitive (de exemplu dispozitive mobile- tablete, smartphone-uri, laptopuri etc.) cu diferite lățimi ale ecranului. Astăzi creăm site-uri web care ar trebui să se poată adapta tipului de dispozitiv, orientării și rezoluției monitorului.
Interogările media sunt incredibil de ușor de utilizat: tot ce trebuie să faceți este să vă înfășurați stilurile CSS într-un bloc care conține regula @ mass-media. Fiecare @mass-media blocul este activat atunci când sunt îndeplinite una sau mai multe condiții.
Conținutul principal al articolului merge aici
/* Stil pentru conținutul principal și bara laterală */ .container( width:900px; margin: 0 auto; overflow:hidden; ) .main-section( background-color:#CDEBC4; color:#6D8B64; width:520px; float: stânga; înălțime:500px; ) .sidebar( culoarea fundalului:#ccc; lățime:350px; float:dreapta; înălțime:400px; ) .container p( padding-top:100px; text-align:center; ) .note( text-align:center; padding-top:60px; font-style:italic; ) /* Aceste interogări media simple permit casetelor să se adapteze la lățimea ecranului dvs. */ @media (max-width:900px)( .container( width: 100 %; ) .main-section, .sidebar( width:auto; margin-bottom:20px; float:none; ) )
Interogările media pot conține verificări pentru rezoluția ecranului dispozitivului, orientarea, adâncimea culorii și multe altele. Puteți citi despre toate acestea și puteți vedea tabelul de compatibilitate.
10. Fundaluri pe diferite straturi
Cu această caracteristică, designerii creează efecte incredibil de interesante. Ei pot aduna o imagine întreagă din diferitele sale părți situate pe straturi diferite.
Fiecare astfel de strat (imagine) se poate muta și anima în felul său, de exemplu, cum ar fi demonstrația de mai jos (treceți cu mouse-ul peste imagine și vedeți ce se întâmplă). Toate proprietățile de fundal CSS pot accepta acum o listă de proprietăți separate prin virgulă pentru fiecare strat individual:
Space( /* Setați o listă de fundaluri separate prin virgulă */ background:url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big) .png" ) no-repeat center 70px, url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg") nu- repetați jos centru ; lățime:200px; înălțime:200px; margine: 0 auto; border-radius:3px; /* Poziție animată pentru ambele fundal */ transition:background-position 1s; ) .space:hover( /* Același lucru pentru proprietăți ? cum ar fi fundal-position și repetare */ background-position:35% 20px, dreapta sus; )
Pentru mai multe informatii uita-te aici. Foarte sprijin bun browsere - toate browserele moderne acceptă această regulă. .
Aspectele bazate pe coloane au reprezentat o problemă majoră pentru dezvoltatorii CSS. De obicei, serverul sau javascriptul au luat parte la aceasta pentru a împărți textul în părți egale / coloane. Acest lucru complică sarcina în mod nerealist și, de asemenea, ucide mult timp valoros pentru dezvoltatori. În sfârșit, acum s-a terminat cu o regulă CSS coloane.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque urna nec eros ornare, ac tristique diam porta. Donec fermentum velit eget dignissim condimentum. Sed rutrum libero sit amet enim viverra tristique. Mauris ultrices 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 dis parturient montes, nascetur ridiculus mus. Sed nunc lorem, convallis consequat fermentum eget, aliquet sit amet libero.
Container( lățime: 500px; margine: 0 automat; ) /* Doar creați coloane ca acesta */ .container p( -moz-columns:3; -webkit-columns:3; coloane:3; )
Există un suport bun pentru această regulă, dar încă necesită prefixe. Dar există anumite diferențe și nuanțe între browsere de care este important să fii conștient.
12. Transformări 3D CSS
Nu există nimic mai atractiv și mai minunat pe web decât o demonstrație CSS 3D impresionantă. În timp ce utilitatea acestui lucru în afara demo și în afara portofoliului este oarecum discutabilă, 3D CSS oferă mai multe caracteristici puternice pentru designeri și dezvoltatori care pot câștiga inimile utilizatorilor dacă sunt utilizate corect.
Uită-te la exemplul de cod de mai jos:
Container( /* Cum trebuie exprimate efectele 3D */ perspectiva: 800px; -webkit-perspective: 800px; fundal: radial-gradient(#e0e0e0, #aaa); width:480px; height:480px; margin:0 auto; border -radius:6px; position:relative; ) .iphone-front, .iphone-back( /* Conectarea transformării 3D */ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; /*Noi utilizați 2 div-uri diferite pentru partea din față și din spate a telefonului Această proprietate ascunde div-urile atunci când se rotește, astfel încât partea opusă să fie afișată*/ backface-visibility: hidden; -webkit-backface-visibility: hidden; width:200px; height:333px ; poziție: absolut; sus:50%; stânga:50%; margine:-166px 0 0 -100px; background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can- în cele din urmă- use/assets/img/iphone.png) no-repeat centru stânga; /* Animație de tranziție */ transition:0.8s; )); -webkit-transform:rotateY(180deg); fundal-poziție:centru dreapta; ) .container:hover .iphone-front( /*Când containerul este plasat peste și hoverat, rotiți partea din față și ascundeți-l */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); ) .container : hover .iphone-back( /*... rotiți în același timp înapoiși faceți-l vizibil*/ transform:rotateY(360deg); -webkit-transform:rotateY(360deg); )
Acest cod a fost modelat după acest tutorial, pe care vă recomand să-l citiți.
Dacă doriți să aflați mai multe despre CSS 3D, aruncați o privire la introducerea detaliată. Cu excepția cazului în care vizați browsere IE mai vechi, suportul pentru browser pentru CSS 3D este și el destul de bun.
Alte beneficii demne de menționat
Dacă încă folosiți prefixe pentru hotar-razaȘi umbra cutie acum poți uita în siguranță de asta.
De asemenea, acum puteți începe să utilizați data-uri pentru imagini de fundal, pentru toate browserele.
Proprietate opacitate este acum disponibil și susținut peste tot, va fi și foarte util să cunoașteți proprietatea dimensiunea fundalului.
Va mai trece ceva timp până la suportul între browsere pentru flexbox, @sprijină, filtre și măști CSS, dar sunt sigur că merită așteptarea!
Contoare CSS vă permit să ajustați aspectul conținutului în funcție de locația acestuia într-un document. De exemplu, puteți utiliza contoare pentru a numerota automat titlurile dintr-o pagină web. Contoarele sunt, în esență, variabile menținute de CSS ale căror valori pot fi incrementate de regulile CSS pentru a urmări de câte ori sunt utilizate.
Folosind contoare
Manipularea valorii unui contor
Pentru a utiliza un contor CSS, acesta trebuie mai întâi inițializat la o valoare cu proprietatea de resetare a contorului (0 în mod implicit). Aceeași proprietate poate fi folosită și pentru a-și schimba valoarea la orice număr specific. Odată inițializat, valoarea unui contor poate fi mărită sau micșorată cu contra-increment. Numele contorului nu trebuie să fie „niciun”, „moștenire” sau „inițial”; în caz contrar declarația este ignorată.
Afișarea unui contor
Valoarea unui contor poate fi afișată folosind fie funcția counter() fie counters() într-o proprietate de conținut.
Funcția counter() are două forme: „counter(name)” sau „counter(nume, stil)”. Textul generat este valoarea celui mai interior contor al numelui dat în domeniu la pseudo-elementul dat. Este formatat în stilul specificat (decimal în mod implicit).
Funcția counters() are și două forme: „counters(name , string)” sau „counters(name , string , style)”. Textul generat este valoarea tuturor contoarelor cu numele dat în domeniu la pseudo-elementul dat, de la cel mai exterior la cel mai interior, separate de șirul specificat. Contoarele sunt redate în stilul indicat (decimal implicit).
exemplu de bază
Acest exemplu adaugă „Secțiunea :” la începutul fiecărui titlu.
css
body ( counter-reset: section; /* Setați un contor numit „secțiune”, iar valoarea sa inițială este 0. */ ) h3::before ( counter-increment: section; /* Creșteți valoarea contorului secțiunii cu 1 * / conținut: contor(secțiune); /* Afișează valoarea contorului secțiunii */ )
HTML
Introducere
Corp
Concluzie
rezultat
Contoare nesting
Un contor CSS poate fi util în special pentru realizarea listelor subliniate, deoarece o nouă instanță a contorului este creată automat în elementele copil. Folosind funcția counters(), textul de separare poate fi inserat între diferite niveluri de contoare imbricate.
Exemplu de contor imbricat
css
ol ( counter-reset: section; /* Creează o nouă instanță a contorului de secțiune cu fiecare element ol */ list-style-type: none; ) li::before ( counter-increment: section; /* Crește doar această instanță al contorului de secțiuni */ conținut: contoare(secțiunea, ".") " "; /* Combină valorile tuturor instanțelor contorului de secțiuni, separate printr-un punct */ )
HTML
1. articol
2. articol
   1. articol
   2. articol
   3. articol
      1. articol
      2. articol
      1. articol
      2. articol
      3. articol
   4. articol
3. articol
4. articol
1. articol
2. articol