internet - Kurs HTML i CSS
Układ wielokolumnowy CSS / Linia rozdzielająca kolumn {column-rule-color, column-rule-style, column-rule-width, column-rule}(CSS 3 - interpretuje Internet Explorer 10, Firefox 52, Opera 11-12 i 37, Chrome 50) Kolor: selektor { column-rule-color: kolor } gdzie "kolor" jest definicją koloru Styl: selektor { column-rule-style: styl } gdzie "styl" określa się identycznie jak w przypadku obramowania Szerokość: selektor { column-rule-width: szerokość } gdzie "szerkość" określa się identycznie jak w przypadku obramowania Atrybuty mieszane: selektor { column-rule: wartości atrybutów } Jako "wartości atrybutów...
- Układ wielokolumnowy CSS / Przełamanie kolumny {break-before, break-inside, break-after}
(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12 i 37, Chrome 50) Przełamanie kolumny przed elementem: selektor { break-before: column } Przełamanie kolumny po elemencie: selektor { break-after: column } Blokada przełamania kolumny przed elementem: selektor { break-before: avoid-column } Blokada przełamania kolumny po elemencie: selektor { break-after: avoid-column } Blokada przełamania kolumny wewnątrz elemenu: selektor { break-inside: avoid-column } We wszystkich...
- Układ wielokolumnowy CSS / Łączenie kolumn {column-span}
(CSS 3 - interpretuje Internet Explorer 10, Firefox 71, Opera 11-12 i 37, Chrome 50) selektor { column-span: all } Selektorem może być dowolny element blokowy, bez ustawionego oblewania ani pozycjonowania absolutnego. Aby odwołać łączenie kolumn, należy podać wartość none. Zdarzają się sytuacje, kiedy chcemy wyskoczyć z ustalonego podziału tekstu na kolumny. Może to mieć miejsce np. w przypadku tytułów, które rozpoczynają kolejny artykuł albo nową sekcję w artykule. Mamy możliwość...
- Układ wielokolumnowy CSS / Wypełnienie kolumn {column-fill}
(CSS 3 - interpretuje Internet Explorer 10, Firefox 52, Opera 11-12 i 37, Chrome 50) selektor { column-fill: wypełnienie } Jako "wypełnienie" należy podać: balance Kolumny wypełnią całą możliwą szerokość elementu (domyślnie) auto Kolumny wypełnią całą możliwą wysokość elementu (ma sens tylko, jeśli jednocześnie określimy wysokość elementu, który zawiera kolumny) Przeglądarka stara się zawsze zrównoważyć kolumny tekstu w taki sposób, aby możliwie wszystkie (oprócz ostatniej) miały taką...
- Układ elastyczny CSS / Kontener elastyczny {display: flex inline-flex}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Układ elastyczny w bloku: selektor { display: flex } Układ elastyczny w linii: selektor { display: inline-flex } Wstawienie jednej z powyższej deklaracji sprawia, że dzieci elementu (znaczniki które bezpośrednio się w nim zawierają), wyznaczonego podanym selektorem [zobacz: Wstawianie stylów], będą układane w nim w sposób elastyczny. Tak tworzy się tzw. kontener elastyczny (ang. flex container), w którym dzieci...
- Układ elastyczny CSS / Przepływ elastyczny {flex-direction, flex-wrap, flex-flow}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Spis treści {flex-direction, flex-wrap, flex-flow} Kierunek elastyczny {flex-direction} Zawijanie elastyczne {flex-wrap} Atrybuty mieszane przepływu elastycznego {flex-flow} Kierunek elastyczny {flex-direction} selektor { flex-direction: kierunek } Selektorem musi być kontener elastyczny. Kierunek określa sposób układania kolejnych elementów wewnątrz układu elastycznego: row - elementy będą układane w wierszach...
- Układ elastyczny CSS / Justowanie zawartości {justify-content}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) selektor { justify-content: justowanie } Selektorem może być kontener elastyczny. Justowanie: flex-start - do początkowej krawędzi kontenera (domyślnie) flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie space-between - równe odstępy między elementami space-around - równa przestrzeń wokół elementów Polecenie steruje justowaniem elementów kontenera elastycznego, gdy jest on zbyt duży, aby został...
- Układ elastyczny CSS / Kolejność {order}
...niewidomej, która używa przeglądarki z syntezatorem mowy, prawdopodobnie korzystniej będzie, jeśli zapoznając się z katalogiem produktów w sklepie internetowym, najpierw usłyszy informacje o nazwie produktu, a potem jego opis. Zdjęcie jest w tym przypadku zupełnie nieważne, dlatego najlepiej jest wstawić je na końcu. Jednak dla użytkowników z dobrym wzrokiem właśnie zdjęcie może okazać się najważniejsze. Umieszczając je w kontenerze elastycznym, a następnie określając dla niego styl "order...
- Układ elastyczny CSS / Wyrównanie wiersza {align-items, align-self}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Spis treści {align-items, align-self} Wspólne wyrównanie wiersza {align-items} Indywidualne wyrównanie wiersza {align-self} Wspólne wyrównanie wiersza {align-items} selektor { align-items: wyrównanie } Selektorem może być kontener elastyczny. Wyrównanie: flex-start - wyrównanie wiersza do początkowej krawędzi kontenera flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie wiersza (dla tekstu w języku...
- Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Spis treści {flex-grow, flex-shrink, flex-basis, flex} Rozciągnięcie elastyczne {flex-grow} Ściśnięcie elastyczne {flex-shrink} Baza elastyczna {flex-basis} Atrybuty mieszane elastyczności {flex} Rozciągnięcie elastyczne {flex-grow} selektor { flex-grow: rozciągnięcie } Selektorem mogą być dzieci kontenera elastycznego (ale nie sam kontener). Rozciągnięcie jest wyrażone liczbą naturalną (większą lub równą zero)...