Lista kluczowych elementów i koncepcji CSS, które każdy programista powinien znać:
- Selektory: Zrozumienie różnych rodzajów selektorów, takich jak selektor typu, selektor klasy, selektor identyfikatora, selektor atrybutu itp., oraz jak są używane do wybierania elementów do stylizacji.
- Właściwości CSS: Znajomość podstawowych właściwości CSS, takich jak
color, font-size, margin, padding, border, background, display, position, width, height itp.
- Kaskadowość: Zrozumienie zasady kaskadowości w CSS, która określa, które reguły stylów mają pierwszeństwo w przypadku konfliktów.
- Box Model: Znajomość modelu pudełka (box model) w CSS, który opisuje, jak elementy HTML są renderowane w przeglądarce, w tym marginesy, obramowania, wypełnienia i treść.
- Flexbox: Znajomość modelu układu Flexbox, który ułatwia tworzenie elastycznych i responsywnych układów stron.
- Grid Layout: Zrozumienie układu siatkowego (Grid Layout) w CSS, który pozwala na tworzenie zaawansowanych układów stron z wykorzystaniem siatki.
- Pseudoklasy i pseudoelementy: Znajomość pseudoklas i pseudoelementów, takich jak
:hover, :active, :before, :after, które pozwalają na definiowanie stylów dla określonych stanów lub elementów.
- Animacje i przejścia: Zrozumienie tworzenia animacji i przejść w CSS za pomocą
@keyframes i właściwości takich jak transition i animation.
- Responsywność: Umiejętność tworzenia responsywnych projektów, które dostosowują się do różnych rozmiarów ekranów i urządzeń.
- Media Queries: Znajomość mediów zapytań (media queries) w CSS, które pozwalają na dostosowanie stylów do różnych warunków ekranu.
- Z-index: Zrozumienie właściwości
z-index, która kontroluje kolejność nakładania elementów na stronie.
- Pozycjonowanie: Umiejętność kontrolowania pozycjonowania elementów za pomocą właściwości takich jak
position, top, left, right, bottom.
- Cascading Style Sheets (CSS) Variables: Zrozumienie i wykorzystywanie zmiennych CSS (Custom Properties), które pozwalają na definiowanie wielokrotnie używanych wartości w jednym miejscu.
- Transformacje: Znajomość transformacji CSS, takich jak
rotate, scale, translate, które pozwalają na manipulację elementami w trójwymiarowym przestrzeni.
- Style pseudo-klasy
:focus, :active, i :hover: Zrozumienie i wykorzystywanie tych pseudo-klas do definiowania stylów dla elementów w różnych stanach.
- Fonty: Znajomość właściwości związanych z czcionkami, takich jak
font-family, font-weight, font-size, text-align itp.
- Transformacje i przejścia: Umiejętność tworzenia animacji i efektów przejść za pomocą właściwości
transform i transition.
- Jednostki: Zrozumienie różnych jednostek w CSS, takich jak piksele, procenty, em, rem, vh, vw i umiejętność ich odpowiedniego stosowania.
- Warunkowe style: Znajomość warunkowych instrukcji CSS, takich jak
@media i @supports, które pozwalają na stosowanie stylów tylko w określonych warunkach.