Kurs HTML - style (selektory specjalne)
SPIS TREŚCI
Klasy selektorów -
Selektor identyfikatora
Selektory specjalne
KLASY SELEKTORÓW
(interpretuje Internet Explorer, Netscape 6, Opera 5)
<HEAD>
(...)
<STYLE TYPE="text/css">
<!--
(...)
SELEKTOR.klasa { cecha: wartość }
(...)
-->
</STYLE>
(...)
</HEAD>
<BODY>
(...)
<SELEKTOR class="klasa">...</SELEKTOR>
(...)
</BODY>
gdzie kolorem niebieskim zaznaczono
wewnętrzny arkusz stylów,
w którym znajduje się deklaracja klasy (może się ona również znajdować
w zewnętrznym lub
importowanym arkuszu).
Natomiast kolorem czerwonym zaznaczono konkretny przykład
użycia zdefiniowanej wcześniej klasy.
SELEKTOREM może być dowolny znacznik języka HTML (np.: P - paragraf,
Hn - tytuł określonego rzędu czy TD - komórka tabeli i inne)
[zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.
Jako klasa należy podać dowolny pojedynczy wyraz, który nie może zawierać
znaków: spacji, kropki, przecinka, dwukropka, pytajnika, nawiasów, znaku równości, plusa itp.
(może natomiast zawierać myślnik "-"). Lepiej nie używać polskich liter.
Nie powinien się on również rozpoczynać cyfrą ani myślnikiem.
Jeśli koniecznie chcemy użyć "zakazanych"
znaków, należy w deklaracji klasy poprzedzić je odwróconym ukośnikiem "\",
np. deklaracja: SELEKTOR.B\&W\? { cecha: wartość }
odpowiada klasie: class="B&W?".
W miejsce kropek (...) można wpisać dalsze polecenia.
Zdefiniowanie klasy selektorów w części nagłówkowej dokumentu, pozwala później się
do niej odnosić (już we właściwej treści). Dzięki temu możemy np. ustalić określone
atrybuty dla danego elementu (selektora) na całej stronie, a jednocześnie
zmienić wygląd tylko niektórych, bezpośrednio przy nich. Nie musimy już wtedy
za każdym razem wpisywać stylu inline,
którego zapis czasem może może być dosyć długi, ale wystarczy odwołać się do nazwy klasy
z arkusza.
Deklaracja klasy jest przydatna szczególnie, jeśli na wielu stronach
serwisu znajdują się elementy mające takie samo formatowanie, a dodatkowo nie można dla
nich posłużyć się prostym selektorem,
ponieważ na stronie znajdują się inne znaczniki tego samego rodzaju co wybrany element,
ale nie chcemy, aby i one otrzymały takie samo formatowanie. Wtedy np. w
zewnętrznym arkuszu stylów
umieszczamy deklarację klasy, a następnie na stronach wstawiamy atrybut class="klasa"
tylko dla wybranych znaczników. Dzięki temu inne znaczniki tego samego typu zachowają swoje
oryginalne formatowanie.
Jeśli chcemy do pojedynczego elementu przypisać kilka różnych klas,
należy posłużyć się poleceniem:
<SELEKTOR class="klasa1 klasa2 klasa3...">...</SELEKTOR>
przy czym klasy: klasa1, klasa2, klasa3 muszą być zdeklarowane
w wewnętrznym,
zewnętrznym lub
importowanym arkuszu stylów.
Możliwość definiowania klasy selektorów, jest bardzo ważną i przydatną
własnością stylów. Pozwala nam ona zaoszczędzić mnóstwo czasu, który stracilibyśmy,
na wpisywanie stylu inline (zwłaszcza w przypadku bardziej skomplikowanych
deklaracji). Dlatego warto używać tej własności!
Jeśli jakiś element, o specyficznym rodzaju formatowania, wstępuje przynajmniej raz
na niektórych stronach Twojego serwisu (może to być np. główny tytuł strony),
jest to znak, że dobrze byłoby umieścić w zewnętrznym arkuszu stylów deklarację jego klasy.
Dzięki temu, jeśli później zdecydujemy się zmienić jego formatowanie, nie będziemy musieli
modyfikować każdej ze stron, a jedynie zewnętrzny arkusz.
Już na początkowym etapie projektowania serwisu, dobrze jest dokładnie obmyślić,
jakie klasy mogą okazać się użyteczne. Im więcej deklaracji klas - odnoszących się do
powtarzalnych elementów - umieścisz w zewnętrznym arkuszu stylów,
tym szybciej przebiegnie późniejsza ewentualna modyfikacja stron!
Dobrym pomysłem jest również wstawianie komentarza
przed każdą deklaracją klasy w arkuszu (znaki: /* ... */),
w którym opisuje się jej przeznaczenie.
Po jakimś czasie w Twoim arkuszu stylów może znaleźć się tyle klas, że zapomnisz,
do jakich elementów się one odnosiły. Wtedy właśnie bardzo przydatny może się okazać wpisany
wcześniej komentarz.
Przykład:
W wewnętrznym arkuszu stylów
tej strony została umieszczona następująca deklaracja:
H4.klasa { color: red }
Dlatego jeśli teraz w dowolnym miejscu wpiszemy:
<H4 class="klasa">To jest tytuł rzędu 4</H4>
To na ekranie zobaczymy tekst napisany czcionką koloru czerwonego:
To jest tytuł rzędu 4
Dla porównania, to jest tytuł tego samego rzędu, ale bez podania klasy
i dlatego nie jest czerwony.
W przypadku stosowanie klas, często podczas ich definiowania, nie wiemy jeszcze, w stosunku do
jakich znaczników będziemy chcieli je później użyć. Wtedy przydatny okazuje się
selektor uniwersalny, który pozwala przypisać
własności klasy do wszystkich elementów, którym zostanie ona nadana, bez względu na typ znacznika.
Przykład:
W wewnętrznym arkuszu stylów
tej strony została umieszczona następująca deklaracja:
*.uniwersalna { color: yellow }
Dlatego teraz każdy element, któremu nadamy klasę uniwersalna,
będzie miał kolor żółty:
To jest paragraf, któremu została przypisana klasa uniwersalna
To jest tytuł rzędu czwartego, któremu została przypisana klasa uniwersalna
SELEKTOR IDENTYFIKATORA
(interpretuje Internet Explorer, Netscape 6, Opera 5)
<HEAD>
(...)
<STYLE TYPE="text/css">
<!--
(...)
SELEKTOR#identyfikator { cecha: wartość }
(...)
-->
</STYLE>
(...)
</HEAD>
<BODY>
(...)
<SELEKTOR id="identyfikator">...</SELEKTOR>
(...)
</BODY>
gdzie kolorem niebieskim zaznaczono
wewnętrzny arkusz stylów,
w którym znajduje się deklaracja identyfikatora (ID).
Natomiast kolorem czerwonym zaznaczono konkretny przykład
użycia zdefiniowanego wcześniej identyfikatora.
SELEKTOREM może być dowolny znacznik języka HTML (np.: P - paragraf,
Hn - tytuł określonego rzędu czy TD - komórka tabeli i inne)
[zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane
poprzez style i zostaną opisane w dalszych rozdziałach.
Jako identyfikator należy podać dowolny pojedynczy wyraz, który nie może zawierać
znaków: spacji, kropki, przecinka, dwukropka, pytajnika, nawiasów, znaku równości, plusa itp.
(może natomiast zawierać myślnik "-"). Lepiej nie używać polskich liter.
Nie powinien się on również rozpoczynać cyfrą ani myślnikiem. Jeśli koniecznie chcemy użyć "zakazanych"
znaków, należy w deklaracji poprzedzić je odwróconym ukośnikiem "\",
np. deklaracja: SELEKTOR#B\&W\? { cecha: wartość }
odpowiada identyfikatorowi: id="B&W?".
Identyfikator powinien wystąpić tylko raz w hierarchii
drzewa dokumentu,
czyli na pojedynczej stronie nie powinny się znaleźć dwa elementy z takimi samymi identyfikatorami!
W miejsce kropek (...) można wpisać dalsze polecenia.
Polecenie to pozwala, na nadanie określonych atrybutów formatowania dla elementu,
który ma jednoznaczny identyfikator ID, czyli występuje tylko raz
w drzewie dokumentu (w odróżnieniu do poprzedniego przypadku).
Przykład:
W wewnętrznym arkuszu stylów
tej strony została umieszczona następująca deklaracja:
H5#identyfikator { color: red }
Dlatego element o podanym identyfikatorze ID:
<H5 id="identyfikator">To jest tytuł rzędu 5</H5>
zostanie wyświetlony w kolorze czerwonym:
To jest tytuł rzędu 5
Dla porównania, to jest tytuł tego samego rzędu, ale bez podania identyfikatora
i dlatego nie jest czerwony.
Wyszukiwarka
Podobne podstrony:
53$2403 specjalista do spraw szkolenspecjalizacje w broniachprogram szkolenia specjalistycznego www katalogppoz pl13 Prace specjalistyczne całośćOiM Model specjalny Kozacka czarownicajadospisy bez specjalnych wymagan zywieniowychOsik Wspomaganie uczniów ze specjalnymi potrzebami edukacyjnymiselektory specjalne02 Specjalne metody elektrostatykiStrąć stojaki; szybkość specjalna cz 42007 testy specjalizacyjne odpWSPÓŁCZESNE ZAGADNIENIA Z PEDAGOGIKIE SPECJANEJCV Pracuj specjalista ds logistyki 1Specjalizacja technolog robótq3[06] S1 uksztalcenie specjalnewięcej podobnych podstron