Przejdź do treści

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?

selektor { color: kolor }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

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

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?

selektor { text-decoration: dekoracja }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

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

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?

selektor { text-transform: transformacja }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

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

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)?

selektor { text-align: wyrównanie }
Selektorem może być dowolny znacznik wyświetlany w bloku, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

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

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?

selektor { text-indent: wcięcie }
Selektorem może być każdy znacznik wyświetlany w bloku [zobacz: Wstawianie stylów].

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

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: Internet Explorer 10.0, Firefox 3.5, Opera 9.5, Chrome, Konqueror)

selektor { text-shadow: poziom pion rozmycie kolor,... }
Wartości "poziom pion rozmycie kolor" określają własności cienia (wartości "rozmycie" oraz "kolor" nie są wymagane):
  • 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)
Wartości "poziom", "pion" oraz "rozmycie" należy podać, używając jednostek długości.

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ść }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

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

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 }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

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 }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

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

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?

selektor { white-space: sposób }
Selektorem może być każdy znacznik wyświetlany w bloku [zobacz: Wstawianie stylów].

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}

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") 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 Firefox 41, Opera 35, Chrome 48)

selektor { writing-mode: tryb }
Selektorem może być każdy znacznik z wyjątkiem grup wierszy tabeli (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 1Kolumna 2Kolumna 3
Wiersz 1123
Wiersz 2456
Wiersz 3789

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...
obrazek w orientacji poziomej
...a to jest kolejna linijka.

Dla porównania to samo, ale w standardowym ułożeniu tekstu (poziomo):

To jest pierwsza linijka...
obrazek w orientacji poziomej
...a to jest kolejna linijka.

Ponadto niektóre przeglądarki mogą układać pionowo również tekstowe elementy formularzy:

To jest pierwsza linijka...



...a to jest kolejna linijka.

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 Firefox 41, Opera 35, Chrome 48)

selektor { text-orientation: orientacja }
Selektorem może być element z ustawionym pionowym trybem pisania, tzn. "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 1Kolumna 2Kolumna 3
Wiersz 1123
Wiersz 2456
Wiersz 3789

[Porównaj przykład z rozdziału: Tryb pisania]

Niektóre przeglądarki mogą układać pionowo również tekstowe elementy formularzy:

To jest pierwsza linijka...



...a to jest kolejna linijka.

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.

Zobacz więcej...

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>.

Zobacz więcej...

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.

Zobacz więcej...

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ść.

Zobacz więcej...

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.

Zobacz więcej...

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>.

Zobacz więcej...

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.

Zobacz więcej...

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.

Zobacz więcej...

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.

Zobacz więcej...

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).

Zobacz więcej...

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>.

Zobacz więcej...

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.

Zobacz więcej...

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>.

Zobacz więcej...

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>.

Zobacz więcej...

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>.

Zobacz więcej...

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.

Zobacz więcej...

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.

Zobacz więcej...

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.

Zobacz więcej...

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.

Zobacz więcej...

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.

Zobacz więcej...

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>.

Zobacz więcej...

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.

Zobacz więcej...

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.

Zobacz więcej...

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.

Zobacz więcej...

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.

Zobacz więcej...

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.

Jak zmienić kolor tekstu w dowolnym elemencie?

selektor { color: kolor }

Zobacz więcej...

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?

selektor { text-decoration: dekoracja }

Zobacz więcej...

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?

selektor { text-transform: transformacja }

Zobacz więcej...

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)?

selektor { text-align: wyrównanie }

Zobacz więcej...

W jaki sposób prawidłowo dodawać wcięcia w akapitach?

selektor { text-indent: wcięcie }

Zobacz więcej...

Jak można by było dodać cień pod tekstem?

selektor { text-shadow: poziom pion rozmycie kolor,... }

Zobacz więcej...

Jak zmienić odległość między linijkami tekstu (wysokość linii), tak aby stał się bardziej czytelny lub skondensowany?

selektor { line-height: wysokość }

Zobacz więcej...

Jak rozstrzelić lub ścieśnić tekst poprzez zwiększenie odległości między sąsiednimi wyrazami?

selektor { word-spacing: odstęp }

Zobacz więcej...

Jak rozstrzelić lub ścieśnić tekst poprzez zwiększenie odległości między literami?

selektor { letter-spacing: odstęp }

Zobacz więcej...

W jaki sposób zablokować zawijanie tekstu? Co zrobić, aby klawisze Enter i Tab były widoczne na ekranie?

selektor { white-space: sposób }

Zobacz więcej...

Co zrobić, aby tekst na stronie był ułożony pionowo - z góry na dół?

selektor { writing-mode: tryb }

Zobacz więcej...

Co zrobić, aby znaki w tekście były ułożone pionowo jeden pod drugim?

selektor { text-orientation: orientacja }

Zobacz więcej...

Facebook