MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Wyniki wyszukiwania

    Selektory

     

    Ta strona tłumaczy jak możesz użyć stylów selektywnie, i jak różne typy selektorów mają różne priorytety.

    Dodasz pewne atrybuty do znaczników w swoim przykładowym dokumencie oraz użyjesz w nim tych atrybutów.

    Informacja: Selektory

    CSS posiada własną terminologię do opisania języka CSS. Poprzednio w trakcie tego kursu stworzyłeś(aś) linię w swoim arkuszu stylów w ten sposób:

    strong {color: red;}
    

    W terminologii CSS cała ta linia jest regułą. Ta reguła zaczyna się od strong, który jest selektorem. Wybiera, które elementy w drzewie DOM będą używały tej reguły.

    Więcej szczegółów
    Część wewnątrz nawiasów klamrowych nazywa się deklaracją.

    Słowo kluczowe color jest własnością, a red jest wartością.

    Średnik po parze własność-wartość oddziela ją od innych par własność-wartość w tym samym opisie.

    Ten kurs odwołuje się do selektorów takich jak strong jako selektorów znaczników. Specyfikacja CSS odwołuje się do nich jako selektorów typu.

    Ta strona kursu wyjaśnia więcej na temat selektorów, których możesz używać w regułach CSS.

    Dodatkowo do nazw znaczników możesz używać wartości atrybutów w selektorach. To pozwala sprecyzować Twoje reguły.

    Dwa atrybuty posiadają specjalny status w CSS. Są to class oraz id.

    Użycie atrybutu class w znaczniku przypisuje znacznikowi nazwaną klasę. Ty decydujesz jak ją nazwiesz.

    W swoim arkuszu stylów wpisz kropkę przed nazwą klasy, kiedy używasz jej w selektorze.

    Użycie atrybutu id w znaczniku przypisuje id do znacznika. Ty decydujesz, jakie id mu nadasz. Nazwa id musi być unikalna w dokumencie.

    W swoim arkuszu stylów wpisz znak numeru ("płotek" (ang. hash)) przed tym id, kiedy używasz go w selektorze.

    Przykłady
    Ten znacznik HTML posiada zarówno atrybut class, jak i id:
    <P class="key" id="principal">
    

    Id, principal, musi być unikalne w dokumencie, lecz inne znaczniki mogą używać tej samej nazwy klasy key.

    W arkuszu stylów CSS ta reguła powoduje, że wszystkie elementy klasy key staną się zielone. (Nie wszystkie muszą być elementami P.)

    .key {color: green;}
    

    Ta reguła powoduje, że jeden element o id principal zostanie pogrubiony:

    #principal {font-weight: bolder;}
    

    Jeżeli więcej niż jedna reguła odnosi się do elementu i określa tę samą własność, wtedy CSS nadaje priorytet regule, która posiada bardziej szczegółowy selektor. Selektor id jest bardziej szczegółowy od selektora klasy, który z kolei jest bardziej szczegółowy od selektora znacznika.

    Więcej szczegółów
    Możesz też mieszać selektory, czyniąc je bardziej szczegółowymi.

    Na przykład selektor .key wybiera wszystkie elementy, które mają klasę o nazwie key. Selektor p.key wybiera tylko elementy P, które mają klasę o nazwie key.

    Nie jesteś ograniczony(a) do dwóch specjalnych atrybutów, class i id. Możesz określać inne atrybuty poprzez użycie nawiasów kwadratowych. Na przykład selektor [type=button] wybiera wszystkie elementy, które mają atrybut type o wartości button.

    W dalszej części kursu (Tabele) można znaleźć informacje na temat złożonych selektorów opartych na wzajemnych relacjach.

    Aby dowiedzieć się więcej o selektorach, zajrzyj na stronę Selektory w specyfikacji CSS.

    Jeżeli arkusz stylów posiada sprzeczne reguły i są one równie szczegółowe, wtedy CSS nadaje wyższy priorytet regule, która występuje później w arkuszu stylów.

    Gdy napotkasz problem ze sprzecznymi regułami, spróbuj rozwiązać go poprzez ustawienie jednej z reguł jako bardziej szczegółowej, aby można im było nadać priorytety. Jeżeli nie możesz tego zrobić, spróbuj przesunąć jedną z reguł bliżej końca arkusza stylów, aby nadać jej wyższy priorytet.

    Zadanie: Używanie selektorów class i id

    Wyedytuj swój plik HTML i zduplikuj akapit poprzez skopiowanie i wklejenie go. Następnie dodaj atrybuty id i class do pierwszej kopii, a potem id do drugiej:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
    <HTML>
      <HEAD>
      <TITLE>Sample document</TITLE>
      <LINK rel="stylesheet" type="text/css" href="style1.css"></strong>
      </HEAD>
      <BODY>
        <P id="first">
          <STRONG class="carrot">C</STRONG>ascading
          <STRONG class="spinach">S</STRONG>tyle
          <STRONG class="spinach">S</STRONG>heets
        </P>
        <P id="second">
    <STRONG>C</STRONG>ascading
    <STRONG>S</STRONG>tyle
    <STRONG>S</STRONG>heets
    </P>
    </BODY> </HTML>

    Teraz wyedytuj swój plik CSS. Zamień całą treść na:

    strong {color: red;}
    .carrot {color: orange;}
    .spinach {color: green;}
    #first {font-style: italic;}
    

    Odśwież okno przeglądarki, aby zobaczyć wynik:

    Cascading Style Sheets
    Cascading Style Sheets

    Możesz zmieniać kolejność linii w pliku CSS, aby zobaczyć, że kolejność nie ma wpływu na wynik.

    Selektory klas .carrot oraz .spinach mają priorytety nad selektorem znaczników strong.

    Selektor id #first ma priorytet nad selektorami klas i znaczników.

    Wyzwanie
    Bez zmieniania pliku HTML dodaj do pliku CSS pojedyncze reguły, które sprawią, że wszystkie początkowe litery będą nadal tego samego koloru, ale cały pozostały tekst w drugim akapicie stanie się niebieski:
    Cascading Style Sheets
    Cascading Style Sheets

    Teraz zmień regułę, którą właśnie dodałeś(aś) (bez zmieniania czegokolwiek innego), aby pierwszy akapit też był niebieski:

    Cascading Style Sheets
    Cascading Style Sheets

     

    Co dalej?

    Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

    Twój przykładowy arkusz stylów zaczyna wyglądać na zbity i skomplikowany. W następnej części opiszemy jak sprawić, by CSS był łatwiejszy w czytaniu: Czytelny CSS

    Autorzy i etykiety dokumentu

    Etykiety: 
    Ostatnia aktualizacja: teoli,