display - Kurs HTML i CSS
Menu w CSS / Menu z nagłówkami...menu może zawierać więcej niż jeden nagłówek. Aby mieć możliwość swobodnego stylizowania, usuwamy domyślne formatowanie listy: dl, dt, dd { display: block; margin: 0; padding: 0; } W efekcie uzyskamy: CSS Czcionki Tekst Tło Marginesy Obramowanie CSS Czcionki Tekst Tło Marginesy Obramowanie dl, dt, dd { display: block; margin: 0; padding: 0; } dl { width: 200px; } dt { background-color: #ccc; color: #000; padding: 7px; font-weight: bold...
- Reguły warunkowe CSS / Zapytania właściwości @supports
...zespół reguł CSS tylko dla przeglądarek, które obsługują układ elastyczny, wystarczy otoczyć je specjalnym blokiem reguł warunkowych: @supports (display: flex) { body { display: flex; } #MENU { width: 150px; min-width: 150px; order: -1; overflow: hidden; } } Natomiast dla przeglądarek, które nie obsługują takiego układu, możemy podać alternatywne reguły CSS: @supports not (display: flex) { #MENU { width: 150px; float: left; overflow: hidden...
- Oprawa graficzna / "Duszki" CSS
...href="tlo.html">Tło</a></li> <li><a href="marginesy.html">Marginesy</a></li> <li><a href="obramowanie.html">Obramowanie</a></li> </ul> ul, ul li { display: block; list-style: none; margin: 0; padding: 0; line-height: normal; font-size: 12px; } ul li { width: 200px; border-width: 1px; border-style: solid; border-color: #dfe #365 #365 #dfe; } ul a:link, ul a:visited { display: block; width: 169px; text-decoration: none; padding: 5px 10px 5px 20px; font-weight: bold...
- Pozycjonowanie CSS / Widzialność {visibility}
...pustą przestrzeń o takich samych rozmiarach, jakie miałby element, gdyby tylko był widoczny. Polecenie "visibility: hidden" jest zbliżone do display: none. Różnica polega na tym, że drugie z nich całkowicie usuwa element z ekranu, natomiast pierwsze tylko go ukrywa - w miejscu gdzie miał być wyświetlony, jest widoczne puste miejsce. Zastosowanie "visibility: collapse" do elementów tabeli może być przydatne do realizacji wszelkiego rodzaju dynamicznych efektów ukrywania fragmentów...
Formularze HTML / Pole wyboru <input "checkbox">...zaznaczy odpowiednią opcję wyboru: <input type="checkbox" name="nazwa" value="wartość" onclick="document.getElementById('identyfikator').style.display = this.checked ? 'block' : 'none'; this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = !this.checked"> <div id="identyfikator" style="display: none"> <input type="text" name="nazwa2" disabled> <input type="text" name="nazwa3" disabled> </div> Przykład <input "checkbox" onclick> Po wybraniu tej opcji, zostaną...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...left">...</table> </body> </html> 4. Elementy blokowe, zastępowane Przykład: IMG, INPUT, TEXTAREA, SELECT, OBJECT - z ustawionym stylem display: block. Ostateczna wartość szerokości jest wyznaczana tak jak dla elementów "inline" zastępowanych (punkt 2). Następnie dla wyznaczenia marginesów zastosowane zostają reguły jak dla elementów "blokowych" nie-zastępowanych (punkt 3). 5. Elementy z oblewaniem (float) nie-zastępowane Przykład: DIV, SPAN i inne (ale nie IMG, INPUT...
- Szablon strony na DIV-ach / Responsywny szablon
...color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { background-color: #ccc; } #INFORMACJE { display: none; } #TRESC { background-color: #fff; } #STOPKA { background-color: #888; } @media only all and (min-width: 800px) { #MENU { width: 150px; float: left; overflow: hidden; position: relative; } #INFORMACJE { display: block; background-color: #ccc; width: 150px; float: right; overflow...
- HTML5 / Nowe elementy HTML5
...do dokumentu specjalny arkusz stylów: article, aside, details, dialog, figcaption, figure, footer, header, hgroup, main, nav, search, section { display: block; } audio, canvas, embed, meter, progress, video { display: inline-block; } [hidden] { display: none; } Jeżeli nie korzystasz z możliwości CSS, nie musisz używać tej sztuczki... ale może w takim razie to już najwyższy czas, aby poznać Kaskadowe Arkusze Stylów 😉 Sekcje Sekcje to odrębne tematycznie fragmenty treści na...
- Oprawa graficzna / Zamiennik obrazkowy
...zaproponował. <div><span>Zamiennik obrazkowy</span></div> div { background-image: url(obrazek.gif); width: 200px; height: 50px; } div span { display: none; } Wyjaśnienie: Najpierw pod zewnętrzny element podstawiamy obrazek tła Musimy ustalić rozmiary bloku na identycznie jak wymiary grafiki - inaczej otrzymalibyśmy element w szerokości całej strony i wysokości zależnej od zawartego w nim tekstu Na koniec po prostu ukrywamy tekst wpisany w środku, poprzez usunięcie wewnętrznego...
- Tekst HTML / Indeks górny i dolny <sup, sub>
...przesunięty w prawo. Aby ustawić indeks górny i dolny równo ponad sobą w jednej pionowej linii, można się posłużyć następującym kodem: A<span style="display: inline-block; line-height: 0.5"><sup style="display: block">1</sup><sub>2</sub></span>.