Podstawy CSS

Główna strona Następna

Kaskadowe arkusze stylów (ang. Cascading Style Sheets, w skrócie CSS) – język służący do opisu formy prezentacji (wyświetlania) stron WWW. W tym artykule zobaczysz, jak można tworzyć skomplikowane strony, używając do tego kaskadowych arkudzy stylów(CSS).

W artykule poruszymy wymienione poniżej tematy.

Utworzenie arkuszy stylów oraz dołączenie ich na stronie.
Połączenie z zewnętrznymi arkuszami styłów.

Dolączenie stylów na stronie

Przede wszystkim zobacz, w jaki sposób można stosować style.

Znacznik <style> powinien znaleźć sięw elemencie <head> na stronie. Wartość jego atrybutu type wskazuje typ MIME arkusza stylów, czyli text/css - to jedyna wartość, jakiej będziesz używać. Nie jest wymagany w specyfikacji HTML5 i większość programistów sieciowych go pomija. W treści arkusza stylów znajduje się seria reguł. Wszystkie reguły stosują tę samą pokazaną poniżej strukturę.

selector {właściwośc1:wartość1; właściwośc2:wartość1;...}

Każda reguła składa się z selektora, po którym znajduje się lista właściwości oraz wartości powiązanych z tymi właściwościami. Wszystkie właściwości definiowane dla selektora są ujęte w nawiasie klamrowym. Dla selektora możesz zdefiniować dowolną liczbę właściwości, które muszą być rozdzielone średnikami.

Selektory użyte dotąd mają takie same nazwy jak znaczniki. Jeżeli używasz p jako selektora, wówczas zdefiniowana reguła będzie zastosowana dla wszystkich znaczników <p> na stronie. Podobnie w przypadku użycia h1 jako selektora będzie on stosowany dla wszystkich znaczników <h1>.

Utworzenie arkuszy stylów na poziomie witryny

Dopoki nie zaczniesz tworzyć arkuszy działających na poziomie całej witryny, nie osiągniesz prawdziwej wydajności arkuszy stylów. Wszystkie style można zdefiniować w oddzielnym pliku, a następnie dołączać go na każdej stronie internetowej za pomocą odpowiedniego znacznika. W tego rodzaju pliku CSS znajdzie się treść znacznika <style>. Aby arkusz stylów z wcześniejszego przykładu zamienić na oddzielny plik, mógłbyś utworzyć nowy plik o nazwie styles.css i umieścić w nim poniższy fragment kodu.

Po utworzeniu pliku arkusza stylów można go dołączyć na stronie za pomocą znacznika <link>.

<link rel='stylesheet' href='styles.css' type='text/css'>

Atrybut href może wskazywać względny lub bezwzględny adres URL. Na tworzonych stronach internetowych możesz więc umieszczać łącza do wielu arkuszy stylów, a zastosowane będą wszystkie reguły. To oznacza możliwość przygotowania jednego ogólnego arkusza stylów dla calej witryny, a następnie kolejnych przeznaczonych dla danej strony lub sekcji witryny.

Główna strona Następna