InternetWeb Design

Menggunakan sifat-sifat CSS "display: none"

Cascading Style Sheets (CSS) membolehkan anda untuk menganjurkan rupa dan reka bentuk laman web. Salah satu ciri-ciri yang paling biasa digunakan dan nilai-nilai adalah "display: none".

Penentuan sifat-sifat

Harta itu sendiri adalah pelbagai guna dan menentukan jenis elemen paparan dalam dokumen itu. Bergantung kepada nilai-nilai tertentu halaman yang dipilih boleh dipaparkan bahagian blok, linear, kerana senarai barangan sebagai sebahagian daripada jadual, dan sebagainya. D. Oleh itu, kerana harta "paparan", boleh menukar jenis blok dalam dokumen itu.

Bagi "nilai harta display: none" bundle, ia membolehkan anda untuk memadam item atau suatu blok dokumen itu. Di tempat yang sama di bawah bahagian atas laman tidak terpelihara, yang bermakna ia jatuh daripada sungai itu. Semua unsur-unsur yang berada di luar "jauh", semata-mata tidak melihatnya dan mengabaikan saiz dan kedudukan unit. Untuk kembali objek tersembunyi, anda perlu merujuk kepada dokumen itu melalui skrip yang hanya menukar nilai hartanah kepada format yang dikehendaki. Apabila ini berlaku secara automatik memformat halaman dengan objek baru di atasnya.

Perbezaan antara sifat-sifat "paparan" dan "penglihatan"

Walaupun hasil daripada kedua-dua ciri-ciri untuk menyembunyikan item daripada pengguna, prinsip operasi mereka adalah agak berbeza. Seperti yang telah disebutkan di atas, parameter "display: none" membuang unsur dari dokumen itu. blok jatuh daripada halaman, dengan itu tidak berlaku di dalamnya. Dalam kes ini, objek yang masih kekal dalam HTML-kod.

Sebaliknya, harta "penglihatan: tersembunyi" menyembunyikan elemen daripada pengguna, tetapi tidak mengeluarkannya dari model dokumen itu. Oleh itu, laman yang dikhaskan tempat di blok ini. Iaitu, aliran dokumen itu akan menerima dan mempertimbangkan lokasi dan saiz unsur dengan harta "penglihatan: tersembunyi" dengan cara yang sama tanpa ia.

Perbezaan ini adalah struktur organisasi dokumen-dua hartanah membolehkan untuk mencapai keputusan yang dikehendaki untuk paparan halaman yang betul.

Menggunakan CSS - display: none

dokumen Internet terdapat beberapa cara untuk menentukan sifat-sifat unsur. Paparan pertama: tidak ada yang dapat ditetapkan dalam fail yang berasingan bagi Cascading Style Sheets. Kaedah ini adalah yang paling maju dan yang terbaik, kerana ia membolehkan anda untuk membuat semua pemilih, kelas dan sifat-sifat mereka dalam dokumen yang berasingan. Model seperti membolehkan anda dengan cepat mencari dan mengubah suai tetapan halaman.

Header dokumen

Penjelmaan kedua adalah untuk menentukan gaya antara tajuk tag gaya dokumen. Keberkesanan kaedah ini adalah lebih kurang. Ia adalah disyorkan untuk memohon hanya dalam kes-kes yang melampau, kerana di hadapan sebilangan besar gaya pembacaan halaman web designer merosot dengan ketara. Dan ini membawa kepada kesilapan dan melambatkan proses membangunkan dokumen web. Pendekatan ini hanya disyorkan dalam hal menambah tag kepada sebilangan kecil gaya atau surat cara debugging.

Perlu diingat bahawa jika cara ini menganjurkan gaya dalam dokumen itu adalah kurang daripada import lembaran gaya yang berasingan, sifat-sifat bertindih akan ditulis ganti oleh mereka yang berada di dalam badan html dokumen itu.

Blok div. Display: none

Cara lain adalah dengan menambah terus kepada tag "style = display: none;" elemen kod. Pendekatan ini sering digunakan apabila bekerja dengan pelbagai rangka kerja, tujuan yang - mengurangkan bilangan ciri-ciri terus ke dalam lembaran gaya dan memaparkan mereka dalam dokumen web. Di samping itu, apa-apa rekod yang sering apabila menonton "kod pemeriksa" halaman. Ia adalah penting untuk ingat bahawa menggunakan pendekatan ini, anda boleh menukar harta dan nilai yang ditetapkan dalam stylesheet. Jadi, anda perlu berhati-hati, hasilnya, anda boleh membuat masalah tambahan untuk diri mereka sendiri dan menghabiskan masa kepada mencari dan menetapkan kesilapan kod halaman.

JavaScript

Ia juga bernilai menyebut kemungkinan perubahan seterusnya dalam harta ini. Ia merujuk tidak lagi kepada stylesheet dan html-kod dan bahasa skrip. Oleh itu, untuk memohon ia adalah perlu untuk mempunyai sekurang-kurangnya pengetahuan dalam bidang ini. Dalam usaha untuk menghapuskan unsur dari aliran dokumen itu, anda boleh menggunakan harta JavaScript "paparan = none". Ia membolehkan anda untuk mengubah struktur dokumen itu apabila peristiwa tertentu. Juga, melalui penggunaan skrip dinamik ( "on the fly") untuk menukar sifat parameter dan dengan itu semula paparan halaman tanpa perlu memuat semula. Pendekatan ini adalah berguna apabila menganjurkan menu drop-down, tingkap modal dan bentuk.

SEO

Dalam bidang mengoptimumkan kandungan web untuk enjin carian, terdapat banyak khurafat dan ketidaktentuan. Jadi, banyak SEO baru mempertimbangkan penggunaan sifat-sifat "paparan" akhlak yang buruk. Mereka menjelaskan ini dengan hakikat bahawa enjin carian melihat kandungan yang tersembunyi, mula menimbangkan halaman sebagai spam. Dalam kata-kata mereka, terdapat beberapa logik, tetapi tidak banyak yang lain. Pada ketika ini masa dalam harta objek tersembunyi digunakan selalunya cukup untuk memformat menu drop-down dan menyembunyikan bahagian dokumen itu, yang sekarang tidak menarik perhatian para pengguna (contohnya, apabila anda memilih satu kategori maklumat lain dipadamkan). Pendekatan ini menggunakan cukup kuat portal Internet (salah seorang daripada mereka - yang "Amazon"). Oleh itu, labah-labah enjin carian tidak boleh mempertimbangkan penggunaan harta "display: none" spam.

Satu lagi perkara, apabila pendekatan ini digunakan untuk menyembunyikan perkataan individu dan watak-watak. Walaupun sekarang labah-labah enjin carian tidak lagi mempunyai pengiktirafan sempurna seperti "spam" algoritma dalam dokumen, kemungkinan bahawa halaman akan ditangkap dalam hal ini, adalah agak tinggi. Oleh itu adalah disyorkan untuk menggunakan harta "paparan" adalah hanya untuk tujuan yang telah ditetapkan - untuk menukar jenis blok atau sementara menyembunyikan dari mata pengguna.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 ms.atomiyme.com. Theme powered by WordPress.