Projektowanie stron internetowych wymaga korzystania z wielu narzędzi wpływających na ich funkcjonalność czy prezencję. Podczas tworzenia wyglądu strony wykorzystuje się jeden z języków, który nosi nazwę CSS. Czym jest i na czym się skupia? O tym dowiecie się w dalszej części tego tekstu.
Czym jest język CSS?
CSS, czyli kaskadowe arkusze stylów to skrót od angielskiej nazwy Cascading Style Sheets. Język ten wykorzystywany jest do opisu układu elementów znajdujących się na stronie internetowej WWW. Za jego pomocą możemy zdefiniować wiele parametrów podczas projektowania strony takich jak: rodzaj czcionek, kolor tła czy wyrównanie elementów na stronie.
Arkusze stylów języka CSS to zbiór wytycznych, które odpowiedzialne są za regulację wyglądu danego dokumentu. To, co odróżnia go od XHTML to to, że ten pierwszy odpowiedzialny jest za prezencję strony, zaś drugi za jego strukturę. CSS znacząco ułatwia pozycjonowanie elementów i może odnosić się jednocześnie do wielu dokumentów. Oznacza to, że przy pomocy języka CSS z poziomu jednego arkusza możemy z łatwością kontrolować wygląd wielu innych dokumentów. Jest to bardzo wygodne podczas wprowadzania wizualnych zmian na stronach WWW. Pozwala to na zaoszczędzenie czasu, ponieważ nie musimy spędzać kolejnych godzin na edycji każdej podstrony, ponieważ wszystko dokonujemy w jednym arkuszu.
Na tym nie kończą się zalety korzystania z tego języka. CSS jest kompatybilny ze wszystkim popularnymi przeglądarkami internetowymi. W przeszłości zdarzało się tak, że podczas projektowania wyglądu strony internetowej programiści zmuszeni byli do pisania wielu kodów jednej strony, by ta była prawidłowo wyświetlana na konkretnej przeglądarce internetowej. W tej chwili nie jest to już konieczne, ponieważ język CSS obsługiwany jest przez wszystkie przeglądarki. Projektowanie skomplikowanych układów graficznych nie stanowi już problemu, gdyż CSS jest językiem standardowym. Dodatkowo jest on odpowiedzialny za prawidłowe renderowanie wyglądu strony w zależności od urządzenia na jakim dana witryna jest przeglądana – czy jest to komputer, tablet czy smartfon.
Za co odpowiadają arkusze CSS?
Jak to bywa w przypadku stron internetowych, każdy element jest za coś odpowiedzialny. Oczywiście CSS odpowiada za wygląd strony. Dokładnie za:
– teksty,
– tło,
– marginesy,
– obramowanie,
– czcionki,
– filtry,
– tabele.
Przy pomocy kaskadowych arkuszy stylów możemy ustalić wielkość czcionki, styl, proporcje czy ich rodzaj. Z kolei cechy tekstu ustalane przez programistę dotyczą koloru, dekoracji, wcięcia czy wyrównania.
Jakie płyną korzyści z korzystania z CSS?
Tak jak wcześniej wspominaliśmy jedną z największych zalet tego języka jest jego kompatybilność ze wszystkim przeglądarkami z jakich korzystają użytkownicy. Kaskadowe arkusze stylów stały się po prostu podstawowym i nieodłącznym elementem podczas projektowania stron internetowych ponieważ pozwalają na bieżące edytowanie i kontrolowanie układu graficznego dokumentu przez programistę. Wszystko to dostępne jest z poziomu jednego arkusza stylów. Cały proces jest bardziej precyzyjny i mniej czasochłonny. Dodatkowo język CSS dba o to, aby strona wyświetlała się prawidłowo na każdym urządzeniu z jakiego korzysta użytkownik.
Jak skonstruowane są arkusze CSS?
O tym, że arkusze stylów CSS są w dzisiejszych czasach nieodłączną częścią projektowania stron internetowych już wiemy. Dzięki nim mamy możliwość swobodnej modyfikacji wyglądu strony. Dowiedzmy się zatem jak wygląda ich konstrukcja?
Kaskadowe arkusze stylów w języku programistów prezentują się następująco:
(style type=”text/css”)
(! – –
Znacznik { właściwości: wartość; }
– – >
(/style)
Każdy arkusz stylów posiada listę reguł, które określają w precyzyjny sposób, jakie elementy strony internetowej mają zostać wyświetlone przez przeglądarkę internetową. Każda z tych reguł składa się z selektora i deklaracji. Selektor odpowiedzialny jest za określenie grupy elementów, którego dotyczyć ma deklaracja określająca formatowanie. Deklaracja z kolei składa się z nazwy jednej z właściwości i jej wartości. Selektor może określać np. kolor a jego wartością może być nazwa tego koloru – np. czarny, biały czy zielony.
Jeśli chcemy aby arkusze CSS były wykorzystywane w przypadku wyświetlania stron internetowych muszą one zostać powiązane z dokumentem. Relację dokumentu CSS ze stroną należy określić przy użyciu linku:
<link rel=”stylesheet” href=”style.css” /> – dla (X)HTML
lub
<?xml-stylesheet type=”text/css” href=”style.css”?> – dla dokumentów XML.
Link umieszczamy we wnętrzu nagłówka dokumentu lub przy pomocy elementu style umieszczonego w dokumentach opierających się na języku XML.
Arkusze stylów odpowiedzialne są za prawidłowe wyświetlanie elementów na stronie internetowej i jej ogólny wygląd. Z racji tego, że jest to już standard przy projektowaniu stron internetowych nie musimy martwić się tym czy nasza strona z niego korzysta. CSS pozwala na szybką i łatwą modyfikację wyglądu witryn oraz wygodną kontrolę.
