własności - Kurs HTML i CSS
Układ elastyczny CSS / Kontener elastyczny {display: flex inline-flex}...a jedynie jego dzieci. Wstawienie takiego kontenera przełącza tryb wyświetlania elementów w nim zawartych na układ elastyczny. Aby jakiekolwiek własności, opisane dalej w tym rozdziale, dały widoczny efekt, konieczne jest dodanie powyższego stylu do elementu, który ma wyznaczać układ elastyczny. Pytania i odpowiedzi {display: flex} Do czego służy "display: flex"? Deklaracja CSS "display: flex" służy do tworzenia elastycznego kontenera, który umożliwia układanie elementów w jednym...
Operacje na wyrażeniach regularnych - RegExp.prototype / Dopasowanie wzorca - exec...część, która w wyrażeniu była zapisana w nawiasie. W przypadku dopasowania globalnego - kiedy wyrażenie regularne posiada flagę g - dodatkowo do własności lastIndex przypisywana jest pozycja w tekście (licząc od zera) po ostatnim znaku dopasowanego fragmentu. To zachowanie można wykorzystać do wyszukiwania w pętli wszystkich dopasowań wzorca, które znajdują się w podanym tekście. Jeżeli chcesz tylko sprawdzić, czy określony tekst pasuje do wzorca, użyj funkcji RegExp.prototype.test...
- Operacje na wyrażeniach regularnych - RegExp.prototype / Sprawdzanie dopasowania - test
...tekst pod kątem występowania w nim podanego wzorca. W przypadku dopasowania globalnego - kiedy wyrażenie regularne posiada flagę g - dodatkowo do własności lastIndex przypisywana jest pozycja w tekście (licząc od zera) po ostatnim znaku dopasowanego fragmentu. To zachowanie można wykorzystać do wyszukiwania w pętli wszystkich dopasowań wzorca, które znajdują się w podanym tekście. Przykład RegExp.prototype.test /a[a-z]/.test("abc def abc"); // true /abc?/.test("abc def...
- Komendy CSS3 / Czcionki CSS
...Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie Media visual font-feature-settings Niskopoziomowa kontrola ustawień własności czcionek Wartość normal | <feature-tag-value> Inicjalizacja normal Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie Media visual font-kerning Odległość między znakami czcionki Wartość auto | normal | none Inicjalizacja auto Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie Media visual...
- Czcionki CSS / Wariant wielkości liter czcionki {font-variant-caps}
...tego polecenia użyj: "font-variant: small-caps". Niestety tylko ten jeden wariant (zwykłe kapitaliki) ma szerokie wsparcie i tylko przy użyciu własności font-wariant, a nie font-variant-caps. Przykład {font-variant-caps} Wariant wielkości liter normal Wariant wielkości liter small-caps Wariant wielkości liter all-small-caps Wariant wielkości liter petite-caps Wariant wielkości liter all-petite-caps Wariant wielkości liter unicase Wariant wielkości liter titling-caps
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...Zaleca się także nie używać wielkich liter. Jak rozciągnąć tło obrazkowe na całą stronę CSS? Wymaga to zastosowania bardziej zaawansowanych własności stylów [zobacz rozdziały: Zaczepienie tła obrazkowego, Pozycja tła obrazkowego, Powtarzanie tła obrazkowego, Rozmiary tła obrazkowego]. W arkuszu stylów można wstawić np. następujący kod: body { background-attachment: fixed; background-color: white; background-image: url(obrazek.jpg); background-position: center; background-repeat...
- CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
...a zamiast spacji można skorzystać np. ze znaku myślnika. Wygląd ramki w którą zostanie ujęty tekst, można określić za pomocą wielu cech (własności) wchodzących w skład deklaracji stylów. Przy tworzeniu ramki z tekstem możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz własne, dopasowane do Twoich wymagań obramowanie i inne style. ✅ Rozpocznij konfigurację obramowania Kolor tła ramki .nazwa-klasy...
- Tekst CSS / Tryb pisania {writing-mode}
...th { writing-mode: vertical-rl; } otrzymamy: Kolumna 1 Kolumna 2 Kolumna 3 Wiersz 1 1 2 3 Wiersz 2 4 5 6 Wiersz 3 7 8 9 Przypominam, że własności writing-mode nie można przypisać do wierszy tabeli, ale można to zrobić w odniesieniu do komórek tabeli (th, td). Zwróć uwagę, że mimo pionowego ułożenia tekstu, orientacja obrazka nie zmienia się: To jest pierwsza linijka... ...a to jest kolejna linijka. Dla porównania to samo, ale w standardowym ułożeniu tekstu (poziomo): To jest...
- Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}
...font-weight: initial" do znacznika B spowoduje, że tekst w nim zawarty nie będzie pogrubiony - ponieważ właśnie taka jest wartość domyślna dla własności wagi czcionki. Natomiast użycie w tym przypadku wartości revert przywróci wytłuszczenie tekstu. Przykład {...: revert} To jest akapit koloru zielonego. Do jego elementów podrzędnych został przypisany specjalny styl powodujący, że każde pogrubienie, które się znajduje wewnątrz niego, przyjmie atrybut koloru czcionki (biały) oraz koloru...