• 
  Wstęp

  Co to są Kaskadowe Arkusze Stylów CSS (Cascading Style Sheets)?

• 
  Dlaczego warto używać CSS?

  Do czego są potrzebne style CSS?

Kaskadowe Arkusze Stylów

CSS - Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych. CSS nie może zatem istnieć samodzielnie, gdyż jest ściśle powiązane z językiem opisu struktury dokumentów takim jak HTML. CSS daje możliwość globalnego zarządzania formą prezentacji całej witryny internetowej. Pomysł ten nie jest wcale nowy. Style formatujące są wbudowane od dawna w praktycznie każdy bardziej zaawansowany edytor tekstu. Posiada je np. MS Word i Open Office.

Niestety część poleceń stylów nie jest interpretowana przez niektóre przeglądarki internetowe lub jest obsługiwana odmiennie. Dlatego zawsze należy sprawdzać efekty w praktyce - jeśli to możliwe, to najlepiej w kilku najbardziej popularnych przeglądarkach: Chrome, Firefox. Absolutnie nie trzeba się jednak obawiać stosowania CSS, ponieważ nie powodują one błędów w przeglądarkach, które ich nie obsługują. Nigdy nie zdarzy się tak, aby strona w ogóle nie została wyświetlona, ponieważ korzysta z CSS. Jeżeli przeglądarka nie obsługuje stylów, po prostu je pominie.

Najważniejszym powodem wprowadzenia stylów było rozdzielenie struktury i prezentacji dokumentów. Język HTML wywodzi się od SGML (Standard Generalized Markup Language - Standardowy Uogólniony Język Oznaczania). SGML miał opisywać ogólną strukturę strony: nagłówek oraz ciało dokumentu, w którym mogły znajdować się akapity z tekstem, wykazy, tabele i inne elementy. SGML odpowiada tylko za wstawienie tych elementów, ale nie określa ich wyglądu. Jak łatwo się domyślić, szybko przestało to wystarczać - dlatego wprowadzono HTML. Zawarcie poleceń formatujących w samym HTML spowodowało jednak, że modyfikacja wyglądu elementów strony stała się bardzo żmudna (atrybuty i znaczniki które za to odpowiadają, są porozrzucane w różnych miejscach kodu, mieszając się ze strukturą dokumentu). Dzięki wprowadzeniu stylów CSS, wszystkie polecenia dotyczące formatowania można umieścić w jednym miejscu (tzw. arkuszu) i powiązać je z konkretnymi elementami, wstawionymi za pomocą czystego HTML. Taka koncepcja sprawia, że modyfikacja wyglądu stron może przebiegać dużo sprawniej.

Przed przystąpieniem do właściwej części kursu CSS mam jedną prośbę: o ile rozdziały opisujące własności stylów można czytać w zasadzie w dowolnej kolejności, a nawet pomijać wybrane, to zanim przejdziesz do tej części, na początku koniecznie zaznajom się z rozdziałem pt. Wstawianie stylów, a potem z rozdziałami opisującymi selektory (w tej kolejności). Jeśli pominiesz początkowe rozdziały lub zmienisz kolejność, możesz mieć poważne trudności ze zrozumieniem dalszej części kursu.

Źródła

Opis tutaj zawarty, został opracowany na podstawie następujących specyfikacji:

• Cascading Style Sheets, level 1
• Cascading Style Sheets, level 2
• Cascading Style Sheets, level 2 revision 1
• Selectors Level 3
• CSS Color Module Level 3
• CSS3 Basic User Interface Module
• CSS Backgrounds and Borders Module Level 3
• CSS Multi-column Layout Module
• Media Queries
• CSS Values and Units Module Level 3
• CSS Image Values and Replaced Content Module Level 3
• CSS Flexible Box Layout Module
• CSS Conditional Rules Module Level 3
• CSS Fonts Module Level 3
• CSS Writing Modes Level 3
• CSS Containment Module Level 1
• CSS Images Module Level 3
• CSS Speech Module
• CSS Text Decoration Module Level 3
• CSS Shapes Module Level 1
• CSS Masking Module Level 1
• CSS Text Module Level 3
• CSS Fragmentation Module Level 3
• CSS Transforms Module Level 1
• Compositing and Blending Level 1
• CSS Grid Layout Module Level 1
• CSS Display Module Level 3
• CSS Will Change Module Level 1
• CSS Box Model Module Level 3
• CSS Cascading and Inheritance Level 4
• CSS Scroll Snap Module Level 1
• CSS Scrollbars Styling Module Level 1
• CSS Counter Styles Level 3
• CSS Color Adjustment Module Level 1

Po co w ogóle stosować style CSS? Czy warto poświęcać czas na naukę poleceń, które w większości przypadków istnieją również bezpośrednio w składni HTML? Otóż ja uważam, że warto. Dlaczego? Najważniejsze zalety płynące ze stosowania stylów opiszę poniżej, a jeśli i to Cię nie przekona, radzę poszukać sobie bardziej przydatnego zajęcia (np. szydełkowanie z wykorzystaniem techniki haftu ozdobnego ;-)).

1. Style stały się już praktycznie podstawowym narzędziem formatującym. Jeśli poważnie myślisz o zajęciu się projektowaniem stron WWW, koniecznie musisz je poznać.
2. Przestarzałe atrybuty i znaczniki, znajdujące się bezpośrednio w składni HTML, które dotyczą formatowania (zobacz: Elementy zdeprecjonowane), będą stopniowo wycofywane przez producentów przeglądarek internetowych, na rzecz rekomendowanych analogicznych deklaracji CSS.
3. Dokumenty pisane z wykorzystaniem arkuszy stylów są zwykle bardziej przejrzyste i krótsze.
4. Style pozwalają w łatwy sposób zarządzać całą serią dokumentów, poprzez stosowanie zewnętrznych arkuszy stylów. Dzięki temu w łatwy i wygodny sposób, można dokonać modyfikacji rodzaju formatowania jednocześnie we wszystkich dokumentach, zmieniając dane tylko w jednym pliku!
5. Dzięki możliwości stosowania klas selektorów, znacznie oszczędzamy sobie pisania. W jednym miejscu określamy wszystkie atrybuty formatowania (których może być bardzo dużo), odnoszące się do wielu elementów, które mają wyglądać tak samo. Bezpośrednio przy elemencie wystarczy podać tylko nazwę klasy i nie musimy już wypisywać "litanii" poleceń. Znacznie przyspiesza to późniejszą modyfikację strony, ponieważ zmian dokonujemy tylko w jednym miejscu, a wpływają one na wiele elementów jednocześnie.
6. Możliwość stosowania różnorodnych jednostek oraz sposobów definiowania kolorów.
7. Style dają autorowi możliwości, które do tej pory były praktycznie niemożliwe do osiągnięcia:
   1. Różne wartości pogrubienia czcionki (9 rodzajów)
   2. Dodatkowe możliwości formatowania tekstu

      Przykład

      To jest nadkreślenie tekstu

      Ten paragraf został napisany małymi literami, ale dzięki transformacji, jest wyświetlany za pomocą wielkich liter.

      Ten akapit zaczyna się wcięciem, którego można użyć jako tabulatora, rozpoczynającego każdy nowy akapit (normalny znak tabulatora wpisany w kodzie źródłowym strony, jest ignorowany przez przeglądarkę internetową, podczas wyświetlania dokumentu).

      Odstęp pomiędzy literami w tym paragrafie został powiększony.

   3. Nowe własności tła

      Przykład

      Tło pod tekstem

      Powtarzanie tła w poziomie

      Kliknij tutaj, aby zobaczyć przykład strony z nieruchomym pojedynczym tłem.

      Gradient (płynne przejście kolorów)

   4. Obramowanie

      Przykład

      Obramowanie tekstu

      Zaokrąglone narożniki

      Cień pod elementem

   5. Dodatkowe właściwości wykazów (list)

      Przykład

      • Punkt pierwszy
      • Punkt drugi
      • Punkt trzeci...
   6. Nowy model obramowania tabeli

      Przykład

      komórka1	komórka2	komórka3
      komórka4	komórka5	komórka6

   7. Pozycjonowanie

      Przykład

      To nie jest obrazek!

      To nie jest obrazek!
   8. Zmiana kształtu kursora.

      Przykład

      Wskaż ten tekst myszką

      Kursor wczytany z pliku:
      Wskaż ten tekst myszką
   9. Zmiana wyglądu odsyłacza, po wskazaniu go myszką

      Przykład

      Wskaż ten tekst myszką
   10. Dodatkowe możliwości określenia wyglądu dokumentów podczas ich drukowania.
   11. I wiele innych. Dodatkowo w ciągłym opracowaniu są style poziomu trzeciego (CSS 3), które oferują jeszcze więcej rozwiązań. Aby dowiedzieć się więcej, sprawdzaj stronę organizacji W3C oraz najnowsze specyfikacje.