1 Aplikacje internetoweCSS - 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.
3 Zapis definicji stylówW 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ówSelektor 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ówKomponent 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ładzieW 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:
7 Dopasowywanie elementów według klasySelektory 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 klasyW takim przypadku moglibyśmy użyć styli lokalnych ale lepszym rozwiązaniem jest użycie klas. Przykład Do znacznika dodajemy atrybut class="nazwa_klasy". Na przykład: …
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: [[
10 Określanie rozmiaru czcionkiDo 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 czcionkiWartoś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 czcionkiDo określania stylu czcionki służą cztery właściwości: font-style, font-variant, font-weight i font-stretch.
13 Określanie stylu czcionkiWł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 czcionkiWł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 czcionkiWł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 czcionkiWł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 |
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 poziomegoMoż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 pionowegoCSS 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 pionowegotop — 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ścieWł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: 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.