Folosind proprietatea CSS `display: none`

Fonturile de stil cascadă (CSS) vă permit să organizați aspectul și designul paginii de Internet. Una dintre cele mai frecvent utilizate proprietăți și valorile lor este "display: none".

Definiția proprietății

Proprietatea însăși este multifuncțională și determină tipul de element afișat în document. În funcție de valoarea selectată, o anumită secțiune a paginii poate fi afișată bloc-cu-linie, liniar, ca elemente de listă, ca parte dintr-o tabelă etc. Astfel, datorită proprietății "afișare", puteți schimba tipul blocului din document.

În ceea ce privește pachetul "display-value: none", vă permite să eliminați un element sau un bloc din document. În acest caz, spațiul pentru o anumită piesă a paginii nu este rezervat, adică ieșea din flux. Toate elementele care se află în spatele "telecomenzii" pur și simplu nu o văd și ignoră mărimea și poziția unui astfel de bloc. Pentru a returna un obiect ascuns, trebuie să te referi la document prin scripturi care schimbă pur și simplu valoarea proprietății în formatul dorit. Aceasta va formata automat pagina, ținând cont de noul obiect de pe ea.

Diferența dintre proprietățile "afișare" și "vizibilitate"

În ciuda faptului că în cele din urmă ambele proprietăți ascund elementul de la utilizator, principiul lor de funcționare este semnificativ diferit. După cum sa menționat mai sus, parametrul "display: none" elimină complet elementul din document. Blocul iese din pagină, fără a ocupa astfel locul. În acest caz, obiectul în sine rămâne în codul HTML.

La rândul său, proprietatea "vizibilitate: ascunsă" ascunde elementul de la utilizator, dar nu îl elimină din modelul de document. Astfel, pe pagina există un loc rezervat pentru acest bloc. Adică fluxul documentului va percepe și va lua în considerare locația și dimensiunile elementului cu proprietatea "vizibilitate: ascunsă" exact ca și în absența acestuia.

Această diferență în organizarea structurii documentului cu aceste două proprietăți vă permite să obțineți rezultatul necesar pentru afișarea corectă a paginii.

Utilizarea CSS - display: none

Documentul Internet vă permite să utilizați mai multe opțiuni pentru a determina proprietatea unui element. În primul rând, afișați: niciunul nu poate fi înregistrat într-un fișier separat de foi de stil cascadă. Această metodă este cea mai avansată și cea mai corectă, deoarece vă permite să faceți toți selectorii, clasele și proprietățile lor într-un document separat. Un astfel de model face posibilă găsirea și modificarea rapidă a parametrilor paginii.

În titlul documentului

A doua opțiune este definirea stilurilor din antetul documentului între etichetele de stil. Eficacitatea acestei metode este mult mai mică. Se recomandă utilizarea acestuia numai în cazuri extreme, deoarece, în prezența unui număr mare de stiluri, lizibilitatea paginii de către designerul web se deteriorează semnificativ. Și acest lucru duce la erori și încetinește procesul de elaborare a unui document Internet. Această abordare este recomandată numai dacă adăugați un număr redus de stiluri la această etichetă sau puteți depana un document.

Trebuie reținut faptul că dacă acest mod de organizare a stilurilor este localizat în documentul de mai jos decât importul unei foi de stil separate, atunci proprietățile intersectate vor fi rescrise de cele care se află în corpul documentului html.

Bloc div. Afișaj: niciuna

O altă modalitate este să adăugați direct elementul elementului de cod "style = display: none;". Această abordare este adesea folosită atunci când lucrați cu diferite cadre, al căror scop este de a reduce numărul de proprietăți direct în foaia de stil și de a le afișa în documentul Internet. În plus, o astfel de înregistrare apare adesea când vizualizați pagina "inspector de cod". Este important să rețineți că utilizând această abordare, puteți modifica proprietatea și valoarea acesteia specificată în foaia de stil. Prin urmare, ar trebui să fiți atenți, ca rezultat puteți crea probleme suplimentare pentru dvs. și puteți petrece ceva timp în căutarea și corectarea erorilor în codul paginii.

jаvascript

Este, de asemenea, demn de menționat posibilitatea suplimentară de a schimba această proprietate. Nu se aplică foii de stil și codului html, ci limbii de scripting. Prin urmare, pentru aplicarea sa este necesar să avem cel puțin câteva cunoștințe în acest domeniu. Pentru a elimina un element din fluxul de documente, puteți utiliza proprietatea jаvascript "display = none". Vă permite să modificați structura unui document când apare un anumit eveniment. De asemenea, datorită utilizării scripturilor, puteți să modificați dinamic ("în zbor") parametrul de proprietate și, prin urmare, să actualizați vizualizarea paginii fără a trebui să îl reporniți. Această abordare este utilă în organizarea meniurilor drop-down, ferestrelor și formelor modale.

SEO

În domeniul optimizării conținutului web pentru motoarele de căutare, există multe superstiții și puncte neclare. Deci, mulți novici SEOShniki ia în considerare utilizarea proprietății "afișare" într-o manieră proastă. Ei explică acest lucru prin faptul că motoarele de căutare, văzând conținut ascuns, încep să considere pagina drept spam. În cuvintele lor există o parte din logică, dar nimic mai mult. În acest moment, proprietatea de a ascunde un obiect este folosită destul de des pentru a formata meniurile derulante și pentru a ascunde anumite părți ale documentului care nu sunt în prezent interesante pentru utilizator (de exemplu, dacă este selectată o categorie, informațiile despre celălalt sunt șterse). Această abordare este folosită de portaluri de Internet destul de puternice (una dintre acestea este "Amazon"). În acest fel, căutați roboți nu poate considera că proprietatea "display: none" este spam.

Un alt lucru este atunci când această abordare este folosită pentru a ascunde cuvinte și simboluri individuale. În ciuda faptului că acum roboții de căutare nu au încă algoritmi perfecți pentru a recunoaște astfel de "spam" în documente, probabilitatea ca pagina să fie prinsă pe aceasta este destul de mare. Prin urmare, se recomandă utilizarea proprietății "afișare" strict în acest scop - pentru a schimba tipul blocului sau pentru al ascunde temporar de la ochiul utilizatorului.