Plik CSS można wstawić do dokumentu na kilka różnych sposobów (tak dokładnie to aż na pięć!). Artykuł dokładnie omawia każdą z metod. Czytając go, uzyskamy wreszcie możliwość wzbogacenia naszej strony o kod Kaskadowych Arkuszy Stylów.
Styl lokalny i osadzony
Pierwszy z omawianych sposobów polega na bezpośrednim wstawieniu stylu w obrębie danego znacznika
| <p style=”text-align:center; font-weight:bold></p> |
Jest to tak zwany styl lokalny. Pozwala on na poddanie edycji KONKRETNEGO znacznika. Tagów <p> może być na stronie wiele, ale styl wstawiony tym sposobem będzie formatował tylko ten jeden znacznik, w którym został umieszczony. Proste, prawda?
Drugim ze sposobów jest styl osadzony. Wstawia się go do dokumentu w następujący sposób:
- W nagłówku strony, między <head> i </head> wstawiamy tagi <style> i </style> (dobrze jest jeszcze w otwierającym tagu style dodać jego typ czyli <b>type=”text/css”</b> – niektóre przeglądarki mogą niepoprawnie wyświetlić stronę jeżeli nie dodamy tego elementu)
- Pomiędzy tymi znacznikami umieszczamy całą definicję stylu w standardowym wydaniu, tzn. <b>selektor {cecha: wartość;}</b>
- Tuż po otwierającym tagu <style> można jeszcze dodać <!– , a tuż przed tagiem </style> dodać –> – aby ukryć definicję stylu przed przeglądarkami, które w ogóle nie obsługują CSS (są jeszcze takie???:-)
Cały przykład będzie wyglądała mniej więcej tak:
<style type=”text/css”>
<!–
body {margin: 10px;}
P {font: bold; 10px; verdana,arial,courier,’times new roman’;}
h1, h2, h3 {color:green}
–>
</style>Wydzielanie bloków
Kolejnym sposobem jest wydzielanie bloków za pomocą znaczników: <div></div> i <span></span>
Tutaj zachodzi już pewna dowolność, jeżeli chodzi o zdefiniowanie stylu dla wydzielonego bloku. Można zastosować tutaj styl lokalny, ale także można go zdefiniować w ramach <head> i </head> dla całego bloku. Jednakże w przypadku zastosowania tego drugiego sposobu musimy umieścić w ramach head coś takiego:#warstwa1 {font-family:verdana; font-size:14px; padding:4px;} Wyjaśniam już: #warstwa1 jest to ID, niepowtarzalna nazwa KONKRETNEGO bloku w dokumencie. Dalej są już znane nam jej parametry czyli font-family:verdana…
Jeżeli postąpimy w ten sposób, to wstawiając w dokumencie blok DIV lub SPAN napiszemy tylko coś takiego:<div id=”warstwa1″> tutaj jakiś tam tekst, cokolwiek, może być też obrazek </div> Tym sposobem przypisujemy temu blokowi (inaczej warstwie) parametr ID, dla którego styl został zdefiniowany już w nagłówku dokumentu. Wszystkie więc elementy, które znajdą się w tym bloku (tekst, grafika itp.) zostaną poddane formatowaniu zgodnie ze stylem naszej #warstwy1, ustalonym już na samym początku, w nagłówku strony! Oczywiście można posłużyć się też drugim sposobem, czyli wstawieniem stylu dla bloku in-line. Wtedy postępujemy tak samo, jak z każdym innym znacznikiem (patrz znacznik p na samym początku artykułu).
No dobrze, ale jaka jest różnica pomiędzy DIV i SPAN? Nie różnią się one za bardzo… Różnica jest tylko taka, że DIV może zawierać w sobie więcej elementów niż SPAN, mogą w nim być umieszczone nawet następne bloki. SPAN za to doskonale nadaje się do zaznaczania chociażby poszczególnych liter w wyrazie. Jest to bardzo przydatne np. wtedy, kiedy chcemy wyróżnić innym kolorem jedną literę w wyrazie. Oczywiście tagiem SPAN można także obejmować całe wyrazy, zdania, czy akapity…
Popatrzmy ile takie wydzielenie bloku zaoszczędzi nam pracy!Css z pliku zewnętrznego
Następną (najlepszą przy okazji) metodą jest dołączenie do strony zewnętrznego arkusza stylów. Pozwala to zaoszczędzić najwięcej pracy. Załóżmy, że chcemy na naszej bardzo rozbudowanej stronie umieścić wiele akapitów tekstu… Wszystkie w kolorze czarnym i napisane czcionką arial o wielkości 12 pikseli. Moglibyśmy zapisać to następująco:
<p style=”font: 12px arial; color:#000000″>Jakiś tekst</p> Ewentualnie możnaby też umieszczać w nagłówku każdej podstrony naszej witryny definicję stylu przypisując każdemu akapitowi odpowiednią czcionkę i kolor. Ale to, niestety, strasznie dużo pisania – mamy bardzo rozbudowaną witrynę. Na całe szczęście jest wyjście! Zapisujemy w oddzielnym pliku (koniecznie z rozszerzeniem <b>.css</b>) Definicję stylu. Następnie musimy „przyczepić” ten plik do każdej witryny za pomocą takiego polecenia:
<link rel=stylesheet href=”nazwa_pliku.css” type=”text/css”> Polecenie to musimy umieścić gdzieś między <head> i </head>. Wtedy jeżeli w pliku css, czyli w tym naszym zewnętrznym arkuszu stylu, nakażemy przeglądarce aby akapity były sformatowane zgodnie z naszym życzeniem, to definicja stylu będzie oddziaływała na WSZYSTKIE strony, do których plik .css został „podczepiony” za pomocą <link rel…
A jeżeli nagle zamarzy się nam strona bardzo kolorowa, to nie ma sprawy! Zmieniamy w zewnętrznym arkuszu stylu kolor czcionki na green i raptem na wszystkich podstronach mamy zieloną czcionkę! Czyż to nie cudowne???Importowanie arkusza z innej strony
Ostatnim sposobem na wstawienie stylu jest zaimportowanie pliku .css z innej witryny. Dokonujemy tego za pomocą polecenia @import:
<style>
<!–
@import url(„
” target=”_blank”>www.systemofadown.com/style/style.css”);
–>
</style>Myślę jednak, że to polecenie jest trochę „zbyt egzotyczne” aby stosować je na codzień. Powód? Za każdym razem kiedy webmasterowi owej strony zachce się zmienić coś w arkuszu stylu, to i na stronie, na której został on zaimportowany wszystko zmieni się tak jak w tamtym pliku .css.
