Język opisu wyglądu dokumentu CSS stale się zmienia. Z biegiem czasu rośnie nie tylko jego moc i funkcjonalność, ale także zwiększa się elastyczność i łatwość użytkowania.

selektory CSS

Zacznijmy rozumieć. Otwórz dowolny samouczek CSS, przynajmniej jedna sekcja będzie poświęcona typom selektora. Nie jest to zaskakujące, ponieważ są one jednym z najwygodniejszych sposobów zarządzania zawartością strony. Za ich pomocą można komunikować się z absolutnie dowolnymi elementami HTML. Teraz mamy 7 rodzajów selektorów:

dla tagów;

dla klas;

dla identyfikatora;

powszechny;

atrybuty;

do interakcji z pseudoklasami;

do kontroli pseudoelementów.

Składnia jest prosta. Aby nauczyć się korzystać z selektorów CSS, wystarczy przeczytać o nich. Która opcja jest najlepsza do kontroli treści w twoim przypadku? Spróbujmy to rozgryźć.

Selektory znaczników

Jest to najprostsza opcja, która nie wymaga specjalnej wiedzy do pisania. Musisz użyć ich nazwy, aby zarządzać tagami. Załóżmy, że "nagłówek" Twojej strony jest zawijany w tag. Aby użyć go w CSS, musisz użyć selektora nagłówka {}. Zalety - łatwość użycia, wszechstronność. Wady - całkowity brak elastyczności. W powyższym przykładzie wszystkie znaczniki nagłówka zostaną wybrane natychmiast. A co, jeśli potrzebujesz zarządzać tylko jednym?

Selektory zajęć

Najczęściej występujący wariant. Przypisanydo zarządzania tagami za pomocą atrybutu class. Na przykład w twoim kodzie są trzy bloki, z których każdy wymaga określonego koloru. Jak to zrobić? Standardowe selektory CSS nie nadają się do tagów, określają parametry dla wszystkich bloków jednocześnie. Wynik jest prosty. Przypisywanie elementów klas. Na przykład pierwszy element div ma klasę = "czerwony", drugi - klasa = "niebieski", trzeci - klasa = "zielony". Możesz teraz wybrać je za pomocą CSS.


Składnia brzmi: wskaż punkt ("."), Po czym napiszemy nazwę klasy. Aby zarządzać pierwszym blokiem, używamy projektu .red. Drugi to .blue i tak dalej. Ważne! Zaleca się stosowanie czystych wartości atrybutu klasy. Zły dźwięk to użycie transliteracji (na przykład krasiviy-blok) lub losowej kombinacji liter /cyfr (ojfh834871). W takim kodzie jesteście zdezorientowani, nie wspominając o trudnościach, z którymi borykacie się z tymi, którzy będą zaangażowani w projekt po was. Najlepszym rozwiązaniem jest zastosowanie pewnej metodologii, takiej jak BEM. Zalety - dość duża elastyczność. Wady - może istnieć jedna i ta sama klasa w kilku elementach, co oznacza, że ​​będą edytowane jednocześnie. Problem rozwiązuje się za pomocą metodologii, a także dziedziczenia preprocesorów. Pamiętaj, aby opanować mniej, sass lub inny preprocesor, znacznie uprościją pracę.

Selektor według ID

W odniesieniu do tej opcji opinie projektantów i programistów są niejednoznaczne. Niektóre samouczki CSS generalnie nie zalecają używania identyfikatora, ponieważ nie są ostrożnie używanemoże powodować problemy z dziedziczeniem. Jednak wielu specjalistów aktywnie umieszcza je w znacznikach. Zdecyduj się na Ciebie Składnia to: symbol siatki ("#"), a następnie nazwa bloku. Na przykład #red.
Identyfikator różni się od klasy kilkoma parametrami. Po pierwsze strona nie może mieć dwóch identycznych identyfikatorów. Są im przypisane unikalne nazwy. Po drugie, taki selektor ma wyższy priorytet. Oznacza to, że jeśli umieścisz klasę w czerwonej klasie i określisz czerwony kolor tła w tabelach CSS, a następnie przypiszesz identyfikator niebieski i określisz niebieski kolor, blok stanie się niebieski. Korzyści - Możesz zarządzać konkretnym przedmiotem bez zwracania uwagi na styl tagów i klas. Wady są łatwo mylone z dużą liczbą identyfikatorów i klas. Ważne! Jeśli używasz metody BEM (lub jej odpowiedników), generalnie nie potrzebujesz identyfikatora. Ta technika układania obejmuje użycie unikalnych klas, co jest znacznie wygodniejsze.

Uniwersalny selektor

Składnia: gwiazdka ("*") i nawiasy klamrowe, tj. * {}. Służy do przypisywania niektórych atrybutów jednocześnie do wszystkich elementów strony. Kiedy może być potrzebny? Na przykład, jeśli chcesz ustawić właściwość rozmiaru skrzynki strony: border-box. Może być używany nie tylko do zarządzania wszystkimi komponentami dokumentu, ale także do kontrolowania wszystkich elementów podrzędnych bloku, na przykład div * {}. Korzyści - Możesz zarządzać dużą liczbą elementów naraz. Wady -nie wystarczająco elastyczny. Ponadto użycie tego selektora w niektórych przypadkach spowalnia pracę strony.

Według atrybutów

Umożliwia kontrolowanie elementu o określonym atrybucie. Na przykład masz kilka znaczników wejściowych z innym atrybutem typu. Jeden z nich - tekst, drugi - hasło, trzeci - numer. Oczywiście możesz umieścić każdą klasę lub identyfikator, ale nie zawsze jest to wygodne. Selektory CSS dają atrybutom możliwość określania wartości dla określonych znaczników z maksymalną dokładnością. Na przykład, oto jak: input [type = 'text'] {} Ten selektor atrybutu wybiera cały tekst typu wejściowego. Narzędzie jest bardzo elastyczne, można go używać z dowolnymi tagami, które mogą mieć atrybuty. Ale to nie wszystko! Specyfikacja CSS ma możliwość kontrolowania elementów nawet przy dużej wygodzie!
Wyobraź sobie, że twoja strona ma dane wejściowe z atrybutem placeholder = "Wprowadź nazwę" i wpisz placeholder = "Wprowadź hasło". Można je również wybrać za pomocą selektora! W tym celu stosuje się następujący wzór: input [placeholder = "Wpisz nazwę"] {} lub input [placeholder = "Wprowadź hasło"] Bardziej elastyczna praca z atrybutami. Załóżmy na przykład, że masz wiele tagów o podobnych tytułach atrybutów (powiedzmy "Kaspijski" i "Kaspijski"). Aby wybrać oba, używamy następujących selektorów: [title * = "kaspiisk"] CSS wybierze wszystkie elementy w tytule zawierające znaki "Kaspijskie", czyli zarówno "Kaspijskie", jak i "Kaspijskie". Możesz także wybrać tagi, których atrybuty zaczynają się od określonych znaków: [title ^ = "żądany znak"] {} lub kończący się nimi:[title $ = "Wymagany znak"] {}. Korzyści - maksymalna elastyczność. Możesz wybrać dowolne istniejące elementy strony bez żadnych problemów z klasami. Wady - stosowane stosunkowo rzadko, tylko w określonych przypadkach. Wielu planistów preferuje metodologię, ponieważ łatwiej jest określić klasę niż rozmieszczać wiele nawiasów kwadratowych i znaków "jeden". Ponadto selektory te nie działają w przeglądarce Internet Explorer 7 i starszych. Kto jednak potrzebuje starego Internet Explorera?

Selektory pseudoklasowe

Pseudo-klasa oznacza stan elementu. Na przykład: hover - co dzieje się z częścią strony po najechaniu kursorem ,: odwiedzony - odwiedzone łącze. Należą do nich elementy takie jak: first-child: last-child. Ten typ selektorów jest aktywnie wykorzystywany w bieżącym layoucie, ponieważ pozwala ci uczynić stronę "na żywo" bez użycia javascript. Na przykład chcesz się upewnić, że po kliknięciu przycisku z klasą btn zmienia się jego kolor. Aby to zrobić, użyj następującego projektu: .btn: hover {background-color: red; } Dla urody, możesz określić w głównych właściwościach tego przycisku właściwość przejścia, na przykład, w 05 s - w tym przypadku przycisk będzie migał nie natychmiastowo, ale przez pół sekundy. Zalety - są aktywnie wykorzystywane do "ożywiania" stron. Łatwy w użyciu. Wady - nie są. To naprawdę przydatne narzędzie. Jednak niedoświadczone procedury obsługi mogą być mylone z dużą liczbą pseudoklas. Problem rozwiązuje się poprzez trening i trening.

Selektory pseudoelementowe

"Pseudoelementy" to teCzęści strony, które nie są w formacie HTML, ale możesz nimi zarządzać. Nic nie rozumiałeś? Wszystko jest łatwiejsze niż się wydaje. Na przykład chcesz, aby pierwsza litera w linii była duża i czerwona, pozostawiając drugi tekst małym i czarnym. Oczywiście możesz umieścić ten list w odpowiedniej klasie, ale jest on długi i nudny. Znacznie łatwiej jest wybrać cały akapit i użyć pseudoelementu :: first-letter. Pozwala kontrolować wygląd pierwszej litery. Istnieje dość duża liczba pseudokomórkowych. Wymień je, ponieważ jeden artykuł raczej się nie sprawdzi. Możesz znaleźć odpowiednie informacje w swojej ulubionej wyszukiwarce. Zalety - pozwalają elastycznie dopasowywać wygląd strony. Wady - nowicjusze są często myleni z nimi. Wiele selektorów tego typu działa tylko w niektórych przeglądarkach.

Podsumujmy

Selektor jest potężnym narzędziem do kontrolowania przepływu dokumentu. Dzięki niemu możesz wybrać absolutnie każdy element strony (nawet istniejący tylko warunkowo). Pamiętaj, aby przestudiować wszystkie istniejące opcje lub przynajmniej je zapisać. Jest to szczególnie ważne w przypadku tworzenia złożonych stron o nowoczesnym designie i dużej liczbie interaktywnych elementów.