linii - Kurs HTML i CSS
Czcionki CSS / Rozciągnięcie czcionki {font-stretch}...najbardziej rozciągnięta Polecenie pozwala ustalić poziome rozciągnięcie czcionki na ekranie. Tekst rozciągnięty będzie zajmował więcej miejsca w linii, natomiast ściśnięty - mniej. UWAGA! Polecenie wchodzi w skład CSS 2.0, ale nie CSS 2.1 Przykład {font-stretch} rozciągnięcie ultra-condensed rozciągnięcie extra-condensed rozciągnięcie condensed rozciągnięcie semi-condensed rozciągnięcie normal rozciągnięcie semi-expanded rozciągnięcie expanded rozciągnięcie extra-expanded...
- Czcionki CSS / Wariant liczb czcionki {font-variant-numeric}
...cyfra zero może zostać przekreślona ukośną kreską, aby nie pomylić jej z wielką literą "O" lining-nums albo oldstyle-nums - cyfry leżące na jednej linii albo nieco poprzesuwane w górę i w dół (przypominające 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...
- Tekst CSS / Orientacja tekstu {text-orientation}
...znaków interpunkcyjnych. Teoretycznie taki sam efekt moglibyśmy uzyskać, jeśli po każdym znaku tekstu po prostu wstawilibyśmy znacznik końca linii. Jednak takie rozwiązanie nie byłoby dobrym pomysłem, ponieważ tak ułożone znaki logicznie nie łączyłyby się w wyrazy. Mogłoby to stanowić problem dla syntezatorów mowy używanych przez osoby niewidome, które zapewne przeliterowałyby taki tekst, zamiast go płynnie odczytać. Negatywne skutki takiego rozwiązania moglibyśmy również odczuć w...
- Wykazy CSS / Zawijanie tekstu w wykazie {list-style-position}
...pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. Natomiast "pozycja" określa, jak będą zawijane wiersze wykazu, które nie zmieszczą się w jednej linii. Możliwe są tutaj dwa przypadki: outside - wyróżniki na zewnątrz wykazu (domyślnie). Przykład list-style-position: outside Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy...
- Rozmiary CSS / Szerokość {width}
...Polecenie nie odnosi się do elementów inline! Polecenie to pozwala ustalić dokładną szerokość różnych elementów (np. akapitu, wykazu, poziomej linii, tabeli, obrazka itd.). Przykład {width} To jest akapit o szerokości 30% (width: 30%). To jest wykaz o szerokości 5em (width: 5em): Punkt pierwszy Punkt drugi To jest tabela o szerokości 100px (width: 100px) Poniżej widać obrazek o szerokości 200px (width: 200px): Pytania i odpowiedzi {width} Co oznacza "width" w CSS? W...
- Rozmiary CSS / Wysokość {height}
...Polecenie nie odnosi się do elementów inline! Polecenie to pozwala ustalić dokładną wysokość różnych elementów (np. akapitu, wykazu, poziomej linii, tabeli, obrazka itd.). Przykład {height} To jest akapit o wysokości 5cm (height: 5cm). To jest wykaz o wysokości 20em (height: 20em): Punkt pierwszy Punkt drugi To jest tabela o wysokości 100px (height: 100px) Poniżej widać obrazek o wysokości 40px (height: 40px): Pytania i odpowiedzi {height} Jak ustawić wysokość w CSS...
- Rozmiary CSS / Wysokość i marginesy automatyczne
...przypisaną wartość auto, przyjmują ostateczną wartość zero. Własność height nie ma zastosowania (nie można jej przypisać), ale zależy od wysokości linii (line-height). 2. Elementy zastępowane: inline, blokowe, inline-block oraz z oblewaniem (float) Jeżeli własności top, bottom, margin-top lub margin-bottom mają przypisaną wartość auto, przyjmują ostateczną wartość zero. Przypisanie wartości auto dla wysokości, spowoduje przyjęcie wysokości wewnętrznej. Ponadto CSS 2.1 określa przypadek...
- Tabele CSS / Obramowanie tabeli {border-collapse, border}
...odseparowane Polecenie określa model wyświetlania obramowania tabeli pomiędzy komórkami. Możliwe jest użycie obramowania w postaci pojedynczej linii (collapse) albo obramowania dla każdej komórki osobno, które będą od siebie odseparowane (separate). Przykład {border-collapse} border-collapse: separate komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 border-collapse: collapse komórka1 komórka2 komórka3 komórka4 komórka5 komórka4...
- Media CSS / Wybór medium @media
...1.2 } } Powyższe polecenia, wpisane w arkuszu stylów, definiują rozmiar czcionki 10pt dla wydruku, 12pt dla ekranu komputerowego oraz wysokość linii 1.2 jednocześnie dla ekranu i wydruku.
- Układ wielokolumnowy CSS / Przełamanie kolumny {break-before, break-inside, break-after}
...break-after: avoid-column } Z drugiej strony możemy chcieć wymusić przełamanie kolumny po zakończeniu w tekście 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...