A | A | A

SKŁADNIA CSS

Składnia CSS składa się z trzech części:

  • Selektora – określa do jakiego elementu/znacznika odnosi się dana reguła
  • Właściwości – jest to zdefiniowany w specyfikacji znacznik, najczęściej angielskie słowo lub jego fragment (np. kolor tła = background-color, obramowanie = border itp.)
  • Wartości właściwości – styl nadawany właściwości, w przypadku koloru tła może być #000000 – wartość barwy czarnej lub rozmiar czcionki – 12px.

Do każdego selektora można przypisać wiele własności, a każda z tych własności może mieć niezależne wartości. Własność i przypisana jej wartość oddzielone są dwukropkiem i zawarte w nawiasach klamrowych. Jeśli dany selektor ma przypisaną więcej niż jedną wartość, są one oddzielone średnikiem. Jeśli własność ma więcej niż jedną wartość oddzielone są one przecinkami. Wartości zawierające więcej niż jedno słowo muszą być otoczone cudzysłowami. Oprócz selektorów oznaczających znaczniki XHTML (takie jak h1, h2, p, img) możemy przydzielić im ID lub klasę. Dzięki temu możemy nadać więcej niż jeden styl dla każdego elementu XHTML.

Fundamentalny model CSS
Fundamentalny model CSS

Dołączanie CSS do dokumentu XHTML

Istnieją trzy sposoby używania kaskadowych styli CSS. Dwa wewnętrzne, oznacza to że deklaracje styli znajdą się wewnątrz dokumentu XHTML i jeden zewnętrzny w przypadku gdy wszystkie style zostaną umieszczone w osobnym pliku.

Metoda 1: W linii – atrybut style

Pierwszym sposobem jest użycie atrybutu style. Możemy dodać ten atrybut do wszystkich znaczników XHTML. Jest to atrybut XHTML więc używa się go dokładnie tak samo jak wszystkich innych atrybutów, deklaracja musi znaleźć się w miejscu gdzie rozpoczyna się znacznik.

Przykład użycia stylów w linii
Przykład użycia stylów w linii

Metoda 2: Wewnętrzna – znacznik <style>

Innym sposobem umieszczenia kodu CSS w dokumencie XHTML jest użycie znacznika <style> wewnątrz sekcji <head> dokumentu.

Przykład użycia stylów w sekcji <head> dokumentu
Przykład użycia stylów w sekcji <head> dokumentu

Metoda 3: Zewnętrzna – odnośnik do arkusza stylów

Sugerowaną metodą jest umieszczenie odnośnika do zewnętrznego arkusza stylów. Zewnętrzny arkusz stylów jest plikiem tekstowym z rozszerzeniem .css zawierający wszystkie deklaracje. Plik ten wraz z wszystkimi innymi umieszcza się na serwerze. W dokumencie XHTML tworzony jest odnośnik do arkusza stylów.

Przykład załączania arkusza styli z pliku zewnętrznego
Przykład załączania arkusza styli z pliku zewnętrznego

Ten odnośnik mówi przeglądarce, że powinna korzystać z układu graficznego zdefiniowanego w pliku CSS podczas wyświetlania dokumentu XHTML. Dzięki tej metodzie możliwe jest połączenie wielu dokumentów XHTML z tym samym plikiem arkusza stylów. Innymi słowy, jeden plik CSS może kontrolować układ graficzny w wielu dokumentach XHTML. Zmiany w zewnętrznym arkuszu stylów spowodują zmiany we wszystkich dokumentach XHTML.

Dokumenty XHTML podłączone do tego samego arkusza stylów

Rozwiązanie to pozwala na łatwiejsze zmiany wyglądu wszystkich stron serwisu jednocześnie bez ingerencji w kod XHTML. Dodatkowym atutem jest zmniejszenie rozmiaru plików XHTML a co się z tym wiąże oszczędności w pracy serwera.


Skocz do góry strony ↑