Css pseudo înainte și după, studiul și aplicarea
Dacă sunteți implicat într-o chestiune de punere în aplicare a file folosind CSS, observați de: înainte și: după sunt demne de atenția dezvoltatorilor. Unele sunt folosite inainte si dupa pentru a crea legături frumoase așa cum se arată în imaginea de mai jos.
Există și alte elemente pseudo-, dar astăzi ne vom concentra pe: înainte și: după. Pe parcursul articolului, pseudo-elementele pe termen, ne referim la cei doi (înainte și după).
Ce pseudo?
Psevdoelementy crea elemente false și se introduce în fața (înainte) sau după (după) conținutul particular.
Însăși prefixul „pseudo“ indică faptul că acest lucru nu este elemente reale. Ele nu sunt vizibile pentru motoarele de căutare sunt folosite numai pentru a procesa conținutul. Aceste elemente sunt definite în codul CSS.
Sintaxa de bază
Psevdoelementy: înainte și: după o foarte prescris în codul. Aici este un exemplu simplu de utilizare:
Este important de notat două lucruri. În primul rând, ne referim la elementul html real folosind siruri de caractere #example: înainte și #example: după. Prefixul urmat de două puncte, înseamnă că nu este doar un element de stil, și pseudo ei.
În al doilea rând, nu poți adăuga nimic fără conținut de proprietate. ceea ce indică faptul că acesta ar trebui să fie afișată ca un pseudo.
sintaxa avansată
Puteți lăsa necompletat proprietatea de conținut, și de a crea un bloc.
Dacă ștergeți proprietatea de conținut. pseudo-nu va funcționa. Cel puțin, sovoystvo ar trebui să rămână goale.
Ar trebui să fie conștienți de faptul că unele dintre aceste elemente sunt utilizate în forma :: înainte și după ::. Nu există nici o diferență, browsere de sprijin, de asemenea această sintaxă.
Un alt punct de utilizare. Puteți aplica la fiecare dintre elementele pseudo-html.
Dar este utilizat în scopuri personale. Acest cod introduce un # în fața conținutului din fiecare element DOM. Chiar dacă eliminați toate etichetele de pe pagină, puteți vedea cele două personaje de la pagina ##. Este folosit, nu știu de ce, dar este.
Caracteristici plug-in continut
Așa cum am menționat mai devreme, conținut care este inserat este invizibil pe pagina HTML. Este vizibil doar în CSS.
De asemenea, conținutul de plug-in pentru a fi elemente inline în mod implicit. Pentru a face punctul său bloc de afișare suficient: bloc;. specificați lățimea și înălțimea unității. Acest lucru este foarte convenabil atunci când creați file, butoane, etc.
Este important de remarcat faptul că pseudo-stiluri nu moștenesc de la elementele lor mamă (cum ar fi marginile interioare și exterioare). De aceea, pentru fiecare pseudo, trebuie să specificați parametrii de stiluri.
Introduceți nu numai conținutul textului
Conținutul de proprietate. Nu trebuie să fii un text poate fi, de asemenea, o imagine. Puteți înregistra adresa URL a imaginii, așa cum se face în fundal.
Este important să ne amintim că URL-ul nu poate fi citat, aceasta ar însemna că conținutul este un text.
Ce browsere sprijini: înainte și: după?
Mai ales în ultimul timp, este important în proiectarea de compatibilitate cross-browser. Prin urmare, înainte de a utiliza orice metodă, trebuie să-l verificați în diferite browsere. Mai jos este o listă de browsere care acceptă de: înainte și: după.
Firefox 3.5+ (3.0 are suport parțial)
IE8 + (cu bug-uri minore),
La fel ca multe alte browsere mobile.
Există doar o singură problemă (sper că acest lucru nu este o veste pentru tine) IE6 și IE7, care nu acceptă pseudo. Dacă baza dvs. de utilizator utilizează browserele trebuie să sufere sau să le ofere pentru a face upgrade browser-ul pur și simplu.
După cum se poate vedea utilizarea înainte și după pseudo-elementele care nu este la fel de critică cât mai multe imaginat. Asta e tot, vă doresc succes!