blok tekstu - Kurs HTML i CSS
Układ elastyczny CSS / Wyrównanie wierszy {align-content}...kiedy ich sumaryczna wysokość jest za mała, aby wypełnić całą dostępną przestrzeń. Przykład {align-content} align-content: flex-start blok 1 blok 2 blok 3 blok 4 blok 5 align-content: flex-end blok 1 blok 2 blok 3 blok 4 blok 5 align-content: center blok 1 blok 2 blok 3 blok 4 blok 5 align-content: space-between blok 1 blok 2 blok 3 blok 4 blok 5 align-content: space-around blok 1 blok 2 blok 3 blok 4 blok 5 align-content: stretch blok 1...
Tekst HTML / Blok <div><div>...</div> wyświetlanie: w bloku Polecenie to wydziela większy blok tekstu. W odróżnieniu od akapitu, blok może zawierać wewnątrz siebie inne elementy wyświetlane w bloku. Kolejne bloki są oddzielane od siebie znakami nowej linii, ale nie są dodawane linijki przerwy (aby je dodać, należy zastosować znacznik <p>...</p> albo <br>). Przykład <div> To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy...
- Układ elastyczny CSS / Przepływ elastyczny {flex-direction, flex-wrap, flex-flow}
...od góry do dołu) column-reverse - ułożenie pionowo w kolumnach (w języku polskim - od dołu do góry) Polecenie pozwala sterować ułożeniem bloków w sposób podobny do wyrazów w tekście akapitu. Wyrazom jednak nie możemy nadawać rozmiarów, a blokom w układzie elastycznym - tak. Zawijanie elastyczne {flex-wrap} selektor { flex-wrap: zawijanie } Selektorem musi być kontener elastyczny. Zawijanie: nowrap - elementy nie zostaną zawinięte do kolejnego wiersza, nawet jeśli nie zmieszczą...
- Rozmiary CSS / Szerokość i marginesy automatyczne
Spis treści Wstęp Elementy inline, nie-zastępowane Elementy inline, zastępowane Elementy blokowe, nie-zastępowane Elementy blokowe, zastępowane Elementy z oblewaniem (float) nie-zastępowane Elementy z oblewaniem (float) zastępowane Elementy pozycjonowane absolutnie, nie-zastępowane Elementy pozycjonowane absolutnie, zastępowane Elementy inline-block, nie-zastępowane Elementy inline-block, zastępowane Wstęp Podanie wartości auto dla własności określającej szerokość elementu...
- Układ elastyczny CSS / Wyrównanie wiersza {align-items, align-self}
...jednego wiersza wewnątrz kontenera elastycznego, kiedy mają one różną wysokość. Przykład {align-items} align-items: flex-start To jest blok nr 1 blok 2 blok 3 align-items: flex-end To jest blok nr 1 blok 2 blok 3 "align-items: center" - ten sposób pozwala wyśrodkować w pionie element, nawet jeżeli z góry nie wiemy, ile treści będzie się w nim znajdować: To jest blok nr 1 blok 2 blok 3 align-items: baseline blok 1 blok 2 blok 3 align-items: stretch To jest...
- Układ elastyczny CSS / Justowanie zawartości {justify-content}
...kontenera elastycznego, gdy jest on zbyt duży, aby został wypełniony w całości. Działa analogicznie jak justowanie tekstu, ale może operować na blokach. Przykład {justify-content} justify-content: flex-start blok 1 blok 2 blok 3 justify-content: flex-end blok 1 blok 2 blok 3 justify-content: center blok 1 blok 2 blok 3 justify-content: space-between blok 1 blok 2 blok 3 justify-content: space-around blok 1 blok 2 blok 3
- Rozmiary CSS / Blok obejmujący CSS
Pozycja i rozmiar pudełka elementu są czasami obliczane względem pewnego prostokąta zwanego blokiem obejmującym (ang. "containing block"): Blok obejmujący w którym znajduje się element podstawowy (ang. "root") jest wyznaczany przez przeglądarkę (np. okno). Ten blok nazywany jest początkowym blokiem obejmującym. Dla innych elementów, które mają ustalone pozycjonowanie relatywne lub statyczne blok obejmujący jest tworzony przez najbliższy blok, komórkę tabeli lub inline-block będący przodkiem...
- Pozycjonowanie CSS / Nakładanie {z-index}
...(z-index: 1) Kontekst drugi (z-index: 1) Element z kontekstu drugiego (z-index: 2) Element z kontekstu drugiego (z-index: 1) Gdyby bloki oznaczone jako "kontekst" (pierwszy i drugi) nie miały przypisanej wartości z-index", nie powinny wyznaczać kontekstu stosu. Wtedy kolejność nakładania powinna być następująca (poczynając od elementów przykrytych na samym spodzie): "z-index: 1" (blok pierwszy), "z-index: 1" (blok drugi), "z-index: 2" (blok pierwszy), "z-index: 2" (blok...
- Tekst HTML / Blok cytowany <blockquote>
...Blok cytowany <blockquote> Blok cytowany ze źródłem <blockquote cite> Blok cytowany <blockquote> <blockquote>...</blockquote> wyświetlanie: w bloku Wprowadza blok cytowany, którego możemy użyć np. gdy powołujemy się na jakieś źródła. Każdy wiersz w bloku cytowanym rozpoczyna się zwykle tabulatorem (wcięciem). Można go używać do zacytowania jakiegoś większego fragmentu, który ciągnie się przez wiele linijek (zobacz także: Cytat). UWAGA! W Strict DTD tekst zawarty w bloku cytowanym...
- Szablon strony na DIV-ach / Płynny szablon
...stałego szablonu (czyli zwykle 780px minus szerokość kolumny menu i ewentualnie dodatkowych informacji). W płynnych szablonach najczęściej tylko blok treści strony dopasowuje się do rozmiarów okna przeglądarki, a pozostałe kolumny zawsze pozostają stałe. Dla kolumny menu zmiana szerokości zwykle nie miałaby większego sensu, gdyż często zawiera ustalone wąskie elementy (odnośniki nawigacyjne). Poza tym dzięki stałej szerokości kolumny menu podanej w pikselach jej wygląd staje się niezależny...