Przeczytaj poniżej, aby uzyskać pełne wyjaśnienie działania kaskadowych arkuszy stylów. Wyświetlamy nasze aplikacje u góry strony, aby można je było łatwo znaleźć i używać. Jeśli czytasz ten artykuł przez e-mail lub kanał, kliknij, aby skompresuj CSS.
Jeśli faktycznie nie tworzysz witryn, możesz nie w pełni rozumieć kaskadowe arkusze stylów (CSS). CSS to język arkuszy stylów używany do opisywania wyglądu i formatowania dokumentu napisanego w HTML or XML. CSS może służyć do określania stylów różnych elementów, takich jak czcionka, kolor, odstępy i układ. CSS pozwala oddzielić prezentację dokumentu HTML od jego treści, ułatwiając utrzymanie i aktualizowanie stylu wizualnego witryny.
Struktura języka CSS
selektor to element HTML, który chcesz stylizować, a własność oraz wartość zdefiniuj style, które chcesz zastosować do tego elementu:
selector {
property: value;
}Na przykład poniższy CSS sprawi, że all <h1> elementy na stronie mają kolor czerwony i rozmiar czcionki 32px:
CSS
h1 {
color: red;
font-size: 32px;
}Wydajność
Nagłówek
Możesz także określić CSS dla unikalnego identyfikatora elementu:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}Wydajność
Lub zastosuj klasę dla wielu elementów:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}Wydajność
Chcę podświetlić słowo w tagu span.
Możesz dołączyć CSS do swojego dokumentu HTML na trzy sposoby:
- Wbudowany CSS, używając
styleatrybut w elemencie HTML - Wewnętrzny CSS, używając a
<style>element w<head>twojego dokumentu HTML - Zewnętrzny CSS, używając osobnego pliku .css połączonego z twoim dokumentem HTML za pomocą
<link>element w<head>twojego dokumentu HTML
Responsywny CSS
CSS jest niezwykle elastyczny i może być używany do dostosowywania wyświetlania elementów w oparciu o rozdzielczość ekranu, dzięki czemu możesz mieć ten sam kod HTML, ale go zbudować czuły do rozdzielczości urządzenia:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}Kompresja CSS
W powyższym przykładzie widać, że istnieje komentarz, zapytanie o media i wiele stylów, które wykorzystują spacje i nowe wiersze do uporządkowania widoku CSS. Doskonałą praktyką jest minimalizowanie lub kompresowanie CSS w witrynie, aby zmniejszyć rozmiary plików, a co za tym idzie, czas potrzebny na zażądanie i wyrenderowanie stylu. To nie jest mała kwota… na niektórych przykładach powyżej widać ponad 50% oszczędności.
Wiele konfiguracji serwerów oferuje narzędzia, które automatycznie kompresują CSS w locie i buforują zminimalizowany plik, dzięki czemu nie musisz robić tego ręcznie.
Co to jest SCSS?
Bezczelny CSS (SCSS) to preprocesor CSS, który dodaje dodatkową funkcjonalność i składnię do języka CSS. Rozszerza możliwości CSS, umożliwiając korzystanie ze zmiennych, domieszek, funkcji i innych funkcji, które nie są dostępne w standardowym CSS.
Zalety SCSS
- Ulepszona konserwacja: dzięki zmiennym możesz przechowywać wartości w jednym miejscu i ponownie wykorzystywać je w całym arkuszu stylów, co ułatwia konserwację i aktualizację stylów.
- Lepsza organizacja: dzięki domieszkom możesz grupować i ponownie wykorzystywać zestawy stylów, dzięki czemu arkusz stylów jest lepiej zorganizowany i łatwiejszy do odczytania.
- Zwiększona funkcjonalność: SCSS zawiera wiele funkcji niedostępnych w standardowym CSS, takich jak funkcje, struktury kontrolne (np. if/else) i operacje arytmetyczne. Pozwala to na bardziej dynamiczną i wyrazistą stylizację.
- Lepsza wydajność: pliki SCSS są kompilowane do CSS, co może poprawić wydajność, zmniejszając ilość kodu, który musi zostać przeanalizowany przez przeglądarkę.
Wady SCSS
- Krzywa uczenia się: SCSS ma inną składnię niż standardowy CSS i musisz nauczyć się tej nowej składni, zanim będziesz mógł z niej efektywnie korzystać.
- Dodatkowa złożoność: chociaż SCSS może sprawić, że arkusz stylów będzie lepiej zorganizowany i łatwiejszy w utrzymaniu, może również wprowadzić dodatkową złożoność do bazy kodu, zwłaszcza jeśli nie znasz nowych funkcji i składni.
- Narzędzia: Aby używać SCSS, potrzebujesz kompilatora, który przetłumaczy Twój kod SCSS na CSS. Wymaga to dodatkowej konfiguracji i narzędzi, co może stanowić barierę wejścia dla niektórych programistów.
W poniższym przykładzie kod SCSS wykorzystuje zmienne do przechowywania wartości ($primary-color oraz $font-size), które mogą być ponownie użyte w całym arkuszu stylów. Kod CSS generowany z tego kodu SCSS jest równoważny, ale nie zawiera zmiennych. Zamiast tego wartości zmiennych są używane bezpośrednio w CSS.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}Inną cechą SCSS zademonstrowaną w tym przykładzie są zagnieżdżone style. W kodzie SCSS, h1 style są zagnieżdżone w body style, co nie jest możliwe w standardowym CSS. Podczas kompilacji kodu SCSS zagnieżdżone style są przekształcane w oddzielne style w kodzie CSS.
Ogólnie rzecz biorąc, SCSS ma wiele zalet w porównaniu ze standardowym CSS, ale ważne jest, aby rozważyć kompromisy i wybrać odpowiednie narzędzie do swojego projektu w oparciu o swoje potrzeby i ograniczenia.
Związane z Martech Zone Treść
