Podstawowe informacje o stylach CSS

CSS (Cascading Style Sheets) to zbiór reguł formatowania, które sterują wyglądem zawartości na stronie WWW. Sformatowanie strony za pomocą stylów CSS umożliwia rozdzielenie zawartości od prezentacji. Zawartość strony, kod HTML, znajduje się w pliku HTML. Natomiast reguły CSS, które definiują prezentację tego kodu, znajdują się w innym pliku (zewnętrznym arkuszu stylów), albo w innej części dokumentu HTML (zazwyczaj w sekcji nagłówka). Rozdzielenie zawartości i prezentacji znacznie ułatwia scentralizowaną obsługę wyglądu serwisu. Gdy chce się wprowadzić zmiany, nie trzeba modyfikować każdej właściwości na każdej stronie z osobna. Ponadto oddzielenie zawartości od prezentacji pozwala uzyskać prostszy i bardziej przejrzysty kod HTML, co skraca czas wczytywania się stron w przeglądarce i upraszcza nawigację osobom niepełnosprawnym (np. korzystającym z czytników ekranu).

CSS zapewnia elastyczność i kontrolę nad precyzyjnym wyglądem strony. Za pomocą stylów CSS można sterować wieloma właściwościami tekstu, np. czcionkami i ich rozmiarami; pogrubieniem, kursywą, podkreśleniem i cieniem tekstu; kolorem tekstu i kolorem tła; kolorem i podkreśleniem łączy; a także wieloma innymi właściwościami. Sterując czcionkami za pomocą stylu CSS można również zagwarantować bardziej spójną obsługę układu i wyglądu strony w wielu różnych przeglądarkach.

Obok formatowania tekstu, za pomocą stylów CSS można sterować formatem i położeniem elementów blokowych na stronie WWW. Element blokowy to samodzielny fragment zawartości, na ogół oddzielony nowym wierszem na stronie HTML i sformatowany graficznie w postaci bloku. Na przykład znaczniki h1 (nagłówek 1. rzędu), p (akapit) oraz div (rozdział) generują elementy blokowe na stronach WWW. Dla elementów blokowych można ustawiać marginesy i krawędzie, umieszczać je w określonym miejscu, dodawać kolor tła, oblewać je tekstem itd. Manipulowanie elementami blokowymi to podstawowa metoda tworzenia układu strony za pomocą stylów CSS.

Informacje o regułach CSS

Reguła formatowania CSS składa się dwóch części: selektora i deklaracji (lub, w większości przypadków, bloku deklaracji). Selektor to termin (odnoszący się do takich elementów, jak znacznik p, h1, nazwa klasy albo identyfikator), który identyfikuje formatowany element. Natomiast blok deklaracji definiuje właściwości stylu. W poniższym przykładzie, h1 to selektor, a cały tekst w klamrach ({}) to blok deklaracji:

Pojedyncza deklaracja składa się z dwóch części: właściwości, np. font-family (rodzina czcionek) oraz wartości, np. Helvetica. W poprzedniej regule CSS, utworzono styl dla znaczników h1: tekst wszystkich znaczników h1 powiązanych z tym stylem będzie miał rozmiar 16 punktów, czcionkę Helvetica i będzie pogrubiony.

Styl (który pochodzi z reguły lub zbioru reguł) jest przechowywany w innym miejscu, niż tekst, który formatuje. Zazwyczaj jest to zewnętrzny arkusz stylów albo sekcja nagłówka w dokumencie HTML. Zatem jedna reguła dla znaczników h1 może dotyczyć wielu znaczników naraz (a w przypadku zewnętrznego arkusza stylów, reguła może dotyczyć jednocześnie wielu znaczników na wielu różnych stronach). Dzięki temu standard CSS ogromnie ułatwia modyfikowanie wyglądu. Uaktualnienie reguły CSS w jednym miejscu powoduje, że formatowanie wszystkich używających jej elementów automatycznie przyjmuje nowy styl.

W programie Dreamweaver można tworzyć następujące rodzaje stylów:

• Style klasy umożliwiają stosowanie właściwości stylu do dowolnych elementów na stronie.

• Style znaczników HTML zmieniają definicję formatowania poszczególnych znaczników, np. h1. Gdy utworzysz lub zmienisz styl CSS dla znacznika h1, zmieni się automatycznie cały tekst sformatowany znacznikiem h1.

• Style zaawansowane zmieniają definicję formatowania pewnych kombinacji elementów albo innych form selektorów, dozwolonych w standardzie CSS (np. selektor td h2 obowiązuje wtedy, gdy nagłówek h2 występuje w komórce tabeli). Style zaawansowane zmieniają także formatowanie znaczników, które zawierają określony atrybut id (np. style definiowane przez #mojStyl obowiązują dla wszystkich znaczników, które zawierają parę atrybut wartość: id="mojStyl").

Reguły CSS mogą być przechowywane w następujących miejscach:

Zbiory reguł CSS, przechowywane w oddzielnym, zewnętrznym pliku CSS (.css), a nie w pliku HTML. Taki plik jest połączony z jedną lub wieloma stronami w serwisie WWW za pomocą łącza albo reguły @import, umieszczanej w sekcji nagłówka dokumentu.

Zbiory reguł CSS, dodane w znaczniku style w sekcji nagłówka dokumentu HTML.

Zdefiniowane w poszczególnych wystąpieniach znaczników w dokumencie HTML. (Nie zaleca się stosowania stylów wewnętrznych).

Program Dreamweaver rozpoznaje style zdefiniowane w istniejących dokumentach, jeżeli spełniają one wytyczne CSS. W widoku Projekt program Dreamweaver bezpośrednio renderuje większość zastosowanych stylów. (Jednak wyświetlenie podglądu dokumentu w przeglądarce zapewnia najbardziej precyzyjne renderowanie strony „na żywo”). Niektóre style CSS są różnie renderowane w przeglądarkach Microsoft Internet Explorer, Netscape, Opera, Apple Safari i innych. Niektórych stylów nie obsługuje jak dotąd żadna przeglądarka.

Informacje o stylach kaskadowych

Termin kaskadowy odnosi się do sposobu, w jaki przeglądarka ostatecznie wyświetla style dla określonych elementów na stronie internetowej. Za style wyświetlane na stronie internetowej odpowiedzialne są trzy różne źródła: arkusz stylów utworzony przez autora strony, zaznaczenia stylów dostosowane przez użytkownika (jeśli są) i domyślne style przeglądarki. W poprzednich tematach opisane zostało tworzenie stylów dla strony internetowej jako tworzenie strony internetowej i arkusza stylów dołączonego do tej strony. Przeglądarki posiadają też swoje własne domyślne arkusze stylów dyktujące renderowanie stron internetowych, dodatkowo użytkownicy mogą dostosować swoje przeglądarki tworząc zaznaczenia określające wyświetlanie stron internetowych. Końcowe wyświetlanie strony internetowej jest wynikiem reguły wszystkich trzech źródeł razem wziętych („kaskadowanie”), co ma na celu renderowanie strony internetowej w optymalny sposób.

Często stosowany znacznik — znacznik akapitu, lub znacznik <p>— ilustruje koncepcję. Domyślnie, przeglądarki posiadają arkusze stylów definiujące czcionkę i rozmiar czcionki dla tekstu akapitu (tzn. tekstu umieszczonego między znacznikami <p> w kodzie HTML). Przykładowo w przeglądarce Internet Explorer cały tekst główny łącznie z tekstem akapitu, domyślnie wyświetlany jest czcionką Times New Roman, Medium.

Jednak, jako autor strony internetowej, możesz utworzyć arkusz stylów nadpisujący domyślny styl czcionki i rozmiar czcionki akapitu. Na przykład w swoim arkuszu stylów możesz utworzyć następującą regułę:

Gdy użytkownik wczytuje stronę, ustawienia kroju czcionki akapitu oraz rozmiaru czcionki określone przez autora strony zastępują domyślne ustawienia przeglądarki.

Użytkownicy mogą tworzyć zaznaczenia, aby dostosować wyświetlanie strony w przeglądarce w optymalny sposób do ich własnego używania. Na przykład w przeglądarce Internet Explorer użytkownik może wybrać polecenie z menu Widok > Rozmiar tekstu > Największy, aby powiększyć czcionkę do bardziej czytelnego rozmiaru, jeśli czcionka jest zbyt mała. Ostatecznie (przynajmniej w tym przypadku), wybór użytkownika nadpisuje domyślne style przeglądarki dla czcionki akapitu i rozmiaru czcionki oraz style akapitowe utworzone przez autora strony.

Kolejną ważną częścią stylów kaskadowych jest dziedziczenie. Właściwości dla większości elementów na stronie internetowej są dziedziczone — na przykład znaczniki akapitu dziedziczą określone właściwości ze znaczników treści (body), znaczniki zakresu dziedziczą określone właściwości znaczników akapitowych itd. Zatem, jeśli w swoim arkuszu stylów utworzysz następującą regułę:

Cały tekst akapitowy na stornie internetowej (także tekst dziedziczący właściwości ze znaczników akapitowych) będzie pisany czcionką Arial, kursywą ponieważ znacznik akapitowy dziedziczy te właściwości ze znaczników body. Jednak można określać reguły bardziej dokładnie i tworzyć style nadpisujące standardową formułę dla dziedziczenia. Na przykład jeśli w swoim arkuszu stylów utworzysz następującą regułę:

Cały tekst treści (body) będzie pisany czcionką Arial, kursywą z wyjątkiem tekstu akapitowego (i jego dziedziczenia), który będzie wyświetlany za pomocą czcionki Courier (nie-kursywa). Technicznie, znacznik akapitu najpierw dziedziczy właściwości ustawione dla znacznika body, ale następnie je ignoruje, ponieważ ma własne zdefiniowane właściwości. Inaczej mówiąc, podczas gdy zwykle elementy strony dziedziczą właściwości z powyższych, bezpośrednia aplikacja właściwości znaczników zawsze powoduje nadpisanie formuły standardowej dla dziedziczenia.

Kombinacja wszystkich współczynników omawianych powyżej, oraz innych współczynników, np. specyfikacja CSS, oraz kolejność reguł CSS, ostatecznie tworzy złożoną kaskadę, gdzie elementy o wyższym priorytecie nadpisują elementy o niższym priorytecie. Więcej informacji na temat reguł rządzących kaskadami, dziedziczeniem i precyzją znajduje się na stronie internetowej www.w3.org/TR/CSS2/cascade.html.

Informacje o formatowaniu tekstu i stylach CSS

Domyślnie program Dreamweaver formatuje tekst za pomocą stylów CSS (Cascading Style Sheet). Style nadawane tekstowi za pomocą Inspektora właściwości albo poleceń menu generują reguły CSS, osadzane w nagłówku bieżącego dokumentu.

Panel Projektant CSS również umożliwia tworzenie reguł i właściwości CSS oraz ich edytowanie. Panel Projektant CSS zapewnia znacznie bardziej rozbudowane możliwości edycji niż Inspektor właściwości. Wyświetla wszystkie reguły CSS zdefiniowane w bieżącym dokumencie, zarówno te osadzone w nagłówku dokumentu, jak i te z zewnętrznego arkusza stylów. Firma Adobe zaleca stosowanie panelu Projektant CSS (zamiast Inspektora właściwości) jako podstawowego narzędzia do tworzenia i edytowania stylów CSS. Dzięki temu kod jest bardziej przejrzysty i łatwiejszy w utrzymaniu.

Informacje o panelu Projektant CSS: Tworzenie układu strony za pomocą panelu Projektant CSS.

Oprócz własnych stylów i arkuszy można stosować w dokumentach arkusze stylów dołączone do programu Dreamweaver.

Samouczek przedstawiający formatowanie tekstu za pomocą stylów CSS można znaleźć na stronie internetowej www.adobe.com/go/vid0153_pl.

Informacje o skróconych właściwościach CSS

Specyfikacja CSS umożliwia tworzenie stylów w krótszej notacji. Nazywa się to skróconą składnią CSS. Skrócona składnia CSS umożliwia podanie wartości kilku właściwości w jednej deklaracji. Na przykład właściwość font umożliwia ustawienie w jednym wierszu właściwości font-style, font-variant, font-weight, font-size, line-height oraz font-family.

Korzystając ze skróconej składni CSS należy pamiętać, że opcje pominięte w skróconej właściwości CSS otrzymają wartości domyślne. Może to spowodować nieprawidłowe wyświetlanie stron, jeżeli do tego samego znacznika przypisano dwie lub więcej reguł CSS.

Np. przedstawiona poniżej reguła h1 stosuje pełną składnię CSS. Należy zauważyć, że właściwości font-variant, font-stretch, font-size-adjust oraz font-style otrzymały wartości domyślne.

Ta sama reguła w postaci pojedynczej właściwości o składni skróconej wygląda następująco:

Gdy stosuje się notację skróconą, właściwości pominięte przyjmują wartości domyślne. Zatem w poprzednim przykładzie pominięto właściwości font-variant, font-style, font-stretch oraz font-size-adjust.

Jeżeli style zdefiniowano w więcej niż jednym miejscu (np. zostały one zarówno osadzone w stronie HTML, jak i zaimportowane z zewnętrznego arkusza stylów) i użyto kombinacji pełnej i skróconej składni CSS, to trzeba pamiętać, że właściwości pominięte w regule skróconej mogą kaskadowo przesłaniać właściwości bezpośrednio zdefiniowane w innej regule.

Dlatego też program Dreamweaver domyślnie stosuje pełną notację składni CSS. Pozwala to uniknąć potencjalnych problemów wynikłych z przesłonięcia reguły w notacji pełnej przez regułę w notacji skróconej. Otwierając w programie Dreamweaver stronę WWW zapisaną w skróconej notacji CSS należy pamiętać, że program utworzy nowe reguły CSS w składni pełnej. Sposób, w jaki program Dreamweaver tworzy i edytuje reguły CSS, można zmienić w preferencjach edycji CSS w kategorii Style CSS okna dialogowego Preferencje (Edycja > Preferencje w systemie Windows lub Dreamweaver > Preferencje w systemie Macintosh).

Dreamweaver a style CSS

Program Dreamweaver udostępnia wiele metod pracy ze stylami CSS:

• Panel Projektant CSS umożliwia przygotowanie stylów CSS przy minimum prac programistycznych. Więcej informacji: Tworzenie układu strony za pomocą panelu Projektant CSS.
• Kod CSS można również napisać ręcznie. Więcej informacji o narzędziach programistycznych oferowanych przez program Dreamweaver: Środowisko programistyczne w programie Dreamweaver.
• Jeśli wolisz pracować nad plikami Sass, Scss lub Less, możesz napisać kod w swojej preferowanej składni i wykorzystać go w programie Dreamweaver. Więcej informacji: Preprocesory CSS.