Stylowanie linka w zależności od jego zawartości

CSS3. Tworzenie nowoczesnych stron WWW

CSS3. Tworzenie nowoczesnych stron WWW

Autor:
Łukasz Pasternak

ISBN:
978-83-246-3722-5

Format:
158x235

Liczba stron:
392

Data wydania:
2012-07-10

Cena:
59.00zł


Linki o różnej treści odnośnika dobrze jest dodatkowo wzbogacić grafiką by już na pierwszy rzut oka było wiadomo co zawierają bez konieczności klikania czy podglądania jego zawartości. Można oczywiście ręcznie dodawać wiadomość tekstową lub grafikę/ikonę przedstawiającą jego treść dodając np., miniaturę z podglądem… ale po co sobie utrudniać życie?

Najpierw wyjaśnienia… na końcu przykłady :)

Pierwszy css opisujący w szablonie właściwości dowolnego url-a zawiera „wyrażenie regularne” informujący przeglądarkę by do każdego hrefa zawierającego na swoim początku [^] frazę „http” dostawał dodatkowo grafikę linkzewnetrzny.png umiejscowiony dodatkowo za pomocą padding’ów… Traktowane w ten sposób będą wszystkie linki, zarówno te z zakresu strony jaki i wychodzące poza serwis.

Drugi przykład, za pomocą podobnego „wyrażenia regularnego” określa tylko linki pochodzące z danego serwisu, w tym przypadku z mojego w domenie testowej :) Wszystkie linki pokazujące treść z mojego serwisu będą pozbawione grafiki linkizewnetrzne.png i dodatkowo wyleci z nich padding.

Przykład trzeci i czwarty są do siebie podobne, różnią się tylko grafiką i „wyrażeniem regularnym” wskazującym koniec hrefa [$] dzięki czemu w zależności od tego czy link wskazuje na pdf-a czy worda zmieni ikonkę która ustawiana jest na końcu linka poprzez dodanie padding’a o szerokości 20px.

1)

a[href^="http:"] {
    background: url (images/linkzewnetrzny.png) no-repeat right top;
    padding-right: 20px;
}

2)

a[href^="http://www.twojastrona.com.pl"] {
    background-image: none;
    padding-right: 0px;
}

3)

a[href$=".pdf"] {
    background: url (images/linkzpdf.png) no-repeat right top;
    padding-right: 20px;
}

4)

a[href$=".doc"] {
    background: url (images/linkzword.png) no-repeat right top;
    padding-right: 20px;
}

Leave a Reply