selektor - Kurs HTML i CSS
Obramowanie CSS / Odstęp obrysu {outline-offset}(CSS 3 - interpretuje Firefox, Opera, Chrome) selektor { outline-offset: rozmiar } Selektorem może być dowolny znacznik, np.: p - akapit czy h1 - 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...
- Rozmiary CSS / Przeciąganie {resize}
(CSS 3 - interpretuje Firefox 4, Opera, Chrome/Safari 3) selektor { resize: sposób } Selektorem może być dowolny znacznik z ustawionym przepełnieniem innym niż "visible" [zobacz: Wstawianie stylów]. Jako "sposób" należy podać: both - użytkownik może zmienić rozmiar elementu poprzez przeciągnięcie myszką prawego-dolnego narożnika pola vertical - możliwa zmiana tylko wysokości horizontal - możliwa zmiana tylko szerokości none - użytkownik nie może zmienić rozmiaru elementu Zdarza się, że...
- Obramowanie CSS / Atrybuty mieszane zaokrąglenia obramowania {border-radius}
(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) selektor { border-radius: wartości atrybutów } Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości zaokrąglenia rozdzielone spacjami (w kolejności: górne-lewe, górne-prawe, dolne-prawe, dolne-lewe). Polecenie pozwala ustalić kilka wartości promieni zaokrąglenia jednocześnie. Możliwe jest przy tym podanie...
- Obramowanie CSS / Dekoracja przełamania obramowania {box-decoration-break}
(CSS 3 - interpretuje Firefox 32, Opera 12-) selektor { box-decoration-break: dekoracja } Selektorem może być dowolny znacznik, np. p - akapit czy a - odsyłacz [zobacz: Wstawianie stylów]. Natomiast jako "dekoracja" należy wpisać: clone - każdy fragment przełamanego elementu będzie miał osobne obramowanie slice - wszystkie fragmenty przełamanego elementu będą miały wspólne obramowanie (domyślnie) Zdarza się, że na wydruku blok zostanie przełamany pomiędzy dwie kartki w taki sposób, że...
- Układ wielokolumnowy CSS / Szerokość kolumny {column-width}
(CSS 3 - interpretuje Internet Explorer 10, Firefox 52, Opera 11-12 i 37, Chrome 50) selektor { column-width: szerokość } Selektorem może być dowolny element blokowy z wyjątkiem tabel [zobacz: Wstawianie stylów]. Szerokość jest wyrażona w jednostkach długości i musi być większa od zera. Aby usunąć kolumny lub pozwolić przeglądarce wyznaczyć ich szerokość w inny sposób, należy podać wartość auto. Ustalając szerokość kolumn pozwalamy przeglądarce automatycznie wyświetlić tyle kolumn, ile...
- Układ wielokolumnowy CSS / Liczba kolumn {column-count}
(CSS 3 - interpretuje Internet Explorer 10, Firefox 52, Opera 11-12 i 37, Chrome 50) selektor { column-count: liczba } Selektorem może być dowolny element blokowy z wyjątkiem tabel [zobacz: Wstawianie stylów]. Liczba jest wartością naturalną, większą od zera. Aby usunąć kolumny lub pozwolić przeglądarce wyznaczyć ich szerokość w inny sposób, należy podać wartość auto. Polecenie jest przydatne, jeżeli ważniejsze jest dla nas, aby tekst zawsze znajdował się w ściśle określonej liczbie kolumn...
- Układ wielokolumnowy CSS / Odstęp kolumn {column-gap}
(CSS 3 - interpretuje Internet Explorer 10, Firefox 52, Opera 11-12 i 37, Chrome 50) selektor { column-gap: szerokość } Szerokość jest wyrażona w jednostkach długości 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...
- 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ą...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...się do zawartości, ale za to grafika pionowych krawędzi ramki nie może być zbyt skomplikowana. Obrazek obramowania {border-image-source} selektor { border-image-source: url(ścieżka dostępu do obrazka) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako obramowanie. Wpisanie "none" usunie obrazek. Ścieżkę...