Co to jest CSS?

Kaskadowe arkusze stylów (z ang. CSS - Cascading Style Sheets) zostały opracowane w 1996 roku i z założenia miały służyć do tworzenia wyglądu witryny internetowej. Powstały w celu oddzielenia struktury dokumentu (tworzonej przy użyciu HTML) od formy jego prezentacji.

Korzyści ze stosowania CSS

Zalet kaskadowych arkuszy stylów jest całkiem sporo. Z najważniejszych można wymienić:

• CSS mają wpływ na szybsze ładowanie stron
  Arkusz stylów jest pobierany tylko raz i przechowywany w pamięci podręcznej przeglądarki, więc kolejne strony ładują się szybciej.
• CSS pozwalają umiejscowić element w dowolnym miejscu na stronie
  Webmasterzy lubią używać CSS, ponieważ pozwala na umieszczanie elementów w dowolnym miejscu witryny. Na przykład, jeśli w trakcie tworzenia witryny położenie jakiegokolwiek elementu przestaje pasować do układu, to Webmaster może go przy pomocy CSS bez większego problemu przesunąć, albo ukryć.
• CSS są kompatybilne ze wszystkimi przeglądarkami
  Większość stron stworzonych przy użyciu CSS wygląda tak samo we wszystkich nowoczesnych przeglądarkach.
• CSS pozwalają na szybkie dostosowanie całej witryny
  Zewnętrzne arkusze stylów umożliwiają dokonanie koniecznych zmian w układzie lub wyglądzie witryny bez konieczności zmian w kodzie HTML.
• CSS pozwalają na tworzenie stron internetowych przeznaczonych do druku
  Strony można łatwo drukować. Kolory, zdjęcia i inne elementy, które są trudne do wydrukowania, można usunąć.
• CSS wspierają funkcje wyszukiwarek
  Dzięki pozycjonowaniu elementów na stronie, treści najważniejsze można umieścić na początku, co sprawia, że boty indeksujące szybciej docierają do ważnych treści.

Jeszcze kilka lat temu sporym problemem było niejednolite interpretowanie stylów przez przeglądarki. Często zdarzało się zatem, że witryny różnie wyglądały w różnych przeglądarkach lub się "rozjeżdżały". Obecnie przeglądarki dają sobie całkiem nieźle radę z poprawnym wyświetlaniem stron, a różnice w obsłudze stylów sprowadzają się już praktycznie tylko do tempa implementacji nowych rozwiązań testowanych przez W3C w ramach projektu CSS3.

Jednostki miar w CSS.

Jednostki wykorzystywane są wszędzie tam, gdzie właściwości kaskadowych arkuszy stylów na to pozwalają. Za pomocą jednostek określa się wiele różnych parametrów, dzięki którym możliwe jest precyzyjne określenie stanu bądź zachowania właściwości.

Procentowe określenie rozmiaru

Wartość procentowa określana jest zawsze względem innego rozmiaru, na przykład długości. Może się odnosić do innej właściwości dla tego samego elementu, właściwości dla elementu przodka oraz lub wartości kontekstu formatowania (np. szerokości bloku zawierającego).

Bezwzględne jednostki długości

Bezwzględne jednostki długości są równe fizycznym jednostkom miar lub ustalane w stosunku do siebie. Przydatne najczęściej, gdy znane jest środowisko wyjściowe.

Względne jednostki długości

Względne jednostki długości określają rozmiary w stosunku do innych długości. Wykorzystywane w celu łatwiejszego skalowania z jednego środowiska wyjściowego do drugiego.

Jednostki względem czcionki

Jednostki procentowe rzutni (obszaru wyświetlania)

Jednostki czasu

Jednostki czasu służą do określania jak długo wykonywane jest działanie przewidziane przez właściwość lub po jakim czasie od załadowania dokumentu akcja się rozpocznie.

Jednostki kątowe

Wartości kątowe są używane przez słuchowe arkusze stylów oraz wykorzystywane w transformacjach i animacjach.

Tekt pochodzi ze strony e-zoner.pl

Każda reguła stylu składa się z dwóch części:

• selektor – określa do jakich elementów strony internetowej dopasować dany styl
• deklaracja stylu:
  • właściwość – oznacza jaką cechę elementu będziemy zmieniać
  • wartość – oznacza w jaki sposób będzie ta cecha wyglądać.

Ogólna deklaracja stylu:

selektor { właściwość : wartość }

Selektor

Selektorem może być:

• każdy element HTML,
• klasa elementów,
• identyfikator elementu.

Kolejność selektorów

• Jeżeli wypiszemy po sobie selektory np.: table, div, p { color:red } (z przecinkami) to wszystkie z wymienionych elementów będzie miało tekst koloru czerwonego.

• Jeżeli wypiszemy po sobie selektory np.: table div p { color:red } (bez przecinków) to będzie określać kolor tekstu akapitu, który znajduje się w div, który to div znajduje się w tabeli, czyli:
  

  <table>
     <tr>
        <td>
           <div>
              <p>ten tekst będzie czerwony</p>
           </div>
        </td>
     </tr>
  </table>
  

• Jeżeli wypiszemy selektory w ten sposób: div > p { color:red} to tylko akapit będący bezpośrednio w div będzie miał tekst koloru czerwonego. Przykład:
  

  <div>
     <span><p>ten tekst NIE będzie czerwony</p></span>
     <p>A ten tekst będzie czerwony</p>
  </div>
  

Deklaracja stylu

Na deklarację stylu składają się dwie części:

• właściwość – określa co będziemy określać np.: obramowanie, marginesy, dopełnienia, tło, tekst, obrót, zachowanie po najechaniu myszą,
• wartość właściwości – określa w jaki sposób będzie ta właściwość wyglądała np.: obramowanie będzie to 2px grubości, styl obramowania kropkowy, kolor niebieski, tekst będzie pisany czcionką o wysokości 20px, stylem pochylonym, czcionką Arial o kolorze szarym.

Media

Najnowsza odsłona CSS wprowadza pewne rozróżnienia sposobu wyświetlania elementów w zależności na jakim urządzeniu jest „wyświetlana” strona. Tymi urządzeniami mogą być np.: ekran, drukarka, urządzenia czytające na głos, projektory, telewizory, drukarki brajlowskie itd.

W tym celu wprowadzona tzw. przestrzenie nazw. Założenie jest takie, że elementy HTML zdefiniowane w ogólne przestrzeni nazw będą interpretowane przez wszystkie urządzenia jednakowo, natomiast elementy znajdujące się w np. przestrzeni ekranu (screen) nie będą interpretowane przez drukarkę.

Przestrzenie nazw można ustawić na dwa sposoby:

• poprzez dyrektywę @import:

  @import url('style-drukarkowe.css') print;
  @import url('style-ekranowe.css') screen;
  

• poprzez dyrektywę definiującą przestrzeń @media:

  @media screen {
     body {background-color:#f2f2f2;}/* tło na ekranie będzie szare*/
  }
  @media print {
     body {background-color:#ffffff;}/* tło na papierze będzie białe*/
  }
  @media screen, print {
     body {color:#000000;}/* tekst na ekranie i papierze będzie czarny*/
  }
  

Rodzaje urządzeń (przestrzenie nazw):

• all, domyślna przestrzeń – wszystkie urządzenia,
• print – drukarki
• screen – kolorowy ekran
• handheld – mały ekran (palmtop, telefony komórkowe)
• projection – projektory
• speech – urządzenia głosowe
• tv – telewizory (mało kolorów, ograniczona wielkość, dźwięk)
• tty – przeglądarki tekstowe (podstawową jednostką miary jest znak, a nie piksel)
• embossed – drukarki brajlowskie (ograniczenie podobne do przeglądarek tekstowych, plus brak kolorów)

W przestrzeniach nazw można również stosować dodatkowe zasady. Najczęściej robi się to dla ekranów. W ten sposób można zrobić responsywny szablon strony. Przykład:

@media screen and (min-width: 480px) {
   body {
      background-color: lightgreen;
   }
}

Kolor tła zmieni się na jasny zielony jeżeli szerokość ekranu będzie równa lub większa od 480px.

Każdy element na stronie internetowej zajmuje pewien obszar. Ten obszar nazywa się pudełkiem.

Elementy HTML dzieli się na elementy blokowe (block) i elementy wyświetlane w jednej linii z innymi elementami (inline).

Elementy blokowe zawsze zaczynają się w nowej linii i zajmują zawsze całą szerokość rodzica, czy to okna czy to elementu nadrzędnego.

Lista elementów blokowych: <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6 > <header> <hr> <li> <main > <nav> <noscript> <ol> <output> <p> <pre> <section ><table> <tfoot> <ul> <video>

Aby „zmusić” element blokowy, aby wyświetlał w linii należy w arkuszu CSS wpisać formułę: display:inline.

Elementy inline zajmują tyle miejsca na stronie tyle ile wymagają ich rozmiary. Elementy HTML, które są domyślnie wyświetlane inline:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

Aby elementy te były wyświetlane jako block należy w arkuszu CSS wpisać formułę display:block.

Na pudełko w CSS składa się:

• zawartość – content, możemy określić wysokość i szerokość – width i height,
• odsunięcie zawartości od obramowania – padding, czasem nazywane dopełnieniem,
• obramowanie – border,
• odsunięcie pudełka od innych elementów, marginesy – margin.

Na obrazie możecie zobaczyć jak wygląda takie pudełko. Obraz pochodzi ze strony e-zoner.pl.

Identyfikator

Identyfikator w CSS jest to atrybut elementu HTML, który określa ten element w sposób unikatowy. W jednym dokumencie HTML NIE MOGĄ wystąpić dwa elementy HTML o tym samym atrybucie „id”.

Identyfikatory stosuje się na przykład w celu określenia części dokumentu HTML, do którego odnosi się hiperłącze, np.:

<a href="#gora_strony">Na górę</a>

Najczęściej identyfikatorów używa się w celu „nazwania” ważniejszych części dokumentu HTML.

Nazwa identyfikatora musi posiadać przynajmniej jedną literę.

Nic nie stroi na przeszkodzie, aby każdy element HTML posiadał identyfikator.

Przykład określenia identyfikatora:

<div id="menu_lewe"></div>

Aby zmienić wygląd elementu div o identyfikatorze „menu_lewe” to w stylach należy użyć znaku # (płotek, sharp, kratka):

#menu_lewe{
   text-align:right;
   color:black;
}

Klasa

Elementom HTML można nadać klasę. Tą samą klasę może posiadać więcej niż jeden element HTML. Klasy w CSS stosuje się w celu określenia podobnego lub takiego samego wyglądu elementom HTML. Każdemu elementowi można przypisać wiele klas. Wtedy kolejne nazwy klas należy oddzielić spacją np.:

<p class="tekst-czerwony tekst-do-srodka">lorem ipsum</p>
<style>
    .tekst-czerwony{color:red}
    .tekst-do-srodka{text-align:justify}
</style>

Aby określić wygląd danej klasy należy w arkuszu CSS odnieść się do jej nazwy poprzedzając tą nazwę kropką „.”. W przykładzie akapit będzie posiadał tekst koloru czerwonego i ten tekst będzie wyjustowany.

Kolor w CSS można określić na kilka sposobów:

• Podając nazwę koloru. Przeglądarki wspierają do 140 nazw kolorów, m.in. red, green, blue, black, white, brown.
• Podając oznaczenie heksadecymalne kolorów RGB. Wartości te należy napisać liczbami heksadecymalnymi (od 00 do FF), np.:
  #FFFFFF – biały,
  #FF0000 – czerwony,
  #000000 – czarny
• Podając oznaczenie rgb (red, green, blue).Wartości poszczególnych kolorów należy podać w od 0 do 255, np.:
  rgb(255,255,255) – biały,
  rgb(255,0,0) – czerwony,
  rgb(0,0,0) – czarny.
• Podając kolor w formacie hsl (Hue, Saturation, Lightness).
  • h (hue) – określa w stopniach (0 – 360) na kole kolorów. 0 – czerwony, 120 – to zielony, 240 – niebieski
  • s (saturation) to inaczej nasycenie koloru. Przyjmuje wartości od 0% dla szarości do 100% dla pełnego koloru
  • l (lightness) to inaczej jasność koloru. Przyjmuje wartości od 0% dla czarnego do 100% dla białego koloru.

CSS wspiera również przezroczystość. Aby użyć przezroczystości należy zastosować format zapisu koloru rgba(r,g,b,a) lub hsla(h,s,l,a). Czwarty parametr to właśnie przezroczystość tzw. kanał alfa. Kanał alfa przyjmuje wartości od 1 dla pełnego koloru i 0 dla pełnej przezroczystości. Przykłady:
rgba(0,0,0,.5), rgba(0,0,0,1), rgba(0,0,0,0), hsla(240,50%,50%,0.5)

Należy również wspomnieć o tzw. bezpiecznej palecie kolorów. W palecie tej jest 256 bezpiecznych kolorów. Powstała ona w czasie gdy większość użytkowników korzystała z 8 bitowej palety kolorów. Paleta ta pozwalała na zapis do 256 kolorów. Cecha szczególna tej palety jest taka, że każda ze składowych koloru RGB mogła posiadać jedną z 6 możliwych wartości: 00, 33, 66, 99, CC, FF. Przykłady #FFFFFF, #33FF33, rgb(0,0,0), rgb(51,51,51), rgb(153,153,51)

Materiały dodatkowe

04a. Kolor - nazwa

04b. Kolor - hex, rgb, rgba, hsl, hsla

04c. Kolor - bezpieczna paleta HTML

04d. Kolor - hsl i JavaScript

Tłem dla elementów HTML może być:

• kolor
• obraz
• gradient

Kolor

Przykład określenia koloru tła w CSS:

body{
    background-color: lightblue;
}

Nic nie stoi na przeszkodzie, aby kolor który chcemy określić jako tło był w jakimś stopniu przezroczysty np.:

body{
   background-color: rgb(0,255,0,.5);
}

Obraz

Tłem dla naszych elementów HTML może być również obraz. Może być to obraz w formacie jpg, gif, png, bmp oraz w każdym innym jaki wspierają przeglądarki. Podałem najczęściej używane formaty, które na pewno będą prawidłowo wyświetlane. Dla teł obrazkowych jest dużo więcej właściwości CSS, które możemy określić.

• background-image. Najważniejsza z właściwości dla teł obrazkowych. Określa ścieżkę do pliku graficznego, który będzie tłem. Przykład użycia:

  body{
      background-image: url("sciezka/do/pliku.jpg");
  }
  

• background-repeat – określa czy obraz będzie powtarzany jeżeli jest mniejszy od elementu HTML. Domyślna wartość to repeat.
  Możliwe wartości:
  • repeat – obraz jest powtarzany,
  • repeat-x – obraz jest powtarzany tylko poziomo,
  • repeat-y – obraz jest powtarzany tylko pionowo,
  • no-repeat – obraz nie jest powtarzany. Jest wyświetlony tylko raz,
  • space – obraz jest powtarzany w taki sposób, aby pokryć cały element, ale bez przycięcia obrazu. Obraz w tym przypadku nie jest skalowany, a pomiędzy powtarzanymi obrazami powstają puste przestrzenie,
  • round – przypadek tak jak w poprzedniej wartości, tylko w tym przypadku obraz jest rozciągany, aby pokryć cały element. Obraz nie jest przycinany,
  • initial – jest ustawiana domyślna wartość,
  • inherit – jest ustawiana wartość background-repeat rodzica.
  Składnia:

  body{
     repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
  }

• background-attachment – określa w jaki sposób będzie się zachowywało tło obrazkowe, gdy strona będzie przewijana. Możliwe wartości:
  • scroll – obraz tła będzie przewijany razem ze stroną. Jest to domyślna wartość,
  • fixed – obraz tła nie będzie się przewijał ze stroną,
  • local – obraz tła będzie się przewijał z elementem,
  • initial – ustawia wartość domyślną,
  • inherit – ustawia wartość background-attachment rodzica.
  Składnia:

  body{
     background-attachment: scroll|fixed|local|initial|inherit;
  }

• background-position – określa w którym miejscu na elemencie będzie wyświetlane obraz tła. Możliwe wartości:
  • left top | left center | left bottom | rigth top | rigth center | rigth bottom | center top | center center | center bottom
  • x% y%
  • xpos ypos – w jednostkach CSS np. px, em itd.
  • initial
  • inherit
  Przykład użycia:

  body{
     background-position:center center;
  }

• background-size – określa w jaki sposób będzie wyświetlana grafika tła. Możliwe wartości:
  • auto – grafika tła będzie wyświetlana w jej oryginalnym rozmiarze,
  • length – grafika tła zostanie wyświetlona w szerokości i wysokości podanej w jednostkach CSS. Jeżeli zostanie podana tylko jedna wartość to grafika zostanie odpowiednio przeskalowana
  • percentege – podobnie jak do wcześniejszego length z tą różnicą, że podajemy te wartości w procentach szerokości i wysokości elementu HTML,
  • cover – obraz tła zostaje rozciągnięty na całą szerokość elementu HTML,
  • contain – obraz zostanie przeskalowany w taki sposób, aby mieć pewność, że będzie wyświetlany w całości,
  • initial,
  • inherit.

Jest również krótka składnia opisu tła. Wartości opisu tła muszą być podane w odpowiedniej kolejności:

• background-color,
• background-image,
• background-repeat,
• background-attachment,
• background-position,

np.:

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Gradient

Gradient liniowy

Opis gradientu liniowego w CSS:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Możliwe wartości direction:

• określenie słowne używając słowa to oraz słów kierunków top, right oraz top, bottom, np.

  background: linear-gradient(to right bottom, red, yellow);

• określenie stopni xxdeg, np.:

  background: linear-gradient(45deg, red, yellow);

Gradient liniowy powtarzany

Ogólna składnia gradientu liniowego powtarzanego

background: repeating-linear-gradient(direction, color-stop1, color-stop2, ... xx%);

Ostatni parametr określa jaką szerokość ma zajmować cały gradient. Jeżeli podamy w tym miejscu 20% to gradient powtórzy się 5 razy

Gradient kołowy

Ogólna składnia gradientu kołowego:

background: radial-gradient(shape, color-stop1, color-stop2, ...);

Parametr shape określa jakiego kstałtu ma być gradient radialny. Domyślną wartością jest elipsa. Można również wybrać koło circle. Parametr shape można pominąć.

W gradiencie kołowym można określić w którym miejscu elementu i w jaki sposób będzie on rysowany. Przykładowe wywołanie:

background: radial-gradient(closest-side at 80% 80%, red, yellow);

Pierwszy parametr określa w jaki sposób będzie wyświetlane rozejście kolorów. Możliwe wartości to:

• closest-side
• farthest-side
• closest-corner
• farthest-corner

Drugi i trzeci parametr określa w którym miejscu będzie środek elipsy/koła rozpoczęcia gradientu.

Gradient kołowy powtarzany

Przykładowa składnia gradientu kołowego powtarzanego:

background: repeating-radial-gradient(closest-side at 80% 80%, red, yellow 10%);

Ostatni parametr określa jaką szerokość ma mieć powtarzany gradient.

05a. Tło - kolor

05b. Tło - obraz

05c. Tło - gradient

Formatowanie tekstu

Czcionka

Są 3 główne typy czcionek:

• serif – czcionka szeryfowa,
• sans-serif – czcionka bezszeryfowa, łatwiejsza w czytaniu,
• monospace – czcionka o stałej szerokości znaku.

Występują jeszcze czcionki tzw pismo odręczne i czcionki specjalne – np. z gier, filmów.

Style określające czcionkę:

• font-family – rodzina czcionek. Możemy tutaj podać konkretną nazwę czcionki lub główny typ czcionki np.: font-family: "Times New Roman", Times, serif.
  W tym przykładzie przeglądarka będzie szukała w zainstalowanych czcionkach w systemie najpierw czcionki Times New Roman, jak jej nie znajdzie poszuka Times, a jak jej również nie będzie to tekst wyświetli wbudowaną czcionką szeryfową. Może się zdarzyć, że użyjecie czcionki, którą to macie zainstalowaną na komputerze, a wasza strona będzie się pięknie prezentowała – ale tylko u Was i u osób, które również będą taką czcionkę zainstalowaną w systemie. Żeby temu zaradzić to należy używać czcionek wbudowanych, użyć Google Fonts lub zaimportować taką czcionkę na stronę internetową. Należy przy tym pamiętać, że czcionki również obejmuje prawo autorskie.
• font-style – określa styl czcionki. Wartości: normal | italic | oblique
• font-size – określa wysokość czcionki. Podaje się ją w jednostkach CSS
• font-weight – określa grubość czcionki. Wartości: normal | bold | bolder | lighter | initial | inherit | 100 | 200 | 300 | 400 (normal) | 500 | 600 | 700 (bold) | 800 | 900
• font-variant – określa w jaki sposób będzie wyświetlony tekst. Wartości: normal | small-caps | initial | inherit

Krótka składnia font:

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

Przykładowe wywołanie:

font: bold 18px/24px Arial, sans-serif

CSS daje nam bardzo duże możliwości odnośnie formatowania wyglądu kontrolek HTML, ale czasem trzeba bardziej dokładnie określić wygląd niektórych z części elementu HTML. Może to być na przykład pierwsza litera w akapicie, pierwszy wiersz w akapicie pierwszy akapit w danym kontenerze div.

Pseudo-klasy.

Z pomocą przychodzą nam pseudo-klasy i pseudo-elementy. Pseudo-klasy pomagają nam na zmianę wyglądu elementu HTML np. po najechaniu na niego myszką, po kliknięciu na nim, jeżeli ma jakieś atrybuty (np.: lang, readonly), albo określony stan (np.: zaznaczony, wartość mieści się w przedziale)

Poniżej spis pseudo-klas i ich opis.

Pseudo-klasy i hiperłącza

Aby hiperłącza były prawidłowo wyświetlane używając pseudo-klas: :hover, :link, :visited, :active to należy style odpowiednio poukładać. Prawidłowa kolejność to:

a:link{}
a:visited{}
a:hover{}
a:active{}

Nie trzeba określać wszystkich pseudo-klas hiperłącza. Najczęściej wystarczy określić wygląd:

a{}
a:hover{}

Pseudo-elementy

Pseudo-elementy określają część elementów HTML. Tymi częściami są: piersza litera, pierwszy wiersz, zaznaczenie, wstawka przed elementem, wstawka po elemencie.

Spis pseudo-elementów i ich opis

Elementy HTML, które widzimy na stronie internetowej wcale nie muszą być zapisane w dokumencie HTML w takiej kolejności w jakiej występują na ekranie. Nic nie stoi na przeszkodzie, aby element, który jest umieszczony na końcu dokumentu HTML być wyświetlany n samej górze w oknie przeglądarki.

Aby zmienić położenie elementu należy zastosować własność CSS position, czyli pozycja.

div{
   position:static;
}

div{
   position:absolute;
}

div{
   position:fixed
}

div{
   position:relative
}

div{
   position:sticky
}

div{
   position:initial
}

div{
   position:inherit
}

Do wartości absolute, fixed należy również podać współrzędne wyświetlania tego elementu, np.

div{
   position:absolute;
   left:40px;
   top:50px;
}

Dopuszczalne są wartości ujemne, wtedy element zostanie wyświetlony w części lub całości poza ekranem.

Dla pozycjonowania relative zwykle nie stosuje się podawania wartości left, right, top, bottom. To pozycjonowanie najczęściej stosuje się w celu pozycjonowania elementów w tym elemencie. Podanie wartości left, right, top albo bottom, powoduje przesunięcie tego elementu względem miejsca w którym miał się znajdować. Dopuszczalne są wartości ujemne.

11e. position: fixed oraz :hover

Własność z-index określa porządek wyświetlania pozycjonowanych elementów. Element, który ma wyższy wyższy numer warstwy będzie powyżej elementów, które ten numer warstwy mają niższy.

Z-index działa tylko dla elementów pozycjonowanych (position: absolute | relative | fixed).

Dopuszczalne są wartość ujemne.

12. Materiały dodatkowe - warstwy - własność z-index