szerokość - Kurs HTML i CSS
Marginesy CSS / Model pudełkowy CSS...blokowy? Model blokowy odnosi się do sposobu wyświetlania elementów w HTML i CSS, gdzie elementy blokowe (np. <div>, <p>) zajmują całą dostępną szerokość oraz tworzą nową linię powyżej i poniżej nich. W przeciwieństwie do elementów liniowych, elementy blokowe można stylizować przy użyciu właściwości CSS, takich jak szerokość, marginesy czy obramowanie. Przykładowy kod: <div style="width: 300px; margin: 10px; background-color: blue">Treść</div>.
- Czcionki CSS / Wariant liczb czcionki {font-variant-numeric}
...ręcznie wypełniane zestawienia np. w starych księgach przychodów i rozchodów) proportional-nums albo tabular-nums - każda cyfra może mieć różną szerokość albo wszystkie cyfry będą tej samej szerokości (dzięki czemu jeśli umieścimy je np. w tabeli z jakimiś danymi, liczby w tej samej kolumnie będą ze sobą wyrównane) diagonal-fractions albo stacked-fractions - ułamki z ukośną albo poziomą kreską ułamkową Możliwe jest łączenie powyższych wariantów - np.: "font-variant-numeric...
- Marginesy CSS / Wymiarowanie pudełka {box-sizing}
...i obramowanie. Dzięki temu można precyzyjnie zarządzać wymiarami elementów w modelu pudełkowym. Domyślnie wartość box-sizing to content-box, gdzie szerokość i wysokość elementu obejmują tylko treść. Co to jest "box-sizing: border-box"? "box-sizing: border-box" to wartość właściwości CSS box-sizing, która definiuje, że szerokość i wysokość elementu będą obejmować treść, padding oraz obramowanie, ale nie będą uwzględniać marginesów. Dzięki temu, niezależnie od dodanych paddingów i...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...wykonanego "obramowania" obrazkowego. Wymaga zagnieżdżenia w sobie aż trzech bloków i przygotowania trzech obrazków. Ramka musi mieć stałą szerokość. Natomiast wysokość automatycznie dopasowuje 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ł...
- Tabele CSS / Obramowanie tabeli {border-collapse, border}
Spis treści {border-collapse, border} Model obramowania tabeli {border-collapse} Styl, szerokość i kolor obramowania tabeli {border} Przy definiowaniu obramowania tabeli możesz skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację tabeli Model obramowania tabeli {border-collapse} selektor { border-collapse: model } Selektorem może być element TABLE [zobacz: Wstawianie stylów]. Natomiast jako "model" należy podać: collapse - pojedyncze obramowanie...
- Drukowanie CSS / Rozmiar papieru @page {size}
...jedna wartość długości - kwadratowy obszar wydruku o podanych rozmiarach wyrażonych w jednostkach innych niż procent dwie wartości długości - szerokość i wysokość obszaru wydruku rozdzielone od siebie spacją Typowa drukarka najczęściej drukuje strony w orientacji pionowej (tzw. portret). Taki układ zwykle najlepiej sprawdza się przy drukowaniu tekstu. Na stronie możemy mieć jednak także zdjęcia np. krajobrazów, które typowo mają układ poziomy. W takiej sytuacji zdjęcie nie zostanie...
- 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 / Wypełnienie kolumn {column-fill}
...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ą samą wysokość i nie było żadnej wolnej przestrzeni...
- Komendy CSS3 / Podstawowy interfejs użytkownika CSS
...box-sizing Wymiarowanie pudełka Wartość content-box | border-box Inicjalizacja content-box Zastosowanie wszystkie elementy, które akcektują szerokość i wysokość Dziedziczenie nie Procenty nie Media visual caret-color Kolor karetki tekstowej Wartość auto | <color> Inicjalizacja auto Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie Media interactive cursor Kursor myszki Wartość [ [<url> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer...
- Komendy CSS3 / Układ wielokolumnowy CSS
Źródło: CSS Multi-column Layout Module Level 1 Spis treści column-count column-fill column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns column-count Liczba kolumn Wartość auto | <integer [1,∞]> Inicjalizacja auto Zastosowanie elementy blokowe z wyjątkiem tabel Dziedziczenie nie Procenty nie column-fill Wypełnienie kolumn Wartość auto | balance | balance-all Inicjalizacja balance Zastosowanie kontenery układu...