UWAGA: Strona zawiera materiały archiwalne. Większość artykułów dotyczy Joomla! 1.0
Start arrow Szablony arrow CSS w Joomla arrow HTML i CSS - podstawy
HTML i CSS - podstawy Drukuj Email
Znajomość HTML i CSS nie jest konieczna, by korzystać z Joomla! Bywa jednak wielce przydatna każdemu, kto chce panować nad wszystkimi aspektami swojej witryny. Ten artykuł przedstawia kilka najistotniejszych kwestii, niezbędnych, by rozumieć zwiazek miedzy tymi dwoma technologiami oraz ich rolę w Joomla!.

Strona internetowa i HTML

Stroną internetową nazywamy dokument prezentowany w oknie przeglądarki albo przez inne urządzenia odczytujące - [User Agents] utworzony za pomocą jednej z odmian języka zapisu stron internetowych. - HTML lub XML.

Dokument HTML jest zwykłym dokumentem tekstowym zbudowanym z elementów treści oznaczonych komentarzami, które opisują rolę elementu w strukturze treści. Komentarze te nazywamy znacznikami (lub tagami).

Niektóre treści oraz instrukcje niezbędne dla urządzeń odczytujących umieszczane są w dołączanych do dokumentu HTML plikach, m.in. obrazy, dźwięki, animacje, filmy.

Element dokumentu HTML

Element dokumentu HTML składa się zwykle z trzech części:

  • znacznika początkowego w formie <znacznik>
  • zawartości, którą może być tekst lub inne elementy,
  • znacznika końcowego w formie </znacznik>.

Kilka elementów nie posiada znacznika końcowego (np. br, img, hr).

Zgodną z aktualną specyfikacją języka HTML listę poprawnych elementów znajdziesz w rozdziale podręcznika programisty Podstawy szablonów.

Kaskadowe arkusze stylów

HTML miał być z założenia językiem strukturalnym - opisywać strukturę dokumentów, a nie ich wygląd. Rozwój i komercjalizacja Internetu wymusiły jednak na projektantach wykorzystywanie HTML do kształtowania wyglądu stron. W rezultacie ascetyczny pierwotnie kod HTML rozrastał się do niewyobrażalnych rozmiarów, powodujac rozliczne problemy związane z utrzymaniem i aktualizacją stron internetowych.

Aby przywrócić rolę HTML konsorcjum W3C opublikowało w 1999 roku nową specyfikację HTML - wersję 4.01, która wydzieliła zarządzanie wyglądem strony do kaskadowych arkuszy stylów - CSS.

Arkusze stylów pozwalają opisać wszystkie aspekty prezentacji dokumentów. Dzięki CSS łatwo można formatować:

  • układ elementów, określając ich rozmieszczenie na stronie i wewnątrz innych elementów.
  • treści elementów, sygnalizując ich znaczenie w strukturze,

HTML a CSS

Oddzielenie oznaczającego strukturę dokumentu kodu HTML od formatującego dokument kodu CSS wymaga mechanizmu integrującego.

Podstawą relacji pomiędzy HTML i CSS jest struktura treści. Znaczniki HTML opisują miejsce elementów treści w jej strukturze, reguły CSS określają sposób ich formatowania.

Ilość znaczników HTML jest wszakże ograniczona. HTML umożliwia jednak doprecyzowanie miejsca każdego elementu w strukturze treści poprzez oznaczenie elementów HTML dodatkowymi atrybutami.

Atrybuty i ich wartości wpisuje się wewnątrz znacznika początkowego wg wzoru:

<znacznik atrybut="wartość">

Projektanci dysponują dwoma specjalnymi atrybutami znaczników HTML, precyzującymi miejsce w strukturze treści:

  • atrybutem identyfikatora - id, który można przypisać tylko jednemu unikatowemu elementowi treści,
  • atrybutem klasy - class, który można przypisać dowolnym elementom treści.

Budowa arkusza stylów

Kaskadowy arkusz stylów to zwykły tekst - lista reguł ustalających sposób formatowania elementów treści.

Reguła w arkuszu stylów
Budowa reguły

Pojedyncza reguła może określać style dla jednego lub wielu elementów dokumentu. Każda reguła składa się z dwóch części:

  • selektora,
  • deklaracji.

Selektor [od ang. select] może wskazywać na jeden element lub grupę elementów albo na atrybut.

Deklaracja określa właściwość i jej wartość.

Ponieważ selektory mogą wskazywać na elementy bądź atrybuty wyróżniamy trzy typy selektorów:

  • selektor elementu, inaczej selektor prosty wskazuje na elementy ustalone w specyfikacji HTML, takie jak akapit - p, lista - ul, czy tabela - table, itp.
  • selektor klasy, oznaczony dowolną nazwą poprzedzoną kropką, wskazuje na pewną odmianę - wariant prezentacji elementu, np. klasa .wazne może być przypisana różnym elementom dokumentu HTML;
  • selektor identyfikatora, oznaczany znakiem # (haszem, zwanym też krzyżykiem) - wskazuje na konkretny element występujący w dokumencie tylko jeden raz.

Arkusze wewnętrzne i zewnętrzne

Arkusz stylów może być osadzony wewnątrz dokumentu za pomocą elementu <style> albo umieszczony w dołączonym pliku.

Swoje własne domyślne arkusze stylów mają również urządzenia odczytujące. Jeśli do dokumentu nie podpięto arkusza stylów lub jeśli arkusze stylów zostały wyłączone przez użytkownika, do prezentacji dokumentu wykorzystywane są domyślne arkusze stylów urządzeń odczytujących.

Kolejność stosowania reguł

Styl elementu może być określony w różnych miejscach:

  • w arkuszu stylów urządzenia odczytującego,
  • we własnym arkuszu stylów użytkownika,
  • w arkuszu stylów podpiętym przez autora,
  • w wewnętrznym arkuszu włączonym do dokumentu,
  • bezpośrednio w znaczniku elementu.

Które reguły zostaną więc ostatecznie zastosowana? W jakiej kolejności?

Kolejność stosowania reguł wyznaczana jest przez trzy zasady: dziedziczenia, specyficzności i kaskadowości.

Dziedziczenie

Zasada dziedziczenia właściwości zakłada, że elementy potomne dziedziczą właściwości swoich ’rodziców’, czyli elementów nadrzędnych, obejmujących. Nie wszystkie jednak właściwości są dziedziczone. Informacje na ten temat znajdziesz w specyfikacji czy w podręcznikach CSS.

Specyficzność

Reguły mają swoją wagę. Waga ta jest określana w sposób względny. Zależy od kombinacji elementu i użytych selektorów. Zasada specyficzności zakłada, że pierwszeństwo mają reguły większej wagi. Podstawową orientację w tej kwestii daje zestawienie poniżej.

 
element                       { deklaracje }   /* specyficzność =   1 */
element element2              { deklaracje }   /* specyficzność =   2 */
.klasa                        { deklaracje }   /* specyficzność =  10 */
element.klasa                 { deklaracje }   /* specyficzność =  11 */
element.klasa element2.klasa  { deklaracje }   /* specyficzność =  22 */
#element                      { deklaracje }   /* specyficzność = 100 */
Kaskadowość

Sytuacje konfliktowe rozwiązywane są zgodnie z zasadą kaskadowości. Wedle tej zasady pierwszeństwo mają style zdefiniowane bliżej formatowanego elementu. Nadpisują one style zdefiniowane wcześniej. Im później w dokumencie lub w arkuszach stylów występuje deklaracja, tym jest ważniejsza. Kolejność interpretacji jest następująca:

  • najpierw style arkusza przeglądarki,
  • następnie style arkusza użytkownika,
  • potem zewnętrzne arkusze stylów,
  • później wewnętrzne arkusze stylów zdefiniowane w nagłówku dokumentu),
  • na końcu style w atrybucie style elementu.

W praktyce - gdy któryś z elementów formatowany jest w sposób nieoczekiwany, trzeba sprawdzić, czy został uwzględniony mechanizm dziedziczenia, przeanalizować wagę deklaracji, przyjrzeć się kolejności występowania reguł.

Grupowanie selektorów i deklaracji, skrótowe zapisy

Im zwięźlejszy kod CSS, im mniejsze pliki arkuszy stylów, tym lepiej. Zmniejszanie objętości kodu umożliwia grupowanie selektorów i deklaracji oraz skrótowe zapisywanie właściwości.

Grupowanie selektorów pozwala przypisywać wielu elementom te same właściwości, np.:

h1, h2, h3, h4, h5, h6 {font-color: blue;}

Grupowanie deklaracji natomiast pozwala w jednej regule umieścić wiele właściwości. Grupując deklaracje w pojedynczą regułę, należy pamiętać o oddzielaniu ich średnikami.

Przykład grupowania deklaracji:
h1 {
font-style   : italic;
font-weight  : bold;
font-variant : small-caps
font size    : 12px;
line-height  : 14px
font-family  : helvetica, sans-serif
}

Tę regułę można zapisać znacznie krócej.

Skrócone właściwości

Wiele właściwości można wyrazić jednocześnie, w jednej deklaracji. Poniżej przedstawimy kilka najpopularniejszych przypadków.

Czcionki

Niekiedy, zamiast - jak widzieliśmy wyżej - sześciu deklaracji formatujących czcionkę, można użyć jednej, np.:

h1 {font : italic bold small-caps 12px/14px helvetica, sans-serif;}
Kolory

Jeśli określenie koloru zapisane w postaci szesnastkowej składa się z trzech par cyfr szesnastkowych, można w każdej parze ominąć jedną z nich:

  • #000000 można zapisać jako #000
  • #338855 można zapisać jako #385
Tło i podkład

Zamiast określania tła i obrazka podkładu w kilku deklaracjach (dla właściwości: color, image, repeat, attachment i position, wystarczy skorzystać z background, np.:

body {background:#fff url(../images/obrazek.png) no-repeat fixed 0 0;}
Obramowania [border]Zamiast trzech deklaracji własności rozmiar, styl i color, można je umieścić w jednej deklaracji, np.:

div {border: 2px dashed blue;}

W skróconym zapisie musi być kolejność: styl, variant, weight, size, line-height, rodzina. Niektóre własności można pominąć, konieczne jest określenie tylko rozmiaru i rodziny czcionki.

Listy

Zamiast deklarować list-style-type, list-style-position, list-style-image możesz użyć jednej, np.

ul {list-style-type:disc inside url(../images/punktor.png);

Wsparcie CSS przez przeglądarki

Przeglądarki w różnym stopniu wspierają obsługę CSS. Aktualnie najlepiej wspierają CSS przeglądarki oparte na silniku Gecko (Firefox, opera, Safari, Konqueror). IE 6 nawet w trybie zgodności ze standardami, nie obsługuje poprawnie CSS2, nie obsługuje wszystkich własności, sporo w niej błędów. W IE7 nastąpiła znaczna poprawa obsługi CSS2, aczkolwiek nadal nie jest kompletna.

Standard CSS 3 jest obecnie obsługiwany zaledwie szczątkowo, stąd najlepiej z niego jeszcze nie korzystać.

 
« poprzedni artykuł   następny artykuł »