CSS (Cascading Style Sheets) to język używany do opisywania wyglądu i formatowania dokumentów napisanych w HTML. Właściwości CSS pozwalają na kontrolowanie układu, kolorów, czcionek, odstępów, cieni, animacji i wielu innych aspektów wizualnych strony internetowej. CSS umożliwia stylizację zarówno prostych, jak i zaawansowanych elementów, a dzięki swojej elastyczności pozwala na tworzenie responsywnych, dynamicznych i atrakcyjnych wizualnie stron.
Poniżej znajduje się spis najważniejszych właściwości CSS, z krótkimi opisami ich funkcji. Z ich pomocą możesz precyzyjnie kontrolować wygląd i układ elementów na stronie.
Wymiary i pozycjonowanie:
width| Ustawia szerokość elementu.height| Ustawia wysokość elementu.max-width| Ustawia maksymalną szerokość elementu.max-height| Ustawia maksymalną wysokość elementu.min-width| Ustawia minimalną szerokość elementu.min-height| Ustawia minimalną wysokość elementu.margin| Ustawia zewnętrzny margines elementu (odstęp od innych elementów).padding| Ustawia wewnętrzny odstęp elementu (wewnątrz granicy).border| Ustawia obramowanie wokół elementu.box-sizing| Określa, jak rozmiary elementu są obliczane (czy uwzględniają marginesy i obramowania).position| Określa sposób pozycjonowania elementu (np.static,relative,absolute,fixed,sticky).top,bottom,left,right| Określają przesunięcie elementu w stosunku do jego rodzica (dla elementów pozycjonowanych).z-index| Określa, które elementy mają być wyświetlane wyżej na osi Z (przód/tył).
Kolory i tło:
color| Ustawia kolor tekstu elementu.background-color| Ustawia kolor tła elementu.background-image| Ustawia obraz tła elementu.background-position| Określa pozycję obrazu tła.background-repeat| Określa, czy obraz tła powinien się powtarzać.background-size| Ustawia rozmiar obrazu tła (np.cover,contain).opacity| Ustawia przezroczystość elementu.
Tekst i czcionki:
font-family| Ustawia rodzinę czcionek elementu.font-size| Ustawia rozmiar tekstu.font-weight| Określa grubość czcionki (np.bold,normal).font-style| Określa styl czcionki (np.italic).line-height| Ustawia wysokość linii tekstu.letter-spacing| Ustawia odstęp między literami.text-align| Ustawia wyrównanie tekstu (np.left,right,center,justify).text-decoration| Ustawia dekorację tekstu (np.underline,line-through).text-transform| Zmienia sposób wyświetlania tekstu (np.uppercase,lowercase,capitalize).text-shadow| Dodaje cień do tekstu.word-spacing| Ustawia odstęp między słowami.white-space| Określa sposób przetwarzania białych znaków w tekście.text-overflow| Określa, jak radzić sobie z przepełnieniem tekstu (np.ellipsis).
Układ strony:
display| Określa sposób wyświetlania elementu (np.block,inline,inline-block,flex,grid,none).flex| Ustawia właściwości elementu w układzie Flexbox (np.flex-grow,flex-shrink,flex-basis).justify-content| Wyrównuje elementy Flexbox wzdłuż głównej osi (np.flex-start,center,space-between).align-items| Wyrównuje elementy Flexbox wzdłuż osi poprzecznej (np.stretch,center).flex-direction| Określa kierunek układania elementów Flexbox (np.row,column).flex-wrap| Określa, czy elementy Flexbox powinny zawijać się na nową linię.grid-template-columns| Definiuje kolumny w układzie Grid.grid-template-rows| Definiuje wiersze w układzie Grid.grid-area| Umożliwia przypisanie elementu do obszaru siatki (Grid).gap| Ustawia odstęp między wierszami i kolumnami w układzie Flexbox i Grid.float| Określa pływanie elementu w lewo lub prawo w stosunku do otaczającej treści.clear| Określa, czy element ma “czyścić” pływające elementy.
Animacje i transformacje:
transition| Definiuje przejście między dwoma stanami elementu.transition-property| Określa, które właściwości CSS mają być animowane.transition-duration| Określa czas trwania przejścia.transition-timing-function| Określa funkcję czasu przejścia (np.ease,linear).animation| Definiuje animację CSS.animation-name| Określa nazwę animacji zdefiniowanej za pomocą@keyframes.animation-duration| Ustawia czas trwania animacji.transform| Umożliwia przekształcanie elementów (np.rotate,scale,translate).rotate| Obraca element o określoną liczbę stopni.scale| Zmienia rozmiar elementu w poziomie i/lub pionie.translate| Przesuwa element w poziomie i/lub pionie.
Cienie i obramowania:
border| Definiuje styl, kolor i szerokość obramowania.border-radius| Ustawia zaokrąglone rogi elementu.box-shadow| Dodaje cień do elementu.
Responsywność:
@media| Definiuje warunki (media queries) dla responsywnych stylów.max-width| Używane w media queries, definiuje maksymalną szerokość urządzenia.min-width| Używane w media queries, definiuje minimalną szerokość urządzenia.orientation| Określa orientację urządzenia (np.portraitlublandscape).
CSS Variables (Custom Properties):
--custom-property| Definiuje zmienną CSS.var()| Umożliwia użycie wartości zmiennej CSS.
Spis Treści - darmowy kurs HTML i CSS
Podstawy:
Wprowadzenie: Jak przygotować środowisko pracy
Lekcja 1: Podstawowe tagi HTML i struktura dokumentu
Lekcja 2: Formatowanie tekstu, linki i obrazki
Lekcja 3: Listy, tabele i formularze w HTML
Lekcja 4: Wprowadzenie do CSS
Lekcja 5: Rozszerzenie podstawowych właściwości CSS
Zaawansowane:
Lekcja 6: Semantyczne HTML5
Lekcja 7: Zaawansowane formularze w HTML5
Lekcja 8: Multimedia w HTML5
Lekcja 9: Flexbox – Elastyczny układ stron
Lekcja 10: CSS Grid Layout – Potężny system układów
Lekcja 11: CSS Animacje i przejścia (transitions)
Lekcja 12: Responsywność i Media Queries
Lekcja 13: CSS Variables (Custom Properties)
Dodatki:
- Spis tagów HTML
- Spis Właściwości CSS
