Tekst - CSS
W tym rozdziale dowiesz się...
Określenie parametrów wyglądu tekstu z użyciem arkuszy CSS.
Kolor tekstu {color}Jak zmienić kolor tekstu w dowolnym elemencie?
- Dekoracja tekstu {text-decoration}
Co zrobić, aby ten sam tekst został podkreślony, przekreślony i nadkreślony? Jak wprowadzić migający tekst w sposób zgodny ze standardem?
- Transformacja tekstu {text-transform}
W jaki sposób przekształcić zwykły tekst na pisany w całości dużymi albo małymi literami? Jak zmienić pierwsze litery wszystkich wyrazów na wielkie?
- Wyrównanie tekstu {text-align}
Jak ustawić tekst po lewej, po prawej lub na środku (wyśrodkowanie, centrowanie)? Co zrobić, aby tekst był równo ułożony przy obu marginesach (justowanie)?
- Wcięcie w tekście {text-indent}
W jaki sposób prawidłowo dodawać wcięcia w akapitach?
- Cień pod tekstem {text-shadow}
Jak można by było dodać cień pod tekstem?
- Wysokość linii tekstu {line-height}
Jak zmienić odległość między linijkami tekstu (wysokość linii), tak aby stał się bardziej czytelny lub skondensowany?
- Odstęp między wyrazami tekstu {word-spacing}
Jak rozstrzelić lub ścieśnić tekst poprzez zwiększenie odległości między sąsiednimi wyrazami?
- Odstęp między literami tekstu {letter-spacing}
Jak rozstrzelić lub ścieśnić tekst poprzez zwiększenie odległości między literami?
- Białe znaki w tekście {white-space}
W jaki sposób zablokować zawijanie tekstu? Co zrobić, aby klawisze Enter i Tab były widoczne na ekranie?
- Tryb pisania {writing-mode}
Co zrobić, aby tekst na stronie był ułożony pionowo - z góry na dół?
- Orientacja tekstu {text-orientation}
Co zrobić, aby znaki w tekście były ułożone pionowo jeden pod drugim?
PowtórkaCSS
Kolor tekstu {color}
Jak zmienić kolor tekstu w dowolnym elemencie?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 3.5, Safari 1)
selektor { color: kolor }Natomiast jako "kolor" należy podać definicję koloru.
Polecenie pozwala ustalić dowolny kolor tekstu.
Jeśli definiowane własności mają odnosić się do całej strony (np. kolor tekstu na całej stronie), można użyć selektora BODY lub HTML.
Przykład {color}
kolor red
kolor #66AAFF
kolor #69C
kolor rgb(255,33,170)
kolor rgb(25%,75%,75%)
kolor systemowy Highlight
Pytania i odpowiedzi {color}
Która właściwość CSS służy do zmiany koloru tekstu elementu?
Do zmiany 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 użyć właściwości color i podać wartość w formie rgb(R, G, B), gdzie R, G i B to liczby od 0 do 255 reprezentujące składowe czerwonej, zielonej i niebieskiej odpowiednio. Na przykład: "color: rgb(255, 0, 0)" ustawia kolor tekstu na czerwony.
Jaki to kolor #FFF?
Kolor o kodzie #FFF reprezentuje barwę białą w notacji szesnastkowej. Jest to najjaśniejszy możliwy kolor, gdzie wszystkie składowe (czerwona, zielona i niebieska) mają maksymalną wartość.
Dekoracja tekstu {text-decoration}
Co zrobić, aby ten sam tekst został podkreślony, przekreślony i nadkreślony? Jak wprowadzić migający tekst w sposób zgodny ze standardem?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 3.5, Safari 1)
selektor { text-decoration: dekoracja }Natomiast jako "dekoracja" należy podać:
- none - bez zmian
- underline - podkreślenie
- line-through - przekreślenie
- overline - nadkreślenie
- blink - migotanie tekstu (nieobsługiwane w nowych przeglądarkach)
Polecenie umożliwia na wybór określonej dekoracji tekstu (np. podkreślenie). Migotanie może nie być interpretowane przez wszystkie przeglądarki!
Przykład {text-decoration}
dekoracja none
dekoracja underline
dekoracja line-through
dekoracja overline
dekoracja blink (tylko starsze przeglądarki)
Ciekawą możliwością może być łączenie powyższych wartości w jednej deklaracji, np.:
selektor { text-decoration: underline line-through overline }A oto efekt:
Tekst podkreślony, przekreślony i nadkreślony
Pytania i odpowiedzi {text-decoration}
Co oznacza "text-decoration"?
Właściwość CSS text-decoration służy do określania dekoracji tekstu, takich jak podkreślenie, przekreślenie, nadkreślenie. Może być stosowana do elementów tekstu, aby zmienić ich wygląd.
Jak podkreślić słowo w CSS?
Aby podkreślić słowo w CSS, możesz użyć właściwości text-decoration i ustawić jej wartość na underline. Na przykład: <span style="text-decoration: underline">słowo</span>.
Transformacja tekstu {text-transform}
W jaki sposób przekształcić zwykły tekst na pisany w całości dużymi albo małymi literami? Jak zmienić pierwsze litery wszystkich wyrazów na wielkie?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 7, Safari 1)
selektor { text-transform: transformacja }Natomiast jako "transformacja" należy podać:
- none - bez zmian
- capitalize - zamiana pierwszych liter wszystkich wyrazów na wielkie
- uppercase - zamiana wszystkich liter na wielkie
- lowercase - zamiana wszystkich liter na małe
Polecenie umożliwia na wybór określonej transformacji tekstu, czyli atrybutów dotyczących zmiany wielkości liter (wielkie/małe) w tekście.
Przykład {text-transform}
To jest akapit z transformacją tekstu none... To jest akapit z transformacją tekstu none... To jest akapit z transformacją tekstu none...
To jest akapit z transformacją tekstu capitalize... To jest akapit z transformacją tekstu capitalize... To jest akapit z transformacją tekstu capitalize...
To jest akapit z transformacją tekstu uppercase... To jest akapit z transformacją tekstu uppercase... To jest akapit z transformacją tekstu uppercase...
To jest akapit z transformacją tekstu lowercase... To jest akapit z transformacją tekstu lowercase... To jest akapit z transformacją tekstu lowercase...
Pytania i odpowiedzi {text-transform}
Co robi "text-transform"?
Właściwość CSS text-transform służy do kontrolowania 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.
Wyrównanie tekstu {text-align}
Jak ustawić tekst po lewej, po prawej lub na środku (wyśrodkowanie, centrowanie)? Co zrobić, aby tekst był równo ułożony przy obu marginesach (justowanie)?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 3.5, Safari 1)
selektor { text-align: wyrównanie }Natomiast jako "wyrównanie" należy podać:
- left - wyrównanie tekstu do lewego marginesu (domyślnie)
- right - wyrównanie do prawego marginesu
- center - do środka (wyśrodkowanie)
- justify - do obu marginesów jednocześnie (justowanie)
Polecenie pozwala wybrać jeden z możliwych sposobów wyrównania tekstu, czyli jego ułożenia na ekranie.
Przykład {text-align}
wyrównanie left (domyślnie)
wyrównanie left - do lewego marginesu
left
wyrównanie tekstu right
wyrównanie right - do prawego marginesu
right
wyrównanie center (wyśrodkowanie)
wyrównanie center - do środka
center
Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie...
Pytania i odpowiedzi {text-align}
Co oznacza "text-align" w CSS?
Właściwość CSS text-align służy do ustalania wyrównania tekstu wewnątrz elementu.
Jak wyrównać tekst w CSS?
Aby wyrównać tekst w CSS, użyj właściwości text-align i ustaw wartość zgodnie z potrzebami. Możliwe wartości to: left (do lewej), right (do prawej), center (na środku) oraz justify (wyjustowanie obu marginesów).
Jak wyrównać tekst do lewej CSS?
Aby wyrównać tekst do lewej w CSS, użyj właściwości text-align i ustaw wartość na left, na przykład <p style="text-align: left">...</p>.
Co robi "text-align justify"?
Deklaracja CSS "text-align: justify" wyrównuje tekst do obu marginesów, tworząc efekt wyjustowanego tekstu, gdzie odstępy między słowami są dostosowywane tak, aby linie tekstu miały równe długości.
Jak wyrównać tekst do obu marginesów?
Aby wyrównać tekst do obu marginesów, użyj właściwości text-align i ustaw wartość na justify, na przykład <p style="text-align: justify">...</p>.
Jak ustawić tekst na środku strony?
Aby ustawić tekst na środku strony, możesz zastosować stylowanie CSS do elementu zawierającego tekst, na przykład używając: <p style="text-align: center">...</p>.
Jak napisać tekst po prawej stronie w HTML?
Aby napisać tekst po prawej stronie w HTML, możesz umieścić tekst w odpowiednim elemencie, na przykład <p> lub <div>, a następnie użyć CSS do wyrównania go do prawej strony. Na przykład: <p style="text-align: right">...</p>.
Wcięcie w tekście {text-indent}
W jaki sposób prawidłowo dodawać wcięcia w akapitach?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 3.5, Safari 1)
selektor { text-indent: wcięcie }Natomiast jako "wcięcie" należy podać konkretną wielkość wcięcia, używając jednostek długości.
Wcięcie w tekście oznacza dodatkowy odstęp pierwszej linijki w bloku od lewego marginesu (jak tabulator). Stosuje się je, gdy rozpoczynamy nowy akapit (na inny temat).
Przykład {text-indent}
To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm...
Pytania i odpowiedzi {text-indent}
Jaki atrybut pozwala definiować wcięcie pierwszego wiersza akapitu?
Właściwość CSS text-indent pozwala definiować wcięcie pierwszego wiersza akapitu. Możesz ustawić wartość w pikselach, procentach lub innych jednostkach długości.
Jak zrobić wcięcie w CSS?
Aby zrobić wcięcie pierwszego wiersza akapitu, możesz użyć właściwości text-indent i ustawić wartość np. w pikselach albo w procentach. Na przykład: <p style="text-indent: 20px">...</p> wcięcie o 20 pikseli. Natomiast jeśli chcesz wciąć wszystkie wiersze tekstu w całym akapicie, zastosuj właściwość margin-left.
Cień pod tekstem {text-shadow}
Jak można by było dodać cień pod tekstem?
(interpretuje: Chrome 2, Firefox 3.5, Edge 12, Opera 9.5, Safari 1.1)
selektor { text-shadow: poziom pion rozmycie kolor,... }- poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo)
- pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę)
- rozmycie - promień efektu rozmycia (opcjonalnie)
- kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element)
Możliwe jest podanie więcej niż jednego efektu - wtedy kolejne efekty należy rozdzielić przecinkami. Zostaną one zastosowane w kolejności podawania.
Aby zupełnie usunąć ustalony wcześniej cień, należy podać
text-shadow: none
[Zobacz także: Wstawianie stylów]Powyższe polecenie pozwala wprowadzić efekt cienia pod tekstem. Możliwe jest również podanie serii efektów, rozdzielonych przecinkami, które będą się nawzajem nakładały.
UWAGA! Polecenie wchodzi w skład CSS 2.0, ale nie CSS 2.1.
Przykład {text-shadow}
text-shadow: 0.2em 0.2em
text-shadow: 3px 3px 5px red
text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px
Wysokość linii tekstu {line-height}
Jak zmienić odległość między linijkami tekstu (wysokość linii), tak aby stał się bardziej czytelny lub skondensowany?
selektor { line-height: wysokość }Natomiast jako "wysokość" należy podać konkretną wielkość odstępu między liniami bazowymi wierszy używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną.
Polecenie to pozwala ustalić odstęp pomiędzy liniami bazowymi wszystkich wierszy w bloku - tzw. interlinia. Dzięki temu linijki mogą być bardziej ścieśnione lub rozciągnięte.
Przykład {line-height}
To jest akapit, w którego wysokość linii wynosi 1cm... To jest akapit, w którego wysokość linii wynosi 1cm... To jest akapit, w którego wysokość linii wynosi 1cm... To jest akapit, w którego wysokość linii wynosi 1cm... To jest akapit, w którego wysokość linii wynosi 1cm...
Pytania i odpowiedzi {line-height}
Co to jest "line-height"?
line-height to właściwość CSS, która określa odstęp między liniami tekstu wewnątrz danego elementu. Może być wyrażona jako wartość liczbową, jednostkę (np. piksele) lub jako współczynnik wielkości czcionki. Kontroluje ona wysokość wirtualnego prostokąta obejmującego pojedynczą linię tekstu, a nie tylko samą wysokość czcionki.
Jak zmienić interlinię w CSS?
Aby zmienić interlinię w CSS, użyj właściwości line-height i ustaw wartość zgodnie z potrzebami. Przykładowo: <p style="line-height: 1.5>...</p> dla odstępu 1.5 razy większego niż wysokość czcionki. Możesz również użyć jednostek (np. piksele) lub procentów.
Jaki powinien być odstęp między wierszami?
Odpowiedni odstęp między wierszami zależy od wielkości czcionki, stylu tekstu i preferencji projektowych. Zazwyczaj wartość odstępu mieści się w zakresie od 1.2 do 1.6, gdzie 1 oznacza normalną interlinię. Wartość większa niż 1.6 może ułatwić czytanie, a mniejsza niż 1.2 zwiększyć zagęszczenie tekstu.
Odstęp między wyrazami tekstu {word-spacing}
Jak rozstrzelić lub ścieśnić tekst poprzez zwiększenie odległości między sąsiednimi wyrazami?
selektor { word-spacing: odstęp }Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi wyrazami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną.
Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi wyrazami w bloku. Dzięki temu wyrazy w linijkach mogą być bardziej ścieśnione lub rozciągnięte.
Przykład {word-spacing}
To jest akapit, w którym odstępy między wyrazami wynoszą 1cm
Odstęp między literami tekstu {letter-spacing}
Jak rozstrzelić lub ścieśnić tekst poprzez zwiększenie odległości między literami?
selektor { letter-spacing: odstęp }Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi literami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną.
Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi literami w wyrazach bloku. Dzięki temu cały tekst w linijce może być bardziej ścieśniony lub rozciągnięty.
Przykład {letter-spacing}
To jest akapit, w którym odstępy między literami wynoszą 3mm
Pytania i odpowiedzi {letter-spacing}
Co to jest rozstrzelony tekst?
Rozstrzelony tekst to właściwość CSS, która określa odstępy między poszczególnymi literami w tekście. Może być używana do tworzenia efektu, gdzie litery są od siebie nieco rozsunięte. Przykład: <p style="letter-spacing: 1px;">Lorem ipsum...</p>.
Jak rozstrzelić tekst?
Aby rozstrzelić tekst w CSS, użyj właściwości letter-spacing i ustaw wartość dodatnią, np. "letter-spacing: 1px" dla odstępów między literami. Im większa wartość, tym większy efekt rozstrzelenia tekstu. To spowoduje, że litery będą od siebie bardziej oddzielone, tworząc efekt rozstrzelonego tekstu.
Białe znaki w tekście {white-space}
W jaki sposób zablokować zawijanie tekstu? Co zrobić, aby klawisze Enter i Tab były widoczne na ekranie?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 4, Safari 1)
selektor { white-space: sposób }Natomiast jako "sposób" należy podać:
- normal - zamiana kilku sąsiadujących ze sobą spacji na jedną; wiersze są przełamywane automatycznie na końcu szerokości strony (domyślnie)
- pre - umożliwia wyświetlenie wielu spacji obok siebie; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter (tekst preformatowany)
- nowrap - tryb identyczny jak "normal" z tym, że nie pozwala na przełamanie wiersza (przejście do następnej linii), aż do napotkania znacznika
<br> - pre-wrap - (CSS 2.1) pozwala wyświetlić kilka sąsiadujących spacji; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter - oraz automatycznie na końcu szerokości strony (Opera 7.5, Firefox 3, Chrome, Konqueror)
- pre-line - (CSS 2.1) jak wyżej z tym, że sąsiadujące spacje są zamieniane na jedną
Polecenie pozwala sterować wyświetlaniem spacji na ekranie. Domyślnie nie jest możliwe postawienie obok siebie kilku spacji, ponieważ zostaną one automatycznie zamienione na jedną. Nie można również postawić spacji na początku wiersza. Dzięki użyciu komendy white-space: pre, możemy pozbyć się tych niedogodności. Polecenie działa podobnie jak znacznik <pre>...</pre>, lecz tekst jest napisany zwykłą czcionką.
Ponadto deklaracja white-space: nowrap uniemożliwia przeglądarce przełamanie wiersza i przejście do następnej linii. Stosuje się je, gdy koniecznie zależy nam, aby podany tekst, był wpisany w jednej linijce. Jeśli nie zmieści się on na ekranie, pojawi się suwak do przewijania zawartości strony. Wiersz taki możemy przełamać tylko poprzez zastosowanie znacznika <br>.
Przykład {white-space}
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") lub ustawieniach programu.
Czy spacja jest znakiem specjalnym?
Tak, spacja jest uważana za znak specjalny w kontekście programowania i edycji tekstu. Choć nie jest widoczna jako drukowany znak, ma znaczenie jako separator między wyrazami lub innymi elementami w tekście.
Jakie są białe znaki?
Białe znaki obejmują: spacje, tabulatory, znaki nowej linii i inne podobne symbole, które nie są widoczne jako drukowane znaki, ale wpływają na formatowanie i układ tekstu. Są one używane do oddzielania elementów tekstu i tworzenia przerw między nimi.
Tryb pisania {writing-mode}
Co zrobić, aby tekst na stronie był ułożony pionowo - z góry na dół?
(CSS 3 - interpretuje: Chrome 48, Firefox 41, Edge 12, Opera 35, Safari 10.1)
selektor { writing-mode: tryb }thead, tbody, tfoot), grup kolumn tabeli (colgroup), wierszy tabeli (tr) i kolumn tabeli (col) [zobacz: Wstawianie stylów].Natomiast jako "tryb" należy podać:
- horizontal-tb - linijki tekstu ułożone poziomo jedna pod drugą (domyślnie)
- vertical-rl - linijki tekstu ułożone pionowo obok siebie od prawej do lewej strony (ang. right-to-left)
- vertical-lr - linijki tekstu ułożone pionowo obok siebie od lewej do prawej strony (ang. left-to-right)
W wielu językach azjatyckich tekst podczas pisania tradycyjnie układany jest pionowo, gdzie kolejne linijki są położone obok siebie. Na przykład w językach pochodzenia mongolskiego linijki ułożone są pionowo obok siebie od lewej do prawej strony - tzn. pierwsza linijka tekstu znajduje się przy lewej krawędzi kartki, a ostatnia - przy prawym jej brzegu. Pionowe ułożenie tekstu możemy uzyskać właśnie dzięki użyciu stylu "writing-mode: vertical-lr" (języki mongolskie) albo "writing-mode: vertical-rl" (języki Han).
W większości języków wywodzących się z alfabetu łacińskiego tekst piszemy w poziomych linijkach ułożonych jedna pod drugą. Jednak nawet w tym przypadku czasem może się przydać takie nienaturalne ułożenie tekstu w pionie. Na przykład wyobraźmy sobie tabelę z wieloma kolumnami, w których znajdują się krótkie wartości - np. małe liczby całkowite. Jeśli do takiej tabeli dodamy nagłówek, może okazać się, że tabela stanie się bardzo szeroka, przez co trudno będzie ją czytać. W takiej sytuacji czasami lepiej jest wpisać komórki nagłówkowe pionowo, dzięki czemu cała tabela przyjmie bardziej zwarte rozmiary.
Warto pamiętać, że nawet w przypadku pionowego ułożenia tekstu elementy takie jak <img> (obrazki) i <iframe> (ramki lokalne) nadal będą ułożone w standardowej orientacji poziomej. Jest to celowy zabieg, ponieważ jeśli chcemy, aby tekst w takich elementach był ułożony pionowo, możemy po prostu przygotować taki obrazek albo nadać taki tryb dla dokumentu HTML wyświetlanego wewnątrz ramki lokalnej.
Inaczej sprawa się ma w przypadku elementów zastępowanych powiązanych z tekstem, które nie są ładowane z zewnętrznego pliku. W takiej sytuacji ułożenie tekstu w ich obrębie powinno być zgodne z ustalonym trybem pisania. To zachowanie nie jest jednak wymagane, więc nie wszystkie przeglądarki muszą go obsługiwać. Działa to w ten sposób np. w przeglądarce Firefox, ale co ciekawe nawet wtedy po kliknięciu w ułożony pionowo element <select> rozwija się on w tradycyjnym kierunku - tzn. do dołu lub do góry :-(
Jeśli chcesz, aby znaki tekstu były ułożone pionowo jeden pod drugim, a nie obrócone na bok, zobacz rozdział: Orientacja tekstu.
Przykład {writing-mode}
Tekst ułożony w pionie z kolejnymi linijkami obok siebie od prawej do lewej strony ("writing-mode: vertical-rl"):
To jest pierwsza linijka,
to jest druga linijka,
a to jest kolejna linijka.
Tekst ułożony w pionie z kolejnymi linijkami obok siebie od lewej do prawej strony ("writing-mode: vertical-lr"):
To jest pierwsza linijka,
to jest druga linijka,
a to jest kolejna linijka.
Po wpisaniu następującej reguły w arkuszu stylów:
th {
writing-mode: vertical-rl;
}otrzymamy:
| Kolumna 1 | Kolumna 2 | Kolumna 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 przeglądarki mogą układać pionowo również tekstowe elementy formularzy:
Jeśli powyżej widzisz pola formularza ułożone poziomo, to znaczy, że Twoja przeglądarka nie obsługuje pionowego ich ułożenia.
Orientacja tekstu {text-orientation}
Co zrobić, aby znaki w tekście były ułożone pionowo jeden pod drugim?
(CSS 3 - interpretuje: Chrome 48, Firefox 41, Edge 79, Opera 35, Safari 14)
selektor { text-orientation: orientacja }writing-mode: vertical-lr" lub "writing-mode: vertical-rl".Natomiast jako "orientacja" należy podać:
- mixed - znaki tekstu ułożone pionowo na boku czyli obrócone o kąt 90° (domyślnie), chyba że użyta czcionka obsługuje pionową orientację
- upright - znaki tekstu ułożone pionowo zawsze jeden pod drugim
- sideways - znaki tekstu ułożone pionowo zawsze na boku czyli obrócone o kąt 90°, bez względu czy czcionka obsługuje pionową orientację
Tryb pisania w języku CSS pozwala ułożyć w pionie każdy tekst, nawet jeśli nie jest to naturalne ustawienie pisma w wybranym języku. W takim przypadku litery alfabetów wywodzących 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, np. jeden lub dwa wyrazy raczej bez żadnych 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 wyszukiwarkach sieciowych - strona mogłaby w ogóle nie być odnajdywana po wpisaniu ułożonych w taki sposób w pionie słów kluczowych.
W przypadku języków azjatyckich, w których tekst tradycyjnie pisze się z góry na dół, można użyć czcionki, która ma wbudowaną pionową orientację tekstu. Wtedy zarówno w przypadku użycia wartości mixed jak i upright znaki będą ułożone jeden pod drugim i nie zostaną obrócone. Aby wymusić obrócenie, bez względu jakiej czcionki używamy i w jakim języku jest napisany tekst, należy posłużyć się wartością sideways.
Zwracam uwagę, że aby ustawienie orientacji tekstu w ogóle było możliwe, jednocześnie musimy również ustalić jeden z pionowych trybów pisania, tzn. "writing-mode: vertical-lr" albo "writing-mode: vertical-rl". W przeciwnym razie nie zobaczymy żadnych efektów.
Przykład {text-orientation}
Znaki tekstu ułożone w pionie w domyślnej orientacji ("writing-mode: vertical-rl; text-orientation: mixed"):
To jest pierwsza linijka,
to jest druga linijka,
a to jest kolejna linijka.
Znaki tekstu ułożone w pionie zawsze jeden pod drugim ("writing-mode: vertical-lr; text-orientation: upright"):
To jest pierwsza linijka,
to jest druga linijka,
a to jest kolejna linijka.
Znaki tekstu ułożone w pionie zawsze na boku ("writing-mode: vertical-rl; text-orientation: sideways"):
To jest pierwsza linijka,
to jest druga linijka,
a to jest kolejna linijka.
Po wpisaniu następującej reguły w arkuszu stylów:
th {
writing-mode: vertical-lr;
text-orientation: upright;
}otrzymamy:
| Kolumna 1 | Kolumna 2 | Kolumna 3 | |
|---|---|---|---|
| Wiersz 1 | 1 | 2 | 3 |
| Wiersz 2 | 4 | 5 | 6 |
| Wiersz 3 | 7 | 8 | 9 |
[Porównaj przykład z rozdziału: Tryb pisania]
Niektóre przeglądarki mogą układać pionowo również tekstowe elementy formularzy:
Jeśli powyżej widzisz pola formularza ułożone poziomo, to znaczy, że Twoja przeglądarka nie obsługuje pionowego ich ułożenia.
Pytania i odpowiedzi
Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.
Jak zmienić kolor tekstu w dowolnym elemencie?
Która właściwość CSS służy do zmiany koloru tekstu elementu?
Do zmiany 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 użyć właściwości color i podać wartość w formie rgb(R, G, B), gdzie R, G i B to liczby od 0 do 255 reprezentujące składowe czerwonej, zielonej i niebieskiej odpowiednio. Na przykład: "color: rgb(255, 0, 0)" ustawia kolor tekstu na czerwony.
Jaki to kolor #FFF?
Kolor o kodzie #FFF reprezentuje barwę białą w notacji szesnastkowej. Jest to najjaśniejszy możliwy kolor, gdzie wszystkie składowe (czerwona, zielona i niebieska) mają maksymalną wartość.
Co zrobić, aby ten sam tekst został podkreślony, przekreślony i nadkreślony? Jak wprowadzić migający tekst w sposób zgodny ze standardem?
Co oznacza "text-decoration"?
Właściwość CSS text-decoration służy do określania dekoracji tekstu, takich jak podkreślenie, przekreślenie, nadkreślenie. Może być stosowana do elementów tekstu, aby zmienić ich wygląd.
Jak podkreślić słowo w CSS?
Aby podkreślić słowo w CSS, możesz użyć właściwości text-decoration i ustawić jej wartość na underline. Na przykład: <span style="text-decoration: underline">słowo</span>.
W jaki sposób przekształcić zwykły tekst na pisany w całości dużymi albo małymi literami? Jak zmienić pierwsze litery wszystkich wyrazów na wielkie?
Co robi "text-transform"?
Właściwość CSS text-transform służy do kontrolowania 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.
Jak ustawić tekst po lewej, po prawej lub na środku (wyśrodkowanie, centrowanie)? Co zrobić, aby tekst był równo ułożony przy obu marginesach (justowanie)?
Co oznacza "text-align" w CSS?
Właściwość CSS text-align służy do ustalania wyrównania tekstu wewnątrz elementu.
Jak wyrównać tekst w CSS?
Aby wyrównać tekst w CSS, użyj właściwości text-align i ustaw wartość zgodnie z potrzebami. Możliwe wartości to: left (do lewej), right (do prawej), center (na środku) oraz justify (wyjustowanie obu marginesów).
Jak wyrównać tekst do lewej CSS?
Aby wyrównać tekst do lewej w CSS, użyj właściwości text-align i ustaw wartość na left, na przykład <p style="text-align: left">...</p>.
Co robi "text-align justify"?
Deklaracja CSS "text-align: justify" wyrównuje tekst do obu marginesów, tworząc efekt wyjustowanego tekstu, gdzie odstępy między słowami są dostosowywane tak, aby linie tekstu miały równe długości.
Jak wyrównać tekst do obu marginesów?
Aby wyrównać tekst do obu marginesów, użyj właściwości text-align i ustaw wartość na justify, na przykład <p style="text-align: justify">...</p>.
Jak ustawić tekst na środku strony?
Aby ustawić tekst na środku strony, możesz zastosować stylowanie CSS do elementu zawierającego tekst, na przykład używając: <p style="text-align: center">...</p>.
Jak napisać tekst po prawej stronie w HTML?
Aby napisać tekst po prawej stronie w HTML, możesz umieścić tekst w odpowiednim elemencie, na przykład <p> lub <div>, a następnie użyć CSS do wyrównania go do prawej strony. Na przykład: <p style="text-align: right">...</p>.
W jaki sposób prawidłowo dodawać wcięcia w akapitach?
Jaki atrybut pozwala definiować wcięcie pierwszego wiersza akapitu?
Właściwość CSS text-indent pozwala definiować wcięcie pierwszego wiersza akapitu. Możesz ustawić wartość w pikselach, procentach lub innych jednostkach długości.
Jak zrobić wcięcie w CSS?
Aby zrobić wcięcie pierwszego wiersza akapitu, możesz użyć właściwości text-indent i ustawić wartość np. w pikselach albo w procentach. Na przykład: <p style="text-indent: 20px">...</p> wcięcie o 20 pikseli. Natomiast jeśli chcesz wciąć wszystkie wiersze tekstu w całym akapicie, zastosuj właściwość margin-left.
Jak zmienić odległość między linijkami tekstu (wysokość linii), tak aby stał się bardziej czytelny lub skondensowany?
Co to jest "line-height"?
line-height to właściwość CSS, która określa odstęp między liniami tekstu wewnątrz danego elementu. Może być wyrażona jako wartość liczbową, jednostkę (np. piksele) lub jako współczynnik wielkości czcionki. Kontroluje ona wysokość wirtualnego prostokąta obejmującego pojedynczą linię tekstu, a nie tylko samą wysokość czcionki.
Jak zmienić interlinię w CSS?
Aby zmienić interlinię w CSS, użyj właściwości line-height i ustaw wartość zgodnie z potrzebami. Przykładowo: <p style="line-height: 1.5>...</p> dla odstępu 1.5 razy większego niż wysokość czcionki. Możesz również użyć jednostek (np. piksele) lub procentów.
Jaki powinien być odstęp między wierszami?
Odpowiedni odstęp między wierszami zależy od wielkości czcionki, stylu tekstu i preferencji projektowych. Zazwyczaj wartość odstępu mieści się w zakresie od 1.2 do 1.6, gdzie 1 oznacza normalną interlinię. Wartość większa niż 1.6 może ułatwić czytanie, a mniejsza niż 1.2 zwiększyć zagęszczenie tekstu.
Jak rozstrzelić lub ścieśnić tekst poprzez zwiększenie odległości między literami?
Co to jest rozstrzelony tekst?
Rozstrzelony tekst to właściwość CSS, która określa odstępy między poszczególnymi literami w tekście. Może być używana do tworzenia efektu, gdzie litery są od siebie nieco rozsunięte. Przykład: <p style="letter-spacing: 1px;">Lorem ipsum...</p>.
Jak rozstrzelić tekst?
Aby rozstrzelić tekst w CSS, użyj właściwości letter-spacing i ustaw wartość dodatnią, np. "letter-spacing: 1px" dla odstępów między literami. Im większa wartość, tym większy efekt rozstrzelenia tekstu. To spowoduje, że litery będą od siebie bardziej oddzielone, tworząc efekt rozstrzelonego tekstu.
W jaki sposób zablokować zawijanie tekstu? Co zrobić, aby klawisze Enter i Tab były widoczne na ekranie?
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") lub ustawieniach programu.
Czy spacja jest znakiem specjalnym?
Tak, spacja jest uważana za znak specjalny w kontekście programowania i edycji tekstu. Choć nie jest widoczna jako drukowany znak, ma znaczenie jako separator między wyrazami lub innymi elementami w tekście.
Jakie są białe znaki?
Białe znaki obejmują: spacje, tabulatory, znaki nowej linii i inne podobne symbole, które nie są widoczne jako drukowane znaki, ale wpływają na formatowanie i układ tekstu. Są one używane do oddzielania elementów tekstu i tworzenia przerw między nimi.
Powtórka
Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.