Sử dụng các thuộc tính của CSS "display: none"

Cascading Style Sheets (CSS) cho phép bạn tổ chức các sự xuất hiện và thiết kế của trang web. Một trong những đặc tính thông dụng nhất và giá trị của nó là "display: none".

Xác định tính chất

Tài sản riêng của mình là một đa mục đích và xác định loại của phần tử hiển thị trong tài liệu. Tùy thuộc vào các giá trị cụ thể trang đã chọn có thể được hiển thị phần khối, tuyến tính, như một danh sách các mục như là một phần của bảng, và vân vân. D. Như vậy, do tài sản của "hiển thị", có thể thay đổi kiểu của khối trong tài liệu.

Đối với các gói "giá trị tài sản display: none", nó cho phép bạn xóa một mục hoặc một khối tài liệu. Tại cùng một vị trí dưới mảnh trang không được dành riêng, có nghĩa là nó rơi ra khỏi dòng. Tất cả các yếu tố nằm ngoài "từ xa", chỉ cần không nhìn thấy nó và bỏ qua kích thước và vị trí của các đơn vị. Để trả về một đối tượng ẩn, bạn phải tham khảo các tài liệu thông qua các kịch bản mà chỉ cần thay đổi giá trị của các thuộc tính sang định dạng mong muốn. Khi điều này xảy ra tự động định dạng trang với các đối tượng mới trên nó.

Sự khác biệt giữa các thuộc tính "hiển thị" và "tầm nhìn"

Mặc dù thực tế rằng như là kết quả của cả hai thuộc tính để ẩn các mục từ người sử dụng, nguyên tắc hoạt động của họ là hoàn toàn khác nhau. Như đã đề cập ở trên, tham số "display: none" loại bỏ các yếu tố từ tài liệu. Khối rơi ra khỏi trang, do đó không diễn ra trong đó. Trong trường hợp này, đối tượng vẫn còn trong mã HTML.

Đổi lại, các tài sản "visibility: hidden" ẩn các yếu tố từ người sử dụng, nhưng không loại bỏ nó ra khỏi mô hình tài liệu. Do đó, trang web được dành một chỗ trong khối này. Đó là, các dòng chảy tài liệu sẽ chấp nhận và xem xét các vị trí và kích thước của một phần tử với tài sản "visibility: hidden" chính xác theo cùng một cách mà không có nó.

Sự khác biệt này là cơ cấu tổ chức của các tài liệu hai thuộc tính này làm cho nó có thể để đạt được kết quả mong muốn cho hiển thị đúng trang.

Sử dụng CSS - display: none

tài liệu Internet có một số cách để xác định các tính chất của nguyên tố này. Màn hình hiển thị đầu tiên: none có thể được quy định trong một file riêng biệt cho Cascading Style Sheets. Phương pháp này là tiên tiến nhất và tốt nhất, vì nó cho phép bạn thực hiện tất cả các selectors, các lớp học và tài sản của họ trong một văn bản riêng. một mô hình như vậy cho phép bạn nhanh chóng tìm và sửa đổi cài đặt trang.

Tiêu đề tài liệu

Phương án thứ hai là xác định phong cách giữa các tiêu đề của thẻ phong cách tài liệu. Hiệu quả của phương pháp này là ít hơn nhiều. Đó là khuyến cáo để chỉ áp dụng trong trường hợp nghiêm trọng, như trong sự hiện diện của một số lượng lớn của các phong cách dễ đọc của nhà thiết kế trang web hủy đáng kể. Và điều này dẫn đến sai sót và làm chậm quá trình phát triển một tài liệu web. Cách tiếp cận này chỉ được đề nghị trong trường hợp thêm các thẻ để một số nhỏ các phong cách hoặc công cụ gỡ lỗi.

Hãy ghi nhớ rằng nếu theo cách này để tổ chức các phong cách trong tài liệu là ít hơn một nhập khẩu style sheet riêng biệt, các thuộc tính chồng chéo sẽ được ghi đè bởi những người đang ở trong cơ thể của html tài liệu.

Khối div. Display: none

Một cách khác là thêm trực tiếp vào thẻ "style = display: none;" yếu tố mã. Cách tiếp cận này thường được sử dụng khi làm việc với các khuôn khổ khác nhau, mục đích trong đó - giảm số lượng các tính năng trực tiếp vào stylesheet và hiển thị chúng trong tài liệu web. Bên cạnh đó, một kỷ lục như vậy thường là khi xem "Thanh tra mã" trang. Điều quan trọng là hãy nhớ rằng việc sử dụng phương pháp này, bạn có thể thay đổi thuộc tính và giá trị theo quy định tại các stylesheet. Vì vậy, bạn nên cẩn thận, kết quả là, bạn có thể tạo ra vấn đề bổ sung cho bản thân và dành chút thời gian vào việc tìm kiếm và sửa chữa những sai sót trong mã trang.

Javascript

Nó cũng đáng nói đến khả năng thay đổi hơn nữa trong khách sạn này. Nó đề cập không có nhiều thời gian để stylesheet và html-code và một ngôn ngữ kịch bản. Vì vậy, để áp dụng nó là cần thiết để có ít nhất một số kiến thức trong lĩnh vực này. Để loại bỏ các yếu tố từ các dòng chảy tài liệu, bạn có thể sử dụng một tài sản JavaScript "display = none". Nó cho phép bạn thay đổi cấu trúc của tài liệu khi một sự kiện nào đó. Ngoài ra, thông qua việc sử dụng các kịch bản để tự động ( "on the fly") để thay đổi các thuộc tính tham số và do đó làm mới quan điểm của trang mà không cần phải tải lại. Cách tiếp cận này rất hữu ích khi tổ chức các menu thả xuống, cửa sổ và các hình thức phương thức.

SEO

Trong lĩnh vực tối ưu hóa nội dung trang web cho công cụ tìm kiếm, có nhiều mê tín và không chắc chắn. Vì vậy, nhiều SEO mới xem xét việc sử dụng các thuộc tính "hiển thị" cách cư xử xấu. Họ giải thích này bởi thực tế là công cụ tìm kiếm nhìn thấy nội dung ẩn, bắt đầu xem xét các trang như là thư rác. Trong lời nói của họ, có một số logic, nhưng không có nhiều khác. Tại thời điểm này trong thời gian tài sản của các đối tượng ẩn sử dụng thường xuyên đủ để định dạng trình đơn thả xuống và ẩn các phần của tài liệu, mà không phải là hiện sự quan tâm cho người sử dụng (ví dụ, khi bạn chọn một danh mục các thông tin khác sẽ bị xóa). Phương pháp này sử dụng một cổng Internet đủ mạnh (một trong số họ - những "Amazon"). Do đó, công cụ tìm kiếm nhện không thể xem xét việc sử dụng tài sản "display: none" spam.

Một điều, khi phương pháp này được sử dụng để ẩn từ riêng lẻ và các nhân vật. Mặc dù thực tế rằng hiện nay các công cụ tìm kiếm nhện chưa có sự công nhận hoàn hảo của thuật toán "spam" như trong các tài liệu, khả năng trang sẽ bị bắt trong này, là khá cao. Vì vậy nó được khuyến khích sử dụng tài sản "hiển thị" là đúng cho mục đích của nó - để thay đổi kiểu của khối hoặc tạm thời ẩn từ con mắt của người dùng.