Kaskadowe arkusze stylów (CSS) pozwalają na zdefiniowanie wyglądu elementu poprzez zahaczenie o atrybuty, które zastosujesz do tego elementu. Atrybuty te mogą być zarówno identyfikatorem, jak i klasą i, podobnie jak wszystkie atrybuty, dodają pomocne informacje do elementów, do których są przyłączone.
W zależności od tego, który atrybut dodajesz do elementu, możesz napisać selektor CSS, aby zastosować niezbędne style wizualne, które są potrzebne, aby uzyskać wygląd i działanie tego elementu i witryny jako całości.
Podczas gdy albo identyfikatory, albo klasy działają w celu dołączenia do nich za pomocą reguł CSS, nowoczesne metody projektowania stron internetowych preferują klasy w porównaniu z identyfikatorami, ponieważ są one mniej szczegółowe i łatwiejsze w obsłudze. Tak, nadal znajdziesz wiele witryn, które używają identyfikatorów, ale te atrybuty są stosowane bardziej oszczędnie niż w przeszłości, podczas gdy klasy przejmują nowoczesne strony internetowe.
Pojedyncze lub wiele klas w CSS?
W większości przypadków możesz przypisać atrybutowi pojedynczej klasy do elementu, ale w rzeczywistości nie jesteś ograniczony do jednej tylko klasy, w której masz identyfikatory. Chociaż element może mieć tylko jeden atrybut, możesz całkowicie podać elementowi wiele klas, a w niektórych przypadkach sprawi, że strona będzie łatwiejsza w stylizacji i bardziej elastyczna!
Jeśli chcesz przypisać wiele klas do elementu, możesz dodać dodatkowe klasy i po prostu oddzielić je spacją w swoim atrybucie.
Na przykład ten akapit ma trzy klasy:
To byłby tekst akapitu
Ustawia następujące trzy klasy na znaczniku akapitu:
- Pullquote
- Opisany
- Lewo
Zwróć uwagę na spacje między każdą z tych wartości klasy. Te przestrzenie określają je jako różne, indywidualne klasy. Dlatego też nazwy klas nie mogą zawierać spacji, ponieważ spowodowałoby to ustawienie ich jako oddzielnych klas. Na przykład, jeśli użyjesz opcji "pullquote-featured-left" bez spacji, będzie to jedna wartość klasy, ale powyższy przykład, w którym te trzy słowa są oddzielone spacją, ustawia je jako indywidualne wartości. Ważne jest, aby zrozumieć tę koncepcję, decydując, które wartości klas mają być używane na stronach internetowych.
Gdy masz już wartości klas w HTML, możesz je przypisać jako klasy w CSS i zastosować style, które chcesz dodać. Na przykład.
.pullquote {…}.featured {…}p.left {…}
W tych przykładach pary deklaracji i wartości CSS znajdowałyby się wewnątrz nawiasów klamrowych, czyli w jaki sposób style te miałyby zastosowanie do odpowiedniego selektora.
Jeśli ustawisz klasę dla określonego elementu (na przykładp.left), możesz nadal używać go jako części listy zajęć; należy jednak pamiętać, że wpłynie to tylko na elementy określone w CSS. Innymi słowy, p.left styl będzie miał zastosowanie tylko do akapitów z tą klasą, ponieważ twój selektor faktycznie mówi, aby zastosować ją do "akapitów z wartością klasy" left "". Natomiast pozostałe dwa selektory w przykładzie nie określają pewnego elementu, więc będą miały zastosowanie do dowolnego elementu, który używa tych wartości klasy.
Zalety wielu klas
Wiele klas 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 możesz chcieć szybko przesuwać elementy w lewo lub w prawo. Możesz napisać dwie klasy
lewo i
dobrze z po prostu
float: left; i
float: right; w nich. Następnie, gdy masz element, który chcesz unosić w lewo, po prostu dodajesz klasę "left" do jej listy klas.
Istnieje jednak cienka linia do przejścia tutaj. Pamiętaj, że standardy sieciowe dyktują podział stylu i struktury. Struktura jest obsługiwana przez HTML, podczas gdy styl jest w CSS. Jeśli twój dokument HTML jest wypełniony elementami, które wszystkie mają nazwy klas, takie jak "czerwony" lub "lewy", czyli nazwy, które określają, jak powinny wyglądać elementy, a nie to, czym są, przekraczasz tę linię między strukturą i stylem. Staram się ograniczać moje nie-semantyczne nazwy klas tak bardzo, jak to możliwe z tego powodu.
Wiele klas, semantyki i JavaScript
Kolejną zaletą korzystania z wielu klas jest to, że daje on o wiele więcej możliwości interaktywności.
Możesz zastosować nowe klasy do istniejących elementów przy użyciu JavaScriptu bez usuwania żadnej z początkowych klas. Możesz także użyć klas do zdefiniowania semantyki elementu. Oznacza to, że możesz dodać dodatkowe klasy, aby zdefiniować, co ten element oznacza semantycznie. Tak działa Microformats.
Wady wielu klas
Największą wadą korzystania z wielu klas w swoich elementach jest to, że mogą z czasem sprawiać wrażenie trochę nieporęcznych. Może być trudne określenie, jakie style wpływają na element i czy wpływają na niego jakiekolwiek 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 bardzo szybko pracować, jeśli nie jesteś ostrożny.
Podczas korzystania z wielu klas istnieje również ryzyko, że styl jednej klasy nadpisze styl innej, nawet jeśli nie było to zamierzone. To może utrudnić zrozumienie, dlaczego twoje style nie są stosowane, nawet jeśli wydaje się, że powinny. Musisz być świadomy specyfiki, nawet z atrybutami zastosowanymi 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 klasy wpływają na Twoje style i uniknąć tego problemu ze sprzecznymi stylami i atrybutami.
