Spis treści

  1. Czym jest CSS?
  2. Podpinanie CSS do HTML
  3. Hierarchia ważności metod
  4. Selektory
  5. Komentarze
  6. Własności
  7. Padding a margin
  8. Jednostki

Czym jest CSS?

Rozwinięciem skrótu CSS (ang.Cascading Style Sheets) są kaskadowe arkusze stylów. Słowo arkusz można traktować jako plik, w którym zapisujemy reguły formatowania, które przypisujemy do konkretnych elementów HTML poprzez znane nam selektory.
Reguły CSS to inaczej zbiory zasad służące do formatowania treści. Zbudowane są one z własnośc i (ang. property) oraz jej wartości(ang. value). zasada-css Nazwa wartości musi być zawsze poprzedzona dwukropkiem : , a cała reguła zakończona średnikiem ; .
własność: wartość;
Jeśli nazwa własności jest kilkuczłonowa, zazwyczaj kolejne wyrazy oddzielane są myślnikiem -, tak jak background-color.

Metody podpinania CSS do HTML


Arkusz zewnętrzny

Zewnętrzny arkusz CSS dołączamy do dokumentu HTML znacznikiem znajdującym się w sekcji <head> podstrony (wartość atrybutu href musi wskazywać rzeczywisty, istniejący plik): Jest to najpopularniejszy sposób podpinania CSS.

Znaczniki <style> w sekcji head

Kod CSS można osadzić pomiędzy tagami <style></style>, koniecznie umieszczonymi wewnątrz sekcji : Jeśli już stosujemy tagi <style></style> to zazwyczaj w celu przesłonięcia w tym konkretnym dokumencie wybranych stylów z arkusza zewnętrznego (lub ewentualnie chcemy dodać style, których tam zabrakło).

Style inline (wewnątrz atrybutu znacznika)

Stylizowanie inline (ang. w linii), oznacza zapisanie CSS jako wartości atrybutu style wybranego tagu HTML, znajdującego się w sekcji :

Hierarchia ważności metod

Hierarchia ważności poszczególnych sposobów to: 3 > 2 > 1. Style inline przesłaniają te spomiędzy tagów <style>, zaś one przesłaniają właściwości zdefiniowane w zewnętrznym arkuszu (o ile podpięcie pliku tagiem znalazło się przed tagami <style>). Jest to logiczne - style inline występują węwnątrz tagów, stąd siłą rzeczy zawsze znajdą się poniżej sekcji <head> (tagi "siedzą" przecież w <body>). I dlatego style inline są najważniejsze w hierarchii - występują najpóźniej, a więc obowiązują.

Złamanie hierarchii

Możemy wymusić obowiązywanie jakiegoś stylu. Dokonujemy tego stosując po spacji (a przed średnikiem) klauzulę !important (ang. ważny):
Wymuszenie czerwonego tła

Selektory CSS

Reguły CSS nie zadziałają dopóki nie przypiszemy ich do określonych elementów html, które aktualnie chcemy sformatować. Za powiązanie reguł CSS z elementami języka Html odpowiedzialne są tzw. selektory (ang. selector od select – wybierać). Jest wiele sposobów tworzenia selektorów w języku CSS. Posłużą do tego m.in same elementy html oraz atrybuty id i class.
Zapis selektora będzie kompletny, gdy dodamy do niego nawiasy klamrowe {}. W nawiasach klamrowych będziemy dodawać reguły CSS.

Komentarze

Poznaliśmy w jaki sposób zakomentować zawartość w HTMl, w CSS równiez jest taka możliwość. Aby zakomentować treść w CSS musimy umieścić ją między znakami /* a */:

Podstawowe i najczęściej używane własności w CSS


Własności czcionki - font

  • font-family: określa rodzina czcionki;
  • font-size: rozmiar czcionki (np.45px, 50%);
  • font-style: styl czcionki (normal, italic, oblique);
  • font-weight: (normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900);
  • font-variant: przekształcanie tekstu na kapitalki(normal, small-caps);

Własności tła - background

  • background-color: kolor tła;
  • background-image: zdjęcie jako tło;
  • background-repeat: powtarzanie tła (repeat, repeat-x, repeat-y, no-repeat);
  • background-size; długość, procent, cover, contain;
  • background-position: x y, x% y%, left|center|right, top|center|bottom;

Własności obramowania - border

  • border-color: kolor obramowania;
  • border-collapse: kondensowanie obramowań komórek;
  • border-radius: zaokrąglenie obramowania;
  • border-spacing: odstępy między komórkami tabeli;
  • border-style: styl obramowania (solid,dotted);
  • border-width: grubość obramowania;
  • border: kolor styl grubość;

właściwości tekstu - text

  • text-align: wyrównanie tekstu ( left, right, center, justify);
  • text-decoration: dekoracja tekstu ( none, underline, overline, line-through, blink);
  • text-indent: wcięcie tekstu (długość w jednostkach lub procentach);
  • text-transform: transformacja tekstu;
  • text-shadow: cieniowanie tekstu;

Pozostałe właściwości

  • float: oblewanie (left,right,none)
  • word-spacing: odstęp między wyrazami;
  • vertical-align: pionowe wyrównanie (baseline, middle, top, bottom, text-top, text-bottom, super, sub, długość w jednostkach, procent);
  • visibility: widzialnośc elementów (visible, hidden, collapse);
  • right: odległość od prawej krawędzi;
  • left: odległość od lewej krawędzi;
  • position: pozycja elementu (static, relative, absolute, fixed);
  • overflow: wypływanie zawartości (visible, hidden, scroll, auto);
  • height: wysokość;
  • width: szerokość;
  • max-height,min-height: maksymalna, minimalna wysokość;
  • max-width,min-width: maksymalna, minimalna szerokość;
  • box-sizing: (content-box, border-box, padding-box);
  • clear: usuwa oblewanie(both, none, left, right);
  • display: okresla typ elementu(inline, block, none, inline-block, table, inline-table, list-item, flex, inline-flex, grid, inline-grid);

Margin a padding

Właściwość padding to odstęp nadawany wewnątrz elementu, zaś margin to jest odstęp nadawany na zewnątrz niego: Istnieje wiele możliwości zapisu marginesu zewnętrznego jak i wewnętrznego, co bardzo nam upraszcza pisanie kodu:

  • Margines określony ze wszystkich stron taki sam:


  • Zapis podwójny: najpierw margines górny i dolny, potem lewy i prawy


  • Zapis potrójny: najpierw margines górny, potem lewy i prawy (ten sam), a na końcu podajemy wartość marginesu dolnego


  • Zapis poczwórny: margines górny, prawy, dolny, lewy (zgodnie z ruchem wskazówek zegara)


  • Margines z jednej, wybranej strony (subatrybuty left, right, top, bottom)
  • Sytuacja ma się dokładnie tak samo z paddingiem.

    Jednostki w CSS


    Jednostki względne (relatywne)

    Względne jednostki długości stosujemy, gdy chcemy się odwołać do rozmiaru innego elementu (np. wysokości aktualnie używanej czcionki).

    Jednostki względne czcionki:
    • em - wysokość aktualnej czcionki
    • ex - wysokośc litery 'x', czyli małej litery w aktualnej czcionce
    • ch - wysokość cyfry '0' w aktualnej czcionce
    • rem - wysokość czcionki elementu korzenia w drzewie dokumentu (CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome); w języku HTML korzeniem jest zawsze element <html></html>
    Jednostki procentowe obszaru wyświetlania
    • vw - procentowa szerokość obszaru wyświetlania (interpretuje Internet Explorer 9, Chrome)
    • vh - procentowa wysokość obszaru wyświetlania (interpretuje Internet Explorer 9, Chrome)
    • vmin - mniejsza z wartości vw lub vh (interpretuje Internet Explorer 10, Chrome)
    • vmax - większa z wartości vw lub vh

    Jednostki bezwzględne (absolutne)

    • in - cale (1in = 2.54cm)
    • cm - centymetry
    • mm - milimetry
    • pt - punkty (1pt = 1/72in) - często używane przy definiowaniu rozmiaru czcionki w edytorach tekstu
    • pc - pika (1pc = 12pt)
    • px - piksele (1px = 1/96in)


    Dla ułatwiania poniższa tabela do podsumowania:

    Jednostki względne
    5 em wysokość czcionki
    5ex wysokość małej litery
    5ch szerokość cyfry '0'
    5rem wysokość czcionki korzenia
    5vw 5% szerokośći okna
    5vh 5% wysokości okna
    5vmin 5% minimalnej szer/wys okna
    5vamx 5% maksymalner szer/wys okna
    Jednostki bezwzględne
    5in cale
    5cm centymetry
    10mm milimetry
    30pt punkty
    3pc pika
    50px piksele

    Wartośći procentowe

    Format wartości procentowej składa się z opcjonalnego znaku liczby ("+" - domyślny lub "-"), liczby całkowitej lub rzeczywistej oraz znaku procentu ("%"). Należy pamiętać, że nie każdy parametr może przyjąć wartość ujemną! Wartość procentowa jest zawsze określana względem innej wartości np. długości. Każda właściwość która pozwala podać wartość procentową, definiuje także do czego się ona odnosi. Może ona dotyczyć innej właściwości tego samego elementu, przodka (wyżej w hierarchii drzewa dokumentu) lub wartości kontekstu formatowania (np. szerokość obejmującego bloku).