tekstu - Kurs HTML i CSS
Jednostki CSS / Łańcuchy znakowe...jest bardzo długi, można go przedzielić na dwie linie, ale wtedy trzeba koniecznie postawić na końcu pierwszej linii (w miejscu przedzielenia tekstu) znak odwróconego ukośnika \ (backslash). Po znaku \ ani przed następną linią nie należy już stawiać cudzysłowu. Przykładowo wyrażenie: "1234567890\ 12345" jest równoważne łańcuchowi: "123456789012345" Niestety sposób ten nie zawsze działa poprawnie! W łańcuchach znakowych można wprowadzać znaki ASCII używając notacji: \HEX, gdzie HEX...
- Kolory CSS / Sposoby definiowania kolorów CSS
...Jest to bardzo wygodny sposób na przypisanie np. identycznego koloru obramowania co znajdujący się w nim tekst. Dzięki temu przy zmianie koloru tekstu nie będziemy musieli pamiętać, aby zaktualizować również obramowanie - wtedy stanie się to automatycznie.
- Selektory CSS
...jest odpowiednio: pierwszym, ostatnim bądź jedynym bratem typu E Pseudoklasy typu 3 E:empty element E, który nie ma dzieci ani nie zawiera tekstu Pusty element 3 E:link E:visited element E, który jest kotwicą hiperlinku (odsyłaczem), której cel (strona docelowa) jeszcze nie został odwiedzony (:link) lub został już odwiedzony (:visited) Odsyłacz podstawowy Odsyłacz odwiedzony 1 E:active E:hover E:focus element E podczas pewnych akcji użytkownika (:active - aktywacja...
- Układ wielokolumnowy CSS / Odstęp kolumn {column-gap}
...odstęp, należy podać wartość normal. Sąsiadujące kolumny z tekstem nie powinny do siebie bezpośrednio przylegać, gdyż wywołałoby to zlewanie się tekstu na krawędzi kolumn. Temu nieprzyjemnemu efektowi może skutecznie zapobiegać przerwa między kolumnami. Warto mieć na uwadze, że wartość domyślna tego odstępu (normal) zależy od konkretnej przeglądarki i wcale nie musi być równa zero. W obecnej wersji specyfikacja CSS nie pozwala ustalać różnego odstępu kolumn tego samego elementu. Przykład...
- Układ wielokolumnowy CSS / Przełamanie kolumny {break-before, break-inside, break-after}
...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 automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest...
- Układ wielokolumnowy CSS / Wypełnienie kolumn {column-fill}
...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ą samą wysokość i nie było żadnej wolnej przestrzeni z prawej strony elementu. Oznacza to, że nawet jeśli ustalimy wysokość elementu, kolumny mogą być od niej niższe, jeśli treści nie będzie wystarczająco dużo, aby wypełnić cały element nie tylko na szerokość, ale i na...
- Układ elastyczny CSS / Flexbox
...bloków były z góry znane. W praktyce z taką sytuacją rzadko mamy do czynienia, gdyż nie jesteśmy w stanie od razu dokładnie przewidzieć, ile tekstu będą zawierać artykuły, opublikowane w serwisie. Rozwiązaniem miało być płynne ustalanie pozycji przy pomocy właściwości float [zobacz: Szablon strony na DIV-ach]. I rzeczywiście w większości typowych zastosowań taki sposób był zupełnie wystarczający. Niestety w pewnych szczególnych przypadkach miał podobne ograniczenia jak pozycja...
- 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...
- Układ elastyczny CSS / Justowanie zawartości {justify-content}
...steruje justowaniem elementów 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 wierszy {align-content}
...flex-start - wyrównanie wierszy do początkowej krawędzi kontenera flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie wierszy (dla tekstu w języku polskim - w pionie) space-between - równe odstępy między wierszami space-around - równa przestrzeń wokół wierszy stretch - rozciągnięcie wierszy do obu krawędzi jednocześnie (domyślnie) Polecenie steruje wyrównaniem wielu wierszy wewnątrz kontenera elastycznego, kiedy ich sumaryczna wysokość jest za mała, aby wypełnić całą...