Gamit ang mga katangian ng CSS "display: none"

Cascading Style Sheets (CSS) daan sa iyo upang ayusin ang hitsura at disenyo ng web page. Isa sa mga pinaka-karaniwang ginagamit na mga katangian at mga halaga nito ay "display: none".

Pagtukoy ng mga katangian

Ang ari-arian mismo ay isang multi-purpose at tumutukoy sa uri ng display element sa dokumento. Depende sa mga tiyak na mga halaga napiling pahina ay maaaring ipakita ang bahagi block, linearly, bilang isang listahan ng mga item bilang bahagi ng talahanayan, at iba pa. D. Kaya, dahil sa ang ari-arian ng "display", maaari palitan ang uri ng bloke sa dokumento.

Tulad ng para sa "halaga ng ari-arian display: none" bundle, pinapayagan ka upang tanggalin ang isang item o isang bloke ng ang dokumento. Sa parehong lugar sa ilalim ng piraso ng pahina ay hindi nakalaan, na nangangahulugang ito ay bumaba sa labas ng stream. Ang lahat ng mga elemento na lampas sa "remote", kailangan lang ay hindi makita ito at huwag pansinin ang laki at posisyon ng unit. Upang bumalik sa isang nakatagong object, dapat kang sumangguni sa dokumento sa pamamagitan ng mga script na lang baguhin ang halaga ng mga ari-arian sa nais na format. Kapag nangyari ito awtomatikong i-format ang pahina gamit ang bagong bagay dito.

Ang pagkakaiba sa pagitan ng mga ari-arian "display" at "visibility"

Sa kabila ng ang katunayan na bilang isang resulta ng parehong mga katangian upang itago ang mga item mula sa user, ang kanilang mga prinsipyo ng operasyon ay lubos na naiiba. Bilang na nabanggit sa itaas, ang parameter na "display: none" nag-aalis ng sangkap mula sa dokumento. block ang falls out ng pahina, sa gayon ay hindi na nagaganap sa loob nito. Sa kasong ito, ang object pa rin nananatili sa HTML-code.

Kaugnay nito, ang ari-arian "visibility: nakatagong" Itinatago ang elemento mula sa user, ngunit hindi alisin ito mula sa modelo dokumento. Sa gayon, ang pahina ay nakareserba isang lugar sa block na ito. Iyon ay, ang dokumento na daloy tatanggap at isaalang-alang ang lokasyon at laki ng isang elemento na may ari-arian "visibility: nakatagong" eksakto sa parehong paraan nang wala ito.

Ang pagkakaibang ito ay ang istraktura ng organisasyon ng mga dokumento ang dalawang properties ginagawang posible upang makamit ang ninanais na resulta para sa tamang pagpapakita ng pahina.

Paggamit ng CSS - display: none

Internet dokumentong may ilang mga paraan upang matukoy ang mga katangian ng elemento. Ang unang display: none ay maaaring inireseta sa isang hiwalay na file para sa Cascading Style Sheets. Ang pamamaraan na ito ay ang pinaka-advanced at ang pinakamahusay na, dahil pinapayagan ka upang gumawa ng lahat ng mga tagapili, mga klase at ang kanilang mga ari-arian sa isang hiwalay na dokumento. Tulad ng isang modelo ay nagbibigay-daan sa iyo upang mabilis na mahanap at baguhin ang mga setting ng pahina.

Ang header dokumento

Ang ikalawang sagisag ay upang tukuyin ang mga estilo kabilang sa mga pamagat ng estilo dokumento tag. Ang pagiging epektibo ng mga pamamaraan na ito ay higit na mas mababa. Ito ay inirerekomenda na mag-aplay lamang sa matinding mga kaso, tulad ng sa pagkakaroon ng isang malaking bilang ng mga estilo sa pagiging madaling mabasa ng mga web designer deteriorates malaki-laki. At ito ay humantong sa mga error at pabagalin ang proseso ng pagbuo ng isang web dokumento. diskarte na ito ay inirerekomenda lamang sa kaso ng pagdaragdag ng mga tag sa isang maliit na bilang ng mga estilo o debugging instrumento.

Isaisip na kung sa ganitong paraan ng pag-aayos ng estilo sa dokumento ay mas mababa sa isang hiwalay na style sheet import, ang mga magkakapatong na mga ari-arian ay mapapatungan sa pamamagitan ng mga nasa katawan ng dokumento html.

Block div. Display: none

Ang isa pang paraan ay ang magdagdag ng direkta sa ang tag na "style = display: none;" code elemento. diskarte na ito ay madalas na ginagamit kapag nagtatrabaho na may iba't-ibang mga frameworks, ang layunin ng kung saan - pagbabawas ng bilang ng mga tampok direkta sa stylesheet at ipakita ang mga ito sa web dokumento. Sa karagdagan, tulad ng isang talaan ay madalas na kapag nanonood ng page "inspectors code". Ito ay mahalaga na tandaan na ang paggamit ng ang paraan na ito, maaari mong baguhin ang ari-arian at halaga inireseta sa stylesheet. Kaya dapat kang maging maingat, bilang isang resulta, maaari kang lumikha ng karagdagang mga problema para sa kanilang sarili at gumastos ng ilang oras sa paghahanap at pag-aayos ng mga error sa pahinang code.

JavaScript

Ito ay din nagkakahalaga mentioning ang posibilidad ng karagdagang mga pagbabago sa property na ito. Tumutukoy ito ay hindi na sa stylesheet at html-code at isang scripting wika. Samakatuwid, upang ilapat ang mga ito ay kinakailangan na magkaroon ng hindi bababa sa ilang kaalaman sa larangang ito. Upang alisin ang elemento mula sa daloy dokumento, maaari mong gamitin ang isang ari-arian JavaScript "display = none". Ito ay nagpapahintulot sa iyo na baguhin ang istraktura ng mga dokumento kapag ang isang tiyak na kaganapan. Gayundin, sa pamamagitan ng paggamit ng mga script upang magilas ( "sa mabilisang") upang baguhin ang mga katangian parameter at sa gayong paraan i-refresh ang view ng pahina nang hindi na kinakailangang i-reload. Diskarte na ito ay kapaki-pakinabang kapag-aayos ng drop-down menu, modal bintana at mga form.

SEO

Sa larangan ng pag-optimize ng nilalaman ng web para sa mga search engine, may mga maraming mga pamahiin at kawalang-katiyakan. Kaya, maraming mga baguhan SEOs isaalang-alang ang paggamit ng mga ari-arian "display" masamang kaugalian. Ipinapaliwanag nila ito sa pamamagitan ng ang katunayan na ang mga search engine nakikita ang mga nakatagong nilalaman, magsisimula na isaalang-alang ang pahina bilang spam. Sa kanilang mga salita, mayroong ilang logic, ngunit hindi marami pa. Sa puntong ito sa panahon ng ari-arian ng mga nakatagong mga bagay na ginagamit madalas sapat upang i-format sa drop-down na menu at itago ang mga bahagi ng dokumento, na kung saan ay kasalukuyang hindi ng interes sa user (halimbawa, kapag pinili mo ang isang kategorya ng mga iba pang impormasyon ay tinanggal). diskarte na ito ay gumagamit ng isang sapat na malakas na Internet portal (isa sa mga ito - ang "Amazon"). Kaya, search engine spiders ay hindi maaaring isaalang-alang ang paggamit ng mga ari-arian "display: none" spam.

Isa pang bagay, kapag ang paraan na ito ay ginagamit upang itago ang indibidwal na mga salita at mga character. Sa kabila ng ang katunayan na ngayon ang search engine spiders wala pang perpektong pagkilala ng naturang "spam" algorithm sa mga dokumento, ang posibilidad na ang pahina ay nahuli sa ito, ay lubos na mataas. Samakatuwid ito ay inirerekumenda na gumamit ng ari-arian "display" ay mahigpit na para sa sinasadyang layunin - upang baguhin ang uri ng bloke o pansamantalang itago mula sa mga mata ng user.