[Tự học CSS] – Tìm hiểu cách hiển thị một phần tử trên trang web bằng thuộc tính Display

4281 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào các bạn, nối tiếp các bài tự học HTML cơ bản, GiuseArt cũng đang biên tập một Series các bài tự học CSS cơ bản nữa, để phục vụ các bạn đang bắt đầu học thiết kế web. Series tự học CSS này do bạn Lê Văn Thạch biên soạn và trình bày. Mọi ý kiến đóng góp hoặc thắc mắc, vui lòng liên hệ admin để được hỗ trợ nhiệt tình nhé!

Hôm nay Giuseart.com sẽ giới thiệu đến bạn một thuộc tính mới. Đó là thuộc tính display, nó quy định cụ thể làm thế nào để một phần tử được hiển thị.

Mỗi phần tử HTML có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Giá trị hiển thị mặc định cho hầu hết các phần tử là block hoặc inline.

Các phần tử khối (hay còn gọi là dạng Block)

  • Block: Các phần tử sẽ được nằm một hàng riêng biệt khi hiển thị.

Ví dụ như các thẻ <div>, <h1> - <h6> , <p> , <from>, < header> , <footer >,…. là các phần tử block

Các phần tử nội tuyến (hay còn gọi là Inline)

  • Inline: Các phần tử này sẽ hiển thị trên cùng một hàng trên nội dung khác.

Ví dụ như các thẻ <span>, <a>, <img>,.. là các phần tử inline.

Ẩn phần tử (display: none)

  • Thường được sử dụng cùng với JavaScript để ẩn và hiển thị các phần tử mà ta không cần phải xóa hay tạo lại chúng.
  • Thẻ <script> tự sử dụng display: none; làm mặc định.

Ghi đè giá trị hiển thị mặc định:

Như đã đề cập, mọi phần tử đều có giá trị hiển thị mặc định. Tuy nhiên, bạn có thể ghi đè lên chính nó.

Bạn có thể chuyển từ một phần tử nội tuyến (Inline) sang một phần tử khối (Block) hoặc ngược lại.

Một ví dụ thường gặp là tạo các thẻ <li> yếu tố nội tuyến cho các menu ngang:

Ví dụ:

Lưu ý: Việc đặt thuộc tính hiển thị của phần tử chỉ thay đổi cách hiển thị của phần tử, không quan tâm đến phần tử đó là gì đi nữa. Vì vậy, một yếu tố nội tuyến display:block; không được phép có các phần tử khối khác ở bên trong nó.

Ví dụ sau hiển thị các phần tử <span> như các phần tử khối:

Ví dụ sau hiển thị các phần tử <a> làm phần tử khối:

Sự khác biệt giữa ẩn phần tử bằng display: none hoặc visibility: hidden ?

Ẩn một phần tử có thể được thực hiện bằng cách thiết lập thuộc tính display:none;. Phần tử sẽ bị ẩn và trang sẽ được hiển thị như thể phần tử không có ở đó:

Ví dụ:

visibility:hidden; cũng ẩn một phần tử.

Tuy nhiên, phần tử vẫn sẽ chiếm không gian tương tự như trước đây. Phần tử sẽ bị ẩn nhưng vẫn ảnh hưởng đến bố cục

Ví dụ :

Chỉ vậy thôi, các bạn nên nhớ là CSS luôn tồn tại một thuộc tính tên là display để đổi kiểu hiển thị cho phần tử là được vì chắc chắn sau này bạn sẽ sử dụng rất nhiều khi thực hành thực tế.

5/5 - (2 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *