Gwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywna
 

Kaskadowe arkusze stylów ułatwiają projektowanie stron internetowych. Wygląd tabeli czy listy ustawia się raz i dołącza plik z klasami wewnątrz znacznika <head>. Dzięki prawidłowemu wykorzystywaniu kaskadowych arkuszy stylów cały projekt zajmuje mniej miejsca i jednocześnie jest łatwiejszy do zarządzania. Obecnie zmiana w jednym miejscu pliku css wystarczy, aby zmienić np.: wygląd tabel w całym projekcie. Umieszczenie arkuszy stylów w osobnym pliku ułatwia projektowanie , jednak powoduje wolniejsze uruchomienie strony internetowej, ale tylko za pierwszym razem. Po załadowaniu strony plik css jest przechowywany w pamięci podręcznej przeglądarki (cache).

Drugi sposób powoduje szybkie uruchomienie strony, lecz trzeba poświęcić więcej pracy tworzeniu stylów, które występują w każdym pliku html. Jest to dobry pomysł dla stron informacyjnych, pomocy, przesyłanych najczęściej w formie spakowanej, dzięki czemu arkusze stylów zawsze zostaną odczytane. Kaskadowe arkusze stylów składają się z selektora posiadającego deklarację (właściwości i pary) np.:

 

p.tekst { text-align: center; }

 

Czyli:

selektor { /* deklaracja */
wartość:para;
}

 

Drugi sposób:

selektor { /* deklaracja */
wartość:para;
wartość:para;
wartość:para;
}

 

Linijka kodu, którą należy dodać między znacznikami aby korzystać z zewnętrznych plików to:

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

 

Należy jeszcze dopisać nazwę klasy z pliku user.css dla wybranego fragmentu tekstu w dokumencie HTML np.:

<p class='tekst'>To jest tekst wyśrodkowany na stronie.</p>

 

Poniżej dodano style dotyczące jednego pliku:

<html>
<head>
<style type='text/css'>
p.kolor { color: red; }
</style>
</head>
<body>
<p class='kolor'>Zmienia kolor tekstu na czerwony</p>
</body>
</html>

 

Jeszcze inny sposób to ustawienie styli za pomocą atrybutów w elementach:

<html>
<head>
</head>
<body>
<p style='color: red; text-align: center;'>Tekst strony koloru czerwonego wyśrodkowany na
stronie.</p>
<p style='color: red; text-align:center;'>To jest przykładowy tekst wyglądający tak samo.</p>
</body>
</html>

 

Przy tworzeniu kaskadowych arkuszy stylów można definiować klasy i identyfikatory:

/* klasa */ .tabelka {
..........
}
/* identyfikator */
#nowy {
..........
}

 

Chcąc korzystać z identyfikatorów należy zamiast atrybutu class zastosować atrybut id. Klasy posiadają
właściwości dziedziczenia a identyfikatory nie.

 

Wybrane książki:

Książki Helion

Promocja dnia

REKLAMA

Tagi - Popularne