Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
1
Aplikacje internetowe
CSS - style fontów, tekstu
2
Definiowanie stylów Istnieje kilka sposobów definiowania stylów i dołączania ich do dokumentów HTML. Jednym z nich jest umieszczenie bloku zawierającego definicje stylów w sekcji nagłówka dokumentu. <head> <style type="text/css"> …definicje stylów </style> </head>
3
Zapis definicji stylów
W CSS wszystkie definicje stylów są zapisywane w tej samej postaci. Każda definicja zaczyna się od selektora, służącego do określenia, jakich elementów dokumentu dana definicja będzie dotyczyć. Za selektorem zapisywane są pary właściwości i wartości. Format ten można zapisać w następującej ogólnej postaci: selektor { właściwość: wartość; ... }
4
Zapis definicji stylów
Selektor jest wyrażeniem używanym do określenia tych elementów dokumentu, których postać jest określana w regule stylu. W najprostszym z możliwych przypadków przyjmuje postać nazwy elementu (znacznika HTML) na przykład h1, w takim przypadku reguła będzie odnosiła się do elementów tego typu. W bardziej złożonych przypadkach selektor może wskazywać na konkretne elementy wewnątrz innych elementów albo na fragment tekstu umieszczony przed lub za pewnym elementem.
5
Zapis definicji stylów
Komponent o nazwie właściwość określa jakie właściwości elementów zostaną określone w danej regule. Na przykład, aby zmienić kolor czcionki, jaką jest wyświetlony tekst w danym elemencie należałoby zastosować właściwość color. Komponent o nazwie wartość zawiera natomiast jedną lub kilka wartości, które należy przypisać właściwościom. Na przykład, aby wyświetlić element w kolorze czerwonym należałoby przypisać jego właściwości color wartość red.
6
Definicja stylów w naszym przykładzie
W przypadku naszego dokumentu zapis definicji stylów który należy umieścić w nagłówku dokumentu HTML będzie wyglądał następująco: <style type="text/css"> h1 { color: blue; } p { font-family: Arial, Helvetica, sans-serif; color: black; } </style>
7
Dopasowywanie elementów według klasy
Selektory mogą służyć również do dopasowywania elementów według klasy. Do czego to może służyć? Wyobraźmy sobie, że na naszej stronie chcielibyśmy wymienić i opisać najpierw zalety, a potem wady internetu. Chcemy, aby wady były wymienione kolorem czerwonym, a zalety kolorem zielonym.
8
Dopasowywanie elementów według klasy
W takim przypadku moglibyśmy użyć styli lokalnych ale lepszym rozwiązaniem jest użycie klas. Przykład <style type="text/css"> p.zalety {color: green;} p.wady {color: red;} ul.zalety {color: green;} ul.wady {color: red;} </style> Do znacznika dodajemy atrybut class="nazwa_klasy". Na przykład: <p class="zalety">…</p>
9
Rodzaj czcionki Właściwość font-family określa czcionkę (lub ich zbiór), której należy użyć w dokumencie albo określonym elemencie powiązanym z daną właściwością. Jej składnia wygląda następująco: font-family: [[ <nazwa-rodziny> \ <ogólna-rodzina> ] [, <nazwa-rodziny> \ <ogólna-rodzina>]]; Przykład: font-family: Verdana, Arial, Helvetica, Sans-Serif; Jeśli nazwa czcionki lub ich grupy zawiera odstępy, to należy ją zapisywać pomiędzy znakami cudzysłowu. font-family: Palatino, "Times New Roman", "Times Roman", Serif;
10
Określanie rozmiaru czcionki
Do kontrolowania wielkości czcionki służy właściwość font-size: rozmiar. Imienne wartości absolutne: xx-small - najmniejsza x-small - mniejsza small - mała medium - średnia large - duża x-large - większa xx-large - największa
11
Określanie rozmiaru czcionki
Wartości względne: smaller - mniejsza od bieżącej larger - większa od bieżącej Wartości w jednostkach pt – punkty, px – piksele, em – szerokość litery m,
12
Określanie stylu czcionki
Do określania stylu czcionki służą cztery właściwości: font-style, font-variant, font-weight i font-stretch.
13
Określanie stylu czcionki
Właściwość font-style określa, czy czcionka jest pochyła. font-style: normal | italic | oblique; normal - czcionka normalna (podstawowa) italic - czcionka pochylona (jeżeli niedostępna, automatycznie wybierany jest styl oblique) oblique - również czcionka pochylona (podobna jak poprzednio)
14
Określanie stylu czcionki
Właściwość font-variant umożliwia wyświetlenie małych kapitalików font-variant: normal | small-caps; normal - czcionka normalna (podstawowa) small-caps - kapitaliki
15
Określanie stylu czcionki
Właściwość font-weight zapewnia kontrolę nad pogrubieniem tekstu font-weight: normal | bold | bolder | lighter | 100 | 200 |300 I 400 I 500 I 600 | 700 | 800 | 900; — ustawienie 100 to najcieńsza, a 900 — najbardziej pogrubiona czcionka. Słowo kluczowe lighter —zmniejsza grubość czcionki o jeden poziom, chyba że jest już ona zbliżona do wartości 100, kiedy to pozostaje na poziomie 100. Słowo kluczowe normal — standardowa grubość używanej czcionki. Odpowiada ustawieniu 400. Słowo kluczowe bold —grubość odpowiadająca pogrubionej wersji czcionki. Odpowiada ustawieniu 700. Słowo kluczowe bolder —zwiększa grubość czcionki o jeden poziom, chyba że jest już ona zbliżona do wartości 900, kiedy to pozostaje na poziomie 900.
16
Określanie stylu czcionki
Właściwość font-stretch (czyli „rozciąganie czcionki") działa dokładnie tak, jak wskazuje na to jej nazwa — określa poziom rozstrzelenia tekstu przez zmianę odstępów między literami. font-stretch: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;
17
Interlinie Właściwość line-height określa wysokość wiersza tekstu. Ta wysokość to odległość między liniami bazowymi dwóch kolejnych wierszy. Wartość ta jest nazywana interlinią. Składnia omawianej właściwości wygląda następująco: line-height: normal | <liczba> \ <rozmiar> \ <procent>; Ta właściwość określa rozmiar pola otaczającego powiązany z nią element. Ma to wpływ na odległość między dwoma wierszami tekstu. Normalna wysokość wiersza jest równa domyślnemu rozmiarowi czcionki. Podanie liczby (na przykład 2) powoduje pomnożenie aktualnej wysokości wiersza przez tę wartość.
18
Interlinie Rozmiar bezwzględny (na przykład 1.2em) powoduje przypisanie go do wysokości wiersza. Wartości procentowe są obsługiwane jak liczby — przeglądarka mnoży rozmiar czcionki przez dany procent. Warto zauważyć, że ta właściwość nie zmienia wielkości fontu, a jedynie odległość między wierszami tekstu. Na przykład obie poniższe definicje tworzą klasę, która podwaja interlinię w tekście: p.doublespace { line-height: 2; } p.doublespace { line-height: 200%; }
19
Kontrolowanie wyrównania poziomego
Możemy użyć właściwości text-align, aby wyrównać bloki tekstu na cztery podstawowe sposoby: wyrównanie do lewej, wyrównanie do prawej, wycentrowanie oraz wyjustowanie. text-align: left | center | right | justify;
20
Kontrolowanie wyrównania pionowego
CSS umożliwia wyrównywanie tekstu nie tylko w poziomie, ale również wokół obiektów — służy do tego właściwość vertical-align. Właściwość vertical-align może przyjąć następujące wartości: baseline —jest to domyślna wartość wyrównania pionowego. Wyrównywanie tekstu do innych obiektów odbywa się na podstawie jego linii bazowej. sub — ta wartość sprawia, że tekst zostaje obniżony do poziomu indeksu dolnego na podstawie rozmiaru czcionki oraz wysokości wiersza rodzica. (Wartość ta nie wpływa na rozmiar tekstu, a jedynie na jego pozycję). super — ta wartość sprawia, że tekst zostaje podwyższony do poziomu indeksu górnego na podstawie rozmiaru czcionki oraz wysokości wiersza rodzica. (Wartość ta nie wpływa na rozmiar tekstu, a jedynie na jego pozycję).
21
Kontrolowanie wyrównania pionowego
top — ta wartość wyrównuje górną krawędź pojemnika otaczającego element do górnej krawędzi pojemnika otaczającego jego rodzica. text-top — ta wartość wyrównuje górną krawędź pojemnika otaczającego element do górnej linii tekstu rodzica. middle — ta wartość wyrównuje tekst na podstawie środka tekstu oraz o linii biegnącej przez środek obiektów znajdujących się wokół niego. bottom — ta wartość wyrównuje dolną krawędź pojemnika otaczającego element do dolnej krawędzi pojemnika otaczającego jego rodzica. text-bottom — ta wartość wyrównuje dolną krawędź pojemnika otaczającego element do dolnej linii tekstu rodzica. length — ta wartość przemieszcza element w górę (wartość dodatnia) lub w dół (wartość ujemna) o określoną wartość. percentage — ta wartość przemieszcza element w górę (wartość dodatnia) lub w dół (wartość ujemna) o określony procent. Procent ten dotyczy wysokości wiersza danego elementu.
22
Tworzenie wcięcia w tekście
Właściwość text-indent umożliwia utworzenie wcięcia w pierwszym wierszu danego elementu. Aby na przykład wstawić w akapicie wcięcie o wielkości 25 pikseli, możesz użyć kodu podobnego do tego: <p style="text-indent: 25px;">W Oazie Spokoju mamy trzy sauny, dwa baseny wirowe oraz pełnowymiarowy basen do pływania. Choć klienci mogą spędzać w nich dowolnie dużo czasu za niewielką opłatą, to oprócz tego korzystanie z nich jest wliczone w cenę wielu naszych usług. Nie zapomnij zatem zapytać swojego konsultanta o dostępne pakiety usług.</p>
Podobne prezentacje
