| << poprzednia lekcja | [ spis treści] | nastepna lekcja >> |
UWAGA: Efekty działania znaczników nie są pokazywane na tej stronie! >> Przykłady.zip
Witam wszystkich w lekcji numer 4. Jeśli przerobiliście wszystkie poprzednie lekcje i jeśli żaden z zamieszczonych tam przykładów nie jest już dla Was czarną magią, to zapraszam do przerobienia dzisiejszej lekcji, która to lekcja będzie dość istotną lekcją, podczas której nauczymy się podstaw dość obszernego tematu jakim jest temat styli CSS. Jeśli jednak wciąż nie rozumiecie którejś z lekcji poprzednich to radzę raz jeszcze do nich powrócić i dopiero zabrać się za obecną lekcję.Link do pobrania przykładów do Lekcji 4 znajduje się poniżej:
http://www.szczyglis.cba.pl/lekcje_html.html
Czym są style CSS?
Jak zapewne pamiętacie - do tej pory opisywaliśmy nasze znaczniki za pomocą atrybutów i nadawaliśmy im jakieś właściwości.
Gdy chcieliśmy np. wyrównać tekst do środka, to używaliśmy atrybutu "align='center'", gdy natomiast chcieliśmy dodać obramowanie wokół obrazka, to używaliśmy "border='1'" itd. Style CSS pozwalają nam na to samo i na wiele więcej, jednak w trochę inny sposób.
Na początek standardowo trochę teorii. Nazwa "CSS" to skrót od ang. "Cascading Style Sheets" co w tłumaczeniu znaczy "Kaskadowe Arkusze Stylów". Co to dokładnie znaczy? Otóż od tej pory, wszystkie informacje dotyczące wyglądu naszej strony zapisywać będziemy w oddzielnym pliku, tzw. arkuszu CSS. Pozwoli to nam na rozdzielenie struktury naszego dokumentu od jego wyglądu. W praktyce wyglądać to będzie następująco: w pliku ".html" będziemy tworzyć układ naszej strony oraz rozmieścimy w nim wszystkie znaczniki, które składać się będą na naszą stronę, natomiast wszelkie informacje dotyczące ich wyglądu umieścimy w oddzielnym pliku z rozszerzeniem ".css".
Na co pozwoli nam takie rozdzielenie? Otóż na bardzo wiele rzeczy - po pierwsze, opisywanie wyglądu strony za pomocą CSS jest od dawna standardem, po drugie, taki układ pozwoli nam na oddzielenie układu strony od jego warstwy wizualnej, po trzecie, pozwoli na szybkie określanie wyglądu naszych stron za pomocą jednego tylko pliku. Wyobraźmy sobie, że nasza strona składa się z 10 plików ".html", w których to plikach znajdują się takie elementy, jak tabele, akapity, odnośniki i obrazki. Co jeśli nagle wygląd np. tabel przestanie nam się podobać i postanowimy zrobić w komórkach trochę większe odstępy? Jak do tej pory, musielibyśmy przerabiać oddzielnie każdy z tych 10 plików, zmieniając w każdym z nich odpowiednie atrybuty. W przypadku wykorzystania CSS tego problemu nie będzie, gdyż za wygląd naszych stron odpowiedzialny będzie tylko jeden, oddzielny plik, z którego korzystać będzie wszystkie 10 naszych stron. Zmiana jednej wartości w pliku CSS zmieni sposób wyświetlania naszej tabeli na wszystkich stronach, które z pliku CSS korzystają. Jak więc widać, używanie styli CSS niesie za sobą jedynie same korzyści, począwszy od dokładniejszego opisania wyglądu strony, a kończywszy na szybszej i mniej czasochłonnej modyfikacji wyglądu naszych stron. Jakie jeszcze korzyści daja nam wykorzystywanie CSS? Przede wszystkim dokumenty ".html" stają się krótsze i czytelniejsze, gdyż nie zawierają już w tym przypadku informacji o atrybutach i wyglądzie. Poza tym, oszczędzamy sobie pisania, gdyż za pomocą odpowiednich styli określamy te same właściwości dla wielu elementów jednocześnie. Co więcej, wykorzystanie CSS pozwala na osiągnięcie efektów, jakie nie są możliwe do uzyskania za pomocą zwykłych atrybutów. Warto również wiedzieć, iż rozwój języka HTML i CSS sprawił, że obecnie już prawie całkowicie odeszło się od opisywania znaczników atrybutami na rzecz właśnie CSS. Co jeszcze? Dzięki CSS możemy przygotować kilka różnych wyglądów dla naszej strony. Jeden wygląd może być np. ładowany domyślnie podczas przeglądania strony na komputerze, inny może być ładowany podczas oglądania strony na ekranie komórki, jeszcze inny, podczas jej drukowania na drukarce. Możliwości CSS są przeogromne.
Jestem winny jeszcze jedno wyjaśnienie - mianowicie, co to znaczy "kaskadowe"? Jest to w rzeczywistości określenie kolejności działania. Wyobraźmy, że na stronie mamy jakaś tabelę (<table>), a w niej jakiś tekst objęty znacznikiem <p> (czyli "akapit"). Jednocześnie, w naszym arkuszu stylów opisane mamy jak wyglądać ma nasza tabela. Podane mamy tam, że np. tekst znajdujący się w niej ma mieć kolor czerwony. Przy okazji jednak, w innym miejscu naszego arkuszu mamy opisany wygląd dla wszystkich elementów <p> znajdujących się na naszej stronie, mówiący o tym, że każdy tekst zawarty pomiędzy <p></p> ma być koloru zielonego. Jak więc zareaguje nasza strona? Wyświetli tekst na czerwono, czy na zielono? A może wystąpią jakieś błędy i nasza przeglądarka zgłupieje, nie wiedząc, którego stylu użyć? Nic z tych rzeczy. Przeglądarka zastosuje styl o najwyższym priorytecie, znajdujący się najbliżej naszego elementu. Na tym z grubsza polega kaskadowość. Pokażę to zresztą później na przykładach. Warto wiedzieć, że ową kolejność i priorytety można zmieniać, ale nie będziemy się tym póki co zajmować.
Dobrze, więc teorię jako tako mamy już za sobą, czas przejść dalej.
Gdy chcieliśmy np. wyrównać tekst do środka, to używaliśmy atrybutu "align='center'", gdy natomiast chcieliśmy dodać obramowanie wokół obrazka, to używaliśmy "border='1'" itd. Style CSS pozwalają nam na to samo i na wiele więcej, jednak w trochę inny sposób.
Na początek standardowo trochę teorii. Nazwa "CSS" to skrót od ang. "Cascading Style Sheets" co w tłumaczeniu znaczy "Kaskadowe Arkusze Stylów". Co to dokładnie znaczy? Otóż od tej pory, wszystkie informacje dotyczące wyglądu naszej strony zapisywać będziemy w oddzielnym pliku, tzw. arkuszu CSS. Pozwoli to nam na rozdzielenie struktury naszego dokumentu od jego wyglądu. W praktyce wyglądać to będzie następująco: w pliku ".html" będziemy tworzyć układ naszej strony oraz rozmieścimy w nim wszystkie znaczniki, które składać się będą na naszą stronę, natomiast wszelkie informacje dotyczące ich wyglądu umieścimy w oddzielnym pliku z rozszerzeniem ".css".
Na co pozwoli nam takie rozdzielenie? Otóż na bardzo wiele rzeczy - po pierwsze, opisywanie wyglądu strony za pomocą CSS jest od dawna standardem, po drugie, taki układ pozwoli nam na oddzielenie układu strony od jego warstwy wizualnej, po trzecie, pozwoli na szybkie określanie wyglądu naszych stron za pomocą jednego tylko pliku. Wyobraźmy sobie, że nasza strona składa się z 10 plików ".html", w których to plikach znajdują się takie elementy, jak tabele, akapity, odnośniki i obrazki. Co jeśli nagle wygląd np. tabel przestanie nam się podobać i postanowimy zrobić w komórkach trochę większe odstępy? Jak do tej pory, musielibyśmy przerabiać oddzielnie każdy z tych 10 plików, zmieniając w każdym z nich odpowiednie atrybuty. W przypadku wykorzystania CSS tego problemu nie będzie, gdyż za wygląd naszych stron odpowiedzialny będzie tylko jeden, oddzielny plik, z którego korzystać będzie wszystkie 10 naszych stron. Zmiana jednej wartości w pliku CSS zmieni sposób wyświetlania naszej tabeli na wszystkich stronach, które z pliku CSS korzystają. Jak więc widać, używanie styli CSS niesie za sobą jedynie same korzyści, począwszy od dokładniejszego opisania wyglądu strony, a kończywszy na szybszej i mniej czasochłonnej modyfikacji wyglądu naszych stron. Jakie jeszcze korzyści daja nam wykorzystywanie CSS? Przede wszystkim dokumenty ".html" stają się krótsze i czytelniejsze, gdyż nie zawierają już w tym przypadku informacji o atrybutach i wyglądzie. Poza tym, oszczędzamy sobie pisania, gdyż za pomocą odpowiednich styli określamy te same właściwości dla wielu elementów jednocześnie. Co więcej, wykorzystanie CSS pozwala na osiągnięcie efektów, jakie nie są możliwe do uzyskania za pomocą zwykłych atrybutów. Warto również wiedzieć, iż rozwój języka HTML i CSS sprawił, że obecnie już prawie całkowicie odeszło się od opisywania znaczników atrybutami na rzecz właśnie CSS. Co jeszcze? Dzięki CSS możemy przygotować kilka różnych wyglądów dla naszej strony. Jeden wygląd może być np. ładowany domyślnie podczas przeglądania strony na komputerze, inny może być ładowany podczas oglądania strony na ekranie komórki, jeszcze inny, podczas jej drukowania na drukarce. Możliwości CSS są przeogromne.
Jestem winny jeszcze jedno wyjaśnienie - mianowicie, co to znaczy "kaskadowe"? Jest to w rzeczywistości określenie kolejności działania. Wyobraźmy, że na stronie mamy jakaś tabelę (<table>), a w niej jakiś tekst objęty znacznikiem <p> (czyli "akapit"). Jednocześnie, w naszym arkuszu stylów opisane mamy jak wyglądać ma nasza tabela. Podane mamy tam, że np. tekst znajdujący się w niej ma mieć kolor czerwony. Przy okazji jednak, w innym miejscu naszego arkuszu mamy opisany wygląd dla wszystkich elementów <p> znajdujących się na naszej stronie, mówiący o tym, że każdy tekst zawarty pomiędzy <p></p> ma być koloru zielonego. Jak więc zareaguje nasza strona? Wyświetli tekst na czerwono, czy na zielono? A może wystąpią jakieś błędy i nasza przeglądarka zgłupieje, nie wiedząc, którego stylu użyć? Nic z tych rzeczy. Przeglądarka zastosuje styl o najwyższym priorytecie, znajdujący się najbliżej naszego elementu. Na tym z grubsza polega kaskadowość. Pokażę to zresztą później na przykładach. Warto wiedzieć, że ową kolejność i priorytety można zmieniać, ale nie będziemy się tym póki co zajmować.
Dobrze, więc teorię jako tako mamy już za sobą, czas przejść dalej.
Umieszczanie stylów CSS w dokumencie HTML.
Style CSS możemy umieścić w dokumencie na kilka różnych sposobów. Na początek omówimy jedynie 3 sposoby, z których w tej lekcji będziemy korzystać. Pierwszym sposobem jest podanie stylu jako atrybut bezpośrednio w dokumencie, drugim sposobem jest określenie arkusza ze stylami w nagłówku strony, natomiast trzecim jest dołączenie do dokumentu oddzielnego pliku ".css".
Na początek otwórzmy w przeglądarce plik z przykładem nr 1 - "Lekcja4_przyklad_1.html". Najpierw wyświetlmy go w przeglądarce, a następnie popatrzmy na jego kod. Oczywiście na stylach CSS się jeszcze nie znamy, więc nie wnikajmy co jest do czego, jedynie popatrzmy, w którym miejscu nasze style zostały zdefiniowane. Jak widać zostały zdefiniowane w nagłówku strony, pomiędzy znacznikami <head></head>:
<style type="text/css">
h1 { color: red }
h2 { color: green }
h3 { color: blue }
div { text-align: center }
body { background-color: #d9d1d1 }
</style>
Zatem jak widać, definicje naszych styli można umieścić bezpośrednio w nagłówku <head> za pomocą znacznika <style>.
Drugim sposobem, który jest lepszy i którego dalej będziemy używać to sposób polegający na dołączeniu do naszej strony oddzielnego pliku ".css" zawierającego nasz arkusz styli. Wyświetlmy teraz w przeglądarce drugi przykład: "Lekcja4_przyklad_1b.html". Jak widać, wygląda identycznie jak poprzedni, ale spójrzmy teraz na jego kod. Wygląda krócej, prawda? Dołączyliśmy zewnętrzny arkusz CSS:
<link rel="stylesheet" type="text/css" href="css/przyklad1.css" />
Wszystkie nasze style zamieściliśmy w oddzielnym pliku - "przyklad1.css" znajdującym się w katalogu "css/". Wiemy już zatem jak zamieszczać style CSS na stronie, czas zacząc więc naszą lekcję.
Na początek otwórzmy w przeglądarce plik z przykładem nr 1 - "Lekcja4_przyklad_1.html". Najpierw wyświetlmy go w przeglądarce, a następnie popatrzmy na jego kod. Oczywiście na stylach CSS się jeszcze nie znamy, więc nie wnikajmy co jest do czego, jedynie popatrzmy, w którym miejscu nasze style zostały zdefiniowane. Jak widać zostały zdefiniowane w nagłówku strony, pomiędzy znacznikami <head></head>:
<style type="text/css">
h1 { color: red }
h2 { color: green }
h3 { color: blue }
div { text-align: center }
body { background-color: #d9d1d1 }
</style>
Zatem jak widać, definicje naszych styli można umieścić bezpośrednio w nagłówku <head> za pomocą znacznika <style>.
Drugim sposobem, który jest lepszy i którego dalej będziemy używać to sposób polegający na dołączeniu do naszej strony oddzielnego pliku ".css" zawierającego nasz arkusz styli. Wyświetlmy teraz w przeglądarce drugi przykład: "Lekcja4_przyklad_1b.html". Jak widać, wygląda identycznie jak poprzedni, ale spójrzmy teraz na jego kod. Wygląda krócej, prawda? Dołączyliśmy zewnętrzny arkusz CSS:
<link rel="stylesheet" type="text/css" href="css/przyklad1.css" />
Wszystkie nasze style zamieściliśmy w oddzielnym pliku - "przyklad1.css" znajdującym się w katalogu "css/". Wiemy już zatem jak zamieszczać style CSS na stronie, czas zacząc więc naszą lekcję.
Z czego składają się style CSS?
Atrybuty w CSS składają się z tzw. reguł formatowania, które z koleji składają się z dwóch elementów: z selektora i jego deklaracji.
Deklaracja składa się natomiast z cechy i jej właściwości. Brzmi skomplikowanie? Tylko na początku. Za chwilę przekonamy się, że jest to bardzo proste w użyciu. Opiszemy wszystko krok po kroku. Wykorzystanie większości opisywanych poniżej przykładów przedstawione jest w pliku "Lekcja4_przyklad_2.html" oraz dołączonym do niego arkuszu "css/przyklad2.css".
Deklaracja składa się natomiast z cechy i jej właściwości. Brzmi skomplikowanie? Tylko na początku. Za chwilę przekonamy się, że jest to bardzo proste w użyciu. Opiszemy wszystko krok po kroku. Wykorzystanie większości opisywanych poniżej przykładów przedstawione jest w pliku "Lekcja4_przyklad_2.html" oraz dołączonym do niego arkuszu "css/przyklad2.css".
Selektory elementów:
Selektory typów
Załóżmy, że chcemy zmienić wygląd każdego ze znaczników <p> na naszej stronie. Jak pamiętamy, znacznik <p> odpowiada za akapit. Jak sprawimy, żeby np. każdy tekst pomiędzy <p></p> był koloru czerwonego?
Musimy utworzyć nową regułę dla tego znacznika.
Robimy to tak:
p {
color: red;
}
To co widzimy powyżej to właśnie stworzona przez nas reguła. W naszym przypadku dotycząca znacznika <p>. Tak jak napisałem wcześniej, każda taka reguła składa się z selektora i jego deklaracji.
W przypadku powyżej, selektorem jest:
p
natomiast jego deklaracją jest:
{
color: red
}
Jak też napisałem wcześniej, każda deklaracja składa się z cechy i jej właściwości. Naszą cechą jest tutaj "color", a jego właściwością jest "red".
Po polsku można więc powiedzieć, że: dla selektora "akapitu" zadeklarowaliśmy cechę "kolor" o wartości "czerwony".
Zapis taki jak powyżej, można również zapisać w jednej linijce, nie ma to znaczenia w jaki sposób to zapiszemy:
p { color: red }
Z reguły - proste, któtkie deklaracje piszemy w jednej linijce, a te bardziej złożone, tak jak to pokazałem wcześniej.
Każda reguła może się składać z więcej, niż jednej cech, wystarczy jedynie oddzielić je "średnikiem" (;). Na przykład:
p {
color: red;
font-weight: bold
}
Taki zapis sprawi, że tekst w naszych akapitach będzie nie tylko czerwony, ale i pogrubiony, gdyż cecha "font-weight" określająca "wagę czcionki" z wartością "bold" robi dokładnie to samo co użycie znacznika <b></b>.
Jak więc widzimy, możemy dodawać tyle cech ile chcemy, należy jedynie pamiętać, aby oddzielać je średnikami. Po określeniu ostatniej cechy natomiast średnika stawiać już nie musimy (choć oczywiście możemy, nie jest to żaden błąd).
Możemy również tworzyć reguły dla wielu selektorów jednocześnie.
W naszym powyższym przykładzie, stworzyliśmy reguły dla selektora "p", stwórzmy teraz to samo, ale przy okazji również dla selektora "i".
Jak pamiętamy - znacznik <i> oznacza pochylenie czcionki.
Jak to zrobimy? Zrobimy to tak:
p, i {
color: red;
font-weight: bold
}
Jak widać po prostu podaliśmy dwa znaczniki w jednym selektorze (oddzielone przecinkiem). Powyższy zapis sprawia więc, że nasza deklaracja dotyczyć będzie zarówno znacznika "p" (akapit), jak i znacznika "i" (pochylenie). Od tej chwili każdy tekst znajdujący się pomiędzy <p></p> oraz <i></i> będzie pokolorowany na czerwono i pogrubiony.
Warto pamiętać, że style po sobie "dziedziczą". Na czym polega dziedziczenie już sobie wyjaśniliśmy w poprzednich lekcjach. Jak to jednak wygląda w przypadku styli CSS? Wyobraźmy sobie taki zapis:
p { color: red }
b { color: black }
Sprawi on, że każdy tekst znajdujący się w znacznikach <p> będzie koloru czerwonego - niezależnie od tego jakie jeszcze znaczniki będą znajdować się w naszym akapicie - tekst zawsze będzie czerwony, gdyż wszystkie pozostałe znaczniki potomne (znajdujące się w <p></p>) odziedziczą wartość koloru po znaczniku wyższym (czyli po znaczniku nadrzędnym - <p>). Jedynie użycie znacznika <b> sprawi, że poprzednia reguła przestanie na chwilę obowiązywać i tekst pogrubiony zostanie wyświetlony w kolorze czarnym (color: black).
To co zobaczyliśmy powyżej to tzw. "selektory typu". Są to więc selektory odpowiadające tak naprawdę znacznikom na stronie, z tą jedynie różnicą, że w przypadku CSS nie podajemy tutaj nawiasów "<>", a jedynie samą wartość odpowiedniego znacznika. Analogicznie więc, możemy stworzyć reguły dla wszystkich innych typów (znaczników):
a { font-weight:bold }
h1 { color: red }
h2 { color: yellow }
itd itp...
Czujecie już korzyści płynące z CSS? Bez użycia CSS musielibyśmy określać oddzielnie atrybuty dla każdego znacznika na stronie, tutaj natomiast za jednym zamachem określamy pewne wartości dla wszystkich znaczników występujących w naszym dokumencie.
Musimy utworzyć nową regułę dla tego znacznika.
Robimy to tak:
p {
color: red;
}
To co widzimy powyżej to właśnie stworzona przez nas reguła. W naszym przypadku dotycząca znacznika <p>. Tak jak napisałem wcześniej, każda taka reguła składa się z selektora i jego deklaracji.
W przypadku powyżej, selektorem jest:
p
natomiast jego deklaracją jest:
{
color: red
}
Jak też napisałem wcześniej, każda deklaracja składa się z cechy i jej właściwości. Naszą cechą jest tutaj "color", a jego właściwością jest "red".
Po polsku można więc powiedzieć, że: dla selektora "akapitu" zadeklarowaliśmy cechę "kolor" o wartości "czerwony".
Zapis taki jak powyżej, można również zapisać w jednej linijce, nie ma to znaczenia w jaki sposób to zapiszemy:
p { color: red }
Z reguły - proste, któtkie deklaracje piszemy w jednej linijce, a te bardziej złożone, tak jak to pokazałem wcześniej.
Każda reguła może się składać z więcej, niż jednej cech, wystarczy jedynie oddzielić je "średnikiem" (;). Na przykład:
p {
color: red;
font-weight: bold
}
Taki zapis sprawi, że tekst w naszych akapitach będzie nie tylko czerwony, ale i pogrubiony, gdyż cecha "font-weight" określająca "wagę czcionki" z wartością "bold" robi dokładnie to samo co użycie znacznika <b></b>.
Jak więc widzimy, możemy dodawać tyle cech ile chcemy, należy jedynie pamiętać, aby oddzielać je średnikami. Po określeniu ostatniej cechy natomiast średnika stawiać już nie musimy (choć oczywiście możemy, nie jest to żaden błąd).
Możemy również tworzyć reguły dla wielu selektorów jednocześnie.
W naszym powyższym przykładzie, stworzyliśmy reguły dla selektora "p", stwórzmy teraz to samo, ale przy okazji również dla selektora "i".
Jak pamiętamy - znacznik <i> oznacza pochylenie czcionki.
Jak to zrobimy? Zrobimy to tak:
p, i {
color: red;
font-weight: bold
}
Jak widać po prostu podaliśmy dwa znaczniki w jednym selektorze (oddzielone przecinkiem). Powyższy zapis sprawia więc, że nasza deklaracja dotyczyć będzie zarówno znacznika "p" (akapit), jak i znacznika "i" (pochylenie). Od tej chwili każdy tekst znajdujący się pomiędzy <p></p> oraz <i></i> będzie pokolorowany na czerwono i pogrubiony.
Warto pamiętać, że style po sobie "dziedziczą". Na czym polega dziedziczenie już sobie wyjaśniliśmy w poprzednich lekcjach. Jak to jednak wygląda w przypadku styli CSS? Wyobraźmy sobie taki zapis:
p { color: red }
b { color: black }
Sprawi on, że każdy tekst znajdujący się w znacznikach <p> będzie koloru czerwonego - niezależnie od tego jakie jeszcze znaczniki będą znajdować się w naszym akapicie - tekst zawsze będzie czerwony, gdyż wszystkie pozostałe znaczniki potomne (znajdujące się w <p></p>) odziedziczą wartość koloru po znaczniku wyższym (czyli po znaczniku nadrzędnym - <p>). Jedynie użycie znacznika <b> sprawi, że poprzednia reguła przestanie na chwilę obowiązywać i tekst pogrubiony zostanie wyświetlony w kolorze czarnym (color: black).
To co zobaczyliśmy powyżej to tzw. "selektory typu". Są to więc selektory odpowiadające tak naprawdę znacznikom na stronie, z tą jedynie różnicą, że w przypadku CSS nie podajemy tutaj nawiasów "<>", a jedynie samą wartość odpowiedniego znacznika. Analogicznie więc, możemy stworzyć reguły dla wszystkich innych typów (znaczników):
a { font-weight:bold }
h1 { color: red }
h2 { color: yellow }
itd itp...
Czujecie już korzyści płynące z CSS? Bez użycia CSS musielibyśmy określać oddzielnie atrybuty dla każdego znacznika na stronie, tutaj natomiast za jednym zamachem określamy pewne wartości dla wszystkich znaczników występujących w naszym dokumencie.
Selektor uniwersalny
Jest to specyficzny rodzaj selektora, który dotyczy WSZYSTKICH znaczników na stronie, bez potrzeby określania ich nazw.
Wygląda on następująco:
* { color: red }
Zapis taki sprawi, iż cecha "color" o wartości "red" dotyczyć będzie wszystkich elementów na naszej stronie, nie ważne czy będą to znaczniki <p>, <a>, <b> czy <h1>. Dotyczyć będzie ona wszystkich znaczników użytych w naszym dokumencie.
Wygląda on następująco:
* { color: red }
Zapis taki sprawi, iż cecha "color" o wartości "red" dotyczyć będzie wszystkich elementów na naszej stronie, nie ważne czy będą to znaczniki <p>, <a>, <b> czy <h1>. Dotyczyć będzie ona wszystkich znaczników użytych w naszym dokumencie.
Selektory potomne
Za pomocą tego typu selektorów możemy nieco "zawęzić" pole ich działania. Na czym to polega? Jak zauważyliśmy wcześniej, praktycznie na każdym kroku spotykamy się z sytuacją, gdy w naszym dokumencie jakiś znacznik zawiera się w innym znaczniku, a ten z koleji w jeszcze innym znaczniku.
Wyobraźmy teraz sobie sytuację, że chcemy określić regułę dla każdego znacznika <b> na naszej stronie, tak aby każdy znacznik <b> kolorował tekst w nim zawarty na czerwono. Zrobimy to tak:
b { color: red }
Proste. Ale wobraźmy sobie teraz, że chcemy aby ta reguła obowiązywała tylko wtedy, gdy pogrubiany tekst znajdować się będzie pomiędzy znacznikami <p></p>. Poza tymi znacznikami nie chcemy, żeby reguła obowiązywała. Jak to zrobimy? Za pomocą selektora potomnego.
Popatrzmy na poniższy zapis:
p b { color: red }
Zapis taki określa nam regułę dla znaczników <b>, która mówi o kolorze czerwonym, ale wtedy i tylko wtedy, gdy znacznik <b> znajduje się wewnątrz znacznika <p>. Jeśli znacznik <b> w naszym dokumencie nie będzie zawierać się w znaczniku <p> to nie zostanie on pokolorowany na czerwono.
Ogólna reguła konstrukcji takich selektorów wygląda następująco:
rodzic potomek { cecha: wartość }
W naszym powyższym przykładzie rodzicem jest wiec znacznik <p>, a potomkiem znacznik <b>.
Oczywiście nie musimy się ograniczać tylko do jednego rodzica, możemy zrobić np. coś takiego:
table p b { color: red }
Zapis taki sprawi, że kolorowany na czerwono będzie tylko taki znacznik <b>, który znajdować się będzie w znaczniku <p>, który to z koleji znajdować się będzie w znaczniku <table>.
Takie konstrukcje można tworzyć w nieskończoność, na zasadzie:
[prapra...] pradziadek dziadek rodzic potomek { cecha: wartość }
Warto jedynie pamiętać o odpowiedniej hierarchi.
Wyobraźmy teraz sobie sytuację, że chcemy określić regułę dla każdego znacznika <b> na naszej stronie, tak aby każdy znacznik <b> kolorował tekst w nim zawarty na czerwono. Zrobimy to tak:
b { color: red }
Proste. Ale wobraźmy sobie teraz, że chcemy aby ta reguła obowiązywała tylko wtedy, gdy pogrubiany tekst znajdować się będzie pomiędzy znacznikami <p></p>. Poza tymi znacznikami nie chcemy, żeby reguła obowiązywała. Jak to zrobimy? Za pomocą selektora potomnego.
Popatrzmy na poniższy zapis:
p b { color: red }
Zapis taki określa nam regułę dla znaczników <b>, która mówi o kolorze czerwonym, ale wtedy i tylko wtedy, gdy znacznik <b> znajduje się wewnątrz znacznika <p>. Jeśli znacznik <b> w naszym dokumencie nie będzie zawierać się w znaczniku <p> to nie zostanie on pokolorowany na czerwono.
Ogólna reguła konstrukcji takich selektorów wygląda następująco:
rodzic potomek { cecha: wartość }
W naszym powyższym przykładzie rodzicem jest wiec znacznik <p>, a potomkiem znacznik <b>.
Oczywiście nie musimy się ograniczać tylko do jednego rodzica, możemy zrobić np. coś takiego:
table p b { color: red }
Zapis taki sprawi, że kolorowany na czerwono będzie tylko taki znacznik <b>, który znajdować się będzie w znaczniku <p>, który to z koleji znajdować się będzie w znaczniku <table>.
Takie konstrukcje można tworzyć w nieskończoność, na zasadzie:
[prapra...] pradziadek dziadek rodzic potomek { cecha: wartość }
Warto jedynie pamiętać o odpowiedniej hierarchi.
Selektor dziecka
Selektor ten jest bardzo podobny do selektora potomka, jednak różni się pewnym istotnym szczegółem. Jaka jest więc różnica pomiędzy tymi dwoma selektorami? Po pierwsze w zapisie:
p > b { color: red }
Zapis taki sprawi, tak jak w poprzednim przykładzie - pokolorowanie znaczników <b> na czerwono w przypadku, gdy znacznik <b> znajdować się będzie wewnątrz znacznika <p>. Różnica jest jednak taka, iż znacznik <b> musi znajdować się dokładnie o jeden rząd niżej niż znacznik <p>. Różnica w stosunku do selektora potomka jest więc taka, iż o ile w przypadku selektora potomka, znacznik nie musi leżeć bezpośrednio jako następny w hierarchi, o tyle w przypadku selektora dziecka - musi tak być. Można to zobrazować tak:
W przypadku selektora potomka, potomek jest potomkiem zarówno rodzica, jak i dziadka, a także pradziadka itd.
W przypadku selektora dziecka, potomek jest potomkiem jedynie swojego bezpośredniego rodzica.
Selektor braci
Jest to specyficzny selektor. Jego działanie może wydawać się z początku dość skomplikowane, jednak takie nie jest. Selektor ten działa na dany znacznik, tylko pod warunkiem, jeśli ten znajduje się bezpośrednio za innym znacznikiem.
Jako przykład możemy podać coś takiego:
a + b { color: red }
Zapis taki sprawi, iż w dokumencie na czerwono pokolorowany zostanie znacznik <b> wtedy i tylko wtedy, gdy bezpośrednio przed nim wystąpi znacznik <a>. Pamiętać należy jednak, iż muszą one być obok siebi w hierarchi - a więc znacznik <a> nie może być rodzicem znacznika <b>. Musi być jego bratem. Znacznik ten zadziała tylko raz. Jeśli chcemy, aby zadziałał na "wszystkich braci", musimy użyć zapisu:
a ~ b { color: red }
W praktyce jest to praktycznie nieużywany selektor, warto jednak mieć świadomość, że coś takiego istnieje.
Jako przykład możemy podać coś takiego:
a + b { color: red }
Zapis taki sprawi, iż w dokumencie na czerwono pokolorowany zostanie znacznik <b> wtedy i tylko wtedy, gdy bezpośrednio przed nim wystąpi znacznik <a>. Pamiętać należy jednak, iż muszą one być obok siebi w hierarchi - a więc znacznik <a> nie może być rodzicem znacznika <b>. Musi być jego bratem. Znacznik ten zadziała tylko raz. Jeśli chcemy, aby zadziałał na "wszystkich braci", musimy użyć zapisu:
a ~ b { color: red }
W praktyce jest to praktycznie nieużywany selektor, warto jednak mieć świadomość, że coś takiego istnieje.
Selektory atrybutów
Omówilismy selektory elementów, czas teraz na selektory atrybutów. Czym się różnią? Przede wszystkim ich działanie zależne jest od atrybutów jakie nadaliśmy w dokumencie naszym znacznikom. Pozwala to na precyzyjne dostosowywanie styli tylko do określonych znaczników. Jak to wygląda w praktyce? Bardzo prosto. Popatrzmy na przykład:
p[title] { color: red }
Selektor ten zadziała jedynie na te znaczniki <p>, które będą mieć określony atrybut "title". Ogólna składnia takiego selektora wygląda więc następująco:
selektor[atrybut] { cecha: wartość }
Co jednak jeśli chcemy, aby nasz selektor zadziałał na znaczniki, które posiadają określony atrybut o odpowiedniej wartości?
Na przykład - jak zrobić, żeby nasz selektor zadziałał jedynie na znaczniki <p>, które posiadają atrybut "title" o wartości "Mona Lisa"?
Bardzo prosto:
p[title="Mona Lisa"] { color: red }
Selektor taki będzie zastosowany jedynie dla znaczników:
<p title="Mona Lisa"></p>
Ogólna składnia wygląda więc następująco:
selektor[atrybut="wartość_atrybutu"] { cecha: wartość }
Istnieje jeszcze kilka bardziej skomplikowanych kombinacji, opiszę je jednak jedynie w skrócie, gdyż rzadko będziemy z nich korzystać:
selektor[atrybut~="wyraz"] { cecha: wartość }
zadziała na atrybut, który w wartości będzie posiadał określony "wyraz"
selektor[atrybut^="początek"] { cecha: wartość }
zadziała na atrybut, którego wartość zaczynać się będzie od "początek"
selektor[atrybut$="koniec"] { cecha: wartość }
zadziała na atrybut, którego wartość kończyć się będzie na "koniec"
selektor[atrybut*="tekst"] { cecha: wartość }
zadziała na atrybut, którego wartość zawierać będzie w sobie "tekst"
Selektory atrybutów możemy naturalnie łączyć, a robimy to na zasadzie:
p[title="Mona Lisa"][align] { color: red }
Powyższy selektor zostanie zastosowany jedynie dla znaczników <p>, które posiadać będą atrybut "title" o wartości "Mona Lisa" oraz będą mieć określony atrybut "align".
p[title] { color: red }
Selektor ten zadziała jedynie na te znaczniki <p>, które będą mieć określony atrybut "title". Ogólna składnia takiego selektora wygląda więc następująco:
selektor[atrybut] { cecha: wartość }
Co jednak jeśli chcemy, aby nasz selektor zadziałał na znaczniki, które posiadają określony atrybut o odpowiedniej wartości?
Na przykład - jak zrobić, żeby nasz selektor zadziałał jedynie na znaczniki <p>, które posiadają atrybut "title" o wartości "Mona Lisa"?
Bardzo prosto:
p[title="Mona Lisa"] { color: red }
Selektor taki będzie zastosowany jedynie dla znaczników:
<p title="Mona Lisa"></p>
Ogólna składnia wygląda więc następująco:
selektor[atrybut="wartość_atrybutu"] { cecha: wartość }
Istnieje jeszcze kilka bardziej skomplikowanych kombinacji, opiszę je jednak jedynie w skrócie, gdyż rzadko będziemy z nich korzystać:
selektor[atrybut~="wyraz"] { cecha: wartość }
zadziała na atrybut, który w wartości będzie posiadał określony "wyraz"
selektor[atrybut^="początek"] { cecha: wartość }
zadziała na atrybut, którego wartość zaczynać się będzie od "początek"
selektor[atrybut$="koniec"] { cecha: wartość }
zadziała na atrybut, którego wartość kończyć się będzie na "koniec"
selektor[atrybut*="tekst"] { cecha: wartość }
zadziała na atrybut, którego wartość zawierać będzie w sobie "tekst"
Selektory atrybutów możemy naturalnie łączyć, a robimy to na zasadzie:
p[title="Mona Lisa"][align] { color: red }
Powyższy selektor zostanie zastosowany jedynie dla znaczników <p>, które posiadać będą atrybut "title" o wartości "Mona Lisa" oraz będą mieć określony atrybut "align".
Selektor klasy (class)
Jest to bardzo ważna część naszej lekcji, gdyż selektorów klas używać będziemy praktycznie przez cały czas podczas naszej pracy. Czym zatem są selektory klas i jaka jest różnica pomiędzy nimi, a selektorami opisywanymi wcześniej?
Otóż jak już wiemy, zarówno selektory elementów jak i selektory atrybutów odnosiły się bezpośrednio do określonej grupy znaczników, tak więc podając reguły dla znacznika <p> jednocześnie sprawialiśmy, że reguła ta zaczynała obowiązywać do WSZYSTKICH znaczników <p> na naszej stronie.
Co jeśli jednak chcemy, aby nasza reguła działała jedynie na pewne określone przez nas elementy? Trzeba będzie skorzystać z selektorów klas.
Przykład:
Wyobraźmy sobie, że mamy w naszym dokumencie jakiś artykuł, który składa się z tytułu, treści i informacji o autorze.
Mamy więc taki oto kod:
<p>Tytuł artykułu</p>
<p>Treść atrykułu</p>
<p>Informacje o autorze</p>
Chcemy, aby tytuł atrykułu był wyświetlony np. czcionką czerwoną i pogrubiony. Treść ma być natomiast wyświetlona normalną, czarną czcionką, a informacja o autorze czcionką szarą i pogrubioną. Jeśli skorzystalibyśmy z selektora elementu, to okreslony selektor dla <p> dotyczyłby wszystkich znaczników <p> na naszej stronie. Skorzystamy więc z tzw. klas selektorów.
Ogólna postać takiej klasy wygląda następująco:
selektor.klasa { cecha: wartość }
Gdzie klasa to nazwa naszej wymyślonej klasy.
Chcemy zmienić formatowanie artykułu, zrobimy to tak:
p.tytul { color:red; font-weight: bold }
p.tresc { color: black }
p.autor { color: silver; font-weight:bold }
Następnie w naszym dokumencie HTML przypiszemy stworzone klasy do naszych elementów. Zrobimy to tak:
<p class="tytul">Tytuł artykułu</p>
<p class="tresc">Treść atrykułu</p>
<p class="autor">Informacje o autorze</p>
Jak widzimy, używanie klas jest banalnie proste. Warto jednak pamiętać o kilku rzeczach. Przede wszystkim nazwy naszych klas nie mogą zawierać w sobie znaków specjalnych. Dopuszczalne znaki z jakich składać się może nazwa klasy to litery [A-Z,a-z], cyfry [0-9], myślniki "-" i podkreślniki "_". Poza tym, nazwa zawsze musi rozpoczynać się od litery, nigdy od cyfry. Nie należy również używać polskich znaków.
Warto również wiedzieć, że do danego elementu możemy przypisać więcej niż jedną klasę, a robimy to na zasadzie:
<selektor class="klasa1 klasa2 klasa3 ...">...</a>
Na przykład:
<p class="tytul tresc autor">...</p>
Spowoduje przypisanie do znacznika <p> cech ze wszystkich 3 klas. Kolejność wpisywania nazw naszych klas nie ma znaczenia, w przypadku wyświetlania ma zastosowanie zasada kaskadowości, o której wspominaliśmy na początku naszej lekcji.
Otóż jak już wiemy, zarówno selektory elementów jak i selektory atrybutów odnosiły się bezpośrednio do określonej grupy znaczników, tak więc podając reguły dla znacznika <p> jednocześnie sprawialiśmy, że reguła ta zaczynała obowiązywać do WSZYSTKICH znaczników <p> na naszej stronie.
Co jeśli jednak chcemy, aby nasza reguła działała jedynie na pewne określone przez nas elementy? Trzeba będzie skorzystać z selektorów klas.
Przykład:
Wyobraźmy sobie, że mamy w naszym dokumencie jakiś artykuł, który składa się z tytułu, treści i informacji o autorze.
Mamy więc taki oto kod:
<p>Tytuł artykułu</p>
<p>Treść atrykułu</p>
<p>Informacje o autorze</p>
Chcemy, aby tytuł atrykułu był wyświetlony np. czcionką czerwoną i pogrubiony. Treść ma być natomiast wyświetlona normalną, czarną czcionką, a informacja o autorze czcionką szarą i pogrubioną. Jeśli skorzystalibyśmy z selektora elementu, to okreslony selektor dla <p> dotyczyłby wszystkich znaczników <p> na naszej stronie. Skorzystamy więc z tzw. klas selektorów.
Ogólna postać takiej klasy wygląda następująco:
selektor.klasa { cecha: wartość }
Gdzie klasa to nazwa naszej wymyślonej klasy.
Chcemy zmienić formatowanie artykułu, zrobimy to tak:
p.tytul { color:red; font-weight: bold }
p.tresc { color: black }
p.autor { color: silver; font-weight:bold }
Następnie w naszym dokumencie HTML przypiszemy stworzone klasy do naszych elementów. Zrobimy to tak:
<p class="tytul">Tytuł artykułu</p>
<p class="tresc">Treść atrykułu</p>
<p class="autor">Informacje o autorze</p>
Jak widzimy, używanie klas jest banalnie proste. Warto jednak pamiętać o kilku rzeczach. Przede wszystkim nazwy naszych klas nie mogą zawierać w sobie znaków specjalnych. Dopuszczalne znaki z jakich składać się może nazwa klasy to litery [A-Z,a-z], cyfry [0-9], myślniki "-" i podkreślniki "_". Poza tym, nazwa zawsze musi rozpoczynać się od litery, nigdy od cyfry. Nie należy również używać polskich znaków.
Warto również wiedzieć, że do danego elementu możemy przypisać więcej niż jedną klasę, a robimy to na zasadzie:
<selektor class="klasa1 klasa2 klasa3 ...">...</a>
Na przykład:
<p class="tytul tresc autor">...</p>
Spowoduje przypisanie do znacznika <p> cech ze wszystkich 3 klas. Kolejność wpisywania nazw naszych klas nie ma znaczenia, w przypadku wyświetlania ma zastosowanie zasada kaskadowości, o której wspominaliśmy na początku naszej lekcji.
Podzbiory klas
Możemy określać trochę bardziej złożone reguły, niż oparte na jednej tylko klasie. Jak to działa? Otóż popatrzmy na przykład:
p.tytul { font-weight: bold }
p.artykul.tytul { color: red }
p.wiadomosc.tytul { color: orange }
Pierwsza klasa "tytul" pogrubia tekst.
Dwie pozostałe klasy mają również nazwę "tytul" jednak należą do dwóch różnych podzbiorów. Obie możemy wykorzystać w kodzie HTML w następujący sposób:
<p class="artykul tytul">Tytuł atrykułu</p>
<p class="wiadomosc tytul">Tytuł wiadomości</p>
Jak widać, oba tytuły wyświetlone zostaną pogrubione, jednak tytuł artykułu zostanie wyświetlony na czerwono, a tytuł wiadomości na pomarańczowo.
Jest to bardzo przydatne, ponieważ gdyby nie taka możliwość, to musielibyśmy stworzyć dwie klasy:
p.artykul_tytul { color: red; font-weight: bold }
p.wiadomosc_tytul { color: orange; font-weight: bold }
Co automatycznie stałoby się mniej czytelne, poza tym różnych "tytułów" w dokumencie może przecież pojawić się więcej. A tak, mamy wszystko pięknie i logicznie - klasa "tytuł" zawsze odpowiada za tytuł. Jest czytelnie i logicznie.
Co jeszcze warto wiedzieć o klasach? Przede wszystkim warto pamiętać, że nie musimy korzystać z selektora, możemy określić klasę dla wszystkich elementów. Jak to wygląda? Popatrzmy:
p.klasa { color: red }
stworzy nam klasę jedynie dla elementów <p>.
Możemy skorzystać z selektora uniwersalnego i stworzyć coś takiego:
*.klasa { color: red }
Taka klasa będzie mogła zostać użyta do każdego elementu, nie tylko do <p>.
Gwiazdkę najczęściej się pomija i tego typu klasy definiuje się po prostu jako:
.klasa {color: red }
p.tytul { font-weight: bold }
p.artykul.tytul { color: red }
p.wiadomosc.tytul { color: orange }
Pierwsza klasa "tytul" pogrubia tekst.
Dwie pozostałe klasy mają również nazwę "tytul" jednak należą do dwóch różnych podzbiorów. Obie możemy wykorzystać w kodzie HTML w następujący sposób:
<p class="artykul tytul">Tytuł atrykułu</p>
<p class="wiadomosc tytul">Tytuł wiadomości</p>
Jak widać, oba tytuły wyświetlone zostaną pogrubione, jednak tytuł artykułu zostanie wyświetlony na czerwono, a tytuł wiadomości na pomarańczowo.
Jest to bardzo przydatne, ponieważ gdyby nie taka możliwość, to musielibyśmy stworzyć dwie klasy:
p.artykul_tytul { color: red; font-weight: bold }
p.wiadomosc_tytul { color: orange; font-weight: bold }
Co automatycznie stałoby się mniej czytelne, poza tym różnych "tytułów" w dokumencie może przecież pojawić się więcej. A tak, mamy wszystko pięknie i logicznie - klasa "tytuł" zawsze odpowiada za tytuł. Jest czytelnie i logicznie.
Co jeszcze warto wiedzieć o klasach? Przede wszystkim warto pamiętać, że nie musimy korzystać z selektora, możemy określić klasę dla wszystkich elementów. Jak to wygląda? Popatrzmy:
p.klasa { color: red }
stworzy nam klasę jedynie dla elementów <p>.
Możemy skorzystać z selektora uniwersalnego i stworzyć coś takiego:
*.klasa { color: red }
Taka klasa będzie mogła zostać użyta do każdego elementu, nie tylko do <p>.
Gwiazdkę najczęściej się pomija i tego typu klasy definiuje się po prostu jako:
.klasa {color: red }
Selektor identyfikatora (id)
Jest bardzo podobny w użyciu co selektor klasy, jednakże jest pewna dość istotna różnica, o której za chwilę. Selektor identyfikatora tworzymy w następujący sposób:
selektor#identyfikator { cecha: wartość }
Na przykład:
p#tytul { color: red }
Selektor identyfikatora odnosi się do atrybutu "id" nadanego danemu elementowi. O atrybutach "id" (czyli identyfikatorach) mówiliśmy w poprzedniej lekcji. Powyższy selektor dotyczyć więc będzie następującego elementu:
<div id="tytul">...</div>
Jaka jest różnica pomiędzy selektorem identyfikatora, a selektorem klasy? Otóż dany identyfikator występuje na stronie TYLKO RAZ (identyfikator musi być unikalny dla każdego elementu). Klas natomiast może być na stronie nieskończona ilość. Taka jest różnica. Ograniczenia i zasady tworzenia tego typu selektorów są takie same jak przy selektorach klas, a więc używamy jedynie odpowiednich znaków takich jak litery, cyfry, myślnik i podkreślnik, zaś nazwę zawsze rozpoczynamy od litery, nigdy od cyfry. Nie używamy też polskich znaków. Podobnie jak w przypadku klas, także i tutaj możemy wykorzystać selektor uniwersalny:
*#identyfikator { color: red }
I podobnie jak w tamtym przypadku, również tutaj zazwyczaj gwiazdkę pomijamy i zapisujemy po prostu:
#identyfikator { color: red }
selektor#identyfikator { cecha: wartość }
Na przykład:
p#tytul { color: red }
Selektor identyfikatora odnosi się do atrybutu "id" nadanego danemu elementowi. O atrybutach "id" (czyli identyfikatorach) mówiliśmy w poprzedniej lekcji. Powyższy selektor dotyczyć więc będzie następującego elementu:
<div id="tytul">...</div>
Jaka jest różnica pomiędzy selektorem identyfikatora, a selektorem klasy? Otóż dany identyfikator występuje na stronie TYLKO RAZ (identyfikator musi być unikalny dla każdego elementu). Klas natomiast może być na stronie nieskończona ilość. Taka jest różnica. Ograniczenia i zasady tworzenia tego typu selektorów są takie same jak przy selektorach klas, a więc używamy jedynie odpowiednich znaków takich jak litery, cyfry, myślnik i podkreślnik, zaś nazwę zawsze rozpoczynamy od litery, nigdy od cyfry. Nie używamy też polskich znaków. Podobnie jak w przypadku klas, także i tutaj możemy wykorzystać selektor uniwersalny:
*#identyfikator { color: red }
I podobnie jak w tamtym przypadku, również tutaj zazwyczaj gwiazdkę pomijamy i zapisujemy po prostu:
#identyfikator { color: red }
Selektory pseudoelementów
Niestety nie możemy bezpośrednio odnosić się do pewnych elementów na naszej stronie. Przykładowo: możemy odnieść się do całego akapitu, ale nie możemy np. bezpośrednio do pierwszej litery tekstu w nim zawartego. Czasami jednak chcemy np. wyróżnić pierwszą literę, jak to zrobić? Można to oczywiście zrobić ręcznie, jednak jest to niezbyt ekonomiczne rozwiązanie. Do tego celu stworzono więc tzw. pseudoelementy.
Istnieje kilka takich pseudoelementów, opiszę je tutaj pokrótce:
p:first-line { color: red }
Zapis taki sprawi, że na czerwono zostanie pokolorowana jedynie pierwsza linijka tekstu znajdującego się w <p></p>.
Słowo "first-line" (z ang. pierwsza linia) jest tutaj pseudoelementem elementu "p". Podobnie wygląda sprawa, gdy chcemy pokolorować jedynie pierwszą literę w naszym akapicie, używamy w tym przypadku pseudoelementu "first-letter" (z ang. pierwsza litera), robimy to tak:
p:first-letter { color: red }
Podobną składnię posiadają następne pseudoelementy - before (przed) i after (po). Pseudoelement "before" zadziała na zawartość, która znajdować się będzie przed pewnym określonym tekstem.
Istnieje kilka takich pseudoelementów, opiszę je tutaj pokrótce:
p:first-line { color: red }
Zapis taki sprawi, że na czerwono zostanie pokolorowana jedynie pierwsza linijka tekstu znajdującego się w <p></p>.
Słowo "first-line" (z ang. pierwsza linia) jest tutaj pseudoelementem elementu "p". Podobnie wygląda sprawa, gdy chcemy pokolorować jedynie pierwszą literę w naszym akapicie, używamy w tym przypadku pseudoelementu "first-letter" (z ang. pierwsza litera), robimy to tak:
p:first-letter { color: red }
Podobną składnię posiadają następne pseudoelementy - before (przed) i after (po). Pseudoelement "before" zadziała na zawartość, która znajdować się będzie przed pewnym określonym tekstem.
Użycie:
p:before {
content: "treść";
color: red
}
Sprawi, że wszystko to co znajdować się będzie przed pierwszym napotkanym słowem "treść" zostanie pokolorowane na czerwono. Jak widzimy, najpierw podajemy tutaj warunek (content: "treść"), a następnie informacje o formatowaniu.
Analogicznie ma się sprawa z pseudoelementem "after", która zadziała nam na tekst znajdujący się PO zadanym słowie:
p:after {
content: "treść";
color: red
}
Sprawi, że wszystko to co znajdzie się po słowie "treść" zostanie pokolorowane na kolor czerwony. Ogólna definicja pseudoelementu wygląda zatem następująco:
selektor:pseudoelement { cecha: wartość }
p:before {
content: "treść";
color: red
}
Sprawi, że wszystko to co znajdować się będzie przed pierwszym napotkanym słowem "treść" zostanie pokolorowane na czerwono. Jak widzimy, najpierw podajemy tutaj warunek (content: "treść"), a następnie informacje o formatowaniu.
Analogicznie ma się sprawa z pseudoelementem "after", która zadziała nam na tekst znajdujący się PO zadanym słowie:
p:after {
content: "treść";
color: red
}
Sprawi, że wszystko to co znajdzie się po słowie "treść" zostanie pokolorowane na kolor czerwony. Ogólna definicja pseudoelementu wygląda zatem następująco:
selektor:pseudoelement { cecha: wartość }
Selektory pseudoklas
Co to są pseudoklasy? Otóż są to pewne właściwości, które nabywają elementy strony w procesie np. interakcji z użytkownikiem. Przykładem mogą być tutaj np. opisywane w poprzedniej lekcji hiperłącza. Hiperłącze jak pamiętamy może uzyskać 4 różne pseudoklasy: link, active, visited i hover. Jak się do nich odnieść za pomocą pseudoklas? W bardzo prosty sposób. Podobnie jak w poprzednim przypadku nazwę pseudoklasy podajemy po znaku dwukropka (:). Definicja pseudoklasy wygląda zatem następująco:
selektor:pseudoklasa { cecha: wartość }
Hiperłącza
Opiszę sposób działania na przykładzie określania stylu dla hiperłączy.
Jak pamiętamy każde hiperłącze posiada 4 różne pseudoklasy:
selektor:pseudoklasa { cecha: wartość }
Hiperłącza
Opiszę sposób działania na przykładzie określania stylu dla hiperłączy.
Jak pamiętamy każde hiperłącze posiada 4 różne pseudoklasy:
- "link", która wskazuje na nieodwiedzony jeszcze link,
- "active", która wskazuje na link, gdy przytrzymamy na nim wciśnięty przycisk myszki,
- "visited", która wskazuje na link już odwiedzony,
- "hover", która wskazuje na link w momencie najechania na niego myszką.
Pseudoklasy dla naszych hiperłączy zdefiniujemy więc np. następująco:
a:link { color: red }
a:active { color: red }
a:visited { color: red }
a:hover { color: orange }
Zogniskowanie (focus)
Jest to pseudoklasa używana głównie podczas pracy na formularzach, których jeszcze nie omawialiśmy, jednakże opiszę pokrótce jej działanie. Otóż, jak zapewne każdy zauważył - podczas wypełniania danego formularza zawsze tylko jedno z pól, w które wpisujemy dane jest aktywne. Mówi się wtedym, iż takie pole otrzymało "fokusa". Pseudoklasę "focus" opisujemy dla danego elementu w następujący sposób:
textarea:focus { color: red }
Zapis taki spowoduje, że podczas uzyskania "fokusa" przez pole tekstowe formularza (textarea) kolor czcionki w nim zmieni się na czerwony. Opiszemy to dokładniej przy okazji omawiania formularzy. Narazie taka krótka informacja na ten temat musi nam wystarczyć.
Pseudoklasy dla naszych hiperłączy zdefiniujemy więc np. następująco:
a:link { color: red }
a:active { color: red }
a:visited { color: red }
a:hover { color: orange }
Zogniskowanie (focus)
Jest to pseudoklasa używana głównie podczas pracy na formularzach, których jeszcze nie omawialiśmy, jednakże opiszę pokrótce jej działanie. Otóż, jak zapewne każdy zauważył - podczas wypełniania danego formularza zawsze tylko jedno z pól, w które wpisujemy dane jest aktywne. Mówi się wtedym, iż takie pole otrzymało "fokusa". Pseudoklasę "focus" opisujemy dla danego elementu w następujący sposób:
textarea:focus { color: red }
Zapis taki spowoduje, że podczas uzyskania "fokusa" przez pole tekstowe formularza (textarea) kolor czcionki w nim zmieni się na czerwony. Opiszemy to dokładniej przy okazji omawiania formularzy. Narazie taka krótka informacja na ten temat musi nam wystarczyć.
Cechy i własności w CSS
Każdy z elementów naszej strony może posiadać pewne cechy i własności. Część z tych własności jest wspólna dla większości elementów, jednakże bardzo dużo z nich dotyczy jedynie wąskiej grupy elementów. Przykład: dla obrazka nie podamy własności mówiącej o rodzaju czcionki, za pomocą której ma zostać wyświetlony :) Oczywiście możemy podać, jednak nie da nam to żadnego efektu. Pełna lista wszystkich cech i własności to temat bardzo obszerny i powszechnie dostępny w internecie.
Bardzo dokładne opisanie większości własności możecie znaleźć np. na poniższej stronie:
http://www.kurshtml.edu.pl/css/czcionki.html
Polecam tą stronę również jako uzupełnienie pozostałych informacji.
Pełną listę własności oraz dokładną, oficjalną specyfikację CSS znajdziecie natomiast tutaj:
http://www.w3schools.com/css/
W następnej lekcji omówimy poszczególne własności wraz z krótkimi przykładami.
Na chwilę obecną możecie zapoznać się już z przykładem nr3 - "Lekcja4_przyklad_3.html" i popatrzeć sobie jak to mniej więcej będzie wyglądać. Arkusz do niego znajduje się w pliku "css/przyklad3.css". Do zobaczenia w następnej lekcji. Do tego czasu radzę poćwiczyć i poeksperymentować z własnymi stylami CSS.
| << poprzednia lekcja | [ spis treści] | nastepna lekcja >> |
Brak komentarzy:
Prześlij komentarz