O tym co to jest CSS

   HTML i CSS od postaw    3 lutego, 2020  |  0

O ile o tym jakie treści znajdą się na stronie i jaki będzie ich podstawowy układ, decyduje konstrukcja „szkieletu strony”, czyli dokumentu HTML, o tyle sam wygląd elementów strony jest ustalany za pomocą reguł CSS. Dzisiaj przyjrzymy się temu w jaki sposób zbudowana jest reguła CSS, co składa się na deklaracje czy w jaki sposób dodawać style do HTML.

Spis treści

Co to jest CSS?

Jak podaje konsorcjum W3C, CSS to język, który służy do opisu warstwy prezentacji (wyglądu) stron internetowych, w tym kolorów, układu i czcionek. Umożliwia dostosowanie prezentacji do różnych typów urządzeń i technologii, np. telefonów czy wydruków. CSS jest niezależny od HTML, a jego oddzielenie od HTML ułatwia utrzymywanie witryn, współdzielenie arkuszy stylów między stronami i dostosowywanie stron do różnych przeglądarek czy środowisk 1.

W przypadku CSS – tak jak przy HTML – nazwa jest akronimem (skrótowcem). Kolejne litery w nazwie oznaczają:

  • Cascading
    Kaskadowość to właściwość CSS, która służy do precyzowania zestawu reguł dla konkretnego elementu. W praktyce chodzi o to, że style dla tego elementu mogą być określane w wielu miejscach i mogą wpływać na siebie w dość złożony sposób. Temat jest w moim odczuciu na tyle istotny, że poświęcę mu cały następny wpis.
  • StyleSheet
    CSS nie jest – w odróżnieniu od HTML – językiem znaczników, ale językiem arkuszy stylów. Jak podaje Wikipedia, służy on
    „do opisu formy prezentacji dokumentu o uporządkowanej strukturze. Taki dokument ma przejrzyście zdefiniowane i rozgraniczone sekcje. Program odpowiedzialny za prezentację dokumentu może przedstawić go w różny sposób, w zależności od użytego arkusza stylów” 2.

Czy CSS to język programowania?

Tutaj sytuacja jest analogiczna jak w przypadku HTML (o czym pisałam tutaj): języki, w których nie da się realizować obliczeń, nie są uznawane za języki programowania. W tej kwestii jednak stale odbywają się dyskusje, choć mają one raczej charakter akademickich dywagacji. Jednym z argumentów jest fakt, że HTML w połączeniu z CSS spełniają zasadę kompletności Turinga 3 (potrafią opisać każdy algorytm określany mianem zupełnego), jednak jest to właściwość przypadkowa, a przeznaczenie tych języków również nie pokrywa się z dosłownym programowaniem czegokolwiek.

Reguły CSS

Kod CSS składa się listy dyrektyw, inaczej zwanych regułami. Anatomia reguł prezentuje się następująco:

p {
  color: blue;
}
  • selektor
    Element HTML, którego tyczy się reguła, w powyższym przykładzie <p> czyli wszystkie akapity na stronie.
  • deklaracja
    To pojedyncza reguła, w naszym przykładzie to color: red. Wskazuje, które właściwości będą stylowane oraz jaka będzie ich wartość.
  • właściwość
    Właściwość danej danej deklaracji, której ma zostać nadana wartość. W tym przypadku w deklaracji wskazana jest właściwość elementu <p> jaką jest color.
  • wartość
    Wartość, jaka ma być nadana wskazanej właściwości (przed dwukropkiem).
  • nawiasy klamrowe
    Zbiór deklaracji dotyczących danego elementu w regule musi zostać umieszczona w nawiasach klamrowych ({}).
  • średniki
    Każda kolejna deklaracja musi kończyć się średnikiem (;).
  • dwukropki
    Dwukropek w deklaracji oddziela właściwość od wartości (:). Właściwość znajduje się po lewej stronie dwukropka, wartość po prawej.

Nic nie stoi na przeszkodzie, żeby jednocześnie wskazywać wiele elementów HTML do stylowania:

p, h1, li {
  color: blue;
}

a w praktyce reguły składają się najczęściej z więcej niż jednej deklaracji:

p {
  color: yellow;
  margin-bottom: 5px;
  width: 50px;
}

Selektory

Jak zostało już objaśnione, selektor wskazuje na element lub grupę elementów, których dotyczy reguła. W powyższych przykładach używane były selektory elementów HTML, jednak to niejedyny sposób selekcji pożądanych elementów docelowych. Poniżej znajduje się lista najczęściej spotykanych selektorów.

  • selektor elementu
    Wskazuje na konkretny element języka HTML, np. selektor h2 wybiera wszystkie elementy zamknięte w tagach <h2>...</h2>.
  • selektor atrybutu
    Selekcjonuje element zawierające wskazany atrybut, img[src] dotyczy elementu <img src="...">, ale nie <img>.
  • selektor identyfikatora
    Wybiera element o podanym identyfikatorze tj. selektor #navbar wskazuje na element np. <nav id="navbar">...</nav>. Wybór selektora identyfikatora może wydawać się w pewnych sytuacjach wygodnym rozwiązaniem, ponieważ identyfikator musi być unikalny w zakresie strony www, ale korzystnie ze stylowania po id nie jest uważane za dobrą praktykę.
  • selektor klasy
    Wskazuje na elementy, które zawierają podaną klasę, np. .my-class odpowiada elementom <div class="my-class">...</div> oraz <ul class="my-class">...</ul>.
  • wszystkie elementy
    Selektor * wskazuje na wszystkie elementy na stronie.
  • elementy w obrębie elementu
    Selektor tag * wskazuje na wszystkie elementy w obrębie tagu, np. div * wskaże na wszystkie elementy w obrębie wszystkich elementów div na stronie.
  • elementy zagnieżdżone
    Przy użyciu operatora > można wskazać na elementy potomne wybranego elementy, np. div > ul wskazuje na wszystkie elementy ul zagnieżdżone w elementach div.

Powyższa lista nie wyczerpuje tematu selektorów, jednak temu tematowi zostanie poświęcony odrębny wpis.

Właściwości CSS

Lista właściwości CSS jest bardzo, bardzo długa, dlatego nie widzę sensu zamieszczania jej tutaj. Spis wszystkich właściwości można znaleźć na stronie W3C 4, jednak dużo wygodniej jest używać któregoś dedykowanych tzw. cheat sheetów, np tego.

W ramach właściwości można jednak wyodrębnić pewne obszary, w których dostępne są konkretne właściwości. Poniżej zamieszczam listę najważniejszych – w mojej opinii – obszarów z odnośnikami do listy właściwości.

Dodawanie stylów do dokumentu HTML

Dodawanie reguł CSS do HTML można wykonać na kilka sposobów. Poniżej wymieniam najważniejsze z nich.

Wybór metody dodawania stylów do HTML niesie za sobą pewne konsekwencje dla ustalania priorytetu kaskadowości, jednak tym tematem zajmę się dokładnie w kolejnym wpisie.

Lokalne stylowanie inline

Aby użyć deklaracji bezpośrednio w elemencie HTML należy do tego celu wykorzystać atrybut style. W ten sposób można zdefiniować wartość więcej niż jednej właściwości, deklaracje należy jednak oddzielić średnikami.

<p style="color: red; font-weight: bold;">Treść akapitu</p>

Wewnętrzny arkusz stylów

Do dołączenia arkusz stylów do dokumentu HTML można użyć dedykowanego tagu <style>. Wewnątrz tego znacznika należy umieścić reguły CSS w standardowej konfiguracji, tj. selektor i deklaracje ujęte w nawiasy klamrowe. Znacznik <style> można umieścić jedynie w sekcji <head> dokumentu HTML.

<head>
  (...)
  <style>
    .my-paragraph {
      color: red;
      font-weight: bold;
    }
  </style>
<head>

Zewnętrzny arkusz stylów

Również w sekcji <head> dokumentu HTML można umieścić link do zewnętrznego pliku ze stylami CSS. Jest to o tyle wygodnie rozwiązanie, że tych samych reguł można w łatwy sposób używać na wielu stronach, bez potrzeby kopiowania kodu.

<head>
  (...) 
  <link rel="stylesheet" href="style/style.css">
</head>

W powyższym przykładzie do dokumentu HTML został dodany arkusz stylów z pliku style.css, który znajduje się w folderze style. Folder jest zlokalizowany w tym samym folderze, co plik HTML, którego dotyczy.

Import arkusza stylów

W ramach wewnętrznego oraz zewnętrznego arkusza stylów można importować inne zewnętrzne arkusze. Służy do tego reguła @import. W praktyce użycie importowania wygląda następująco:

<style>
  @import "style/style.css"
</style>

jak również w samym pliku css:

@import "../style/style.css"
.my-paragraph {
  color: red;
}

Zasada rozdziału treści od warstwy prezentacji

Stronę internetową z grubsza można podzielić na trzy warstwy:

  1. Warstwa treści
  2. Warstwa prezentacji
  3. Warstwa interakcji

Za każdą z tych warstw w najprostszym możliwym układzie odpowiadają inne języki. Treść to HTML, prezentacja to CSS, zaś interakcja to JavaScript. Oczywiście sprawy mogą się skomplikować, czy to poprzez użycie framerków, czy po prostu przez mieszanie tych porządków ze sobą na potrzeby pisanych ficzerów, ale dobrą praktyką jest, aby te warstwy pozostały od siebie oddzielone.

Jest to zagadnienie o tyle istotne, że jak napisałam w akapicie poświęconym sposobom dodawania CSS do HTML, elementy HTML posiadają atrybut style, za pomocą którego można (jak nazwa wskazuje) nadawać pożądane style elementom. Jednak lepszym pomysłem będzie użycie atrybutu class oraz ustawienie stylów dla konkretnej klasy. Takie podejście jest podawane jako przykład realizacji zasady rozdziału warstwy prezentacji od warstwy treści i sprzyja dostępności strony lub aplikacji 4.

Domyślne style przeglądarek

Jak wspominałam we wpisie dotyczącym semantycznego HTML, jeżeli nie dodamy własnych stylów do dokumentu, to przeglądarki i tak wyświetlą je pewien zdefiniowany sposób. Poniżej zamieszczam zrzut ekranu z przeglądarki Chrome dla kodu:

<h1>Jestem nagłówkiem H1</h1>
<h2>Jestem nagłówkiem H2</h2>
<p>Jestem akapitem</p>
<ul>
  <li>Jestem pierwszym elementem listy</li>
  <li>Jestem drugim elementem listy</li>
</ul>

bez żadnych stylów.

Pomimo tego, że żadne style nie zostały ręcznie dodane, to przeglądarka dodała własne reguły stylowania. Zazwyczaj te wewnętrzne style przeglądarek są do siebie zbliżone, jednak zdarza się że różnią się między sobą. Warto w takich sytuacjach korzystać z resetowania lub normalizacji stylów. W skrócie, resetowanie stylów to po prostu „wyzerowanie” stylów przeglądarek, natomiast normalizacja to ujednolicenie tych stylów.

W sieci oczywiście toczą się debaty nad tym, które podejście jest lepsze, jednak warto mieć świadomość istnienia obu rozwiązań. Ciekawe ujęcie tematu wraz z proponowanym rozwiązaniem można znaleźć w tym artykule.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Serie wpisów

©  2025 devolajf.pl. Built using WordPress and the Mesmerize Theme