Zrozumienie 3 rodzajów stylów CSS
Wbudowane, osadzone i zewnętrzne arkusze stylów: oto, co musisz wiedzieć
Tworzenie stron internetowych typu front-end jest często przedstawiane jako trójnożny stołek składający się z:
Druga część tego stołka, Kaskadowe Arkusze Stylów, obsługuje trzy różne style, które możesz dodać do dokumentu.
- Style wbudowane
- Osadzone style
- Style zewnętrzne
Każdy z tych stylów CSS ma unikalne zalety i wady.
hardik pethani / Getty Images
Style wbudowane
Style wbudowane to style zapisane bezpośrednio w znaczniku w dokumencie HTML. Style wbudowane wpływają tylko na konkretny tag, do którego są stosowane:
|_+_|
Ta reguła CSS dezaktywuje standardową dekorację podkreślenia tekstu dla tego jednego linku. Nie zmieniłoby to jednak żadnego innego linku na stronie. Jest to jedno z ograniczeń stylów wbudowanych. Ponieważ zmieniają się one tylko w określonym elemencie, musisz zaśmiecać swój kod HTML tymi stylami, aby uzyskać ujednolicony projekt strony. To nie jest najlepsza praktyka: w rzeczywistości jest to jeden krok usunięty z czasów czcionka tagi oraz domieszka struktury i stylu na stronach internetowych.
Style inline wymagają również bardzo wysokiej szczegółowości. To sprawia, że trudno je zastąpić innymi, nieinline stylami. Na przykład, jeśli chcesz, aby witryna była responsywna i zmienić wygląd elementu w określonych punktach przerwania za pomocą zapytania medialne , style wbudowane w elemencie sprawiają, że jest to trudne.
Style wbudowane są odpowiednie tylko wtedy, gdy używasz ich oszczędnie, w podejściu „wyjątku od reguły”, który oddziela jeden lub dwa elementy od ich elementów równorzędnych na stronie.
Osadzone style
Osadzone style znajdują się w nagłówku dokumentu. Są zamknięte w i wyglądają jak zewnętrzne pliki CSS w tej części dokumentu.
Osadzone style wpływają tylko na tagi na stronie, w której są osadzone. Po raz kolejny takie podejście neguje jedną z mocnych stron CSS. Ponieważ każda strona zawiera style zdefiniowane w nagłówku, jeśli chcesz wprowadzić zmianę w całej witrynie — na przykład zmienić kolor linków z czerwonego na zielony — musisz wprowadzić tę zmianę na każdej stronie, ponieważ każda strona używa osadzonego stylu arkusz. To podejście jest lepsze niż style inline, ale w wielu przypadkach nadal jest problematyczne.
|_+_|Arkusze stylów dodawane do nagłówka dokumentu dodają również znaczną ilość kodu znaczników do tej strony, co może również utrudnić zarządzanie stroną w przyszłości.
Zaletą osadzonych arkuszy stylów jest to, że ładują się one natychmiast wraz ze stroną, zamiast wymagać ładowania innych plików zewnętrznych. Ta technika może być korzystna z punktu widzenia szybkości pobierania i wydajności.
Zewnętrzne arkusze stylów
Większość dzisiejszych witryn internetowych korzysta z zewnętrznych arkuszy stylów. Style zewnętrzne to style zapisane w oddzielnym dokumencie, a następnie dołączone do różnych dokumentów internetowych. Są wywoływane w głównym dokumencie za pomocą w nagłówku dokumentu. Zewnętrzne arkusze stylów mogą znajdować się na tym samym serwerze co HTML lub mogą być pobierane z innego serwera. Dzieje się tak często w przypadku zasobów, takich jak czcionki, które wiele witryn pożycza od Google.
Zewnętrzne arkusze stylów wpływają na każdy dokument, do którego są dołączone, co oznacza, że jeśli masz 20-stronicową witrynę, w której każda strona używa tego samego arkusza stylów (zazwyczaj tak się to robi), możesz dokonać wizualnej zmiany na każdej z tych stron, po prostu edytowanie tego jednego arkusza stylów. Ta ekonomia znacznie ułatwia długoterminowe zarządzanie obiektem.
|_+_|Większość profesjonalnych projektantów stron internetowych używa podstawowego pliku CSS do zarządzania układem i projektem witryny.
Wadą zewnętrznych arkuszy stylów jest to, że wymagają stron do pobierania i ładowania tych zewnętrznych plików. Nie każda strona użyje każdego stylu w arkuszu CSS, więc wiele stron załaduje znacznie większą stronę CSS, niż faktycznie potrzebujesz.
Chociaż prawdą jest, że występuje spadek wydajności zewnętrznych plików CSS, z pewnością można go zminimalizować. Realistycznie rzecz biorąc, pliki CSS to tylko pliki tekstowe, więc na początku nie są duże. Jeśli cała witryna korzysta z jednego pliku CSS, zyskujesz również możliwość buforowania tego dokumentu po początkowym załadowaniu, co oznacza, że przy niektórych wizytach może wystąpić niewielki spadek wydajności, ale kolejne strony będą korzystały z buforowany plik CSS, więc każde trafienie zostanie zanegowane.