bezpośrednio - Kurs HTML i CSS
Selektory pseudoklas CSS / Etykieta :target...dodatkowo na niewielkie sekcje - zbyt małe, aby tworzyć z każdej z nich osobną podstronę. Chcielibyśmy jednak mieć możliwość odesłania czytelnika bezpośrednio do podanej sekcji, żeby nie musiał jej szukać "ręcznie". W takiej sytuacji stosuje się etykiety (np.: <h2 id="nazwa_etyiety">Nazwa sekcji</h2>). Do takich etykiet można później tworzyć odsyłacze. Problemem takiego rozwiązanie może być fakt, że jeśli czytelnik przewinie stronę, może mieć problemy z późniejszym odszukaniem etykiety, do...
- Selektory pseudoklas CSS / Korzeń :root
...HTML ma w drzewie dokumentu dokładnie jeden korzeń, tzn. element najbardziej nadrzędny, który nie ma żadnego rodzica, za to zawiera w sobie (bezpośrednio lub poprzez zagnieżdżenie) wszystkie inne elementy dokumentu. W języku HTML korzeniem jest zawsze element HTML, zatem selektor ten jest w tym przypadku raczej mało przydatny, ponieważ ten sam efekt uzyskamy poprzez użycie najprostszego selektora typu: html { cecha: wartość } Nie zapominajmy jednak, że CSS nadaje się do stylizowania...
- Obramowanie CSS / Odstęp obrysu {outline-offset}
...tytuł [zobacz: Wstawianie stylów]. Natomiast jako "rozmiar" należy podać odstęp wyrażony w jednostkach długości. Standardowo obrys jest rysowany bezpośrednio na krawędzi elementu. Możemy go jednak nieco od niego odsunąć, jeśli uważamy, że dzięki temu będzie on wyglądał bardziej estytycznie. Przy tworzeniu obrysu możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obrysu Przykład {outline-offset} outline-offset: 10px obrys bez odstępu
- Układ wielokolumnowy CSS / Odstęp kolumn {column-gap}
...i nie może być mniejsza od zera. Aby wymusić domyślny 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...
- Tło CSS / Atrybuty mieszane tła {background}
...(CSS 3) przycinanie tła (CSS 3) Wartość rozmiarów tła (background-size) musi być poprzedzona znakiem ukośnika i musi się znajdować bezpośrednio po wartości pozycji (background-position), np.: "left top / contain". Nie można podać rozmiarów tła bez określenia pozycji, ale można samą pozycję bez rozmiarów. Jeżeli zostanie podana pozycja początkowa tła (background-origin), a pominiemy przycinanie tła (background-clip), przyjmie ono taką samą wartość. Nie można podać przycinania...
- Jednostki CSS / Długość
...zamiast tego wpiszemy "width: 20rem" (16px * 20 = 320px). Oczywiście opisane problemy nie będą miały również miejsca, gdy ustalimy szerokość bloku bezpośrednio w pikselach - "width: 320px". Jednak w pewnych sytuacjach może zależeć nam, aby wymiary elementów na stronie były zależne od podanego rozmiaru czcionki. Większa czcionka może wymagać szerszych bloków z tekstem. Używając jednostki rem wystarczy, że zmienimy tylko rozmiar czcionki jednego elementu, nie obawiając się czasem trudnych do...
- Kolory CSS / Sposoby definiowania kolorów CSS
...koloru może być niemożliwe albo utrudnione. currentColor - kolor taki sam jak ma tekst aktualnego elementu (czyli wartość cechy color ustawionej bezpośrednio albo odziedziczonej). 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.
- Układ elastyczny CSS / Kontener elastyczny {display: flex inline-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ładane są elastycznie. Sam kontener nie jest układany elastycznie na stronie, a jedynie jego dzieci. Wstawienie takiego kontenera...
- Selektory CSS
...który jest potomkiem elementu E Selektor potomka 1 E > F element F, który jest dzieckiem elementu E Selektor dziecka 2 E + F element F bezpośrednio poprzedzany przez element E Selektor braci 2 E ~ F element F poprzedzany przez element E Ogólny selektor braci 3 Selektory atrybutów Wzór Znaczenie Opis CSS E[atr] element E z ustawionym atrybutem "atr" (na jakąkolwiek wartość) Prosty selektor atrybutu 2 E[atr="wart"] element E, którego atrybut "atr" ma...
- CSS dla zielonych / Arkusz stylów CSS
...reguł stylów, za pomocą których możliwe jest określanie wyglądu elementów na stronie. Każda reguła stylów składa się zawsze z dwóch następujących bezpośrednio po sobie części: Selektora - czyli elementu (znacznika) na stronie, któremu chcemy zmienić wygląd Deklaracji ujętej w nawiasy klamrowe, w której określa się, w jaki sposób chcemy zmienić wygląd selektor1 { Tu wpisuje się deklaracje stylów } selektor2 { Tu wpisuje się deklaracje stylów } selektor3 { Tu wpisuje się deklaracje...