Thứ Bảy, 28 tháng 12, 2013
CSS Hiển thị và Tầm nhìn
Tài sản quy định cụ thể hiển thị nếu / làm thế nào một phần tử được hiển thị, và khả năng hiển thị các tài sản quy định cụ thể nếu một yếu tố cần được nhìn thấy hoặc ẩn.
Hộp 1
Hộp 2
Hộp 3
Ẩn một phần tử - màn hình hiển thị: không có hoặc khả năng hiển thị: ẩn
Ẩ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 hiển thị "none" hoặc tài sản để "ẩn" khả năng hiển thị. Tuy nhiên, nhận thấy rằng hai phương pháp này tạo ra kết quả khác nhau:
khả năng hiển thị: ẩn giấu một yếu tố, nhưng nó vẫn sẽ mất không gian như trước. Các yếu tố sẽ được ẩn, nhưng vẫn còn ảnh hưởng đến bố trí.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>
</body>
</html>
Thử nó cho mình »
hiển thị: không giấu một phần tử, và nó sẽ không mất bất kỳ không gian. Các yếu tố sẽ được ẩn, và trang web sẽ được hiển thị như các yếu tố không phải là có:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {display:none;}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading does not take up space.</p>
</body>
</html>
Thử nó cho mình »
CSS Hiển thị - Block và Inline Elements
Một yếu tố khối là một yếu tố mà chiếm toàn bộ chiều rộng có sẵn, và có một ngắt dòng trước và sau nó.
Ví dụ về các yếu tố khối:
- <h1>
- <p>
- <div>
Một phần tử nội tuyến chỉ chiếm càng nhiều chiều rộng khi cần thiết, và không ép buộc ngắt dòng.
Ví dụ về các yếu tố nội tuyến:
- <span>
- <a>
Làm thế nào thay đổi một phần tử được hiển thị
Thay đổi một phần tử nội tuyến cho một yếu tố ngăn chặn, hoặc ngược lại, có thể hữu ích cho việc trang tìm kiếm một cách cụ thể, và vẫn theo các tiêu chuẩn web.
Ví dụ sau sẽ hiển thị danh sách các mặt hàng như các yếu tố nội tuyến:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
li{display:inline;}
</style>
</head>
<body>
<p>Display this link list as a horizontal menu:</p>
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
<li><a href="/xml/default.asp" target="_blank">XML</a></li>
</ul>
</body>
</html>
Thử nó cho mình »
Hiển thị ví dụ sau đây trải rộng các yếu tố như yếu tố khối:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
span
{
display:block;
}
</style>
</head>
<body>
<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
</body>
</html>
Thử nó cho mình »
 | Lưu ý: Thiết lập thuộc tính hiển thị của một phần tử chỉ thay đổi cách các phần tử được hiển thị , không loại yếu tố đó là. Vì vậy, một phần tử nội tuyến với màn hình hiển thị: khối không được phép có những yếu tố khối khác bên trong của nó. |
|---|
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét