linii - Kurs HTML i CSS
Rozmiary CSS / Wysokość i marginesy automatyczne...przypisaną wartość auto, przyjmują ostateczną wartość zero. Własność height nie ma zastosowania (nie można jej przypisać), ale zależy od wysokości linii (line-height). 2. Elementy zastępowane: inline, blokowe, inline-block oraz z oblewaniem (float) Jeżeli własności top, bottom, margin-top lub margin-bottom mają przypisaną wartość auto, przyjmują ostateczną wartość zero. Przypisanie wartości auto dla wysokości, spowoduje przyjęcie wysokości wewnętrznej. Ponadto CSS 2.1 określa przypadek...
Losowy element...<img> i stworzyć w ten sposób np. rotator bannerów lub buttonów. Niedozwolone jest jedynie używanie apostrofów i przenoszenie tekstu do następnej linii za pomocą klawisza Enter. Pamiętaj również, że każdy tekst musi być ujęty w apostrofy oraz po każdym wpisie (oprócz ostatniego!) należy postawić przecinek. Przykład (odśwież stronę, aby zobaczyć zmianę) Kilka losowych elementów Czasem może zajść konieczność wyświetlenia na ekranie kilku losowych elementów. Teoretycznie można w tym celu...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
...i treść Tytuł strony Deklaracja strony kodowej Opis zawartości strony Wyrazy kluczowe Język strony Tekst Akapit Tytuł Blok Koniec linii Pogrubienie CSS Czcionki Tekst Tło Marginesy Obramowanie Wykazy Rozmiary należy użyć kodu HTML: <dl id="menu0"> <dt>Kurs</dt> <dd> <dl> <dt><a href="...">HTML</a></dt> <dd> <dl> <dt><a href="...">Dla zielonych</a></dt> <dd><a href="...">...</a></dd> <dd><a href="...">...</a></dd> </dl> </dd>...
- Układ wielokolumnowy CSS / Przełamanie kolumny {break-before, break-inside, break-after}
...break-after: avoid-column } Z drugiej strony możemy chcieć wymusić przełamanie kolumny po zakończeniu w tekście sekcji, czyli np. zaraz po poziomej linii: hr { break-after: column } Wreszcie w pewnych przypadkach może nam zależeć, aby wybrany fragment tekstu - np. akapit - nigdy nie został przełamany do następnej kolumny: p { break-inside: avoid-column } Przykład {break-after} To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. break-after: column; Tekst jest...
- 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...
HTML5 / Zmienione elementy i atrybuty HTML5...Zmienione elementy Zmienione atrybuty Odradzane atrybuty Zmienione elementy A Jeżeli sam nie zawiera się w elemencie wyświetlanym w linii, może obejmować sobą również elementy blokowe z wyjątkiem interaktywnych: A, BUTTON, DETAILS, EMBED, IFRAME, LABEL, SELECT, TEXTAREA, AUDIO (z atrybutem controls), IMG (z atrybutem usemap="..."), INPUT (z atrybutem type="..." innym niż "hidden"), MENU (z atrybutem type="toolbar"), OBJECT (z atrybutem usemap="..."), VIDEO (z atrybutem...
- Układ elastyczny CSS / Przepływ elastyczny {flex-direction, flex-wrap, flex-flow}
...jakbyśmy pisali tekst w wierszach, zaczynając od dołu kartki papieru) Polecenie pozwala sterować ułożeniem wierszy bloków w sposób podobny do linii w tekście akapitu. Atrybuty mieszane przepływu elastycznego {flex-flow} selektor { flex-flow: wartości atrybutów } Polecenie to pozwala od razu podać kierunek i zawijanie elementów w układzie elastycznym. Przykład {flex-flow} "flex-flow: row nowrap" - zwróć uwagę, że wszystkie elementy są identycznej wysokości: To jest blok nr 1 blok...
- Układ elastyczny CSS / Marginesy automatyczne
...sprawimy, że wypełni on wolną przestrzeń pozostałą w kontenerze. Dzięki temu w bardzo prosty sposób możemy ustawić kilka bloków w jednej linii - część przy lewej krawędzi, a niektóre przy prawej. Przykład {display: flex, margin-left: auto} blok 1 blok 2 blok 3 margin-left: auto Pytania i odpowiedzi Co oznacza "margin: auto"? W kontekście flexbox, "margin: auto" oznacza, że element zostanie wyśrodkowany wzdłuż osi głównej (głównego kierunku) kontenera. Działa to poprzez...
- Układ elastyczny CSS / Wyrównanie wiersza {align-items, align-self}
...kontenera flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie wiersza (dla tekstu w języku polskim - w pionie) baseline - zrównanie linii bazowych (poziomych prostych, łączących podstawy liter tekstu) stretch - rozciągnięcie do obu krawędzi jednocześnie (domyślnie) Polecenie steruje wyrównaniem 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...
- Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
...(domyślnie - "1"). Jeżeli kontener elastyczny jest zbyt wąski, jego dzieci są ściskane. Zwykle odbywa się to poprzez przełamanie do nowej linii tekstu, który zawiera się w tych blokach. Baza elastyczna {flex-basis} selektor { flex-basis: baza } Selektorem mogą być dzieci kontenera elastycznego (ale nie sam kontener). Baza jest wartością określoną w jednostkach długości albo słowem kluczowym "auto" (domyślnie). Baza określa początkowy rozmiar elementu w kontenerze, zanim wolna...