Ikona Chemiczka
1 gwiazdka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek (głosów: 1, średnia ocena: 5,00)
Loading ... Loading ...

Podrozdział 5.4. Własności tekstu

5.4.1 word-spacing

Wartości: normal | <length>
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Wartość length oznacza rozmiar dodatkowego odstępu pomiędzy wyrazami. Możliwe są też wartości ujemne, ale uzależnione są one od konkretnej implementacji. Aplikacja kliencka może samodzielnie decydować jakiego użyć algorytmu obliczania odstępów między wyrazami. Na wielkość odstępów między wyrazami może mieć też wpływ justowanie tekstu (które może być wartością własności text-align).

H1 { word-spacing: 1em }

Powyższy przykład doda dodatkowy odstęp o rozmiarze 1em pomiędzy wyrazami znajdującymi się w obrębie elementów H1.

CSS1 core: Aplikacje klienckie mogą traktować każdą wartość własności word-spacing jako normal (patrz rozdział 7.

5.4.2 letter-spacing

Wartości: normal | <length>
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Własność letter-spacing służy do określania rozmiaru dodatkowych odstępów pomiędzy poszczególnymi znakami. Własność ta może przyjmować także wartości ujemne, ale są one uzależnione od konkretnej implementacji. Aplikacja kliencka może samodzielnie decydować jakiego algorytmu obliczania odstępów między wyrazami użyć. Na wielkość odstępów między znakami może mieć też wpływ justowanie tekstu (które może być wartością własności tekstu text-align).

BLOCKQUOTE { letter-spacing: 0.1em }

Powyższy przykład spowoduje, że odstęp pomiędzy poszczególnymi znakami wszystkich elementów BLOCKQUOTE zostanie powiększony o 0.1em.

Aby wyjustować tekst, klient może zmienić odstęp między literami, jeżeli wartość jest ustawiona na normal. Nie może natomiast tego zrobić, jeżeli podano konkretną wartość liczbową:

BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }

Jeżeli odległość pomiędzy dwiema literami wychodzi inna niż domyślna, to klient nie powinien używać ligatur.

CSS1 core: Aplikacja kliencka może traktować wartości letter-spacing jako normal (patrz rozdział 7).

5.4.3 text-decoration

Wartości: none | [ underline || overline || line-through || blink ]
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie, ale poniżej znajdują się dodatkowe informacje na ten temat
Wartości procentowe: nie dotyczy

Własność text-decoration służy do wzbogacania tekstu o pewne dodatkowe właściwości. Właściwości te nie będą widoczne jeżeli element jest pusty lub zawiera tylko grafikę. Wartość blink powoduje migotanie tekstu.

Kolor wyświetlania dodatków jest taki sam jak tekstu do którego zostały one zastosowane.

Własność ta nie jest dziedziczonay, ale zastosowana dla jednego elementu ma też wpływ na elementy wewnątrz niego. To znaczy, jeżeli dla pewnego elementu zostanie zdefiniowana wartość underline (podkreślenie), to podkreślenie to obejmując cały element, obejmie także elementy znajdujące się w jego wnętrzu. Kolor podkreślenia pozostanie taki sam jaki zdefiniowano dla elementu rodzica, bez względu na to jaki zdefiniowano dla elementów potomków.

A:link, A:visited, A:active { text-decoration: underline }

Powyższy przykład spowoduje podkreślenie wszystkich odnośników na stronie (tj. wszystkich elementów A z własnością HREF).

Słowo kluczowe blink musi być rozpoznawane przez wszystkie aplikacje, ale nie muszą go one obsługiwać.

5.4.4 vertical-align

Wartości: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Wartość domyślna: baseline
Zastosowanie: elementy śródliniowe
Dziedziczenie: nie
Wartości procentowe: odnoszą się do własności line-height danego elemntu

Własność ta służy do pionowego pozycjonowania elementów. Wartości można podzielić na dwie grupy wg sposobu ich działania:

Pierwsza grupa wartości, to te słowa kluczowe, których efekt uzależniony jest od elementu rodzica:

baseline

Wyrównuje podstawową linię pisma elementu dziecka (lub linię dolną, jeżeli element nie posiada linii podstawowej) z linią podstawową pisma elementu rodzica.

middle

Wyrównuje punkt znajdujący się dokładnie w połowie wysokości elementu (zazwyczaj obrazka) do punktu znajdującego się na wysokości równej połowie wartości własności x-height licząc od linii podstawowej pisma elementu rodzica.

sub

Powoduje przeniesienie elementu do indeksu dolnego.

super

Powoduje przeniesienie elementu do indeksu górnego.

text-top

Wyrównuje wierzch elementu z wierzchem tekstu elementu, w którym się ten element znajduje.

text-bottom

Wyrównuje spód elementu do spodu tekstu elementu, w którym się ten element znajduje.

Drugą grupę stanowią wartości, których efekt uzależniony jest od linii formatowania, której częścią jest sam element:

top

Wyrównuje wierzch elementu z najwyższym elementem w linii.

bottom

Wyrównuje spód elementu z najniższym elementem w linii.

Użycie wartości top i bottom może powodować konflikty, kiedy zależności pomiędzy elementami się zapętlają.

Wartości procentowe odnoszą się do wartości własności line-height elementu. Powodują one uniesienie linii podstawowej pisma elementu (lub jego linię dolną jeżeli nie posiada on linii podstawowej) na określoną wysokość ponad linię podstawową pisma elementu rodzica. Możliwe są tu także wartości ujemne, np. wartość-100% spowoduje przeniesienie linii podstawowej elementu do miejsca, w którym powinna się znajdować następna linia podstawowa. Dzięki temu możliwa jest bardzo precyzyjna kontrola pionowego ułożenia elementów (np. obrazów graficznych użytych w miejsce znaków), które nie posiadają linii podstawowej pisma.

Oczekuje się, że w przyszłych wersjach CSS będzie można używać wartości liczbowych jako wartości tej własności.

5.4.5 text-transform

Wartości: capitalize | uppercase | lowercase | none
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

capitalize

Zamienia pierwszą literę na wielką.

uppercase

Zamienia wszystkie litery na wielkie.

lowercase

Zamienia wszystkie litery na małe.

none

Neutralizuje działanie odziedziczonych wartości.

Właściwa transformacja tekstu w każdym przypadku uzależniona jest od użytego języka ludzkiego (jeśli chcesz wiedzieć więcej na temat sprawdzania języka dokumentu, patrz [4]).

H1 { text-transform: uppercase }

Powyższy przykład spowoduje zamianę wszystkich liter znajdujących się w elemencie H1 na wielkie.

CSS1 core: Aplikacja kliencka może zignorować własność text-transform w przypadku liter spoza zestawu Latin-1 oraz języków dla których określono inny sposób transformacji niż opisany w tabelach case-conversion Unicode [8].

5.4.6 text-align

Wartości: left | right | center | justify
Wartość domyślna: zależna od klienta
Zastosowanie: elementy blokowe
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Własność ta służy do kontroli wyrównania tekstu. Algorytm justowania tekstu uzależniony jest od klienta oraz użytego języka ludzkiego.

Przykład:

DIV.center { text-align: center }

Ze względu na fakt, że własność text-align jest dziedziczona, wszystkie elementy blokowe znajdujące się wewnątrz elementu DIV z klasą center zostaną wyśrodkowane. Warto zwrócić uwagę, że wyrównanie odbywa się względem szerokości elementu, a nie względem całego obszaru roboczego. Wartość justify jest zastępowana inną wartością jeżeli nie jest ona obsługiwana przez danego klienta. Zazwyczaj w zastępstwie stosowane jest wyrównanie do lewej dla języków zachodnich.

CSS1 core: Przeglądarka może wartość justify zastąpić wyrównaniem do lewej lub prawej w zależności od sposobu zapisu tekstu: od lewej do prawej, czy od prawej do lewej.

5.4.7 text-indent

Wartości: <length> | <percentage>
Wartość domyślna: 0
Zastosowanie: elementy blokowe
Dziedziczenie: tak
Wartości procentowe: zależne od szerokości elementu rodzica

Własność ta służy do określania rozmiaru wcięcia pierwszej linii tekstu. Wartości ujemne są dozwolone, ale mogą występować pewne ogranicznia implementacyjne. Jeżeli w obrębie akapitu występuje łamanie linii (np. z powodu użycia elementu BR), to linia taka nie zostanie wcięta.

Przykład:

P { text-indent: 3em }

5.4.8 line-height

Wartości: normal | <number> | <length> | <percentage>
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: zależne od rozmiaru czcionki samego elementu

Własność line-height służy do określania odstępu pomiędzy liniami podstawowymi pisma dwóch bezpośrednio sąsiadujących ze sobą linii tekstu.

Jeżeli wartość numeryczna jest podana, to wysokość linii jest sumą tej wartości i rozmiaru czcionki bieżącego elementu. Sposób dziedziczenia wartości procentowych i liczbowych jest różny. W przypadku wartości liczbowej elementy dziedziczą wartość samego parametru a nie wartość wynikową (w przeciwieństwie do innych wartości).

Wartości ujemne nie są dozwolone.

Wysokość linii będzie taka sama po zastosowaniu każdej z trzech poniższych reguł.

DIV { line-height: 1.2; font-size: 10pt }     /* number */
DIV { line-height: 1.2em; font-size: 10pt }   /* length */
DIV { line-height: 120%; font-size: 10pt }    /* percentage */

Wartość normal powoduje ustawienie takiej wysokości linii, która jest odpowiednia dla danej czcionki. Zakłada się, że wartość liczbowa odpowiadająca wartości normal powinna zawierać się w przedziale 1.0 - 1.2.

Więcej na temat sposobu działania własności line-height znajduje się w rozdziale 4.4.


Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.

Copyright © 2004 W3C® (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, znaku towarowego, używania dokumentu i licencji oprogramowania.

Narzędzia

FavoriteLoadingDodaj do schowka

Podobne wpisy

CSS Grid Layout

CSS Grid Layout

Ikona Element style HTML5

Element style

Logo Sass

Podstawy języka Sass

Logo CSS3

Trzy nowe szkice robocze grupy roboczej W3C ds. CSS

Dodaj komentarz









Dołącz do nas na Facebooku

Newsletter

Subskrybując nasz newsletter masz pewność, że nie ominie Cię żadna nowość w serwisie!

Zaproponuj tekst

Znalazłeś ciekawy tekst, który Twoim zdaniem warto by było przetłumaczyć na język polski? Napisz nam o tym!

Temat*

Treść wiadomości*