CSS: Różnice pomiędzy wersjami

Usunięta treść Dodana treść
Ptak82 (dyskusja | edycje)
m Literówki - trochę ich było - ale jeden ort mnie rozwalił - styli zamist stylów :|
Linia 21:
</p>
 
Tekst między cudzysłowiamicudzysłowami to właśnie język opisu kaskadowych arkuszy stylistylów.
 
Jednak ten sposób prowadzi do duplikacji kodu i powiązania wyglądu z treścią dokumentów, tak samo jak w starych wersjach HTML sprzed czasów CSS, dlatego należy unikać tego sposobu, jeśli to możliwe.
 
=== Plik kaskadowych arkuszy stylistylów ===
 
Najlepiej jest zebrać wszystkie style i umieścić w jednym pliku opatrzonym rozszerzeniem '''.css'''. Zwyczajowo plik taki umieszczamy w głównym katalogu strony internetowej i nazywamy '''style.css'''.
 
Arkusze stylów załącza się do pliku HTML za pomocapomocą kodu:
<link rel="stylesheet" type="text/css" href="moje_style.css">
Natomiast do pliku XML (także XHTML) za pomocapomocą kodu:
<?xml-stylesheet type="text/css" href="moje_style.css"?>
 
który umieszczamy w sekcji HEAD dokumentu.
 
Chwilka na wyjaśnienie: pierwszy atrybut elementu ''<link>'' czyli '''href''' to ścieżka dostepudostępu do pliku ze stylami względem dokumentu (X)HTML. Należy pamiętać, że jest to ścieżka względna, czyli w przypadku pliku (X)HTML w katalogu /help na serwerze załączamy plik style.css położony w katalogu głównym podając ścieżkę: "../style.css". Kolejny parametr: '''rel''' - oznacza znaczenie tego arkuszu stylów, np. alternatywny - ''"alternative"'', główny ''"stylesheet"'' itd. Ostatni atrybut oznacza zawartość dokumentu czyli tekst - css.
 
Dodatkowo, dobrze jest na początku sekcji HEAD poinformować przeglądarkę, że chcemy użyć stylów CSS:
Linia 155:
=== Styl ===
 
Między klamrami, po selektorze, definiujemy styl elementu. Opisujemy go ciągami: atrybut - wartość. Wartości atrybutom przypisuje się znakiem ''':'''. Należy jednak pamietaćpamiętać by po przypisaniu wartości parametrowi np. ''"font-weight: bold"'' odzielićoddzielić go od innych średnikiem (''"font-weight:bold;"'') w przeciwnym przypadku dalszy ciąg pliku zostanie potraktowany jako wartość tego elementu. Najlepiej po każdym średniku przejść do nowej linii - zwiększy to czytelność pliku.
 
==== Generowanie zawartości ====
Linia 197:
W tym momencie interpreter będzie kierował się zasadą: '''obowiązujący jest styl położony najbliżej elementu''', to znaczy taki, który najdokładniej go opisuje (kolejno, według istotności: przez identyfikator, klasę, położenie wobec innych elementów, sam element). Tym razem to drugi selektor lepiej opisuje element ''<p class="zielony">'' i dlatego nasz paragraf będzie miał zielone tło. Ostatecznie, gdy interpreter ma wątpliwości, bierze '''ostatni''' w kolejności wystąpienia w pliku selektor. Niestety, w praktyce przeglądarki bardzo różnie stosują zasadę kaskady i jedyną radą jest dobre testowanie stron i unikanie niejednoznaczności.
 
Należy podkreślić, że rozwiązywanie konfliktów odbywa się tylko w odniesieniu do skonfliktowanych atrybutów, pojawiających się w różnych selektorach więcej niż raz - wszytkiewszystkie pozostałe są stosowane wprost.
 
=== Media ===
Linia 234:
 
==Przykład==
[[w:World Wide Web Consortium|W3C]] opublikowało domyślny arkusz stylistylów dla HTML 4.0 [http://www.w3.org/TR/CSS21/sample.html]. Warto jest przyjrzeć się mu aby zobaczyć zastosowanie różnych technik CSS w praktyce.
 
== Zobacz też ==