Wypróbuj

Nozbe - get things done

i zwiększ swoją produktywność

Podstawy CSS3 – tekst, fonty, odnośniki

5

Tak jak zapowiedziałem w ostatnim wpisie, w dniu dzisiejszym przechodzimy do ostatniej grupy zagadnień związanych z egzaminem MCSD: 70-480. W dzisiejszym wpisie pokażę Wam podstawy CSS3.. Pierwszy z postów poświęconych temu zagadnieniu, zgodnie z tytułem wpisu, dotyczyć będzie stylowania elementów tekstowych HTML5. W związku z tym poruszone będą zagadnienia takie jak: nadawanie styli dotyczących wyglądu tekstu; stylowanie fontów; określanie odstępów, akapitów oraz wyrównania; nadawanie styli łącznikom oraz efekt cienia rzucanego przez tekst. Jak widać, dziś trochę podstaw ale je też warto sobie przypomnieć, zapraszam!

Stylowanie tekstu

Nadawanie wyglądu elementom tekstowym to najbardziej podstawowe podstawy CSS3. Za pomocą kaskadowych styli, określać można takie właściwości jak jego kolor, wyrównanie czy wcięcie tekstu.

Kolor tekstu

Spójrzmy na pierwszy przykład pokazujący sposób na ustalanie koloru tekstu :

body {color:red;}
h1 {color:#00ffff;}
h2 {color:rgb(255,255,0);}

Na powyższym przykładzie widać, że do ustawiania koloru tekstu służy właściwość ‚color’. Do tego mamy trzy sposoby podawania wartości koloru. Można więc podać kolor słownie (‚red’, ‚blue’, ‚yellow’ itd.). Można też podać wartość hexadecymalną lub użyć funkcji ‚rgb’, do której jako parametry podaje się trzy liczby z zakresu 0 – 255, określające trzy składowe koloru.

Wyrównanie

Kolejna sprawa to ustawienie wyrównania tekstu. Mamy tutaj cztery możliwości – wyrównanie do lewej, do prawej, wycentrowanie lub rozciągnięcie tekstu. Jak ustawić poszczególne wartości, pokazuje poniższy przykład:

h1 {text-align:center;}
h2 {text-align:right;}
h3 {text-align:left;}
h4 {text-align:justify;}

Pierwsze trzy linie nie wymagają komentarza. W ostatniej użyto wartości ‚justify’, co powoduje, że tekst zostanie rozciągnięty na całą szerokość jego kontenera, tak jakby został wyrównany do lewej i prawej jednocześnie – odstępy między słowami nie są wówczas równe.

Wcięcie akapitu

Następna właściwość dotyczy definiowania wcięcia pierwszej linii akapitu. Poniżej mówiący sam za siebie przykład:

p {text-indent:50px;}

Dekoracje

Oprócz tego, możemy określić „dekoracje” tekstu – dobrym przykładem są tutaj linki, które domyślnie mają właściwość ‚text-decoration’ ustawioną na wartość ‚underline’. Możemy chcieć ją wyłączyć, wówczas użyć można poniższego kodu:

a {text-decoration:none;}

Inne wartości, które można przypisać do tej właściwości są: ‚overline’ – linia nad tekstem; ‚underline’ – linia pod tekstem; ‚line-through’ – przekreślenie; ‚blink’ – migający tekst.

Transformacje tekstu

Jeśli chodzi o stylowanie tekstu, to wspomnieć również należy o właściwości ‚text-transformation’. Pozwala ona na transformację tekstu na duże lub małe litery. Mamy tutaj trzy możliwości:

h1 {text-transform:uppercase;}
h2 {text-transform:lowercase;}
h3 {text-transform:capitalize;}

Pierwsza linia to zamiana tekstu na wielkie litery, druga to małe litery natomiast trzecia powoduje, że każde słowo w tekście napisane zostanie z wielkiej litery.

Stylowanie fontów

Nadawanie styli fontom to kolejny aspekt obejmujący podstawy CSS3. W ich przypadku należy zwrócić uwagę, że w CSS3 dostępne mamy tak na prawdę trzy rodziny fontów. Są to: czcionki bez szeryfowe (czyli takie jak na przykład czcionka ‚Arial’, nie posiadająca ozdobników); czcionki szeryfowe (czyli takie jak na przykład ‚Times New Roman’ czyli z ozdobnikami; czcionki typu „monospace” czyli takie, których każda litera ma taką samą szerokość.

Wybór rodziny fontów

Posiadając te podstawowe informacje, możemy przejść do ustawiania rodziny fontów. Służy do tego właściwość ‚font-family’. Spójrzmy na poniższy przykład:

p {font-family: "Arial", Verdana, sans-serif}

Jak widać, podajemy zwykle więcej niż jedną właściwość. To dlatego, że na komputerze użytkownika wybrana przez nas czcionka może nie być zainstalowana. Podajemy więc najpierw pożądaną przez nas czcionkę, później zamiennik, a na koniec rodzinę generyczną, która na pewno istnieje na komputerze klienckim.

Styl fontu

Kolejną właściwością dotyczącą czcionek jest ‚font-style’. Pozwala ona na ustawienie stylu czcionki, spójrzmy może na przykład by zobaczyć jakie mamy możliwości:

h1 {font-style:normal;}
h2 {font-style:italic;}
h3 {font-style:oblique;}

A więc tak, pierwsza linia to styl standardowy, druga to tekst pochylony, a trzecia to styl „ukośny” (bardzo podobny do pochylonego, różnica jest subtelna, a właściwość nie jest obsługiwana przez wszystkie przeglądarki).

Właściwość font-weight

Następna „czcionkowa” właściwość to grubość tekstu – mowa o ‚font-weight’:

p.normal {font-weight:normal;}
p.bold {font-weight:bold;}
p.bolder {font-weight:900;}

Może ona przyjmować, wartości takie jak ‚normal’, ‚bold’, ‚lighter’ ale także wartości liczbowe (400, 700, 900 itp.).

Rozmiar czcionki

Oczywiście można również ustawiać wielkość czcionki za pomocą właściwości ‚font-size’:

h1 {font-size:14px;}
h2 {font-size:0.875em;} /* 14px/16=0.875em */
h3 {font-size:10pt;}
h4 {font-size: 90%;}

Jak więc widać, wielkość czcionki można ustalać za pomocą wartości podanej w pikselach, w jednostce „em” (jest ona lepiej interpretowana przez starsze wersje IE niż wartość procentowa), w punktach lub właśnie w procentach.

Właściwość font-face

Skoro jesteśmy już przy stylowaniu czcionek, w kontekście egzaminu 70-480 trzeba wspomnieć jeszcze o czcionkach WOFF czyli „Web Open Font Format”. Dzięki temu mechanizmowi możemy umieszczać na naszych stronach, zupełnie niestandardowe czcionki. W tym celu wystarczy pobrać, i wgrać na serwer www, pliki czcionek w formacie WOFF (najlepiej wgrać je w czterech wersjach, z rozszerzeniami *.woff, *.svg, *.eot, *.ttf – w ten sposób mamy pewność, że czcionki będą wyświetlane poprawnie we wszystkich przeglądarkach). Następnie należy użyć specjalnej właściwości ‚@font-face’ do skonfigurowania czcionki i nadania jej nazwy. Kiedy to będzie już zrobione, można używać tak utworzonej nazwy i przypisać ją do właściwości ‚font-family’ w standardowy sposób. Poniżej przykład:

body { font-family: web-font, sans-serif; }

@font-face {
    font-family: 'web-font';
    src: url('web-font.eot?') format('eot'),
         url('web-font.woff') format('woff'),
         url('web-font.ttf') format('truetype'),
         url('web-font.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Prawda, że proste? 😉

Nadawanie styli odnośnikom

Zapytacie pewnie: „jakim łącznikom? o co cho?”. Ano chodzi o automatyczne dzielenie wyrazów razem z dodaniem na końcu pierwszej części wyrazu, który zostaje w poprzedniej linii, znaku myślnika – znamy to wszyscy z papierowych książek 😉

Do tego celu służy nowa w CSS3 właściwość ‚hyphens’ (każda z popularnych przeglądarek ma własną implementację, więc istnieje kilka wersji tej właściwości, każda z innym przedrostkiem). Spójrzmy może od razu na przykład użycia:

p {
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

Tak jak wspomniałem powyżej, w przykładzie mamy kilka wersji tej właściwości, tak aby każda z popularnych przeglądarek mogła odpowiednio zastosować ten styl. Oprócz wartości ‚auto’ możliwe jest jeszcze ustawienie wartości ‚none’, która wyłącza łamanie tekstu oraz wartość ‚manual’ powodująca, że tekst łamany jest tylko w miejscach gdzie zasugerujemy to ręcznie (za pomocą ­).

Efekt cienia rzucanego przez tekst

Ostatnią kwestią, którą chciałbym poruszyć przedstawiając podstawy CSS3 jest nadawanie tekstowi efektu rzucania przez niego cienia. Do tego celu służy wiele mówiąca właściwość ‚text-shadow’. Od razu przejdźmy do przykładu:

p {
    text-shadow: 0.15em 0.15em 0.15em #333300;
}

Efekt jest następujący:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin risus id dui commodo consectetur. Duis blandit elementum massa, et laoreet tellus elementum non. Donec quis dolor ut ligula congue luctus. Praesent rhoncus ultrices velit, in luctus nisi gravida semper. Quisque scelerisque egestas nunc, ut ultrices sapien tempor et. Etiam pulvinar sodales dui, ac elementum leo aliquam nec. Ut sagittis cursus augue non tempor. Nam fringilla tempus pretium. Duis quis augue orci.

W przykładzie widać, że dla właściwości ‚text-shadow’ podajemy cztery wartości: pierwsze dwie to przesunięcie poziome i pionowe(oba wymagane, wartości ujemne dopuszczalne); stopień rozmycia (opcjonalne); kolor cienia (opcjonalne).

Podstawy CSS3 – podsumowanie

Myślę, że informacje przedstawione w tym wpisie pokazują jak duże możliwości określania stylu tekstu daje nam CSS3. Oczywiście to są tylko podstawy CSS3 – przyjdzie jeszcze czas na więcej szczegółów. Zachęcam do poeksperymentowania z przykładami. W kolejnym poście zajmę się opisem możliwości stylowania elementów blokowych za pomocą CSS3. Zapraszam!

CHCESZ DARMOWEGO E-BOOKA?

Jeśli chcesz otrzymać mojego e-booka: Rozmowa Kwalifikacyjna - pytania z podstaw JavaScript zostaw mi swój e-mail:

Oprócz tego co poniedziałek dostaniesz maila z listą moich wpisów z poprzedniego tygodnia!