Các cách khác nhau để ẩn các phần tử css là gì?

Bất kể chủ đề của bạn tuyệt vời như thế nào, các nhà phát triển của bạn tài năng như thế nào hay thiết kế trang web của bạn hoàn hảo như thế nào, rất có thể đến một lúc nào đó, bạn sẽ muốn thay đổi điều gì đó. Không nhiều, chỉ có thể loại bỏ thanh bên này hoặc làm cho hộp văn bản đó biến mất. Nhưng trên một trang, không phải ở mọi nơi. Để làm điều này, bạn sẽ cần hiểu hai thuộc tính CSS cụ thể, khả năng hiển thị và hiển thị, có thể giúp bạn hoàn thành việc ẩn các thành phần nhất định trên các trang cụ thể bằng các phương tiện hơi khác nhau

Đăng ký kênh Youtube của chúng tôi

Tại sao bạn muốn ẩn các phần tử?

Một trong những yếu tố phổ biến hơn mà chủ sở hữu trang web muốn ẩn là tiêu đề trang web. Hoặc có lẽ cụ thể hơn, menu điều hướng tiêu đề. Có thể phần siêu dữ liệu hoặc bình luận của một bài đăng trên blog. Câu hỏi là, tại sao ai đó muốn làm điều đó?

Nói chung, đó là bởi vì yếu tố đó, số ít đang cản trở, nhưng việc loại bỏ nó không đáng để viết lại chủ đề hoặc trang để cắt. Có thể trang Giới thiệu của bạn có một danh sách các bài đăng trên blog, nhưng bạn không muốn đăng dữ liệu meta ở đó. Bạn không có lý do gì để viết lại tệp mẫu cho trường hợp đó. Vì vậy, bạn có thể xóa nó bằng CSS

Hoặc, như một ví dụ khác, bạn chỉ muốn kết hợp phần bình luận trên một bài đăng hoặc trang mà không cần sử dụng trình chỉnh sửa. CSS sẽ cho phép bạn ẩn hoặc xóa hoàn toàn mà không ảnh hưởng đến bất kỳ phần nào khác của trang web. Một lý do phổ biến để ẩn một phần tử bằng CSS trên một trang hoặc bài đăng cụ thể là để điều chỉnh kích thước phông chữ hoặc tiêu đề. Khi chủ đề và bố cục blog vẫn được áp dụng, việc thay đổi phông chữ theo mùa cho một trang cụ thể cùng với siêu dữ liệu ẩn và thanh bên có thể được thực hiện trong một vài dòng mã, không phải điều chỉnh hoặc thiết kế lại toàn bộ mẫu

Dù lý do của bạn là gì, bạn có một số tùy chọn để ẩn các phần tử

Cách tìm phần tử cần ẩn

Nếu bạn biết mình muốn ẩn phần tử nào nhưng không biết gọi phần tử đó là gì, bạn luôn có thể nhấp chuột phải vào phần tử đó và chọn Kiểm tra. Thao tác này sẽ mở ngăn Công cụ dành cho nhà phát triển trong trình duyệt của bạn, cho phép bạn tìm thấy Lớp hoặc ID CSS mà công cụ này sử dụng

Khi làm như vậy, phần tử sẽ được tô sáng khi bạn di chuột qua và nhấp vào (các) dòng chính xác trong công cụ kiểm tra ở bên phải

Sau đó, nó chỉ sử dụng các bộ chọn đó để điều chỉnh bằng CSS. Lưu ý rằng cú pháp bộ chọn được đính kèm với phần tử khi di chuột (1) là những gì sẽ xuất hiện trong trường/tệp CSS của bạn. Bộ chọn nội tuyến trong (2) là những gì được trình duyệt hiển thị

Sử dụng CSS hiển thị

Phương pháp dễ nhất để ẩn một phần tử là loại bỏ nó hoàn toàn. Màn hình hiển thị. không tài sản nào làm được điều đó. Nó loại bỏ hoàn toàn bất kỳ yếu tố nào bạn gắn nó vào. Phần đó của trang sẽ không hiển thị nữa và không gian mà nó chiếm trên trang sẽ bị xóa và bố cục được điều chỉnh lại

Đây có thể là cách phổ biến nhất để xóa các thành phần trên trang. Bạn có thể sử dụng nó để xóa toàn bộ trang web hoặc bạn có thể nhắm mục tiêu các trang hoặc loại bài đăng riêng lẻ

Sử dụng CSS hiển thị

khả năng hiển thị. CSS ẩn rất giống CSS hiển thị. không ai. Về lý thuyết, chúng có thể được sử dụng để thực hiện cùng một mục tiêu. Tuy nhiên, sự khác biệt lớn là với cái này, bạn không xóa phần tử. Với khả năng hiển thị, bạn chỉ cần làm cho nó ẩn đi. Sự khác biệt lớn nhất từ ​​​​quan điểm thiết kế là với khả năng hiển thị, bản thân yếu tố ẩn sẽ vẫn chiếm không gian trong thiết kế

Nếu bạn muốn xóa tiêu đề trên một trang, nhưng muốn giữ khoảng cách từ đầu DOM, bạn sẽ sử dụng cái này

Khi trang hiển thị, không gian sẽ vẫn ở đó, nhưng phần tử sẽ không

Khi nào nên sử dụng Khả năng hiển thị và Khi nào nên sử dụng Hiển thị

Lý do chính để sử dụng một bit nếu ẩn CSS phần tử khác là khá đơn giản. Khi bạn sử dụng màn hình. không, toàn bộ phần thừa kế của các phần tử con bị ẩn. Bất cứ thứ gì có kiểu dáng của nó hoặc được lồng trong phần tử sẽ biến mất. Với khả năng hiển thị. bị ẩn, vì không gian của phần tử vẫn còn, bất kỳ phần tử con nào của phần tử được chọn vẫn hiển thị

Ví dụ: nếu bạn muốn ẩn nền của một hàng và một cột, bạn sẽ sử dụng chế độ hiển thị. bị ẩn để duy trì định dạng và kết xuất của các thành phần khác, chỉ xóa những thành phần bạn đã chỉ định. Sử dụng màn hình. không có gì trong trường hợp này sẽ xóa toàn bộ hàng hoặc cột, sắp xếp lại nội dung trang

Cách ẩn các phần tử trên các trang cụ thể trong WordPress

Khi nói đến việc ẩn các phần tử trên các trang cụ thể trong WordPress bằng một trong hai phương pháp này, rất có thể bạn sẽ cần tìm Lớp ID trang cho bất kỳ trang cụ thể nào mà bạn muốn ẩn phần tử trên đó. Hãy nhớ rằng nó đơn giản là số ID trang không phải ID CSS. Trên thực tế, nó là một bộ chọn lớp CSS.  . trang-id-1337 chẳng hạn

Bạn có thể tìm thấy trang hoặc đăng ID trong URL cho trang chỉnh sửa. Cách nhanh nhất là chỉ cần di chuột qua liên kết và xem URL xem trước

Bạn cũng có thể tìm ID này bằng cách xem trong thanh URL của bất kỳ trang Chỉnh sửa hoặc Xem trước nào. Số được liệt kê trong các URL này là ID Trang mà bạn sẽ sử dụng trong bộ chọn CSS để nhắm mục tiêu các phần tử trên trang cụ thể đó chứ không phải nơi nào khác trên trang web

.page-id-55341 header#main-header {
display:none;
}

Đoạn mã trên sẽ chỉ xóa tiêu đề trên trang có ID cụ thể đó. Trường hợp CSS sau sẽ xóa nó khỏi mọi trang và đăng trên trang web

header#main-header {
visibility:hidden;
}

Kết thúc bằng CSS ẩn phần tử

Bất kể lý do của bạn là gì, việc biết thời điểm và sự khác biệt giữa khả năng hiển thị và hiển thị của thuộc tính CSS (và thời điểm sử dụng chúng) có thể giúp bạn tùy chỉnh và đánh dấu các trang khác nhau trên trang web WordPress của mình. Đôi khi, bạn có thể cần một hình ảnh không xuất hiện trên một trang. Hoặc có lẽ một bài đăng trên blog không cần phải hiển thị siêu dữ liệu hoặc ngày tháng. Bất kể phần tử nào bạn đang cố xóa, có một số biến thể của CSS ẩn phần tử mà bạn có thể sử dụng để đạt được mục tiêu của mình

Các cách khác nhau để ẩn một phần tử bằng CSS là gì?

Có bao nhiêu cách bạn có thể ẩn một phần tử trong CSS?

Các cách khác nhau để ẩn nội dung trực quan là gì?

Thuộc tính CSS nào được sử dụng để ẩn phần tử?

The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a .

Đọc tiếp

programming css

Reply 4 0 Chia sẻ