A | A | A

CIEKAWE TECHNIKI

Podobnie jak w przypadku języka XHTML nie sposób opisać działania wszystkich własności CSS gdyż mogłoby to stanowić odrębny temat. Aby dokładnie poznać wszystkie deklaracje i ich znaczenie należy odnieść się do innych publikacji, które są obecnie szeroko dostępne w postaci książek czy kursów online. Mimo wszystko aby przybliżyć działanie CSS a także przedstawić kilka ciekawych rozwiązań poniżej zamieszczone jest kilka dość prostych przykładów, które mogą bardzo ułatwić programowanie i ograniczyć rozmiar arkusza stylów:

Skróty deklaracji

Czasami zdarza się, że do określania wyglądu czcionki użyte jest kilka deklaracji, np.:

font-family: Verdana, sans-serif;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;

Aby otrzymać dokładnie ten sam efekt, można użyć skrótu i zawrzeć wszystkie deklaracje w jednej linii kodu:

font: bold italic small-caps 1em/1.5em Verdana, sans-serif;

Dodawanie dwóch lub więcej klas

Zazwyczaj znaczniki mają przypisaną tylko jedną klasę, nie oznacza to jednak, że zabronione jest przypisanie więcej niż jednej klasy. W praktyce, każdy znacznik XHTML może mieć przypisanych wiele klas, np.:

<p class="wstep prawaKolumna">…</p>

Użycie dwóch klas (oddzielonych znakiem spacji nie przecinkiem) spowoduje, że paragraf przyjmie prezentację określoną w klasie 'wstep' oraz w klasie 'prawaKolumna'. Jeśli obie klasy zawierają tą samą deklarację wtedy klasa, która jest zdefiniowana niżej w arkuszu styli weźmie górę.

Osobny dokument CSS dla różnych środowisk

Jak już wcześniej wspomniano każdy dokument XHTML może być podłączony do więcej niż jednego arkusza stylów. Możliwe jest także określenie, który z zawartych arkuszy ma być użyty do renderowania wyglądu strony w zależności od urządzenia na którym strona zostaje wyświetlona. Podczas załączania arkusza stylów możemy określić jego przeznaczenie za pomocą atrybutu media. Dostępne atrybuty to:

  • All – wszystkie urządzenia
  • Aural – przygotowany dla syntezatorów mowy
  • Braille – dla urządzeń umożliwiających symulację czytania wg metody Braille'a
  • Embossed – dla drukarek pisma Braill'a
  • Handheld – dla urządzeń przenośnych typu telefony komórkowe i palm topy
  • Print – dla dokumentów drukowanych
  • Projection – dla rzutników
  • Screen – dla kolorowych ekranów komputerów
  • Tv – dla urządzeń telewizyjnych (mała rozdzielczość i ilość kolorów)

Przykładowe linki do arkuszy styli:

<link type="text/css" rel="stylesheet" href="style.css" media="screen" />
<link type="text/css" rel="stylesheet" href="druk.css" media="print" />

Zamiana tekstu na obraz

Najlepszym rozwiązaniem aby wyświetlić na stronie tekst jest użycie składni XHTML zamiast grafiki z zawartą na niej informacją. Tekst XHTML ma przewagę nad obrazem z tekstem jeśli chodzi o silniki wyszukiwarek i dostępność. Natomiast tekst graficzny oferuje ciekawsze czcionki. Istnieje możliwość aby ten problem rozwiązać za pomocą CSS. Kod XHTML pozostanie bez zmian, np. <h1>Tworzenie stron WWW</h1>. Następnie za pomocą styli, możemy nadać danemu elementowi tło, które będzie obrazem graficznym z tekstem nagłówka ubranym w ładną czcionkę oraz usunąć oryginalny tekst poprzez przesunięcie go poza obszar widoczny na ekranie, np. 5000px poza lewą krawędź. Kod CSS będzie wyglądał następująco:

h1 {
background: url(obraz_z_tytulem.gif) no-repeat;
height: 30px;
text-indent: -5000px;
}

Dzięki temu na ekranie zostanie wyświetlona ładna czcionka a silniki wyszukiwarek przeczytają tekst ze znacznika XHTML. Rozwiązanie to ma swoje wady, np. użytkownik, który ma zablokowane wyświetlanie obrazów w przeglądarce nie będzie w stanie zobaczyć tekstu.

Pozycjonowanie elementów wewnątrz innego elementu

Jedną z najlepszych funkcji stylów CSS jest możliwość określania pozycji elementu na ekranie. Można zrobić to względem okna przeglądarki ale także względem elementu-rodzica. Aby określić pozycję elementu względem bloku w którym się ten element znajduje wystarczy zastosować reguły CSS przedstawione poniżej:

Pozycjonowanie elementu względem bloku zewnętrznego
Pozycjonowanie elementu względem bloku zewnętrznego

W podanym przykładzie element 'blokWewnetrzny' zostanie wyświetlony w prawym, dolnym rogu elementu w którym się zawiera czyli 'blokZewnetrzny'.


Skocz do góry strony ↑