HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Hướng dẫn CSS

TRANG CHỦ CSS Giới thiệu CSS Cú pháp CSS Bộ chọn CSS CSS Cách thực hiện Nhận xét CSS Màu CSS
Colors RGB HEX HSL
Nền CSS
Background Color Background Image Background Repeat Background Attachment Background Shorthand
Đường viền CSS
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
Lề CSS
Margins Margin Collapse
CSS Padding Chiều cao / Chiều rộng CSS Mô hình hộp CSS Đề cương CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Văn bản CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Phông chữ CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Biểu tượng CSS Liên kết CSS Danh sách CSS Bảng CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Hiển thị CSS Chiều rộng tối đa CSS Vị trí CSS CSS Z-index CSS Overflow CSS Float
Float Clear Float Examples
Khối nội tuyến CSS Căn chỉnh CSS Bộ kết hợp CSS Lớp giả CSS Phần tử giả CSS Độ mờ của CSS Thanh điều hướng CSS
Navbar Vertical Navbar Horizontal Navbar
Trình đơn thả xuống CSS Thư viện hình ảnh CSS Hình ảnh CSS Sprites Bộ chọn CSS Attr Biểu mẫu CSS Bộ đếm CSS Bố cục trang web CSS Đơn vị CSS Đặc tính CSS CSS! Quan trọng Các hàm toán học CSS

CSS nâng cao

Góc làm tròn CSS Hình ảnh đường viền CSS Nền CSS Màu CSS Từ khóa màu CSS CSS Gradients
Linear Gradients Radial Gradients Conic Gradients
Bóng CSS
Shadow Effects Box Shadow
Hiệu ứng văn bản CSS Phông chữ Web CSS Chuyển đổi CSS 2D Chuyển đổi CSS 3D Chuyển đổi CSS Hoạt ảnh CSS Chú giải công cụ CSS Hình ảnh phong cách CSS Phản chiếu hình ảnh CSS CSS object-fit Vị trí đối tượng CSS Mặt nạ CSS Các nút CSS Phân trang CSS CSS Nhiều cột Giao diện người dùng CSS Biến CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Kích thước hộp CSS Truy vấn phương tiện CSS Ví dụ về CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS đáp ứng

Giới thiệu về RWD RWD Viewport Chế độ xem lưới RWD Truy vấn phương tiện RWD Hình ảnh RWD RWD Video Khung RWD Mẫu RWD

Lưới CSS

Grid Intro Vùng chứa lưới Mục lưới

CSS SASS

Hướng dẫn SASS

Ví dụ về CSS

Mẫu CSS Ví dụ về CSS câu đố css Bài tập CSS Chứng chỉ CSS

Tham chiếu CSS

Tham chiếu CSS Bộ chọn CSS Chức năng CSS Tham chiếu CSS Aural Phông chữ An toàn trên Web CSS Hoạt hình CSS Đơn vị CSS Công cụ chuyển đổi CSS PX-EM Màu CSS Giá trị màu CSS Giá trị mặc định của CSS Hỗ trợ trình duyệt CSS

Bố cục CSS - Thuộc tính hiển thị

❮ Trước Kế tiếp ❯

Thuộc displaytính là thuộc tính CSS quan trọng nhất để kiểm soát bố cục.

Thuộc tính hiển thị

Thuộc displaytính chỉ định nếu / cách một phần tử được hiển thị.

Mọi phần tử HTML đều 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à blockhoặc inline.

Nhấp để hiển thị bảng điều khiển

This panel contains a <div> element, which is hidden by default (display: none).

It is styled with CSS, and we use JavaScript to show it (change it to (display: block).

Phần tử cấp khối

Một phần tử cấp khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (trải dài sang trái và phải hết mức có thể).

Phần tử <div> là phần tử cấp khối.

Ví dụ về các phần tử cấp khối:

  • <div>
  • <h1> - <h6>
  • <p>
  • <biểu mẫu>
  • <header>
  • <footer>
  • <phần>

Phần tử nội tuyến

Một phần tử nội tuyến không bắt đầu trên một dòng mới và chỉ chiếm nhiều chiều rộng khi cần thiết.

Đây là một phần tử <span> nội dòng bên trong một đoạn văn.

Ví dụ về các phần tử nội tuyến:

  • <span>
  • <a>
  • <img>

Không trưng bày;

display: none;thường được sử dụng với JavaScript để ẩn và hiển thị các phần tử mà không cần xóa và tạo lại chúng. Hãy xem ví dụ cuối cùng của chúng tôi trên trang này nếu bạn muốn biết làm thế nào để đạt được điều này.

Phần <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 đè điều này.

Thay đổi phần tử nội tuyến thành phần tử khối hoặc ngược lại, có thể hữu ích để làm cho trang trông theo một cách cụ thể và vẫn tuân theo các tiêu chuẩn web.

Một ví dụ phổ biến là tạo các <li>phần tử nội tuyến cho menu ngang:

Thí dụ

li {
  display: inline;
}

Lưu ý: Việc đặt thuộc tính hiển thị của một phần tử chỉ thay đổi cách phần tử được hiển thị , KHÔNG phải loại phần tử đó là gì. Vì vậy, một phần tử nội tuyến với 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> dưới dạng các phần tử khối:

Thí dụ

span {
  display: block;
}

Ví dụ sau hiển thị <a> các phần tử dưới dạng các phần tử khối:

Thí dụ

a {
  display: block;
}

Ẩn một phần tử - hiển thị: không có hoặc khả năng hiển thị: ẩn?

display:none

Nước Ý

visibility:hidden

rừng

Cài lại

Đèn chiếu sáng

Việc ẩn một phần tử có thể được thực hiện bằng cách đặt thuộc displaytính thành none. Phần tử sẽ bị ẩn và trang sẽ được hiển thị như thể phần tử không có ở đó:

Thí dụ

h1.hidden {
  display: none;
}

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

Tuy nhiên, phần tử sẽ vẫn chiếm dung lượng như trước. Phần tử sẽ bị ẩn, nhưng vẫn ảnh hưởng đến bố cục:

Thí dụ

h1.hidden {
  visibility: hidden;
}

Các ví dụ khác


This example demonstrates display: none; versus visibility: hidden;


This example demonstrates how to use CSS and JavaScript to show an element on click.

Test Yourself With Exercises

Exercise:

Hide the <h1> element. It should still take up the same space as before.

<style>
h1 {
  : ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Display/Visibility Properties

Property Description
display Specifies how an element should be displayed
visibility Specifies whether or not an element should be visible

❮ Previous Next ❯