blok - Kurs HTML i CSS
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...
Rozmiary CSS / Blok obejmujący CSSPozycja 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...
- 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...
- 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...
- 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 / 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
- 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...
- Pozycjonowanie CSS / Wyświetlanie {display}
...może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów]. Natomiast jako "sposób" należy podać: block - element będzie wyświetlony w bloku (odstęp z góry i z dołu) inline - element będzie wyświetlony w linii (sąsiadująco z innymi) list-item - element wykazu: <li>...</li> none - element nie będzie wyświetlany inline-block - element zachowuje się podobnie jak element zastępowany (Firefox 3, Opera 7, Chrome, Konqueror) run-in - jeśli po elemencie następuje brat będący...
- Komendy CSS3 / Układ siatki CSS
...<grid-line> [ / <grid-line> ]{0,3} Inicjalizacja auto Zastosowanie dzieci kontenera układu siatki i elementy pozycjonowane absolutnie, których blok obejmujący jest kontenerem układu siatki Dziedziczenie nie Procenty nie grid-auto-columns Automatyczne kolumny układu siatki Wartość <track-size>+ Inicjalizacja auto Zastosowanie kontenery układu siatki Dziedziczenie nie Procenty zobacz grid-template-columns i grid-template-columns grid-auto-flow Automatyczny przepływ układu...