Kurs CSS - Formatowanie wyglądu strony: Edycja kroju pisma i właściwości tekstu  

Autor: Karol Stoiński

Opublikowano: 2011-05-31

Ważnym elementem każdej strony internetowej jest odpowiedni dobór stylów dotyczących kroju pisma. To właśnie odpowiedni dobór czcionek, kolorów i dekoracji najczęściej wpływa na to, czy osoba odwiedzająca naszą stronę internetową będzie czuła się zachęcona do przeczytania zawartego na niej tekstu. Dlatego w tym artykule skupimy się na obszernym temacie formatowania właściwości tekstu w kaskadowych arkuszach stylów.

Po przeczytaniu tego artykułu będziesz:

• Wiedział, jak wpływać na wygląd czcionki,
• potrafił zmieniać właściwości bloków tekstu,
• znał sposoby uatrakcyjnienia wyglądu elementów tekstowych.

Edycja kroju pisma

CSS posiada dwie rodziny atrybutów pozwalających nam ingerować w sposób wyświetlania tekstu. Pierwszą z nich jest font. Wszystkie atrybuty z tej rodziny posiadają taki właśnie przedrostek i pozwalają na edycję kroju pisma – jego wielkość, rodzaj itp.

Kolejną rodziną atrybutów jest ta, związania z edycją właściwości tekstu jako bloku czy też justowania i odległości między znakami.

Przyjrzyjmy się teraz atrybutom związanym z edycją kroju pisma. Resztę poznamy później.

Font-family

Jednym z najczęściej spotykanych atrybutów CSS odnoszących się do właściwości kroju pisma jest font-family. Pozwala on na określenie rodziny czcionek, która ma być użyta do wyświetlania danego tekstu. Należy jednak pamiętać, że efekt zależy od tego, czy dana czcionka znajduje się na komputerze użytkownika. Jeżeli jej nie ma, efekt wyświetlenia na jego komputerze może się znacznie różnić od zamierzonego przez nas. Aby zapobiec niespodziankom, bardzo często stosuje się zapis polegający na określeniu kilku rodzin czcionek, dzięki czemu – w przypadku niewystąpienia jednej z nich na komputerze docelowym – wybierana jest czcionka z rodziny następnej w kolejności. Przykładowo:

#element {

font-family: Georgia, Serif, "Times New Roman";

}

Warto zauważyć, że przy określaniu rodziny czcionek nie trzeba podawać pełnych nazw, np. Times New Roman. Wystarczy podać jej typograficzny rodzaj: serif oznacza czcionkę szeryfową, cursive – kursywę, monospace – czcionkę o jednakowej szerokości znaku itp.

Font-size

Jest to atrybut pozwalający kontrolować wielkość czcionki na naszej stronie. Wartość możemy podawać jako zdefiniowaną w jednej z jednostek rozumianych przez CSS, np. 20px, 10pt, oraz jako procenty, stanowiące ułamek wielkości czcionki elementu nadrzędnego.

Do dyspozycji mamy także słowa kluczowe, które definiują wysokość czcionki. Od najmniejszej do największej przedstawiają się następująco: xx-small, x-small, small, medium, large, x-large, xx-large. Dodatkowe dwa słowa kluczowe definiują ją w odniesieniu do czcionki elementu nadrzędnego: smaller oznacza czcionkę mniejszą, larger – większą.

Font-style

Atrybut ten definiuje styl czcionki. Do wyboru mamy trzy wartości: normal – odpowiada zwykłej, niepochylonej czcionce; italic – oznacza wyświetlanie tekstu kursywą; oblique – zbliżone do kursywy, także pochylone (jedyną różnicą jest to, że prawdziwa kursywa do pochylonego pisma używa innego zestawu znaków, a ten parametr pochyla jedynie normalną czcionkę).

Font-variant

Przyjmuje dwie wartości: normal – normalna czcionka, oraz small-caps, pozwalającą na wyświetlanie kapitalików (http://pl.wikipedia.org/wiki/Kapitaliki).

Font-weight

Słowo weight to z angielskiego waga. W odniesieniu do czcionek pozwala zaś na kontrolowanie grubości linii, jakimi pisane są poszczególne litery. Określamy ją za pomocą słów kluczowych: normal – oznacza czcionkę zwykłą, bold – pogrubioną, bolder – jeszcze bardziej pogrubioną, a lighter – cieńszą od normalnej.

Dodatkowym sposobem zapisu jest użycie jednej z dziewięciu wartości: 100, 200, 300, 400, 500, 600, 700, 800 i 900.

Zapis skrócony

Występujący samodzielnie atrybut font możemy zastosować do zdefiniowania w jednej linii więcej niż jednej właściwości. Podajemy je wtedy w kolejności: font-style, font-variant, font-weight, font-size, font-family.

Nie musimy za każdym razem podawać wszystkich właściwości. Możemy podać np. 2–3 wybrane, ale musimy pamiętać, żeby zachowana była kolejność oraz aby były one ze sobą sąsiadujące. Przykładowo, chcąc zdefiniować font-style i font-weight, zawsze musimy podać font-variant pomiędzy nimi.

Edycja właściwości tekstu

CSS umożliwia nie tylko na edycję kroju pisma. Pozwala także edytować jego właściwości, takie jak justowanie całego bloku tekstu, zmianę odstępów pomiędzy wierszami i inne. Przyjrzymy się im właśnie teraz.

Color

Pierwszym, bardzo prostym, a zarazem często wykorzystywanym atrybutem jest color. Pozwala on na zmianę koloru naszej czcionki. Kolory możemy zapisywać na trzy sposoby (tak jak to było opisane w poprzednim artykule), czyli heksadecymalnie, przez ich angielską nazwę bądź w zapisie rgb.

Text-align

Jest to atrybut odpowiedzialny za wyrównanie tekstu. Przyjmuje on jedną z czterech wartości: left – wyrównanie do lewej, right – wyrównanie do prawej, center – wyśrodkowanie oraz justify – justowanie tekstu. Justowaniem nazywamy takie rozciągnięcie każdej linii tekstu, aby wszystkie miały jednakową długość. Taki rodzaj wyrównania stosuje się np. w książkach.

Text-decoration

Atrybut ten pozwala na dodanie do naszego tekstu np. podkreślenia. Najczęściej wykorzystywany jest też do usuwania podkreślenia z odnośników kodem:

a {

text-decoration: none;

}

Słówko none oznacza po prostu brak dekoracji. Poza tym text-decoration może być używany na cztery sposoby. Wraz z podaniem wartości overline wyświetlona zostanie linia nad tekstem, line-through – tekst zostanie przekreślony poziomą linią,  underline – podkreślenie tekstu oraz blink – tekst migający. Niestety, ostatni z atrybutów nie jest wspierany przez większość przeglądarek, dlatego też odradza się jego używanie.

Text-transform

Dzięki text-transform możemy wpływać na wielkość liter w danym tekście. Przyjęcie przez ten atrybut wartości uppercase pozwala na zmianę wszystkich liter na wielkie, lowercase – na małe, a capitalize zmienia tekst w ten sposób, że każda pierwsza litera wyrazu jest wielka, a pozostałe małe.

Text-indent

To bardzo prosty atrybut przyjmujący jedynie wartość liczbową wielkości wcięcia pierwszej linii.

Przykład:

#element {

text-indent:2cm;

}

Line-height

Dzięki line-height jesteśmy w stanie zmienić wysokość linii tekstu. Wartość możemy podawać liczbowo w jednej z jednostek obsługiwanych przez CSS bądź procentowo.

Letter-spacing

Ten atrybut pozwala na zmianę odległości pomiędzy znakami. Przyjmuje także wartości ujemne, które powodują nachodzenie na siebie liter.

Word-spacing

Pozwala na zmianę odległości pomiędzy sąsiednimi wyrazami.

White-space

Definiuje sposób zachowywania się przeglądarki w odniesieniu do tzw. białych znaków zawartych w źródle strony. Przyjęcie wartości normal powoduje, że wielokrotne wystąpienia białych znaków zostaną zastąpione jednym, a w razie potrzeby na końcu wiersza tekst zostanie przeniesiony do następnej linii; nowrap – podobnie jak w poprzednim przypadku, z tą jednak różnicą, że tekst nie zostanie przeniesiony do nowej linii do czasu wystąpienia znacznika <br/>; pre – białe znaki zostają zachowane przez przeglądarkę; pre-line – wielokrotne białe znaki zostają zastąpione jednym, a tekst przechodzi do nowej linii wtedy, kiedy jest to potrzebne oraz na końcu linii; pre-wrap – białe znaki zostają zachowane, a tekst zostanie zawinięty do nowej linii w razie potrzeby.

Podsumowanie

Z tego artykułu dowiedzieliśmy się, w jaki sposób możemy zmieniać wygląd czcionek na naszej stronie. Poznaliśmy też inne właściwości tekstu występujące w CSS, dzięki którym  jesteśmy w stanie zmieniać wiele w sposobie wyświetlania strony, jak chociażby różna wysokość wierszy, dekoracje czy wyrównanie.

---