Kaskadowe arkusze stylów zdefiniuj wygląd elementu strony internetowej, podłączając się do atrybutów, które stosujesz do tego elementu. Atrybuty te mogą być identyfikatorem lub klasą i, podobnie jak wszystkie atrybuty, dodają pomocne informacje do elementów, do których są dołączone.
W zależności od tego, który atrybut dodasz do elementu, możesz napisać selektor CSS, aby zastosować niezbędne style wizualne, które są potrzebne do osiągnięcia wyglądu i stylu danego elementu i strony internetowej jako całość.
Podczas gdy identyfikatory lub klasy działają w celu połączenia się z nimi za pomocą reguł CSS, nowoczesne projektowanie stron internetowych Metody faworyzują klasy nad identyfikatorami, po części dlatego, że są mniej specyficzne i ogólnie łatwiejsze w obsłudze.
Jedna lub więcej klas w CSS?
W większości przypadków przypisujesz pojedynczy atrybut klasy do elementu, ale w rzeczywistości nie jesteś ograniczony tylko do jednej klasy, tak jak w przypadku identyfikatorów. Podczas gdy żywioł może mieć tylko jeden atrybut ID, możesz nadać elementowi kilka klas, a w niektórych przypadkach ułatwi to stylizację strony i wiele więcej elastyczne.
Jeśli potrzebujesz przypisać kilka klas do elementu, dodaj dodatkowe klasy i po prostu oddziel je spacją w swoim atrybucie.
Na przykład ten akapit ma trzy klasy:
To byłby tekst akapitu
Ustawia to następujące trzy klasy w znaczniku akapitu:
- Cytat
- Opisany
- Lewo
Zwróć uwagę na spacje między każdą z tych wartości klas. To właśnie te przestrzenie czynią je różnymi, indywidualnymi klasami. Dlatego też nazwy klas nie mogą zawierać spacji, ponieważ spowoduje to ustawienie ich jako oddzielnych klas.
Gdy masz już swoje wartości klasowe w HTML, możesz następnie przypisać je jako klasy w swoim CSS i zastosować style, które chcesz dodać. Na przykład.
cytat {... }
.polecane {... }
str.lewo {... }
W tych przykładach deklaracje CSS i pary wartości pojawiają się w nawiasach klamrowych, co jest sposobem zastosowania tych stylów do odpowiedniego selektora.
Jeśli ty ustawić klasę na określony element (na przykład, p.w lewo), nadal możesz go używać jako części listy klas; należy jednak pamiętać, że wpłynie to tylko na te elementy, które są określone w CSS. Innymi słowy, p.w lewo styl będzie miał zastosowanie tylko do akapitów z tą klasą, ponieważ twój selektor faktycznie mówi, aby zastosować go do "paragrafów o wartości klasy równej lewo”, Dla kontrastu, pozostałe dwa selektory w przykładzie nie określają określonego elementu, więc będą miały zastosowanie do każdego elementu, który używa tych wartości klasy.
Wiele klas, semantyka i JavaScript
Kolejną zaletą korzystania z kilku klas jest zwiększenie możliwości interaktywności.
Zastosuj nowe klasy do istniejących elementów za pomocą JavaScript bez usuwania żadnej z klas początkowych. Możesz także użyć klas do zdefiniowania semantyka elementu — dodaj dodatkowe klasy, aby zdefiniować semantycznie znaczenie tego elementu. Takie podejście jest jak Mikroformaty Pracuje.
Zalety wielu klas
Nałożenie kilku klas na warstwy może ułatwić dodawanie efektów specjalnych do elementów bez konieczności tworzenia zupełnie nowego stylu dla tego elementu.
Na przykład, aby unosić elementy w lewo lub w prawo, możesz napisać dwie klasy:
lewo.
i.
dobrze.
z po prostu.
pływak: lewy;
i.
pływak: w prawo;
w nich. Następnie za każdym razem, gdy masz element, który musisz przesunąć w lewo, po prostu dodaj klasę „w lewo” do jej listy klas.
Istnieje jednak cienka linia, aby przejść tutaj. Pamiętaj, że standardy sieciowe dyktują oddzielenie stylu od struktury. Struktura jest obsługiwana za pomocą HTML, podczas gdy styl jest w CSS. Jeśli Twój dokument HTML jest wypełniony elementami, które mają nazwy klas, takie jak „czerwony” lub „lewy”, które są nazwami: dyktuj, jak powinny wyglądać elementy, a nie czym są, przekraczasz granicę między strukturą a stylem.
Wady wielu klas
Największą wadą korzystania z kilku jednoczesnych klas na elementach jest to, że może to sprawić, że z czasem będą one nieco nieporęczne do oglądania i zarządzania. Może być trudno określić, jakie style wpływają na element i czy wpływają na niego jakieś skrypty. Wiele dostępnych obecnie frameworków, takich jak Bootstrap, intensywnie wykorzystuje elementy z wieloma klasami. Ten kod może wymknąć się spod kontroli i ciężko pracować z nim bardzo szybko, jeśli nie będziesz ostrożny.
Kiedy używasz kilku klas, ryzykujesz również, że styl jednej klasy zastąpi styl innej. Ta kolizja może utrudnić zrozumienie, dlaczego Twoje style nie są stosowane, nawet jeśli wydaje się, że powinny. Zachowaj świadomość specyfiki, nawet przy atrybutach zastosowanych do tego jednego elementu.
Korzystając z narzędzia takiego jak narzędzia dla webmasterów w przeglądarce Google Chrome, możesz łatwiej zobaczyć, jak Twoje zajęcia wpływają na Twoje style, i uniknąć problemu sprzecznych stylów i atrybutów.