Niedziela 19 Maj 2024r. Godz 00:00:00      
Postów: 251      

Style tekstu CSS

Zauważ, że w przeciwieństwie do wielu pozostałych właściwości ta nie ma przedrostka font-, ani text-

Ustala kolor tekstu w danym elemencie. Właściwość color ustala także domyślny kolor dla podkreślenia i obramowania elementu.

Mówimy o kroju pismafontach, ponieważ termin czcionki w rzeczywistości oznacza małe metalowe bloczki z wyrzeźbioną literą w danym kroju i o danym rozmiarze. Szczegóły w artykule Czy fontami można strzelać z procy?

Wybór kroju pisma. Jest to lista krojów ułożona wg kolejności od najbardziej pożądanej. Jeśli przeglądarka nie może użyć pierwszego kroju z listy, użyje jednego z kolejnych.

Ostatni na liście musi być typ kroju:

sans-serif
krój bezszeryfowy, np. Helvetica, Arial
serif
krój szeryfowy, np. Garamond, Times

Uwaga: w wielu przeglądarkach domyślna wielkość pisma dla rodziny monospace jest mniejsza, niż dla tekstu proporcjonalnego.

monospace
krój o stałej szerokości znaków, np. Courier
fantasy
krój fantazyjny
cursive
krój imitujący pismo odręczne (np. Zapfino)

Np.

 font-family: "Avant Garde Gothic Medium", Verdana, Helvetica, sans-serif;

Jeśli nazwa kroju zawiera spacje, umieść nazwę w cudzysłowie

Należy zawsze pamiętać o umieszczeniu na końcu kroju domyślnego. Przeglądarka renderując tekst na stronie próbuje dobrać najbardziej właściwy font wg listy. Zatem w przypadku zadeklarowania Verdana, Helvetica, sans-serif, wpierw spróbuje użyć Verdany, jeśli jej nie znajdzie użyje Helvetici, a jeśli i tego fontu nie ma w systemie, skorzysta z domyślnego fontu bezszeryfowego.

Warto mieć także na uwadze to, że niektóre fonty są dostępne tylko na niektórych systemach operacyjnych (przykładowo, Trebuchet rozprowadzany jest z systemem Windows). O tym, jakie fonty są dostępne na poszczególnych platformach systemowych można przeczytać na stronie Code Style; o bezpiecznych kombinacjach fontów można również poczytać na stronie Jeffa Crofta.

Jeśli wykorzystasz kaskadę i dziedziczenie, to wystarczy, że ustawisz krój pisma dla <body> i nie będziesz musiał powtarzać tej deklaracji w każdej klasie.

Umożliwia określenie bezwzględnej lub względnej, procentowej lub wyrażonej za pomocą słów kluczowych wielkości pisma.

Dopuszczalne są pozostałe jednostki CSS, a także absolutne wartości xx-small, x-small, small, medium, large, x-lagre, xx-large i względne smaller, larger, choć ich użycie jest niepraktyczne.

Dobrą praktyką jest definiowanie wielkości pisma w elemencie <body> i używanie względnych wielkości pisma (za pomocą em lub procentów) wszędzie indziej, aby ewentualne późniejsze zmiany wielkości pisma w dokumencie nie były mozolne.

Domyślna wielkość pisma w przeglądarkach jest trochę za duża. Można ją pomniejszyć o 10-15%.

Unikaj małych rozmiarów pisma, szczególnie na stronach, które mają dużo tekstu. Wielu użytkowników męczy czytanie tekstu na ekranie komputera, a sprawę może pogarszać np. nieostry monitor i/lub ustawiona wysoka rozdzielczość ekranu, przez co tekst staje się mniejszy.

 body {font-size: 0.9em;}

Jednostki emex mogą być używane także w innych właściwościach CSS i przydatne są do dopasowywania wielkości elementów strony do jej pisma

 p {margin: 1em 0;}
normal
zwykła
bold
to pogrubiona p.informacja {font-weight:bold;}

Istnieje także możliwość określania „grubości” tekstu za pomocą wartości takich jak 100, 200, 300, 400, 500, 600, 700, 900 oraz lighter, bolder. Jest to przydatne tylko w DTP, jako, że przeglądarki upraszczają pogrubienie do pojęcia „z pogrubieniem” oraz „bez pogrubienia”.

normal

normalna
italic
kursywa

Istnieje wartość oblique, która daje tylko pochylenie normalnego kroju, w przeciwieństwie do kursywy, która może być również specjalnie przygotowanym fontem (np. kursywa Times ma pozawijane szeryfy). W większości przypadków nie ma widocznej różnicy między italic, a oblique.

To chyba kiepska nazwa

A może by dać „modyfikacja tekstu”?

small-caps
kapitaliki (litery małe zamieniane są na litery wielkie, ale z zachowaniem wysokości liter małych. Np.: BROWSER)

letter-spacing ustawiony na 0 oznacza normalny odstęp. Wartości ujemne ściskają litery do siebie, a dodatnie — rozszerzają. Najlepiej do tego używać jednostki ex.

Zmiana odstępów między literami przydatna jest do nagłówków i innych dużych napisów. W tekście pisanym mniejszymi literami nawet minimalny 1-pikselowy odstęp może znacznie obniżać jego czytelność.

 h1 {letter-spacing: 0.1ex;}

Zmienia odległość między słowami (szerokość spacji). Dozwolone są wartości ujemne.

line-height jest jedynym sposobem ustalania wysokości elementów typu inline

Ustala wysokość linii, czyli tym samym odstęp między wierszami. line-height jest wyjątkową właściwością CSS, bo jako jedna może przyjmować wartości bez jednostki, które oznaczają krotność wysokości linii tekstu.

 line-height: 1.25
 Wysokość linii będzie 1¼ wysokości tekstu.

line-height dopuszcza też użycie wysokości (podanych z jednostką). Do tekstu najlepiej używać krotności. Do nadawania wysokości elementom inline, wygodniej użyć konkretnych wysokości.

Wszystkie powyższe właściwości można połączyć razem wg schematu:

 font: styl wariant grubość wielkość/wysokość-linii krój-pisma, krój-pisma

Z czego można pominąć każdy element z wyjątkiem wielkości.

 font: bold 80% sans-serif

font ma też specjalne zastosowanie. Jedną z wartości: caption, icon, menu, message-box, small-caption, status-bar można imitować odpowiednie style pisma używane przez system operacyjny użytkownika.

Ciekawsze efekty podkreślenia można nadać za pomocą border-bottom

Umożliwia określenie dekoracji (ozdobników) tekstu. Właściwość nie jest dziedziczona, co oznacza, że dziecko nie może usunąć ozdobnika nadanego przez rodzica (np. jeśli paragraf ma ustawione podkreślenie, to nie można usunąć podkreślenia dla pojedynczych słów w nim).

none
zwyczajny
blink
migający tekst. Należy używać ostrożnie.
line-through
przekreślony tekst
overline
nadkreślenie
underline
podkreślenie. Najlepiej ograniczyć jego użycie tylko do odnośników.
 #menu a {text-decoration:none;}
 #menu a:hover {text-decoration:underline;}

Reguły dziedziczenia tej właściwości zmieniały się w kolejnych wersjach specyfikacji. Nie da się (we wszystkich przeglądarkach) usunąć podkreślenia z elementów, których przodek ma ustawione podkreślenie (np. jeśli odnośnik ma podkreślenie, to podkreślenie będą miały też wszystkie elementy w nim, niezależnie od ich text-decoration).

text-align wpływa wyłącznie na tekst. Nie wyrównuje całych elementów. Zobacz margin:autofloat.

left
wyrównanie do lewej
right
do prawej
center
wyśrodkowany
justify
rozciągnięcie tekstu do obu krawędzi. Zbyt rozciągnięty tekst traci czytelność, dlatego należy tą wartość stosować tylko na szerokich kolumnach tekstu lub gdy używa się dzielenia wyrazów.
 p.uwaga {text-align:center;}

vertical-align wpływa wyłącznie na linie tekstu i zawartość komórek tabel. Nie wyrównuje całych elementów. Zobacz pozycjonowanie.

W przypadku elementów liniowych (inline) wyrównuje zawartość danego względem linii elementu nadrzędnego (np. <strong> względem linii w <p>).

Dokładne działanie tej właściwości jest dość skomplikowane i pełne niuansów związanych z wyliczaniem wysokości linii w CSS. Tu zamieszczony opis jest uproszczony. Pełny znajdziesz w specyfikacji.

baseline
wyrównuje linie bazowe, dzięki czemu zachowuje równą linię pisma, nawet gdy tekst ma mieszaną wysokość.
middle
wyśrodkowuje element w pionie (tylko w obrębie linii)
subsuper
pozycja subskryptu i superskryptu (ale nie zmienia wielkości pisma). Zobacz <sub>
% lub długość
o ile (procent wysokości linii) ma być przesunięty element. Wartości dodatnie podnoszą, ujemne obniżają. 0% daje efekt identyczny z baseline.

Jeśli działanie vertical-align nie jest widoczne, to spróbuj zwiększyć line-height.

Pierwsza linia bloku (np. <p>) może mieć wcięcie o szerokości nadanej przez text-indent.

text-indent może być też ujemny i w połączeniu z padding pozwala zrobić pierwszą linię wysuniętą bardziej na lewo względem pozostałych.

 p {text-indent: 1em;}

Ta właściwość ma być używana, gdy ze względów dekoracyjnych pożądana jest inna wielkość liter, niż obecna w dokumencie — np. nagłówki mogą być pisane samymi dużymi literami jednocześnie zachowując poprawną pisownię w HTML.

none
wyświetla litery tak jak zostały wpisane
capitalize
każdy wyraz zaczyna się od wielkiej litery
uppercase
wyświetlanie wielkimi literami
lowercase
wyświetlanie małymi literami
 h1,h2 {text-transform: uppercase;}