Narzędzia - Kreator selektora CSS

Ten kreator umożliwia szybkie utworzenie selektora CSS.

Narzędzie posiada przyjazny interfejs, który prowadzi za rękę przez wszystkie etapy tworzenia selektora - od wyboru nazwy znacznika, poprzez wybór klas, pseudo-klas i innych elementów, aż do zaprezentowania i umieszczenia w kodzie gotowego selektora.

Każdy krok to osobna plansza. Po planszach możesz poruszać się za pomocą przycisków Dalej i Wstecz.

Uruchamianie

Kreator możesz uruchomić z zakładki Inspektor CSS za pomocą jednego z przycisków:

• Kreator selektora - Uruchamia kreator nowego selektora
• Kreator selektora na podstawie bieżącego - Uruchamia kreator nowego, pustego selektora, który będzie zawierał własności ustawione na liście

Wybór znacznika

Pierwsza plansza umożliwia wybór znacznika, dla którego ma mieć zastosowanie selektor.

Kategoria znaczników
Wybierz z listy kategorię (język znaczników) znaczników, z której chcesz wskazać nazwę znacznika.

Znacznik
Wybierz z listy nazwę znacznika, dla którego chce utworzyć selektor. Dalej znacznik ten będzie nazywane bieżącym.

Kategorie i nazwy znaczników możesz edytować używając Edytor plików definicyjnych znaczników TDF.

Spośród następnych trzech opcji, aktywna może być tylko jedna (wykluczają się nawzajem):

Musi być potomkiem znacznika
Zaznacz tę opcję, jeśli chcesz wskazać znacznik, który będzie musiał być nadrzędnym wobec bieżącego znacznika, aby selektor został dla niego zastosowany.

Musi być następnikiem znacznika
Zaznacz tę opcję, jeśli chcesz wskazać znacznik, który będzie musiał być umieszczony bezpośrednio przed bieżącym znacznikiem (lub inaczej - znacznik bieżący musi się znaleźć bezpośrednio po tym znaczniku).

Musi być dzieckiem znacznika
Zaznacz tę opcję, jeśli chcesz wskazać znacznik, który będzie musiał być "rodzicem" dla bieżącego znacznika, aby selektor został dla niego zastosowany.

Musi być pierwszym dzieckiem swojego rodzica
Zaznacz tę opcję, jeśli bieżący znacznik musi być pierwszym "dzieckiem" swojego rodzica, aby selektor został dla niego zastosowany.

Ustawianie klas i elementów tekstu

Na tej planszy możesz określić, czy selektor będzie odnosił się do elementów oznaczonych klasą, bądź identyfikatorem:

znacznik musi zawierać oznaczenia klas (atrybut CLASS)
Zaznacz ten przełącznik, aby dodać na listę nazwy klas, jakie musi posiadać bieżący znacznik. Klasy definiuje się w znaczniku za pomocą atrybutu class="nazwa_klasy". Nazwy klas możesz dodawać i usuwać za pomocą poleceń obok listy klas (poniżej przełącznika).

znacznik musi być opatrzony identyfikatorem (atrybut ID)
Zaznacz ten przełącznik, jeśli bieżący znacznik musi posiadać identyfikator. Następnie wprowadź nazwę wymaganego identyfikatora w polu poniżej przełącznika.

Możesz również zawęzić działanie selektora tylko do pierwszej linii, bądź pierwszego znaku tekstu. W tym celu zaznacz wybrany przełącznik (możesz zaznaczyć najwyżej jeden z nich):

• selektor odnosi się do pierwszej linii tekstu (:first_line)
• selektor odnosi się do pierwszej litery tekstu (:first_letter)

Wybór określonych stanów elementu

Opcje tej planszy pozwalają na wybór określonych stanów elementu interfejsu, dla których zastosowanie ma mieć selektor:

kursor musi znajdować się nad elementem (:hover)
Zaznacz ten przełącznik, jeśli selektor ma mieć zastosowanie wyłącznie wtedy, gdy kursor myszy znajduje się nad elementem. Jest to najczęściej stosowane do zmiany koloru tekstu odnośnika.

element musi być aktywny (:active)
Zaznacz ten przełącznik, jeśli selektor ma mieć zastosowanie wyłącznie wtedy, gdy nad elementem został wciśnięty i jeszcze nie został puszczony klawisz myszy. W tym stanie dany element jest "aktywny".

element musi posiadać fokus (:focus)
Zaznacz ten przełącznik, jeśli element utworzony przez bieżący znacznik musi posiadać fokus, czyli musi być aktualnie wybrany. Ma to zastosowanie np. dla pól formularza, gdzie można pole tekstowe,w którym znajduje się kursor, podświetlić innym kolorem w celu wyróżnienia go spośród innych elementów formularza.

Jeśli znacznik, którego dotyczy selektor, opisuje odnośnik w dokumencie, możesz również określić własności odnośnika:

• domyślny - zwykły odnośnik, bez określonego stanu
• odnośnik nieodwiedzony - odnośnik, który jeszcze nie odwiedzałeś (w historii przeglądarki nie ma wpisu o odwiedzinach tego adresu)
• odnośnik odwiedzony - odnośnik, który już kiedyś odwiedziłeś (czyli przeglądarka pamięta użycie tego adresu)

Określenie języka, atrybutów i położenia tekstu w znaczniku

W tej planszy możesz ustawić następujące opcje selektora:

Znacznik musi być w języku
Zaznacz tę opcję, aby wybrać z listy język, w jakim napisano tekst zawarty w znaczniku. Język ten musi być wybrany jako argument znacznika, np. lang="pl".

Znacznik musi zawierać atrybuty
Zaznacz tę opcję, jeśli bieżący znacznik musi posiadać atrybuty. Atrybuty możesz dodawać na listę i usuwać z niej za pomocą poleceń z prawej strony listy. Kliknięcie na polecenia dodania atrybutu uruchomi narzędzie Atrybut selektora, które ułatwi ci podawanie wymaganych nazw i wartości atrybutów i odpowiednio sformatuje kod dla selektora.

Możesz też określić, czy selektor ma odnosić się do tekstu zawartego z znaczniku, czy tez do tekstu dodanego przed, lub po znaczniku:

• do tekstu w znaczniku
• do tekstu dodanego przed znacznikiem (:before)
• do tekstu dodanego po znaczniku (:after)

Podgląd, zatwierdzenie selektora, wstawienie do dokumentu

Ostatnia plansza dostarcza podgląd wyniku pracy kreatora. Jeśli selektor wygląda dokładnie tak, jak sobie tego życzysz, kliknij ZAKOŃCZ.

Jeśli dokument, do którego wstawiasz selektor nie posiada sekcji HEAD i znacznika STYLE, zostaną one dodane podczas wstawiania selektora.