Odpowiedź to CSS - Cascading Style Sheets
CSS - co to jest?
Być może znacie takie znaczniki HTML jak np. <center> i <font> lub korzystaliście ze składni <body background="obrazek-tla.png">. Jeżeli nie, to nawet lepiej, ponieważ CSS powstał właśnie po to, żeby pozbyć się tagów i atrybutów odpowiedzialnych wyłącznie za efekty wizualne. Style CSS to zbiór reguł określających w jaki sposób wyświetlić elementy strony internetowej. Jak wygląda pojedyncza reguła?
Reguły css - składnia
Reguła CSS składa się z selektora oraz deklaracji. Selektor wyznacza element lub grupę elementów naszej strony, którym chcemy zmienić wygląd. Dla każdej reguły możemy podać dowolną ilość deklaracji. Każda deklaracja ustawia jedną właściwość przypisując jej jakąś wartość.
Dla rozjaśnienia przykład - wszystkim obrazkom ustawiamy ramkę o szerokości dwóch pikseli, a wszystkim nagłówkom pierwszego stopnia wielkość czcionki na 20 pikseli i wyrównujemy tekst do środka.
/*
to jest komentarz dla poniższej deklaracji
selektor: img
deklaracja: border-width:2px;
właściwość deklaracji: border-width
wartośc deklaracji dla border-width: 2px
*/
img {
border-width:2px; /* obramowanie na dwa piksele */
}
/*
selektor: h1
pierwsza deklaracja: font-size:20px;
właściwość pierwszej deklaracji: font-size
wartośc deklaracji dla font-size: 20px
druga deklaracja: text-align:center;
właściwość drugiej deklaracji: text-align
wartośc deklaracji dla text-align: center
*/
h1 {
font-size:20px;
text-align:center;
}
W powyższym przykładzie pojawiły się komentarze css. W arkuszach css komentarze mogą być kilkuznakowe lub wielolinijkowe i umieszczamy je między /* a */. Bez komentarzy powyższy przykład wyglądałby następująco:
img {
border-width:2px;
}
h1 {
font-size:20px;
text-align:center;
}
Style CSS w HTML - jak dodać?
Najbardziej uniwersalnym rozwiązaniem jest umieszczenie w osobnym pliku css. Aby dołączyć zewnętrzny arkusz stylów do sekcji <head> dodajmy element link podając w atrybucie href URL pliku ze stylami:
Co to jest URL? - więcej na temat adresów URL napisałem tutaj.
<head>
<link rel="stylesheet" type="text/css" href="css/dekoracje.css" />
</head>
Innym sposobem definiowania stylów dla strony jest wewnętrzny arkusz css, czyli zamieszczenie reguł w dokumencie html pomiędzy tagami <style> </style>. W tym przypadku również zaleca się umieszczanie stylów w sekcji <head>, np:
<head>
<style type="text/css">
img {
border-width:2px;
}
h1 {
font-size:20px;
text-align:center;
}
</style>
</head>
Ostatnią możliwością jest umieszczenie styli bezpośrednio w wybranym elemencie z wykorzystaniem atrybutu style.
<body>
<h1 style="font-size:20px;text-align:center;">Strona główna</h1>
<img src="obrazek.jpg" style="border-width:2px;" />
</body>
Kaskadowe CSS - priorytety
Omawiając sposoby umieszczania stylów w dokumencie HTML możemy rozszyfrować słowo "kaskadowe" w nazwie CSS. Każdy z tych sposobów ma inny priorytet i reguły css umieszczone bezpośrednio w elemencie mają pierwszeństwo przed regułami umieszczonymi w wewnętrznym arkuszu stylów, a te z kolei mają pierwszeństwo przed stylami z zewnętrznego arkusza. Niech to zobrazuje przykład, w którym ustalamy obramowanie dla obrazka zarówno w arkuszu css jak i w samym elemencie:
<head>
<link rel="stylesheet" type="text/css" href="css/dekoracje.css" />
<style type="text/css">
img {
border-width:2px;
}
</style>
</head>
<body>
<img src="obrazek2.jpg" />
<img src="obrazek.jpg" style="border-width:10px;" />
</body>
Kaskada styli to łączenie się reguł z elementu, z wewnętrznego i zewnętrznego arkusza css w jeden kompletny, uzupełniający się zbiór reguł dla strony HTML.
Gdzie umieścić style CSS?
Który z wymienionych trzech reguł stosować? Sposób pierwszy ( zewnętrzny arkusz css ) doskonale sprawdza się w przypadku gdy podstrony naszego serwisu posiadają wspólny layout/wygląd i każdy większy serwis www powinien posiadać zewnętrzne arkusze css. Najważniejsze korzyści:
- szybkość zmian: Chcąc zmienić np. kolor linków dla wszystkich stron serwisu dopisujemy/zmieniamy jedną regułę w zewnętrznym arkuszu.
- wydajność: Raz pobrany z serwera zewnętrzny arkusz css umieszczony zostaje w pamięci podręcznej przeglądarki i kolejne podstrony naszego serwisu ładują się szybciej.
- profesjonalny kod: Odseparowanie struktury HTML od wyglądu.
Po co są więc dwa pozostałe sposoby?
Dla mnie osobiście podstawowe wykorzystanie wewnętrznych arkuszy to etap tworzenia strony i budowania wyglądu, gdzie HTML i CSS mamy w jednym pliku i szybko możemy dokonywać zmian i oglądać efekty. Również w przypadku gdy powstaje pojedyncza strona (wizytówka, strona powitalna, strona w budowie, strona-plakat) opłaca się wykorzystać wewnętrzne arkusze.
Style umieszczane bezpośrednio w elemencie również wykorzystywane są często na etapie tworzenia strony. Innym ważnym mechanizmem korzystającym z tego sposobu są skrypty języka JavaScript zmieniające zawartość strony (ukrywanie elementów, animacje, zmiany kolorów itp.)
Posty
1 komentarz:
I tak nie mam pojęcia. Język Html i CSS do dla mnie zupełnie czarna magia :( Myślę, że abym rozumiał coś z tego, trzeba by mi tłumaczyć jak małemu dziecku...z jakąś chorobą umysłową...w pół głuchemu ...najaranego jakimiś prochami....
Prześlij komentarz
Uwaga: tylko uczestnik tego bloga może przesyłać komentarze.