Artykuł z kursu HTML i CSS

Kurs HTML 4.01, XHTML 1.0 i CSS 2 z przykładami

autor: Dariusz Majgier • ostatnia aktualizacja kursu: 2003.06.01

[Start] • [Elementy HTML] • [Atrybuty HTML] • [Style CSS] • [Porady online]
[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [tła] • [synteza] • [druk]

Dołączanie i korzystanie ze stylów CSS

Style pozwalają kontrolować większość właściwości elementów HTML, które kiedyś można było ustawiać wyłącznie za pomocą atrybutów. Powtarzanie atrybutów w wielu elementach było nie tylko niewygodne, ale zwykle jakakolwiek zmiana koloru lub wyglądu strony wymagała dokonania poprawek na wszystkich stronach WWW, w każdym elemencie.

Gdy nagle tytuły miały być zielone i pogrubione, a dotychczas były czerwone i rozstrzelone, wtedy webmastera czekała bardzo niemiła robota - musiał ręcznie zmieniać wygląd wszystkich tytułów.

Organizacja W3C szybko doszła do wniosku, że trzeba oddzielić układ (konstrukcję) strony od właściwości elementów umieszczonych na niej. Za pomocą języka HTML tworzy się więc strukturę, jak np. tabele, tytuły czy akapity, a korzystając ze stylów nadaje się im odpowiednie właściwości i formatowanie, np. kolor, pogrubienie, pochylenie, tła, wielkość liter i inne elementy odpowiedzialne za kształt i wygląd.

Wystarczy więc przypisać do tytułu strony nazwę stylu, np. "glowny" i zdefiniować w jednym miejscu jakie właściwości ma mieć główny tytuł. Może być pogrubiony, niebieski, napisany czcionką Arial o wielkości 16 pikseli. Wszystkie tytuły główne mogą mieć ten sam styl zapisany w jednym pliku.

Gdy nagle trzeba zmienić wygląd tytułów, wystarczy w jednym miejscu zmienić właściwości stylu "glowny" i efekt będzie widoczny od razu na wszystkich stronach we wszystkich tytułach oznaczonych tym stylem. Prawda, że rewelacyjny (i rewolucyjny) wynalazek? Takie podejście pozwala szybko zmienić kolorystykę, kształt czy właściwości określonego stylu przypisanego konkretnym elementom HTML.

Jak zdefiniować swoje style?

Własne style możesz nazwać dowolnie, w sposób dla Ciebie czytelny. Mogą nazywać się np. "naglowek", "akapitczerwony" lub "pogrubienie". Aby je stworzyć musisz zadeklarować je w osobnym pliku lub wprost na wybranej stronie WWW.

W nagłówku strony, w sekcji HEAD umieść swoją definicję stylu pomiędzy tagami STYLE.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html><head>
  <style type="text/css"><!--
    
    h1,td {color: green;}
    .naglowek {color: red; font-size:16px;}
    .pogrubiony {font-weight: bold;}

  --></style>
  <meta http-equiv="content-type" 
    content="text/html; charset=iso-8859-2">
  <title>Tytuł strony</title>
</head><body>

  Dalsza treść strony, gdzie będą używane Twoje style...

</body></html>

W przykładzie został zdefiniowany jeden styl dla elementów H1 i TD i dwa style o nazwach "naglowek" i "pogrubiony". Najłatwiejszą notacją (bo style można definiować na kilka sposobów) i chyba najczęściej spotykaną jest przypisanie stylu do elementu HTML. Inną popularną notacją jest kropka i nazwa stylu. Kropka określa, że styl jest selektorem klasy, czyli oznacza, że klasa będzie miała nadaną przez nas nazwę, którą można potem użyć w definicji klasy dla elementu HTML.

Brzmi nieco zawile? Też tak myśle. Teorią się nie przejmuj, ważniejsza jest praktyka. Pamiętaj o kropce i za nią umieść nazwę stylu. Następnie w nawiasach klamrowych musisz opisać jakie cechy będzie miał stworzony przez Ciebie styl.

Wszystkie tytuły H1 i komórki tabeli TD będą miały kolor zielony (color: green;) Nagłówek ma mieć czerwony kolor (color: red;) i wielkość 16 pikseli (font-size:16px;). Styl pogrubiony będzie tylko pogrubiony (font-weight: bold;).

Dowolny element HTML, który ma mieć styl naglowek powinien mieć atrybut class z nazwą naszego stylu (ale już bez kropki):

<p class=naglowek>Nagłówek strony</p>

Bez problemu możesz ten styl przypisać kilka razy do różnych elementów na stronie:

<p class=naglowek>Nagłówek strony</p>
<div class=naglowek>Inny nagłówek strony</div>
<a href="http://www.reporter.pl" class=naglowek>Duży link</a>

Kropka oznacza, że wszystkie elementy na stronie (polecenia HTML), dla których zdefiniujesz klasę "naglowek" będą miały ten styl. Gdy przypiszesz styl do elementu HTML, tylko te elementy mają określone właściwości (tak zrobiliśmy z komórkami tabeli i tytułami H1)

Jak już wiesz, aby kawałek tekstu miał pogrubiony styl, wystarczy go zdefiniować z kropką na początku:

.pogrubiony {font-weight: bold;}

Tak określony styl może się odnościć do dowolnych elementów HTML - możesz pogrubić akapity, tabele, linki i generalnie wszystkie tagi języka HTML. Dodając przed kropką nazwę elementu HTML, możesz ograniczyć działanie tego stylu tylko do wybranych poleceń języka HTML. Zastosujmy pogrubienie tylko w akapitach:

P.pogrubiony {font-weight: bold;}

I użyjmy go w praktyce:

<p class=pogrubiony>TYLKO TEN tekst zostanie pogrubiony</p>
<br class=pogrubiony>ten tekst nie zostanie pogrubiony</br>
<div class=pogrubiony>Ten tekst nie zostanie pogrubiony</div>
<a href="http://reporter.pl" class=pogrubiony>Link bez pogrubienia</a>

Takie zachowanie pozwala stworzyć wiele stylów o nazwie "pogrubiony", ale każdy będzie odnosił się tylko do określonego elementu języka HTML:

P.pogrubiony {font-weight: bold;}
BR.pogrubiony {font-weight: bold; color: red;}

Łatwo zapamiętać, że brak nazwy elementu przed kropką dotyczy wszystkich tagów HTML, a wyszczególniona nazwa przed kropką we własnej definicji stylu ogranicza działanie stylu tylko do tego elementu języka HTML.

Jest jeszcze jeden zapis własnej definicji stylu, gdzie zamiast kropki stosuje się znak #:

#zielony {color: green;}

Tym razem odwołanie do stylu nie następuje przez podanie atrybutu class, ale przez identyfikator elementu, czyli atrybut id:

<p id=zielony>zielony akapit</p>

Ważną rzeczą jest aby na jednej stronie nie było dwóch elementów HTML (np. dwóch lub więcej akapitów), które mają taką samą nazwę ID. Identyfikator jest unikalny. Jeżeli chcesz stosować więcej identyfikatorów musisz je np. ponumerować:

#zielony1 {color: green;}
#zielony2 {color: green;}
#zielony3 {color: green;}

<p id=zielony1>zielony akapit</p>
<span id=zielony2>zielony akapit</span>
<p id=zielony3>zielony akapit</p>

Tutaj również można ograniczyć zakres działania stylu dla wybranego elementu dodając jego nazwę przed definicją stylu:

P#zielony {color: green;}

W praktyce zapis z identyfikatorami ID nie jest często stosowany, ponieważ z definicji każdy element HTML musi mieć inny identyfikator i tych styli byłoby bardzo dużo. Natomiast styl zapisany w ten sposób ma zastosowanie w dynamicznym HTML, a więc w powiązaniu z JavaScriptem i DOMem, gdzie odwołania do elementów HTML możliwe są poprzez identyfikatory ID.

Zdecydowanie najczęściej spotykany jest przykład pierwszy, gdzie po kropce podajesz nazwę stylu, a w nawiasach określasz wszystkie style i parametry jakie mają być przypisane do danej nazwy. Potem w elementach HTML wystarczy za pomocą atrybutu class przypisać określoną nazwę stylu, aby go użyć w dowolnym miejscu na stronie.

Dołączanie stylów

Jednym ze sposobów jest umieszczenie stylów wprost przy elemencie, którego dotyczy korzystając z atrybutu style. Można w ten sposób nadać konkretny styl wybranemu elementowi HTML, bez konieczności stosowania arkusza zewnętrznego lub wewnętrznego:

<p style="color:red; font-size:16px;">
dowolny akapit
</p>

Takie rozwiązanie jest stosowane wyjątkowo, gdy trzeba zmienić wygląd jednego elementu (lub kilku elementów) na stronie lub nadpisać wygląd konkretnego elementu HTML, który wcześniej został zadeklarowany w stylach zewnętrznych lub osadzonych na stronie.

Nie powinno się stosować stylów wprost w elementach HTML, ponieważ trudno je potem znaleźć w kodzie strony i kłopotliwe jest ich poprawianie. Mimo chaosu, jaki może wprowadzić taki zapis, jest on w praktyce dosyć często stosowony z lenistwa, bo łatwiej dokonać zmiany stylu konkretnego elementu niż wypisywać wszystkie style w zewnętrznym arkuszu i potem przypisywać każdy ze stylów do poszczególnych elementów.

Definicje stylów można umieścić wprost na konkretnej stronie WWW, w sekcji nagłówkowej strony, czyli pomiędzy tagami <head> i </head>, np. zaraz po określeniu tytułu dla strony:

<head>
  <meta http-equiv="content-type" 
  content="text/html; charset=iso-8859-2">
  <title>Tytuł strony </title>
  <style type="text/css"><!--

  body, p { 
    font-family: Arial, sans-serif; 
    font-size: 14px;
  }
  a { text-decoration:none; }
  .menu:active {color:navy;}
  .menu:link {color:navy;}
  .menu:visited {color:navy;}
  .menu:hover {color:#3333cc;}

  --></style>
</head>

Style są umieszczone wprost na konkretnej stronie WWW i nawet jeżeli ktoś skopiuje stronę na dysk lokalny i nie będzie miał połączenia z Siecią, w dalszym ciągu style będą w dokumencie zachowane.

To bardzo dobry sposób osadzania stylów w przypadku języków skryptowych (np. PHP), ponieważ style można dołączyć z jednego pliku za pomocą dyrektywy include.

Nieco gorzej jest z wykorzystaniem tej metody w wypadku statycznych stron HTML, gdyż modyfikacja stylu wymaga zmodyfikowania zapisu na wszystkich stronach należących do witryny. Wtedy wygodniej skorzystać z metody dołączenia zewnętrznego arkusza z dowolnego miejsca w Sieci lub z wybranego katalogu na stronie WWW.

Zamiast osadzać style CSS na stronie można je dołączyć z zewnętrznego pliku za pomocą elementu link:

<head>
  <meta http-equiv="content-type" 
  content="text/html; charset=iso-8859-2">
  <title>Tytuł strony </title>
  <link rel="stylesheet" type="text/css" href="/style.css">
</head>

Można też podać pełną ścieżkę do serwera i dołączać więcej niż jeden arkusz stylów:

<link rel="stylesheet" type="text/css" href="http://serwer1/style.css">
<link rel="stylesheet" type="text/css" href="http://serwer2/style.css">

Dołączany plik style.css powinien zawierać od razu definicje stylów, jak poniżej:

body, p { 
  font-family: Arial, sans-serif; 
  font-size: 14px;
}
a { text-decoration:none; }
input { width:200px; }

Ten sposób dołączania stylów jest bardzo wygodny, ponieważ w praktyce istnieje tylko jeden plik ze stylami, który może być dołączany z dowolnej lokalizacji w Sieci. Modyfikacje wystarczy przeprowadzać tylko w jednym pliku. Jego wadą jest to, że podczas zapisywania strony na dysk, style mogą zostać zgubione i bez dostępu do pliku ze stylami strona może prezentować się mało ciekawie.

Dopuszczalna jest również kombinacja zastosowania stylów z zewnętrznego pliku w stylach znajdujących się na stronie:

<style type="text/css"><!--

@import url(http://serwer.pl/katalog/style.css)
body, p { 
  font-family: Arial, sans-serif; 
  font-size: 14px;
}
a { text-decoration:none; }

--></style>

W tym celu można skorzystać z polecenia @import dołączającego do stylów na stronie dodatkowe style znajdujące się w pliku w dowolnym miejscu w Sieci. Style znajdujące się poniżej dołączanego stylu mogą rozszerzyć style z pliku lub zastąpić je na konkretnej stronie.

Co jeszcze?

Szczerze mówiąc, o stylach można napisać całkiem sporą książkę, a przedstawione powyżej podstawy mają tylko zaznajomić Cię z tematyką i pomóc szybko zacząć je stosować na stronach. Nie przejmuj się, jeżeli od razu nie zroumiesz o co w tym wszystkim chodzi. Myśle, że każdy początkujący webmaster miał problemy ze zrozumieniem wszystkich zawiłości stylów CSS. Mam nadzieję, że ten krótki, ale treściwy wstęp, nieco wyjaśnił Ci posługiwanie się stylami w praktyce.

• • •
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!