zrobić - Kurs HTML i CSS
Tekst CSS / Kolor tekstu {color}...koloru tekstu elementu w CSS służy właściwość color. Możesz podać wartość koloru jako nazwę koloru, kod szesnastkowy lub funkcję koloru. Jak zrobić kolorowy tekst? Aby stworzyć kolorowy tekst w HTML, możesz użyć znacznika <span>, wewnątrz którego umieścisz tekst, a następnie wykorzystać atrybut style="..." lub CSS do ustalenia koloru tekstu. Na przykład: <span style="color: red">Kolorowy tekst</span>. Jak ustawić kolor RGB w CSS? Aby ustawić kolor w formacie RGB w CSS, możesz...
- Tekst CSS / Transformacja tekstu {text-transform}
...transformacji tekstu, takiej jak zmiana wszystkich liter na wielkie litery, małe litery lub pierwsze litery słów na wielkie litery. Jak zrobić duże litery CSS? Aby przekształcić tekst na duże litery w CSS, możesz użyć właściwości text-transform i ustawić jej wartość na uppercase. Na przykład: <p style="text-transform: uppercase">...</p>. To spowoduje, że wszystkie litery w tekście będą wielkie.
- Tekst CSS / Białe znaki w tekście {white-space}
...przełamać tylko poprzez zastosowanie znacznika <br>. Przykład {white-space} Przykład Pytania i odpowiedzi Co to są białe znaki i co należy zrobić, aby je zobaczyć? Białe znaki to symbole w tekście, które nie są widoczne jako drukowane znaki, ale wpływają na formatowanie i układ tekstu. Aby zobaczyć białe znaki w edytorze HTML, można włączyć tryb wyświetlania znaków specjalnych, który zazwyczaj jest dostępny w menu (np. "Widok / Pokaż białe znaki" - ang. "View / Show white space")...
- Tekst CSS / Tryb pisania {writing-mode}
...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 pierwsza linijka... ...a to jest kolejna linijka. Ponadto niektóre...
- Rozmiary CSS / Przepełnienie {overflow}
...do przewijania auto - pokazanie suwaków jeśli to konieczne Według CSS 2.1 polecenie można również zastosować do komórek tabeli. Określa co zrobić, gdy zawartość elementu nie mieści się w rozmiarach podanych przez width oraz height. Możliwe jest ukrycie nadmiarowej zawartość, pokazanie wszystkiego poprzez powiększenie rozmarów elementu (bez względu na parametry width i height) albo utworzenie suwaków do przewijania przepełnionej treści. Przykład {overflow} width: 5ex Szerokość tego...
- Tekst CSS / Orientacja tekstu {text-orientation}
...się z języka łacińskiego będą położone na boku czyli obrócone o kąt 90°. Taki tekst może być jednak trudniejszy do odczytania. Żeby to zrobić, użytkownicy mogą odruchowo przekrzywiać głowę w prawo albo próbować obrócić ekran 😉 Dlatego czasami lepszym wyborem będzie zastosowanie stylu "text-orientation: upright". Dzięki temu kolejne znaki tekstu zostaną ułożone w pionie jeden pod drugim i nie będą obrócone. Może to przynieść lepsze efekty zwłaszcza w przypadku krótkich tekstów...
- Kursory CSS / Kursor obrazkowy {cursor: url}
...url('myszka.png'), auto } ustawi niestandardowy obrazek jako kursor, który zmieni się na domyślny (auto) w przypadku braku dostępności. Jak zrobić "customowy" kursor? Aby stworzyć niestandardowy kursor, można użyć właściwości cursor w CSS i wskazać ścieżkę do własnego obrazka kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('kursor.png'), auto } ustawi niestandardowy obrazek jako kursor, a auto zostanie użyte, jeśli obrazek nie będzie dostępny.
- Drukowanie CSS / Linijki na stronie {widows, orphans}
...do przełamania strony, jednak podstawowa różnica polega na tym, że powyższe polecenia nie wymuszają przełamania strony, a jedynie określają co zrobić w przypadku, gdy taka konieczność już wystąpi wewnątrz akapitu. Jeżeli cały tekst zmieści się na jednej stronie, nie zobaczymy żadnego ich działania. Przykład {widows, orphans} Jeśli to możliwe, podczas drukowania pozostaw przynajmniej 4 linijki akapitu na górze i na dole kartki papieru: p { widows: 4; orphans: 4; }
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...nas odstęp pomiędzy wyróżnikami wykazu a treścią poszczególnych punktów. Jeżeli chcemy dodatkowo ustalić margines z lewej strony wykazu, możemy to zrobić dodając deklarację margin-left do elementu ul (lub ewentualnie li). Analogicznie można dodać margines przed/po całym takim wykazem, oddzielający go od sąsiadującej treści, czy nawet odstępy pomiędzy poszczególnymi punktami wykazu. Warto zauważyć, że ten sposób pozwala również dokładnie określić pionową pozycję markera, co przy...
- Drukowanie CSS / Kontekst strony @page
...na wydruku, użytkownik musi przestawić je ręcznie w swojej przeglądarce - najczęściej w menu: Drukuj Ctrl+P). Nie wszyscy jednak potrafią to zrobić. Na szczęście możemy już w CSS wskazać wielkość marginesów na wydruku zgodnie z naszym uznaniem. Przykład @page Ustawienie marginesów strony na wydruku: @page { margin: 1cm; }