block - Kurs HTML i CSS
Tekst HTML / Indeks górny i dolny <sup, sub>...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>.
- Formularze HTML / Pole wyboru <input "checkbox">
...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ą wyświetlone dodatkowe...
- HTML5 / Nowe elementy HTML5
...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 stronie. Można...
Oprawa graficzna / Zamiennik obrazkowy...<div><span>Zamiennik obrazkowy</span></div> div { background-image: url(obrazek.gif); width: 200px; height: 50px; } div span { display: block; width: 0; height: 0; overflow: hidden; } Wady: Konieczny dodatkowy element (SPAN) Po wyłączeniu wyświetlania grafiki, w przeglądarce nie widać tekstu ani obrazka Przykład Zamiennik obrazkowy Phark Obie przedstawione wcześniej metody do poprawnego działania wymagają dodatkowego elementu. Nie zawsze jednak mamy możliwość modyfikacji...
Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego...i) { if (typeof i == 'undefined') { for (var i = 0; i < dt._dd.length; i++) { dt._dd[i].style.display = dt._displayed ? 'block' : 'none'; if (!dt._displayed) { for (var j = 0; j < dt._dd[i].getElementsByTagName('dt').length; j++) { dt._dd[i].getElementsByTagName('dt')[j]._displayed = false; display(dt._dd[i].getElementsByTagName('dt')[j]); } } } } else if (i < dt._dd.length) { var dir = wysun...
- Rozmiary CSS / Wysokość i marginesy automatyczne
Spis treści Wstęp Elementy inline, nie-zastępowane Elementy zastępowane: inline, blokowe, inline-block oraz z oblewaniem (float) Elementy nie-zastępowane: blokowe oraz z oblewaniem (float) Elementy pozycjonowane absolutnie, nie-zastępowane Elementy pozycjonowane absolutnie, zastępowane Wstęp Podrozdział ten opisuje analogiczne zagadnienie, jak Szerokość i marginesy automatyczne, tzn. specjalne zasady dopasowywania wysokości (height) oraz pionowych marginesów elementów (margin-top...
- Selektory pseudoelementów CSS / Pierwsza linia :first-line
selektor:first-line { cecha: wartość } Selektorem może być znacznik wyświetlany w bloku. CSS 2.1 dozwala zastosowanie dodatkowo do elementów inline-block, tytułów (podpisów) tabeli (<caption>...</caption>) oraz komórek tabeli (<td>...</td>). [Zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie raz zdefiniowane w arkuszu stylów, pozwala na nadanie określonych cech wszystkim...
- Komendy CSS 2 / display
WARTOŚĆ inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit OPIS Sposób wyświetlania elementu INICJALIZACJA inline ZASTOSOWANIE wszystkie elementy DZIEDZICZENIE nie PROCENTY nie MEDIA all
- Marginesy CSS / Załamywanie marginesów
...z ich dziećmi. Marginesy elementów pozycjonowanych absolutnie (wg CSS 2 również relatywnie) nie są załamywane. Marginesy elementów inline-block nie są załamywane. Jeżeli marginesy - górny i dolny - sąsiadujących elementów zostaną załamane, pozycja elementu jest wyznaczana w następujący sposób: Jeśli marginesy elementu zostały załamane z górnym marginesem rodzica, górna krawędź obramowania jest taka sama jak dla rodzica. Jeśli rodzic nie bierze udziału w załamywaniu marginesów lub...
- Rozmiary CSS / Szerokość {width}
...szerokość elementu HTML. Może być wyrażona jako wartość procentowa, pikselowa lub w innych jednostkach. Działa na elementach blokowych i inline-block, umożliwiając kontrolę nad szerokością kontenera lub elementu. Jak ustawić szerokość w CSS? Aby ustawić szerokość w CSS, użyj właściwości width i przypisz jej wartość, na przykład: <div style="width: 300px">Ten DIV ma szerokość 300 pikseli.</div>. Możesz również stosować jednostki innych niż piksele, takie jak procenty lub em.