Ładowanie Ładowanie

Artykuł > Odkrywamy zaawansowane techniki CSS: złożone selektory

strony: 1 | 2 | 3 | 4 | ... | 9 następna »
wydrukuj: print publikuj: wykop dodaj do flakera Dodaj jako nius na OSnews.pl! delicious

Odkrywamy zaawansowane techniki CSS: złożone selektory

2009-09-30 08:23:00 | Piotr Ostalecki
Odkrywamy zaawansowane techniki CSS: złożone selektory

Kaskadowe arkusze stylów dają najwięcej możliwości projektantom stron WWW. Dzięki CSS możemy całkowicie odmienić wygląd strony w kilka minut, bez ingerencji w kod HTML. Ale mimo ogromnego potencjału CSS, najczęściej nie korzystamy z możliwości jego pseudoklas, pseudoelementów oraz specjalnych znaczników i nadmiernie komplikujemy dokument HTML ogromną ilością niepotrzebnych klas, identyfikatorów, DIV-ów oraz SPAN-ów. Najlepszym sposobem, aby Twój HTML nie zawierał nadmiaru niepotrzebnych tworów  jest używanie bardziej złożonych selektorów CSS. Dzięki temu kod będzie bardziej czytelny a arkusze CSS mniej skomplikowane.

Specyficzność CSS

Specyficzność CSS (z ang. ‘specifity’) określa wagę właściwości CSS. Innymi słowy, jeśli w dwóch lub więcej miejscach zostaną zadeklarowane dla tego samego elementu różne właściwości, np. różne kolory tła, specyficzność określa, która z deklaracji jest „ważniejsza”.

Ważna jest więc umiejętność obliczania specyficzności danego elementu, która pozwala niekiedy zaoszczędzić sporo czasu straconego na przeszukiwaniu pliku CSS w odpowiedzi na pytanie: „dlaczego ten akapit ma niebieskie tło, skoro deklarowałem zielone”.

Oto jak oblicza się specyficzność konkretnego selektora:

  • Dodaj 1000 (styl jest umieszczony w kodzie HTML):

<span style=”color:red”>Czerwony tekst</span>

  • Za każdy identyfikator należy dodać po 100:

#sidebar, #footer {
color:red;
}

  • Każda klasa to 10:

.form {
margin-top:20px;
}

  • Wszystkie inne elementy, pseudoklasy, elementy HTML mają wartość 1:

img {
border:none;
}

  • Uniwersalny selektor (*) ma wartość 0 (zero).

Jeśli właściwość danego elementu będzie różnie zadeklarowana w wielu miejscach, dominującą będzie ta, która ma największą specyficzność (nawet, gdy jest zadeklarowana wcześniej niż pozostałe).

Przykłady:

  • a.stopka, h4, h5    0013
  • #footer, img    0101
  • #sidebar, p:first-line    0102
  • h2, h3, h4, h5    0004

Spośród poniższych dwóch selektorów, właściwości tego pierwszego zostaną nadane elementom, ponieważ ma on większą specyficzność.

  • #sidebar p#first { color: red; } — 0201
  • #sidebar p:first-line { color: blue; } — 0102

W zrozumieniu specyficzności pomóc może podstawowe narzędzie webmastera, czyli Firebug. Po zaznaczeniu elementu na karcie HTML, w oknie styl po prawej stronie można przeglądać, jakie właściwości ma on nadany w kolejności od największej specyficzności.


Przydatne linki:

Najnowsze wiadomości
1 | 2 | 3 | 4 | ... | 9 następna »

reklama

strony: 1 | 2 | 3 | 4 | ... | 9 następna »
wydrukuj: print publikuj: wykop dodaj do flakera Dodaj jako nius na OSnews.pl! delicious

Czytaj webhosting.pl:

Dyskusja

dodaj komentarz
0 + -
comnt #01 miklosz® 2009-09-30 09:42:48
miklosz Artykuł miesiąc jak dla mnie! Tak powinien wyglądać cały webhosting.pl!
------------------
Browser: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
0 + -
comnt #02 dAREuS® 2009-09-30 09:47:20
dAREuS Dzięki miklosz, staramy się. PS: miło, że znów Cię widać w serwisie.
------------------
dAREuS

Browser: Opera/9.80 (Windows NT 6.0; U; pl) Presto/2.2.15 Version/10.00
0 + -
comnt #03 eimi® 2009-09-30 10:27:55
eimi Dziękujemy i witamy Cię Miklosz z przyjemnością. Obiecujemy, że będziemy starali się trzymać poziom, nie obiecujemy, że będziemy pisać w Wh tylko o CSS :).
------------------
Browser: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1) Gecko/20090805 Firefox/3.5.2
0 + -
comnt #04 sln 2009-09-30 10:41:46
sln Bardzo ciekawy artykuł. Pomimo, że sporo czasu koduję css dowiedziałem się kilku nowych, przydatnych rzeczy.



Pozdrawiam
------------------
Browser: Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.2.15 Version/10.00
0 + -
comnt #05 MariuszT 2009-09-30 10:43:03
MariuszT Przyłączam się do gratulacji, bardzo potrzebne i ciekawe informacje, wszystko zrozumiałe.
------------------
Browser: Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
0 + -
comnt #06 soran 2009-09-30 16:50:15
soran Naprawde pomocne informacje :) dzieki wielki
------------------
Browser: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 FirePHP/0.3
0 + -
comnt #07 wujekbogdan 2009-10-01 09:07:06
wujekbogdan oby więcej takich artykułów. myślałem, że w miarę dobrze znam css zanim nie przejrzałem tego artykułu. nie miałem jeszcze czasu przeczytać całego. 

dobra robota!
------------------
Browser: Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.2.15 Version/10.00
0 + -
comnt #08 hahaha! 2009-10-07 14:56:44
hahaha! "Obsługa przez przeglądarki

Oczywiście, jak zwykle wszystkie nowoczesne przeglądarki oprócz IE obsługują powyższe pseudoklasy.
"
------------------
Browser: Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.1.2) Gecko/20090820 Iceweasel/3.5.3 (Debian-3.5.3-1)
0 + -
comnt #09 Sony 2010-03-10 14:05:39
Sony Artykuł ma błąd.

Odnośnie specyficzności. Klasy i pseudoklasy mają tą samą hierarchię. Tak twierdzą inne źródła i firebug.
------------------
Browser: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/533.2 (KHTML, like Gecko) Chrome/5.0.342.2 Safari/533.2

Komentarze

  • Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
  • Jeśli masz problemy z odczytaniem słów, zmień zdjęcie.
  • Używamy tego zabezpieczenia, ponieważ dzięki niemu rozwija się projekt reCAPTCHA. Sugerujemy jednak, by zarejestrować się w serwisie i w ten sposób ominąć konieczność ciągłego odczytywania wyrazów.
  • W treści komentarza można używać języka formatowania BBcode.