Bloki

W HTML4 do podziału strony na części funkcjonalne stosowane elementy zwane blokami, pudełkami lub kontenerami <div>...</div>.

Wraz z opublikowaniem specyfikacji HTML5 wprowadzono nowe elementy blokowe, które mają zastąpić znacznik <div>...</div>, np. <article>, <header>, <nav>, <section>, <aside>, <footer>.

Wstawianie bloków	<section id="blok1"> </section> <section id="blok2"> </section> <section id="blok3"> </section> style.css: #blok1 { background-color:red; height:50px; } #blok2 { background-color:yellow; height:50px; } #blok3 { background-color:green; height:50px; }
Rozmieszczanie bloków	<section id="blok4"> </section> <section id="blok5"> </section> <section id="blok6"> </section> style.css: #blok4 { background-color:red; height:50px; width:40%; float:left; } #blok5 { background-color:yellow; height:50px; width:60%; float:left; } #blok6 { background-color:green; height:50px; clear:both; }
Wyświetlanie liniowe display:inline; Przykłady elementów blokowych: <div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section>. Przykłady elementów liniowych: <span>, <a>, <img>. Test Test Test	<section id="section1">Test</section> <section id="section2">Test</section> <section id="section3">Test</section> style.css: #section1 { background-color:red; display:inline; } #section2 { background-color:yellow; display:inline; } #section3 { background-color:green; display:inline; }
Wyświetlanie blokowe display:block; Strona e03.pl Strona e03.pl Strona e03.pl	<a href="https://e03.pl/" class="blokowe">Strona e03.pl</a> <a href="https://e03.pl/" class="blokowe">Strona e03.pl</a> <a href="https://e03.pl/" class="blokowe">Strona e03.pl</a> style.css: a { display:block; background-color:yellow; }
Ukrywanie elementów display:none; i visibility: hidden; visibility: hidden; - ukrywa element, ale element nadal zajmuje swoje miejsce display:none; - ukrywa element usuwając go z dokumentu Przykład	test.html: <!DOCTYPE html> <HTML> <HEAD> <meta charset="utf-8"> <TITLE>CSS</TITLE> <link rel="stylesheet" href="style.css"> </HEAD> <BODY> <section id="section4">display:none;</section> <section id="section5">visibility:hidden;</section> <section id="section6">visibility:visible;</section> </BODY> </HTML> ------------------------------------------------------------------- style.css: #section4 { background-color:red; height:300px; width:300px; margin:10px; padding:10px; float:left; color:white; text-align:center; } #section5 { background-color:green; height:300px; width:300px; margin:10px; padding:10px; float:left; color:white; text-align:center; } #section6 { background-color:blue; height:300px; width:300px; margin:10px; padding:10px; float:left; color:white; text-align:center; } #section4:hover { display:none; } #section5:hover { visibility:hidden; } #section56:hover { visibility:visible; }

Bloki

Wstawianie bloków

Rozmieszczanie bloków

Wyświetlanie liniowe display:inline;

Wyświetlanie blokowe display:block;

Ukrywanie elementów display:none; i visibility: hidden;

Ukrywanie elementów
display:none; i visibility: hidden;