Kaskadowe arkusze stylów - CSS

Kaskadowe arkusze stylów

Wraz z powstaniem specyfikacji HTML 4 rozpoczęto rozdzielać kodowanie treści od jej prezentacji na stronie www. Częścią prezentacyjną zajmują się kaskadowe arkusze stylów CSS (ang. Cascading Sytle Sheets), które pozwalają zbudować tzw. layout strony.

Podstawowe składniki styli CSS

Style CSS składają się z dyrektyw (reguł), które określają w jaki sposób zostanie wyświetlony wybrany element dokumentu HTML. Styl składa się z sekcji, a każda sekcja z selektora oraz deklaracji. Deklaracja zawiera właściwości, którym przypisuje się określone wartości.

Selektorem może być wybrany element lub grupa elementów strony. Wewnątrz nawiasów klamrowych deklaruje się cechy danego elementu w postaci elementarnych właściwości. Każdej właściwości przypisuje się po dwukropku wartość, a tę kończy się średnikiem.

Początek dokumentu

Metody dołączenia stylów do dokumentu HTML

Mamy trzy metody dołączania arkuszy stylów do dokumentu HTML. Są to:

  • metoda liniowa (styl lokalny) – dla wybranego znacznika stosuje się atrybut style, któremu przypisuje się określone właściwości

  • metoda osadzania w nagłówku <head> (styl wewnętrzny) – style definiuje się w nagłówku dokumentu HTML wewnątrz znaczników <style></style>

  • metoda łączenia z plikiem zewnętrznym (styl zewnętrzny) – metoda polega na utworzeniu oddzielnego pliku z rozszerzeniem css, który zawiera reguły i dołączamy go do dokumentu HTML za pomocą znacznika <link>

 

Początek dokumentu

Kaskadowość arkuszy stylów

Termin kaskadowość wiąże się z kolejnością oddziaływania stylu – style o wyższym priorytecie mają pierwszeństwo w modyfikowaniu elementów dokumentu. I tak największą wagę mają style przypisane metodą liniową do znacznika, w drugiej kolejności style osadzone w znaczniku <head>, a najmniejszą dołączone jako plik zewnętrzny. Wynika to z faktu wczytywania danych przez przeglądarkę. Najpierw odczytywany jest plik zewnętrzny, następnie dane znajdujące się w znaczniku <head>, a na samym końcu style przypisane do znacznika.

Początek dokumentu

Komentarze w dokumentach CSS

Arkusze stylów pozwalają na stosowanie komentarzy. Do tego celu należy wykorzystać znaczniki: /* */ – jest to komentarz wieloliniowy, np. /* To jest komentarz */

Początek dokumentu

Dziedziczenie

Dokument strony HTML ma budowę hierarchicznego drzewa, co oznacza, że m.in. <body> zawiera inne znaczniki np. znacznik listy uporządkowanej <ol>, który z kolei zawiera znaczniki <li>. Wynika z tego, że każdy element w drzewie dokumentu ma dokładnie jednego rodzica – wyjątkiem jest korzeń drzewa, czyli znacznik <HTML>.

Przykładowych schemat przedstawia: przodków (rodzic, dziadek), braci, dzieci (potomkowie). Pozycja elementu w danej hierarchii decyduje o dziedziczeniu pewnych cech wyglądu – nie wszystkie jednak właściwości są dziedziczone automatycznie. Do właściwości, które nie są dziedziczone należą: background, border, margin, padding, width, height.

Początek dokumentu

Selektor prosty

Selektorem może być dowolny znacznik HTML i taki selektor określa się mianem selektora prostego. Formatowanie takiego znacznika wiąże się z określeniem selektora za pomocą jego nazwy znacznika oraz nadaniem oczekiwanych właściwości – selektory znaczników można grupować, poprzedzając każdy znacznik przecinkiem. Użycie selektora prostego powoduje, że każdorazowe użycie sformatowanego znacznika będzie wyglądało identycznie.

Początek dokumentu

Selektor klasy

Jeżeli chcemy, aby tylko wybrana grupa znaczników była formatowana w wybrany sposób, to należy użyć selektora klasy. W takim przypadku do wybranych znaczników należy dodać atrybut class oraz nadać mu określoną nazwę, np.  class=”ozdoba”. W arkuszu styli odwołanie wiąże się z użyciem kropki oraz podaniem nazwy klasy (.ozdoba)

Początek dokumentu

Selektor identyfikatora

Jeżeli chcemy, aby jakiś znacznik miał indywidualny charakter, to w takim celu należy posłużyć się identyfikatorem. Aby wykorzystać identyfikator należy do znacznika HTML wstawić atrybut id oraz nadać mu nazwę, np. id=”pozycja”. W arkuszu styli odwołanie wiąże się z użyciem znaku # oraz podaniem identyfikatora (#pozycja)

Początek dokumentu

Selektor uniwersalny

Selektor uniwersalny odszukuje każdy element dokumentu HTML. Tworzony jest za pomocą znaku gwiazdki * i oznacza, że dla każdego elementu na stronie uwzględnione będą właściwości, które zawiera.

Początek dokumentu

Selektor potomka

Selektor potomka pozwala formatować elementy, które zawierają się w innych znacznikach.  Potomek taki nie musi bezpośrednio leżeć wewnątrz znacznika przodka.

Początek dokumentu

Selektor dziecka

Selektor dziecka pozwala formatować elementy, które leżą o jeden rząd niżej w hierarchii drzewa dokumentu – znacznik będący dzieckiem, musi znajdować się bezpośrednio wewnątrz znacznika rodzica.

Początek dokumentu

Selektor braci

Selektor braci pozwala formatować znacznik, który w deklaracji został podany jako drugi.

Początek dokumentu

Właściwości styli CSS

Wszystkie właściwości styli CSS można podzielić na następujące kategorie:

  • tekst – właściwości odpowiedzialne na formatowanie tekstu
  • czcionka – właściwości odpowiedzialne za formatowanie czcionki
  • tło – właściwości odpowiedzialne za formatowanie tła
  • skalowanie – właściwości odpowiedzialne za formatowanie wysokości oraz szerokości elementu
  • obramowanie– właściwości odpowiedzialne za formatowanie wyglądu obramowania danego elementu
  • listy – właściwości odpowiedzialne za formatowanie list
  • tabela – właściwości odpowiedzialne za formatowanie komórek tabel

Początek dokumentu

Formatowanie tekstu

Do właściwości formatujących tekst zalicza się:

  • color – pozwala określić kolor danego elementu
  • text-align – definiuje wyrównanie tekstu (domyślnie test wyrównany jest do lewej krawędzi); możliwe wartości to: right, center, justify (wyjustowanie tekstu)
  • text-decoration – pozwala na wyróżnienie fragmentów tekstu; wartość ta może przyjmować wartości:
    • none – tekst bez dekoracji (wartość domyślna)
    • blink – migotanie tekstu
    • underline – podkreślenie tekstu
    • line-through – przekreślenie tekstu
    • overline – linia nad tekstem

Dodatkowo właściwość ta może przyjmować jako wartość kolor i rodzaj podkreślenia (kolor i rodzaj podkreślenia należy rozdzielić spacją):

    • dashed – linia przerywana
    • dooted – linia kropkowana
    • wavy – linia falista
    • double – podwójna linia ciągła
  • text-transform – powala określić wielkość liter w tekście i może przyjmować następujące wartości:
    • none – wartość domyślna (tekst niezmieniony)
    • capitalize – wszystkie pierwsze litery wyrazów mają wielkie litery
    • lowercase –  wszystkie litery tekstu będą zmienione na małe litery
    • uppercase – wszystkie litery tekstu będą zmienione na wielkie litery
  • direction – określa, od której krawędzi powinno się rozpocząć układanie wyrazów tekstu
    • ltr – tekst od lewej krawędzi do prawej
    • rtl – tekst od prawej krawędzi do lewej
  • line-height – określa wysokość wierszy i może przyjmować następujące wartości:
    • normal – wartość domyślna
    • liczba – odległość wyrażona liczbą względem rozmiaru czcionki
    • em – odległość wyrażona w em względem rozmiaru czcionki
    • % – odległość wyrażona w % względem rozmiaru czcionki
    • inherit – wartość dziedziczona po rodzicu
  • text-indent – określa wielość wcięcia w pierwszym wierszu; wartość podaje się w: pikselach, procentach i em
  • letter-spacing – określa odległość między literami
  • word-spacing – określa odległość między słowami
  • white-space – pozwala określić, jak przeglądarka ma interpretować białe znaki (spacja, tabulator, znak przejścia do nowej linii – ENTER); właściwość ta może przyjmować następujące wartości:
    • normal – wartość domyślna (kilka białych znaków nie może występować obok siebie, znak przejścia do nowej linii jest ignorowany, tekst jest automatycznie zawijany)
    • pre – białe znaki mogą występować obok siebie, znak przejścia do nowej linii nie jest ignorowany, tekst nie jest automatycznie zawijany
    • nowrap – podobnie jak normal, ale tekst nie jest automatycznie zawijany
    • pre-wrap – podobnie jak pre, ale tekst jest automatycznie zawijany
  • text-overflow – określa sposób wyświetlania skróconego tekstu

Początek dokumentu

Formatowanie czcionki

Do najczęściej wybieranych właściwości związanych z czcionki należą:

  • font-style – służy do określenia dodatkowego stylu i może przyjmować wartości:
    • normal – wartość domyślna
    • italic – tekst pisany kursywą (oddzielny krój czcionki)
    • oblique – tekst pisany czcionką ukośną (pochyla zwykłą czcionkę)
  • font-family – służy do określenia rodzaju czcionki; dostępne ogólne rodzaje czcionki:
    • serif – czcionki szeryfowe
    • sans-serif – czcionki nie mają dodatkowych zakończeń
    • cursive – czcionki pisane kursywą
    • fantasy – czcionki dekoracyjne
    • monospace – czcionki tego rodzaju mają wszystkie znaki o takiej samej szerokości
  • font-size – służy do określenia rozmiaru czcionki i własność ta może przyjmować wartości:
    • liczba podana jako piksele, procenty lub jednostki em
    • xx-small
    • x-small
    • small
    • medium
    • large
    • x-large
    • xx-large
    • smaller
    • larger
  • font-weight – służy do określenia grubości danego tekstu i własność ta może przyjmować wartości:
    • normal – wartość domyślna
    • bold – czcionka zostanie pogrubiona (równoważna wartość 700)
    • lighter – jeśli to możliwe, to czcionka będzie mieć mniejszą grubość niż grubość czcionki dziedziczonej po rodzicu
    • bolder – jeśli to możliwe, to czcionka będzie mieć większą grubość niż grubość czcionki dziedziczonej po rodzicu
    • stopień grubości: 100, 200, 300, 400, 500, 600, 700, 900
  • font-variant – służy do określenia wariantu czcionki i może przyjmować wartości:
    • normal – wartość domyślna
    • small-caps – małe litery są zamieniane na duże litery, ale w małym rozmiarze

Początek dokumentu

Formatowanie rozmiaru elementu

Tego typu właściwości określają szerokość oraz wysokość danego elementu i do nich należą:

  • width – określa szerokość
  • height – określa wysokość
  • min-width – określa minimalna szerokość
  • min-height – określa minimalną wysokość
  • max-width – określa maksymalną szerokość
  • max-height – określa maksymalną wysokość

Początek dokumentu

Formatowanie tła

Do najczęściej używanych właściwości tego typu należą:

  • background-color – pozwala określić kolor tła (kolor zapisany np. szesnastkowo, RGB)
  • background-image – pozwala wykorzystać grafikę jako tło wybranego elementu i przyjmuje wartości:
    • none – wartość domyślna
    • url() – pozwala wskazać adres grafiki
    • linear-gradient() – pozwala jako tło wykorzystać gradient liniowy
    • repeating-linear-gradient() – pozwala wykorzystać powtarzający się gradient liniowy  jako tło
    • radial-gradient() – pozwala jako tło wykorzystać gradient promienisty
    • repeatting-radial-gradient() – pozwala wykorzystać powtarzający się gradient promienisty jako tło
  • background-repeat – określa sposób powtarzania tła z obrazem i może przyjmować wartości:
    • repeat – wartość domyślna, tło powtarzane jest w poziomie i pionie
    • repeat-x – tło obrazu powtarzane w poziomie
    • repeat-y – tło obrazu powtarzane w pionie
    • no-repeat – tło obrazu nie będzie powtarzane
    • round – tło powtarzane jest w poziomie i pionie oraz skalowane tak, aby wypełnić równomiernie cały obszar
    • space – tło powtarzane jest w poziomie i pionie, ale nie jest skalowane
  • background-position – określa pozycję początkową tła z obrazem; przyjmuje wartości podane w pikselach, procentach oraz może przyjmować wartości:
    • right
    • left
    • bottom
    • top
  • background-attechment – określa obszar dowiązania tła z obrazem i może przyjmować wartości:
    • scroll – domyślnie
    • fixed – tło zostanie dowiązane do okna przeglądarki
    • local – tło zostanie dowiązane do zawartości danego elementu

Początek dokumentu

Formatowanie list

Do najczęściej używanych właściwości, które formatują listy należą:

  • list-style-type – właściwość służy do określenia typu punktora list i może m.in. przyjmować wartości:
    • disc – wartość domyślna; punktor jako koło
    • circle – punktor jako okręg
    • square – punktor jako kwadrat
    • disclosure-closed – punktor jako trójkąt
    • none – brak punktora
    • decimal – punktor jako liczba z systemu dziesiętnego
    • lower-roman – punktor jako mała litera rzymskiego systemu liczbowego
    • upper-roman – punktor jako wielka litera rzymskiego systemu liczbowego
    • lower-alpha, lower-latin – punktor jako mała litera łacińskiego systemu liczbowego
    • upper-alpha, upper-latin – punktor jako wielka litera łacińskiego systemu liczbowego
  • list- style-image – służy do określenia punktora w postaci obrazka, np. list-style-image: url(“nazwa.roz”)
  • list-style-position – służy do określenia pozycji punktora i może przyjmować wartości:
    • outside – wartość domyślna (punktor znajduje się na zewnątrz obszaru początkowej krawędzi)
    • inside – punktor znajduje się wewnątrz obszaru początkowej krawędzi

Początek dokumentu

Formatowanie obramowania

Do najczęściej używanych właściwości formatujących obramowanie elementów zalicza się:

  • border-width – określa grubość obramowania; umożliwia jednoczesne określenie grubości wszystkich krawędzi lub pozwala na wybór:
    • border-top-width – grubość krawędzi górnej
    • border-bottom-width – grubość krawędzi dolnej
    • border-left-width – grubość krawędzi lewej
    • border-right-width – grubość krawędzi prawej
  • border-style – określa styl obramowania i może przyjmować wartości:
    • solid – linia ciągła
    • double – podwójna linia ciągła
    • dotted – linia kropkowna
    • dashed – linia przerywana
    • groove – linia z tzw. rowkiem
    • ridge – linia z tzw. grzbietem
    • inset – linia tzw. ramka
    • outset – linia tzw. przycisk
  • border-color – określa kolor obramowania
  • border-radius – określa rozmiar zaokrąglenia rogów
  • border-image – pozwala stworzyć obramowanie obrazkowe i za jego pomocą można określić:
    • source – źródła skąd pobierany jest obrazek
    • width – szerokość obramowania
    • outset – określa odległość obramowania od krawędzi
    • repeat – określa sposób powtarzania
    • slice – określa sposób podziału obrazka

Początek dokumentu

Formatowanie tabel

Do właściwości formatujących tabele zalicza się:

  • border – formatuje obramowanie
  • padding – formatuje wewnętrzny margines
  • border-spacing – określa szerokość miedzy komórkami
  • border-collpase – pozwala połączyć obramowania sąsiadujących ze sobą obramowań
  • background-color – określa kolor tła
  • text-align – określa wyrównanie tekstu w poziomie
  • vertical-align – wyrówanie tekstu w pionie; własność może przyjmować wartości:
    • middle – tekst wyśrodkowany w pionie
    • bottom – wyrównanie tekstu do dolnej krawędzi
    • top – wyrównanie tekstu do górnej krawędzi
  • width – szerokość tabeli, komórki
  • height – wysokość tabeli, komórki

Początek dokumentu

Formatowanie odsyłacza

W celu formatowania odsyłacza należy użyć tzw. pseudoklasy, która odwołuje się do aktualnego stanu linku. W związku z tym link może występować w formie:

  • linku podstawowego –  a: link {właściwość: wartość;}
  • linku odwiedzonego – a: visited {właściwość: wartość;}
  • linku hover (nad linkiem znajduje się mysz) – a: hover {właściwość: wartość;}
  • linku focus (na linku ustawiony jest focus) – a: focus {właściwość: wartość;}
  • linku aktywnego (link aktywowany przez użytkownika) – a: active {właściwość: wartość;}

Początek dokumentu

Formatowanie kursora

Za pomocą właściwości cursor można wybrać typ kursora danego elementu i może m.in. przyjmować wartości:

  • auto – przeglądarka określa typ kursora
  • pointer – kursor jako łapka
  • crosshair – kursor jako krzyżyk
  • help – kursor jako znak zapytania

Początek dokumentu

Właściwość opacity

Wykorzystując właściwość opacity można określić przezroczystość wybranego obszaru strony. Przyjmuje ona wartość liczbową z zakresu od 0 do 1 (np. opacity: 0.7;).

Początek dokumentu

Właściwość display

Elementy na stronie www są liniowe lub blokowe. Za pomocą właściwości display zmienia się domyślne zachowanie tych elementów. Display może przyjmować wartości:

  • none – ukrywa element na stronie
  • inline – nadaje elementowi właściwość elementu liniowego
  • block – nadaje elementowi właściwość elementu blokowego
  • inline-block – pozwala nadać elementowi cechy elementu blokowego i liniowego

Początek dokumentu

Właściwość overflow

Właściwość overflow pozwala zarządzać treścią niemieszczącą się w danym obszarze strony. Overflow przyjmuje wartości:

  • visible – wartość domyślna; zawartość, która się nie mieści będzie widoczna
  • hidden – treść niemieszcząca siew w danym obszarze zostaje ukryta
  • scroll – dodaje do obszaru suwaki
  • auto – dodaje do obszaru suwaki, gdy będę konieczne

Początek dokumentu

Właściwość float

Właściwość float pozwala określić sposób otaczania elementów tekstem i może przyjmować wartości:

  • left – element zostanie ustawiany po lewej stronie względem obiektu sąsiadującego
  • right – element zostanie ustawiony po prawej stronie względem obiektu sąsiadującego
  • none – wartość domyślna; element nie sąsiaduje z żadnym obiektem

Początek dokumentu

Właściwość clear

Właściwość clear określa sposób przylegania do elementów na stronie i może przyjmować wartości:

  • none – wartość domyślna
  • left – następny element będzie pod obiektem z lewej strony
  • right – następny element będzie pod obiektem z prawej strony
  • both – element jest niezależny od wcześniejszych ustawień

Początek dokumentu

Miary względne

Do jednostek miar względnych zalicza się:

  • px – piksele
  • em – proporcje elementu względem wielkości czcionki
  • ex – proporcja względem wysokości danej czcionki
  • % – procenty

Początek dokumentu

Miary bezwzględne

Do jednostek mar bezwzględnych zalicza się:

  • in – cale
  • pt – punkty (72 pt = 1 in)
  • cm – centymetry
  • mm – milimetry
  • pc – pic (1 pc = 12 pt)

Początek dokumentu

Struktura układu blokowego

Wszystkie elementy HTML można potraktować jako prostokątne bloki. Każdy z takich elementów posiada:

  • margines (margin) – margines zewnętrzny
  • obramowanie (border) – ramka
  • wypełnienie (padding) – margines wewnętrzny
  • zawartość (content) – tutaj znajduje się tekst lub obraz

 

Początek dokumentu

Właściwości pozycjonowania

Właściwości pozycjonowania pozwalają określić miejsce, gdzie dany element ma zostać wyświetlony. Można to zrobić na jeden z poniższych sposobów:

  • static – wartość domyślna
  • relative – pozycjonowanie dokonywane jest względem krawędzi wybranego elementu HTML, ale obszar jaki zajmowałby, posiadając pozycję static, pozostaje na swoim miejscu w oknie przeglądarki
  • absolute – pozycjonowanie dokonywane jest względem zewnętrznych krawędzi marginesów najbliższego elementu przodka posiadającego pozycję inną niż static (obszar jaki zajmowałby zostaje usunięty z okna przeglądarki)
  • fixed – pozycjonowanie dokonywane jest względem krawędzi okna przeglądarki internetowej

Początek dokumentu