Wartość visible jest domyślną wartością właściwości visibility.
Domyślnie element HTML jest widzialny.
visibility:visible;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
Przykładowy element "div" jest widzialny.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
</div>
</body>
</html>
Za pomocą wartości hidden właściwości visibility możemy sprawić, że interesujący nas element HTML stanie się niewidzialny.
Niewidzialny element HTML nie jest ukryty, dlatego niewidzialny element HTML nadal wpływa swoim rozmiarem na ułożenie sąsiednich elementów HTML lub tekstu (w ten sam sposób jakby był widzialny).
Gdy do elementu potomka elementu HTML posiadającego właściwość "visibility" wraz z wartością "hidden" dodany właściwość "visibility" wraz z wartością visible, wtedy wspomniany element potomek stanie się widzialny.
visibility:hidden;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
Przykładowy element "div" jest niewidzialny, ponieważ do wspomnianego elementu "div" została dodana właściwość "visibility" wraz z wartością "hidden".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
visibility:hidden;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
</div>
</body>
</html>
Za pomocą wartości collapse właściwości visibility możemy sprawić, że grupa wierszy, wiersz, grupa kolumn, kolumna lub komórka interesującej nas tabeli HTML staną się niewidzialne oraz ukryte.
visibility:collapse;
Przykładowa Tabela HTML
| komórka - 1 | komórka - 2 | komórka - 3 |
| komórka - 4 | komórka - 5 | komórka - 6 |
| komórka - 7 | komórka - 8 | komórka - 9 |
Przykładowy element "tr" jest niewidzialny oraz ukryty, ponieważ do wspomnianego elementu "tr" została dodana właściwość "visibility" wraz z wartością "collapse".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
table {
border:3px solid black;
background-color:#7DCDE8;
}
table > caption {
padding:1em;
background-color:#CCC;
}
table > tbody > tr > th {
border:1px solid black;
padding:1em;
}
table > tbody > tr > td {
border:1px solid black;
padding:1em;
}
</style>
</head>
<body>
<table>
<caption>Przykładowa Tabela HTML</caption>
<tbody>
<tr>
<th>komórka - 1</th>
<td>komórka - 2</td>
<td>komórka - 3</td>
</tr>
<tr style="visibility:collapse;">
<th>komórka - 4</th>
<td>komórka - 5</td>
<td>komórka - 6</td>
</tr>
<tr>
<th>komórka - 7</th>
<td>komórka - 8</td>
<td>komórka - 9</td>
</tr>
</tbody>
</table>
</body>
</html>
