O stylowaniu linków słów kilka

data publikacji: 16.12.2007
O stylowaniu linków słów kilka
kategoria: Tutoriale, Webmaster, XHTML/CSS autor: palmiak
W tym tutorialu pokażę Wam jakie cuda można zrobić za pomocą CSS oraz dlaczego należy korzystać z normalnych przeglądarek.

Formaty obrazków

Fajną sprawą by było widzieć na pierwszy rzut oka czy plik znajdujący się po drugiej stronie linka jest obrazkiem w formacie JPG czy może plikiem DOC. Od biedy możemy sobie napisać klasy i nadawać je odpowiednim <a> (np. <a href="" class="pdf">). Jednak jest to dodatkowa robota. Na szczęście z pomocą przychodzi nam CSS

W naszym przykładzie mamy taki fragment kodu:

<a href="obrazek.jpg">tu jest link do obrazka jpg</a>
<a href="obrazek.png">tu jest link do obrazka png</a>

teraz piszemy w CSS następującą rzecz:

a[href$=".jpg"] {
background:url(jpg.png) no-repeat 100% 7px;
padding:0 40px 0 0;
}

a[href$=".png"] {
background:url(png.png) no-repeat 100% 7px;
padding:0 40px 0 0;
}

Dzięki temu obok JPG pojawi się tabliczka z napisem JPG a obok PNG z napisem PNG. Spójrzcie na przykład (pierwszy akapit).

Jak widać a[href$=".jpg"] wyszukuje wszystkie linki które kończą się na .jpg i tam wstawiają odpowiednią tabliczkę.

Różne strony

Teraz rozpatrzmy inną sytuację. Chcemy, żeby nam oznaczało w inny sposób artykuły które są na stronie wp.pl, gazeta.pl i onet.pl. Poprzedni trick nie zadziała bo sprawdzał on kończówkę linka, a my musimy sprawdzać początek.

<a href="http://onet.pl/costam">Onet</a>
<a href="http://wp.pl/costam">Wp.pl</a>
<a href="http://gazeta.pl/costam">Gazeta.pl</a>
<a href="http://onet.pl/jakistam">jeszcze jeden artykuł z Onetu</a>

Ale i tak sobie damy radę. W CSS piszemy:

a[href^="http://onet.pl"] {
background:url(onet.png) no-repeat 100% 7px;
padding:0 40px 0 0;
}

a[href^="http://wp.pl"] {
background:url(wp.png) no-repeat 100% 7px;
padding:0 40px 0 0;
}

a[href^="http://gazeta.pl"] {
background:url(gw.png) no-repeat 100% 7px;
padding:0 40px 0 0;
}

Tym razem zastosowalismy formułkę a[href^="http://gazeta.pl"] która nam sprawdza co jest na początku linka. Dalej już wszystko działa analogicznie. Drugi akapit w naszym przykładzie.

Użyjmy tego jako cenzurę

Poza oznaczaniem różnych rodzajów stron spróbujmy wykorzystać to jako moduł cenzury. Załóżmy, że nie chcemy by na naszej stronie pojawiał się adres np. http://graffik.biz. Wystarczy napisać w CSS:

a[href^="http://graffik.biz"] {
display:none;
}

I po sprawie Spójrzcie na ostatni akapit w przykładzie.

Wady takiego rozwązania

Takie rozwiązanie ma niestety kilka wad. Trzeba pamiętać, że http://gazeta.pl i http://www.gazeta.pl to dla niego dwie różne rzeczy, więc trzeba zawsze rozpatrywać dwa przypadki. To samo się tyczy zamykających “/”.

Poza tym w IE6 to nie działa (nie to, żebym był zaskoczony). Nie wiem jak IE7 - będę dźwięczny za sprawdzenie.

Ale i tak warto znać tą technikę, bo w normalnych przeglądarkach może naprawdę ułatwić życie oraz wyglądać efektownie.
Udostępnij ten artykuł:

Podobne wpisy - Vivee blog o webmasteringu, grafice i fotografii

Zobacz podobne wpisy:

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Powiadom mnie o nowym komentarzu do tego artykułu.

Top 10

CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
Skrypty client-side
Skrypty server-side
Tutoriale
Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
Wieczór z Open Source
Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Wieczór z Open Source 2010

Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej

Grafart.org i WACOM zapraszają na konkursy!

Witam!

Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej