16. ┼ü─ůcza

> Dodaj do ulubionych

Paul Erd┼Ĺs by┼é wybitnym matematykiem w─Ögierskiego pochodzenia. Zajmowa┼é si─Ö r├│┼╝nymi dziedzinami matematyki, np. teori─ů graf├│w i kombinatoryk─ů.

Nauczyciel pokazuj─ůcy co┼Ť dzieciom na tablicy

Zas┼éyn─ů┼é te┼╝ tym, ┼╝e we wsp├│┼épracy z innymi matematykami napisa┼é ogromn─ů liczb─Ö prac (ponad 1500). W zwi─ůzku z tym jego przyjaciele wymy┼Ťlili w ramach uznania dla jego wk┼éadu w nauk─Ö tzw. liczb─Ö Erd┼Ĺsa. Sam Erd┼Ĺs ma liczb─Ö Erd┼Ĺsa 0, osoba kt├│ra napisa┼éa z nim artyku┼é ma liczb─Ö Erd┼Ĺsa 1, osoba kt├│ra napisa┼éa artyku┼é z t─ů osob─ů, ma liczb─Ö Erd┼Ĺsa 2 itd.

Paul Erd┼Ĺs by┼é niezwykle barwnym i ciekawym cz┼éowiekiem, o kt├│rym warto dowiedzie─ç si─Ö wi─Öcej. Dodamy wi─Öc o nim stron─Ö do naszej witryny o ciekawych ludziach i umie┼Ťcimy do niej ┼é─ůcze w menu oraz w artykule o FeynmanieÔÇŽ

S─ů tylko dwa problemy. Po pierwsze nie mamy jeszcze menu, a po drugie nie umiemy tworzy─ç ┼é─ůczy do stron internetowych. Tworzeniem menu zajmiemy si─Ö w jednym z dalszych rozdzia┼é├│w, a w tym nauczymy si─Ö tworzy─ç ┼é─ůcza (linki HTML, odno┼Ťniki, hiper┼é─ůcza).

┼ü─ůcza do stron i innych plik├│w

Do tworzenia ┼é─ůczy na stronach internetowych s┼éu┼╝y element a (ang. anchor ÔÇô kotwica). Jego najwa┼╝niejszym atrybutem jest href (ang. hypertext reference ÔÇô odno┼Ťnik hipertekstowy), kt├│rego warto┼Ťci─ů powinien by─ç adres strony internetowej, np.:

<a href="https://shebang.pl" title="Strona z ciekawym kursem HTML i CSS">Shebang.pl</a>

Powy┼╝szy element tworzy odno┼Ťnik do strony Shebang.pl. Tekst znajduj─ůcy si─Ö mi─Ödzy znacznikami otwieraj─ůcym <a> i zamykaj─ůcym </a> zostanie wy┼Ťwietlony jako hiper┼é─ůcze, kt├│rego klikni─Öcie spowoduje przej┼Ťcie do strony Shebang.pl. Sprawd┼║ to: Shebang.pl.

Adresy stron, podobnie jak ┼Ťcie┼╝ki do obraz├│w, mog─ů by─ç zar├│wno wzgl─Ödne, jak i bezwzgl─Ödne.

Adresy wzgl─Ödne i bezwzgl─Ödne

Adres wzgl─Ödny (ang. relative address) okre┼Ťla po┼éo┼╝enie pliku na serwerze wzgl─Ödem bie┼╝─ůcej strony lub katalogu g┼é├│wnego. Poni┼╝sze ┼é─ůcze odnosi si─Ö do pliku feynman.html znajduj─ůcego si─Ö w tym samym folderze, co strona, na kt├│rej je umieszczono:

<a href="feynman.html">Richard Feynman</a>

To ┼é─ůcze zawiera adres wzgl─Ödny w odniesieniu do folderu bie┼╝─ůcego. A teraz sp├│jrz na poni┼╝sze ┼é─ůcze:

<a href="/img/feynman.png">Zdj─Öcie Feynmana</a>

To ┼é─ůcze odnosi si─Ö do pliku feynman.png znajduj─ůcego si─Ö w folderze img witryny niezale┼╝nie od tego, gdzie znajduje si─Ö zawieraj─ůca je strona. Jego adres jest wzgl─Ödny w odniesieniu do katalogu g┼é├│wnego witryny na serwerze.

Opr├│cz ┼é─ůczy wzgl─Ödnych, mo┼╝na te┼╝ tworzy─ç ┼é─ůcza bezwzgl─Ödne (ang. absolute link), kt├│re zawieraj─ů ca┼éy adres URL pliku z uwzgl─Ödnieniem protoko┼éu i domeny, np.:

<a href="https://shebang.pl">Shebang.pl</a>

W wielu przypadkach wyb├│r mi─Ödzy ┼é─ůczem wzgl─Ödnym i bezwzgl─Ödnym nie ma wi─Ökszego znaczenia, ale ┼é─ůcza wzgl─Ödne maj─ů pewn─ů przewag─Ö nad bezwzgl─Ödnymi: kiedy zmienimy domen─Ö naszej witryny, nie b─Ödziemy musieli przerabia─ç wszystkich odno┼Ťnik├│w przez wstawienie do nich nowej nazwy domeny.

Obrazy jako ┼é─ůcza

Element a jako tre┼Ť─ç mo┼╝e zawiera─ç nie tylko tekst, ale tak┼╝e grafik─Ö. Wtedy obraz staje si─Ö odno┼Ťnikiem, kt├│ry mo┼╝na klikn─ů─ç, aby przej┼Ť─ç do wskazywanego zasobu, np.:

<a href="https://shebang.pl"><img src="img/feynman.png" alt="Richard Feynman ze swoimi b─Öbnami" width="300" height="241"></a>

Mo┼╝liwo┼Ť─ç tworzenia odno┼Ťnik├│w graficznych wykorzystuje si─Ö na przyk┼éad w galeriach zdj─Ö─ç, w kt├│rych wy┼Ťwietlone s─ů tylko miniatury obraz├│w. Klikni─Öcie miniatury powoduje otwarcie w oknie przegl─ůdarki pe┼énowymiarowej grafiki.

Umiesz ju┼╝ tworzy─ç ┼é─ůcza do innych stron i zasob├│w, ale j─Özyk HTML umo┼╝liwia tak┼╝e tworzenie odno┼Ťnik├│w do miejsc w obr─Öbie tej samej strony. Przyjrzymy si─Ö im teraz.

W─Öze┼é obejmuj─ůcy ga┼é─ů┼║

┼ü─ůcza w obr─Öbie strony

Je┼Ťli tre┼Ť─ç strony jest d┼éuga, jak jest na przyk┼éad w przypadku tej strony, to czasami przydaj─ů si─Ö odno┼Ťniki do innych miejsc w jej obr─Öbie. Powiedzmy, ┼╝e chcemy teraz przywo┼éa─ç posta─ç Paula Erd┼Ĺsa opisan─ů na samym pocz─ůtku tego rozdzia┼éu. Klikni─Öcie ┼é─ůcza znajduj─ůcego si─Ö w poprzednim zdaniu przeniesie Ci─Ö do odpowiedniego miejsca na tej stronie.

Tego typu odno┼Ťniki tak┼╝e tworzymy za pomoc─ů elementu a, tylko z odpowiednio spreparowanym adresem w atrybucie href. Adres ten musi odnosi─ç si─Ö do wybranego miejsca na stronie. Aby mo┼╝na by┼éo odwo┼éa─ç si─Ö do wybranego miejsca na stronie, nale┼╝y je jako┼Ť oznaczy─ç. Do tego celu s┼éu┼╝y identyfikator elementu, kt├│ry definiujemy w atrybucie id.

Identyfikatory element├│w

W j─Özyku HTML istnieje globalny atrybut id, za pomoc─ů kt├│rego mo┼╝na nada─ç dowolnemu elementowi identyfikator, aby go jednoznacznie zidentyfikowa─ç.

Na stronie HTML mo┼╝e znajdowa─ç si─Ö tylko jeden element o okre┼Ťlonym identyfikatorze, a zasady nadawania nazw identyfikatorom s─ů takie same, jak zasady nadawania nazw klasom.

Stwierdzili┼Ťmy, ┼╝e chcemy utworzy─ç ┼é─ůcze do fragmentu strony po┼Ťwi─Öconego Paulowi Erd┼Ĺsowi. Aby m├│c to zrobi─ç, musimy przypisa─ç identyfikator elementowi zawieraj─ůcemu ten tekst. Znajduje si─Ö on w akapicie, wi─Öc identyfikator nadamy elementowi p:

<p id="erdos">Paul Erd┼Ĺs by┼é wybitnym matematykiem w─Ögierskiego pochodzenia. Zajmowa┼é si─Ö r├│┼╝nymi dziedzinami matematyki, np. teori─ů graf├│w i kombinatoryk─ů.<p>

Teraz pierwszy akapit tekstu na temat Paula Erd┼Ĺsa ma identyfikator erdos, do kt├│rego b─Ödziemy mogli odwo┼éywa─ç si─Ö za pomoc─ů naszych odno┼Ťnik├│w. Takie odniesienie do fragmentu strony nazywa si─Ö identyfikatorem fragmentu (ang. fragment identifier).

Identyfikator fragmentu

Aby utworzy─ç odno┼Ťnik do elementu o okre┼Ťlonym identyfikatorze na stronie, nale┼╝y wpisa─ç w atrybucie href elementu a identyfikator fragmentu. Jego sk┼éadnia jest bardzo prosta: #identyfikator-elementu, np.:

<a href="#erdos">Paul Erd┼Ĺs</a>

Klikni─Öcie tego odno┼Ťnika spowoduje przeniesienie do miejsca na stronie, w kt├│rym zaczyna si─Ö element z atrybutem id="erdos".

Identyfikatory element├│w s─ů tak cz─Östo u┼╝ywane, ┼╝e dla nich, podobnie jak dla klas, w CSS utworzono specjalny selektor.

Selektor identyfikatora

Aby w CSS odnie┼Ť─ç si─Ö do elementu maj─ůcego zdefiniowany atrybut id z jak─ůkolwiek warto┼Ťci─ů, mo┼╝na pos┼éu┼╝y─ç si─Ö zwyk┼éym selektorem atrybutu, dok┼éadnie tak samo, jak w przypadku klas, np.:

p[id] {ÔÇŽ}

Albo bardziej szczegółowo:

p[id=erdos] {ÔÇŽ}

Ewentualnie bardziej og├│lnie:

[id=erdos] {ÔÇŽ}

Pierwszy z powy┼╝szych selektor├│w odnosi si─Ö do wszystkich element├│w p maj─ůcych atrybut id o jakiejkolwiek warto┼Ťci, drugi wybiera tylko ten element p, kt├│ry ma atrybut id o warto┼Ťci erdos, a trzeci odwo┼éuje si─Ö do dowolnego elementu maj─ůcego atrybut id o warto┼Ťci erdos.

Tej sk┼éadni jednak praktycznie si─Ö nie u┼╝ywa, poniewa┼╝ istnieje o wiele prostsza metoda ÔÇô selektor identyfikatora. Ma on posta─ç identyfikatora elementu poprzedzonego znakiem #, np.:

#erdos {ÔÇŽ}

Ten selektor odnosi si─Ö do dowolnego elementu maj─ůcego identyfikator erdos (atrybut id o warto┼Ťci erdos). Oczywi┼Ťcie w razie potrzeby mo┼╝na te┼╝ okre┼Ťli─ç typ elementu:

p#erdos {ÔÇŽ}

Jednak w przypadku selektora identyfikatora rzadko okre┼Ťla si─Ö typ elementu, poniewa┼╝ selektor ten z natury odnosi si─Ö do elementu, kt├│ry wyst─Öpuje tylko w jednym egzemplarzu na stronie.

Stylizacja ┼é─ůczy

Kobieta robi─ůca makija┼╝

┼ü─ůcza s─ů elementem tekstowym, wi─Öc do ich stylizacji mo┼╝na u┼╝ywa─ç wszystkich w┼éasno┼Ťci CSS odnosz─ůcych si─Ö do tekstu, takich jak font-size, font-weight, letter-spacing itd.

Na przyk┼éad regu┼éa a {color: green; text-decoration: none} zmienia kolor wszystkich odno┼Ťnik├│w na zielony i usuwa ich standardowe podkre┼Ťlenie. U┼╝yli┼Ťmy w niej w┼éasno┼Ťci text-decoration, kt├│rej jeszcze nie znamy. Na razie zapami─Ötaj, ┼╝e powy┼╝sza deklaracja usuwa podkre┼Ťlenie z ┼é─ůczy (a ┼╝eby je przywr├│ci─ç, nale┼╝y u┼╝y─ç warto┼Ťci underline). Dok┼éadniejszy opis znajdziesz w nast─Öpnym rozdziale.

Ponadto ┼é─ůcza s─ů te┼╝ elementem interaktywnym (pierwszym, kt├│ry poznali┼Ťmy w tym kursie). Ich interaktywno┼Ť─ç polega na tym, ┼╝e reaguj─ů na dzia┼éania u┼╝ytkownika. Ze wzgl─Ödu na t─Ö cech─Ö do ich stylizacji cz─Östo wykorzystuje si─Ö tak┼╝e specjalne interaktywne selektory, nazywane pseudoklasami (ang. pseudoclass).

Stylizacj─Ö ┼é─ůczy na stronie najlepiej jest uporz─ůdkowa─ç wed┼éug nast─Öpuj─ůcego schematu:

  • Najpierw nale┼╝y zdefiniowa─ç og├│lne style dotycz─ůce wszystkich ┼é─ůczy na stronie za pomoc─ů selektora a. Wprawdzie odnosz─ů si─Ö one zar├│wno do ┼é─ůczy do stron odwiedzonych, jak i nieodwiedzonych przez u┼╝ytkownika, ale nast─Öpne regu┼éy zmieni─ů ich ustawienia dla ┼é─ůczy odwiedzonych, wi─Öc regu┼é─Ö z selektorem a mo┼╝na traktowa─ç jako regu┼é─Ö dotycz─ůc─ů tylko ┼é─ůczy nieodwiedzonych.
  • Nast─Öpnie nale┼╝y zdefiniowa─ç pseudoklasy odnosz─ůce si─Ö do poszczeg├│lnych stan├│w ┼é─ůczy, a wi─Öc prowadz─ůcych do stron, kt├│re zosta┼éy odwiedzone, takich na kt├│re najechano kursorem oraz aktywnych.

Poniżej znajduje się dokładny opis wymienionych pseudoklas.

Pseudoklasy

Pseudoklasy CSS odnosz─ů si─Ö do element├│w nie wg ich miejsca w hierarchii drzewa dokumentu, typu lub cech budowy, tylko wed┼éug ich stan├│w, np. najechanie elementu kursorem, klikni─Öcie elementu itd.

Sk┼éadnia selektora pseudoklasy ma nast─Öpuj─ůc─ů posta─ç:

selektor:nazwa-pseudoklasy

Jak wida─ç, selektor pseudoklasy sk┼éada si─Ö z opcjonalnego dowolnego selektora CSS, dwukropka i nazwy pseudoklasy. Przed dwukropkiem mo┼╝e znajdowa─ç si─Ö dowolny selektor CSS, np. a[lang=en] lub po prostu a. Ten selektor mo┼╝e, ale nie musi, by─ç oddzielony od dwukropka spacj─ů. Na przyk┼éad, wszystkie poni┼╝sze definicje s─ů poprawne (pseudoklas─Ö :hover poznasz za chwil─Ö).

a:hover {ÔÇŽ}
a[lang=en]:hover {ÔÇŽ}
a :hover {ÔÇŽ}
a[lang=en] :hover {ÔÇŽ}

Nie można natomiast rozdzielić dwukropka i nazwy pseudoklasy, tak na przykład jest źle: a: hover.

W CSS jest dost─Öpny ca┼ékiem poka┼║ny zestaw pseudoklas, np. odnosz─ůcych si─Ö do pierwszego lub ostatniego dziecka wybranego elementu albo do element├│w formularza, kt├│re zosta┼éy zaznaczone przez u┼╝ytkownika itd. Nas w tej chwili interesuj─ů pseudoklasy umo┼╝liwiaj─ůce stylizacj─Ö ┼é─ůczy.

Pseudoklasy do stylizowania ┼é─ůczy

W CSS dost─Öpne s─ů dwie pseudoklasy odnosz─ůce si─Ö specyficznie do ┼é─ůczy (element├│w a maj─ůcych zdefiniowany atrybut href) ÔÇô :link i :visited ÔÇô oraz dwie bardziej og├│lne, kt├│rych jednak najcz─Ö┼Ťciej u┼╝ywa si─Ö do stylizowania ┼é─ůczy ÔÇô :hover i ::active. Przyjrzymy si─Ö im dok┼éadnie, a zaczniemy od pseudoklasy :link.

Standardowo ┼é─ůcza do nieodwiedzonych stron s─ů niebieskie i podkre┼Ťlone, a ┼é─ůcza do odwiedzonych stron s─ů fioletowe i podkre┼Ťlone. Pseudoklasa :link odnosi si─Ö do ┼é─ůczy do stron (element├│w a z atrybutem href), kt├│re jeszcze nie zosta┼éy odwiedzone przez u┼╝ytkownika:

┼ü─ůcze odwiedzone i nieodwiedzona

Za pomoc─ů pseudoklasy :link mo┼╝emy zmieni─ç wygl─ůd link├│w prowadz─ůcych do stron, kt├│rych u┼╝ytkownik jeszcze nie ogl─ůda┼é, np.:

a:link {color: green}

Efekt zastosowania tej regu┼éy jest nast─Öpuj─ůcy:

┼é─ůcze odwiedzone o innym kolorze

Jednak pseudoklasy tej u┼╝ywa si─Ö rzadko, poniewa┼╝ do uzyskania po┼╝─ůdanego efektu wystarcza tak┼╝e regu┼éa z selektorem elementu a (przypomnij sobie list─Ö par─Ö akapit├│w wy┼╝ej).

Druga pseudoklasa ┼é─ůczy to :visited ÔÇô umo┼╝liwia ona formatowanie wygl─ůdu ┼é─ůczy prowadz─ůcych do stron, kt├│re zosta┼éy odwiedzone przez u┼╝ytkownika, np.:

a:visited {color: red}

W oknie przegl─ůdarki wygl─ůda to tak:

┼ü─ůcze nieodwiedzone o innym kolorze

Jak zosta┼éo napisane wcze┼Ťniej, cho─ç w regule z selektorem a zdefiniowali┼Ťmy kolor zielony tekstu, tekst ┼é─ůczy do stron odwiedzonych jest czerwony, poniewa┼╝ zmienia go znajduj─ůca si─Ö dalej regu┼éa z selektorem pseudoklasy :visited.

Nast─Öpna jest pseudoklasa :hover. Jest najciekawsza ze wszystkich, kt├│re tu opisujemy, poniewa┼╝ pozwala na stworzenie dynamicznego efektu. Stosuje ona ustawienia CSS do elementu, gdy u┼╝ytkownik umie┼Ťci na nim kursor myszy. Je┼Ťli wi─Öc zdefiniujemy rozmiar pisma wi─Ökszy lub mniejszy ni┼╝ normalny, to element zmieni rozmiar, kiedy najedziemy na niego kursorem, np.:

a:hover {font-size: larger;}

Efekt zastosowania tej reguły widać na poniższym zrzucie ekranu.

Pseudoklasa hover w ┼é─ůczu

To oczywi┼Ťcie nie jest najcz─Östszy spos├│b u┼╝ycia tej pseudoklasy. Najcz─Ö┼Ťciej za jej pomoc─ů zmienia si─Ö kolor ┼é─ůcza, aby uzyska─ç efekt ÔÇ×pod┼ŤwietleniaÔÇŁ np.:

a:hover {color: navy;}

Je┼Ťli teraz u┼╝ytkownik najedzie kursorem na kt├│rekolwiek ┼é─ůcze (odwiedzone i nieodwiedzone), zmieni ono kolor na granatowy. Sp├│jrz na poni┼╝szy zrzut ekranu.

Pseudoklasa hover zmiana koloru tekstu

Ostatnia z interesuj─ůcych nas w tej chwili pseudoklas to pseudoklasa ::active. Odnosi si─Ö ona do stanu aktywno┼Ťci elementu, a wi─Öc w przypadku ┼é─ůczy ÔÇô do kr├│tkiego momentu mi─Ödzy klikni─Öciem ┼é─ůcza, a przej┼Ťciem do nowej strony, np.:

a:active {color: aqua;}

Je┼Ťli dodasz t─Ö regu┼é─Ö do arkusza styl├│w na swojej stronie i klikniesz na niej odno┼Ťnik, to zmieni on kolor na chwil─Ö w czasie mi─Ödzy klikni─Öciem, a wy┼Ťwietleniem nowej strony. Ta pseudoklasa te┼╝ nie jest zbyt cz─Östo u┼╝ywana.

Inne pseudoklasy

W CSS3 dost─Öpny jest ca┼ékiem poka┼║ny zestaw pseudoklas. Poni┼╝sza tabela zawiera zwi─Öz┼éy opis kilku najciekawszych spo┼Ťr├│d nich, w┼é─ůcznie z opisanymi w tym rozdziale.

PseudoklasaOpis
::activeWybiera aktywne ┼é─ůcze
::checkedWybiera zaznaczony przez u┼╝ytkownika element formularza
:first-childWybiera pierwszy element potomny innego elementu
:first-of-typeWybiera pierwszy element okre┼Ťlonego typu spo┼Ťr├│d grupy element├│w siostrzanych
:focusWybiera element, kt├│ry jest w tej chwili aktywny
:hoverWybiera element, nad kt├│rym znajduje si─Ö kursor myszy
:last-childWybiera ostatni element potomny innego elementu
:last-of-typeWybiera ostatni element okre┼Ťlonego typu spo┼Ťr├│d grupy element├│w siostrzanych
:linkWybiera ka┼╝de ┼é─ůcze, kt├│re jeszcze nie zosta┼éo odwiedzone
:not()Wybiera elementy, kt├│re nie pasuj─ů do selektora podanego w nawiasie
:visitedWybiera ┼é─ůcza, kt├│re ju┼╝ zosta┼éy odwiedzone przez u┼╝ytkownika
Triumfalny wyjazd

Linki wychodz─ůce

Linki wychodz─ůce, czyli ┼é─ůcza do stron w innych serwisach, cz─Östo oznacza si─Ö w specjalny spos├│b ÔÇô za pomoc─ů uko┼Ťnej strza┼éki skierowanej w g├│r─Ö na ko┼äcu tekstu odno┼Ťnika: to jest takie ┼é─ůcze.

Selektor odnosz─ůcy si─Ö do ┼é─ůczy prowadz─ůcych do stron nie nale┼╝─ůcych do naszej domeny wygl─ůda na do┼Ť─ç skomplikowany, ale w rzeczywisto┼Ťci jest prosty. Poni┼╝ej znajduje si─Ö ten selektor u┼╝ywany w tej witrynie:

a[href*="//"]:not([href*="shebang.pl"])

Znasz ju┼╝ dwa selektory atrybutu. Cz┼éon [href*="//"] to jego kolejny rodzaj. Odnosi si─Ö on do wszystkich element├│w, kt├│re maj─ů atrybut href zawieraj─ůcy znaki // (fragment adresu URL do zewn─Ötrznej strony).

Cz┼éon :not to tzw. pseudoklasa negacji, czyli zaprzeczenia. W zwi─ůzku z tym cz┼éon :not([href*="shebang.pl"] oznacza, ┼╝e maj─ů zosta─ç wybrane wszystkie elementy, kt├│re nie zawieraj─ů tekstu shebang.pl.

Podsumowuj─ůc, selektor a[href*="//"]:not([href*="shebang.pl"]) oznacza: ÔÇ×najpierw wybierz wszystkie elementy a, kt├│re maj─ů atrybut href zawieraj─ůcy w warto┼Ťci ci─ůg znak├│w //, a nast─Öpnie spo┼Ťr├│d nich odrzu─ç te, kt├│re zawieraj─ů ci─ůg znak├│w shebang.plÔÇŁ. W ten spos├│b wybieramy adresy URL nie odnosz─ůce si─Ö do naszej domeny.

Dobrali┼Ťmy si─Ö ju┼╝ do odpowiednich element├│w, wi─Öc teraz musimy je sformatowa─ç we w┼éa┼Ťciwy spos├│b. W tym przypadku chcemy co┼Ť doda─ç za wybranym elementem. Mogliby┼Ťmy to zrobi─ç przez dodanie odpowiedniego fragmentu kodu do samych element├│w a, np.:

<a href="http://example.com">Jaka┼Ť strona<span>ÔćŚ</span></a>

Nast─Öpnie odpowiednio ustawiamy strza┼ék─Ö w elemencie span, ewentualnie nadaj─ůc mu jeszcze specjaln─ů klas─Ö. To jednak jest ┼╝mudne rozwi─ůzanie, kt├│re wymaga pisania dodatkowego kodu HTML i pami─Ötania o tym, by za ka┼╝dym razem go doda─ç.

Lepszym rozwi─ůzaniem w takiej sytuacji jest u┼╝ycie tzw. pseudoelementu.

Pseudoelementy

Pseudoelementy CSS to konstrukcje pozwalaj─ůce uzyska─ç dost─Öp do cz─Ö┼Ťci dokumentu, do kt├│rych nie da si─Ö odnie┼Ť─ç za pomoc─ů element├│w j─Özyka HTML. Na przyk┼éad, nie ma w j─Özyku HTML mechanizmu pozwalaj─ůcego oznaczy─ç pierwszy wiersz tekstu (bo ten si─Ö zmienia w zale┼╝no┼Ťci cho─çby od szeroko┼Ťci okna przegl─ůdarki), ani takiego, kt├│ry pozwala┼éby odnie┼Ť─ç si─Ö do ÔÇ×miejsca za wybranym elementemÔÇŁ.

W┼éa┼Ťnie do takich cz─Ö┼Ťci element├│w pozwalaj─ů odnosi─ç si─Ö pseudoelementy CSS. W naszym przyk┼éadzie chcemy umie┼Ťci─ç strza┼ék─Ö (a najlepiej specjaln─ů ikon─Ö ÔÇô wr├│cimy do tego w nast─Öpnym rozdziale) za elementem a, wi─Öc powinni┼Ťmy u┼╝y─ç pseudoelementu, kt├│ry do tego s┼éu┼╝y. Ten pseudoelement to:

::after

Aby wi─Öc doda─ç co┼Ť za ka┼╝dym elementem a, powinni┼Ťmy u┼╝y─ç nast─Öpuj─ůcego selektora:

a::after {ÔÇŽ}

Sam selektor pseudoelementu to jednak nie wszystko. Pozwala on nam wskaza─ç, ┼╝e chcemy co┼Ť doda─ç za okre┼Ťlonym elementem lub okre┼Ťlonymi elementami, ale nie wskazuje, co chcemy tam doda─ç i jak to ma wygl─ůda─ç. Tre┼Ť─ç dodawan─ů (kt├│ra w specyfikacji CSS ma nazw─Ö tre┼Ťci generowanej ÔÇô ang. generated content) definiuje si─Ö za pomoc─ů w┼éasno┼Ťci content, natomiast jej wygl─ůd okre┼Ťlamy za pomoc─ů dowolnych w┼éasno┼Ťci CSS, np.:

a::after {
  content: ' jaki┼Ť tekst';
  font-size: small;
}

W┼éasno┼Ť─ç content jako warto┼Ť─ç przyjmuje dowolny ┼éa┼äcuch znak├│w umieszczony w cudzys┼éowie pojedynczym (jak powy┼╝ej) lub podw├│jnym. Nie przyjmuje jednak element├│w HTML, albo inaczej, je┼Ťli wpiszesz znacznik HTML, to zostanie on po prostu wy┼Ťwietlony, a nie zinterpretowany jako kod HTML.

Gdyby┼Ťmy dodali t─Ö regu┼é─Ö do naszych wcze┼Ťniejszych przyk┼éad├│w formatowania link├│w, otrzymaliby┼Ťmy nast─Öpuj─ůcy efekt:

Ilustracja pseudoelementu CSS

Oczywi┼Ťcie w tym przypadku zamiast tekstu chcemy wstawi─ç strza┼ék─Ö. Najlepiej zrobi─ç to przy u┼╝yciu encji. W zestawie znak├│w UTF-8 znajduje si─Ö skierowana w g├│r─Ö strza┼éka o warto┼Ťci szesnastkowej 1F855. Mo┼╝emy jej u┼╝y─ç w naszej regule (pami─Ötaj, ┼╝e encje CSS sk┼éadaj─ů si─Ö z uko┼Ťnika i liczby szesnastkowej):

a::after {
  content: ' https://shebang.pl/wp-admin/edit.php?post_type=html\1F855';
}

Efekt zastosowania tej reguły jest taki:

Pseudoelement dodaj─ůcy strza┼ék─Ö

To ju┼╝ zaczyna wygl─ůda─ç nie┼║le, chocia┼╝ przyda┼éoby si─Ö t─Ö strza┼ék─Ö jeszcze pomniejszy─ç i odpowiednio wypozycjonowa─ç. Ze zmniejszeniem nie mamy problemu, poniewa┼╝ znamy ju┼╝ w┼éasno┼Ť─ç font-size:

a::after {
  content: ' \1F855';
  font-size: 80%;
}

Natomiast po┼éo┼╝enie strza┼éki zmienimy za pomoc─ů nowej dla nas w┼éasno┼Ťci vertical-align. Przyjmuje ona kilka warto┼Ťci umo┼╝liwiaj─ůcych okre┼Ťlenie pionowego po┼éo┼╝enia elementu w wierszu. Dla nas w tej chwili najbardziej przydatna b─Ödzie warto┼Ť─ç super, kt├│ra powoduje przeniesienie do indeksu g├│rnego (w indeksie g├│rnym znajduje si─Ö na przyk┼éad wyk┼éadnik pot─Ögi, czyli liczba 2, w 32).

a::after {
  content: ' \1F855';
  font-size: 80%;
  vertical-align: super;
}

Teraz nasze linki na stronie wygl─ůdaj─ů tak:

Pseudoelement dodaj─ůcy strza┼ék─Ö - wersja ostateczna

To nam na razie wystarczy. Nale┼╝y wiedzie─ç, ┼╝e standardowo ┼é─ůcza wychodz─ůce oznacza si─Ö za pomoc─ů specjalnej ikony, ale nie ma jej w zestawie znak├│w UTF. Zastosowali┼Ťmy wi─Öc rozwi─ůzanie zast─Öpcze, kt├│re te┼╝ wygl─ůda ca┼ékiem dobrze.

Pozosta┼éo nam po┼é─ůczy─ç nasze selektory w jedn─ů ca┼éo┼Ť─ç:

a[href*="//"]:not([href*="shebang.pl"])::after {
  content: ' \1F855';
  font-size: 80%;
  vertical-align: super;
}

Od tej pory wszystkie ┼é─ůcza zewn─Ötrzne b─Öd─ů opatrzone strza┼ék─ů.

Na razie jednak nie b─Ödziemy korzysta─ç z tej techniki, poniewa┼╝ nasza witryna nie znajduje si─Ö na serwerze i nie mamy dla niej wykupionej domeny, wi─Öc nie wiemy jeszcze, co wpisa─ç w miejsce shebang.pl. Zapami─Ötaj sobie ten kod i wykorzystaj go, gdy ju┼╝ b─Ödziesz mie─ç wszystko gotowe.

Na zako┼äczenie cz─Ö┼Ťci po┼Ťwi─Öconej pseudoelementom przedstawiam tabel─Ö ze zwi─Öz┼éym opisem kilku najciekawszych spo┼Ťr├│d nich.

PseudoelementOpis
::afterDodaje tre┼Ť─ç za wybranym elementem
::beforeDodaje tre┼Ť─ç przed wybranym elementem
::first-letterOdnosi si─Ö do pierwszej litery tre┼Ťci tekstowej elementu blokowego
::first-lineOdnosi si─Ö do pierwszego wiersza tre┼Ťci tekstowej elementu blokowego
Trzy wilki

Skoro umiemy ju┼╝ tworzy─ç ┼é─ůcza do innych stron, to grzechem by┼éoby z tej umiej─Ötno┼Ťci nie skorzysta─ç. Pami─Ötasz jeszcze tego wybitnego matematyka, Paula Erd┼Ĺsa, o kt├│rym by┼éa mowa na pocz─ůtku rozdzia┼éu? W nast─Öpnym rozdziale utworzymy o nim stron─Ö , a teraz dodamy do niej ┼é─ůcze na stronie o Feynmanie.

W tym celu na samym dole obecnej strony, pod akapitem na temat Tuwy, dodaj poni┼╝sz─ů ciekawostk─Ö:

Liczba Erd┼Ĺsa

Wielu wybitnych naukowc├│w wsp├│┼épracowa┼éo bezpo┼Ťrednio lub po┼Ťrednio z Paulem Erd┼Ĺsem, kt├│ry w trakcie swojej kariery naukowej napisa┼é ponad 1500 artyku┼é├│w. Liczba Erd┼Ĺsa okre┼Ťla, jak blisko wsp├│┼épracy z tym matematykiem by┼é dany uczony. Feynman ma na przyk┼éad liczb─Ö Erd┼Ĺsa 3.

Teraz nasza strona powinna wygl─ůda─ç tak:

Finalna wersja strony o Feynmanie

Poniżej znajduje się jej kompletny kod źródłowy:

<!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"> <title>Richard Feynman</title> <style> body {min-width: 600px; max-width: 800px; margin: 0 auto; padding: 10px;} h1, h2, h3 {margin-bottom: 0; margin-top: 30px;} p {margin-top: 5px;} blockquote {border-left: 6px solid green; padding: 10px 20px; margin-bottom: 0; text-align: justify;} figcaption {margin-left: 66px; font-weight: bold; font-size: 90%;} strong {font-size:large;} em {letter-spacing: 0.15em;} i[lang=en] {color: brown;} mark {background-color: pink;} .nazwisko {color: darkgreen; letter-spacing: 0.1em;} .uniwersytet {color: darkred;} a {color: green; text-decoration: none;} a:visited {color: red;} a:hover {color: navy;} a:active {color: aqua;} </style> </head> <body> <h1>Richard <span class="nazwisko">Feynman</span></h1> <p>Richard Phillips <span class="nazwisko">Feynman</span> to ameryka┼äski fizyk teoretyk, kt├│ry w 1999 roku znalaz┼é si─Ö na li┼Ťcie dziesi─Öciu najwybitniejszych fizyk├│w wszech czas├│w.</p> <img src="img/feynman.png" alt="Richard Feynman ze swoimi b─Öbnami" width="300" height="241"> <h2>Studia</h2> <p>Studiowa┼é w <span class="uniwersytet"><abbr title="Massachusetts Institute of Technology">MIT</abbr></span>, a nast─Öpnie odby┼é studia doktoranckie na Uniwersytecie <span class="uniwersytet">Princeton</span> pod kierunkiem Johna Wheelera, <em>nie</em> Stephena Hawkinga, jak niekt├│rzy s─ůdz─ů.</p> <h2>Ciekawostki</h2> <p><span class="nazwisko">Feynman</span> zajmowa┼é si─Ö wieloma dziedzinami fizyki, w tym <i>kwantow─ů teori─ů pola</i>, <i>fizyk─ů cz─ůstek elementarnych</i>, czy <i>kwantow─ů teori─ů grawitacji</i>. Kiedy┼Ť wyrazi┼é si─Ö na temat tych spraw w nast─Öpuj─ůcy spos├│b (zwr├│─ç uwag─Ö na to, co m├│wi┼é o ┼Ťwiecie submikroskopowym):</p> <figure> <blockquote cite="https://www.brainyquote.com/authors/richard-p-feynman-quotes"> <p>„<mark>Przedmioty w bardzo ma┼éej skali zachowuj─ů si─Ö w spos├│b ca┼ékowicie odmienny od wszystkiego, co znamy</mark>. Nie przypominaj─ů fal, nie przypominaj─ů cz─ůsteczek, nie przypominaj─ů chmur, kul bilardowych, ci─Ö┼╝ark├│w zawieszonych na spr─Ö┼╝ynach ani nie zachowuj─ů si─Ö jak cokolwiek, co kiedykolwiek widzieli┼Ťmy”.</p> </blockquote> <figcaption>ÔÇö Richard Phillips <span class="nazwisko">Feynman</span></figcaption> </figure> <h3>Projekt Manhattan</h3> <p><span class="nazwisko">Feynman</span> od bardzo m┼éodych lat by┼é uznawany za wybitnego fizyka, dzi─Öki czemu otrzyma┼é propozycj─Ö wzi─Öcia udzia┼éu w projekcie Manhattan, kt├│rego celem by┼éo stworzenie bomby atomowej. <strong><span class="nazwisko">Feynman</span> uczestniczy┼é w pierwszej pr├│bie detonacji tej bomby w 1945 roku.</strong></p> <h3>Pochodzenie</h3> <p>Richard <span class="nazwisko">Feynman</span> wychowa┼é si─Ö w rodzinie ┼╝ydowskiej oraz <b>mia┼é korzenie rosyjskie i polskie</b> ÔÇô ojciec jego matki, Lucille, wyemigrowa┼é z Polski. Ponadto jej matka tak┼╝e pochodzi┼éa z rodziny polskich imigrant├│w.</p> <h3>Tuva or Bust</h3> <p><span class="nazwisko">Feynman</span> fascynowa┼é si─Ö wchodz─ůc─ů w sk┼éad Federacji Rosyjskiej republik─ů Tuwy, co wyra┼╝a┼é m.in. za pomoc─ů has┼éa <i lang="en">Tuva or Bust</i> (Tuwa albo nic). W nawi─ůzaniu do tej fascynacji jego przyjaciel, Ralph Leighton, napisa┼é nawet ksi─ů┼╝k─Ö pod tym w┼éa┼Ťnie tytu┼éem.</p> <h3>Liczba Erd┼Ĺsa</h3> <p>Wielu wybitnych naukowc├│w wsp├│┼épracowa┼éo bezpo┼Ťrednio lub po┼Ťrednio z <a href="erdos.html">Paulem Erd┼Ĺsem</a>, kt├│ry w trakcie swojej kariery naukowej napisa┼é ponad 1500 artyku┼é├│w. Liczba Erd┼Ĺsa okre┼Ťla, jak blisko wsp├│┼épracy z tym matematykiem by┼é dany uczony. Feynman ma na przyk┼éad liczb─Ö Erd┼Ĺsa 3.</p> </body> </html>

Podsumowanie

Sum
  • Do tworzenia ┼é─ůczy s┼éu┼╝y element a z atrybutem href.
  • ┼ü─ůcze mo┼╝e prowadzi─ç do strony, do pliku dowolnego innego typu oraz do miejsca w obr─Öbie tej samej strony.
  • Dodatek atrybutu download do ┼é─ůcza sprawia, ┼╝e wskazywany zas├│b jest pobierany na dysk komputera u┼╝ytkownika, a nie otwierany w oknie przegl─ůdarki.
  • Adres w atrybucie href mo┼╝e by─ç wzgl─Ödny lub bezwzgl─Ödny.
  • Adres wzgl─Ödny odnosi si─Ö do bie┼╝─ůcego lub g┼é├│wnego katalogu na serwerze.
  • Adres bezwzgl─Ödny to pe┼ény adres z przedrostkiem http:// lub https://.
  • Atrybut id okre┼Ťla identyfikator elementu.
  • ┼ü─ůcze do okre┼Ťlonego miejsca na stronie odnosi si─Ö do elementu o okre┼Ťlonym identyfikatorze.
  • Selektor identyfikatora w CSS ma posta─ç #identyfikator.
  • Do stylizacji r├│┼╝nych stan├│w ┼é─ůczy s┼éu┼╝─ů pseudoklasy CSS.
  • W CSS istnieje spora grupa pseudoklas.
  • Linki wychodz─ůce to ┼é─ůcza do stron w innych witrynach.
  • Pseudoelementy CSS CSS to rodzaj selektora odnosz─ůcy si─Ö do cz─Ö┼Ťci element├│w niedost─Öpnych za po┼Ťrednictwem j─Özyka HTML.
  • W CSS istnieje kilka pseudoelement├│w.
Ilustracje ćwiczeń

─ćwiczenia

  1. Nadaj ┼é─ůczom na stronie o Feynmanie nast─Öpuj─ůce ustawienia CSS:
    1. Element a: kolor 3a5a01, brak podkre┼Ťlenia.
    2. ┼ü─ůcza odwiedzone: kolor 889079, rozmiar czcionki mniejszy o 5%.
    3. ┼ü─ůcza najechane kursorem myszy: kolor 679e05, podkre┼Ťlenie.
    4. Aktywne ┼é─ůcza: kolor bdf35d.
  2. Spraw, aby kolor zaznaczanego tekstu na Twojej stronie zmienia┼é si─Ö na r├│┼╝owy z fioletowym t┼éem ÔÇô dzi─Öki temu u┼╝ytkownikom odechce si─Ö go zaznacza─çÔÇŽ