TłUMACZENIA ANGIELSKI METODYKA JĘZYKOZNAWSTWO SŁOWNIK KONTAKT

 

Dokument ten jest tłumaczeniem, które może zawierać błędy.

Zostało ono wykonane przez Angielski ELTT. . Angielska wersja dokumentu en.

Inne ciekawe tutoriale dostępne są na stronach: Garbnik i Universalcss. Zobacz inne strony serwisu.

Rozdział 2
CSS

Rozdział 2 ksiązki pt: Cascading Style Sheets, designing for the Web, autorstwa Hakon Wium Lie i Bert Bos (druga edycja, 1999, Addison Wesley, ISBN 0-201-59625-3)

Jak wyjaśniliśmy w poprzednim rozdziale, elementy HTML pozwalają projektantom stron napisać strukturę dokumentu. Specyfikcja HTML zawiera wytyczne odnośnie tego jak przeglądarki maja wyświetlać tego typu elementy. Na przykład, możn być pewnym, że zawartość znacznika "strong" będzie wyświetlona w czcionce pogrubionej. Można być talże pewnym, że zawartość znacznika "h1" będzie pojawi się w dużej czcionce... przynajmniej większej niż elementu "p" i elementu "h2". Ale poza wiarą i nadzieją nie ma się kontroli nad tym w jakiej formie tekst zostanie wyświetlony.

CSS zmienia to i daje kontrolę projektantowi. Poświęcamy większą część reszty tej książki na wyjaśninie co można robić z CSS. W tym rozdziale zaczniemy od wprowadzenia czytelnika do podstaw pisania arkusza stylów i wyjaśnimy jak CSS i HTML współpracują w opisywaniu struktury i wyglądu dokumentu.

ReguŁy i arkusze stylÓw

Aby zacząć stosować CSS, nie trzeba pisać arkuszy stylów. Rozdział 16 mówi jak podłączyc się do już istniejącego w sieci pliku.

Są dwa sposoby tworzenia CSS. Można używać normalnego edytora tekstu i pisać strony "ręcznie" lub używać dedykowanych narzędzi np: aplikacji do projektownia witryn, które wspierają CSS. Narzędzia takie pozwalają na tworzenie arkuszy stylów bez konieczności nauczenia się syntaksu języka CSS. Jednakże w wielu przypadkach projektanci chcą trochę "podkręcić" arkusz ręcznie, dlatego zachęcamy do nauki CSS i jego ręcznej edycji. Zaczynamy!

H1 { color: green }

Powyżej znajduje się typowa reguła CSS. Reguła jest zdniem dotyczącym jendego stylistycznego dotyczącego jednego lub więcej elementów. Arkusz stylów jest zbiorem jednej lub więcej reguł odnoszących się do sokumentu HTML. Powyższa reguła określa kolor dla wszystkich nagłówków H1 pierwszego rzędu. Popatrzmy jaki rezultat wizualny mogliśmy tutaj osiągnąć:

Rusunek 2.1

[image]

Zaczniemy teraz analizować regułę.

Budowa reguły

Reguła składa się z dwóch części:

  • Selektora - część przed nawiasem
  • Deklaracji - część w nawiasie

    [image]

Selektor jest łącznikiem pomiędzy dokumentem HTMK i arkuszem. Określa on jakie elementy są modyfikowane deklaracją. Deklaracja jest tą częścią reguły, która ustala jaki ma być rezultat. W powyższym przykładzie selektorem jest znacznik "h1" a deklaracją jest "color: green." Stąd wszystkie elementy h1 będą ustawione przez deklarację, tzn będą zielone (włąsciwość color dotyczy tylko koloru tekstu, istnieją inne włściwości określające np:tło, granice, etc.)

Powyższy selektor jest oparty na typie elementu: wybiera on wszystkie elementy "h1". Ten typ selektora nazwany jest selektorem typu. Selektory typu są najłatwiejszymi selektorami. Omawiamy inne rodzaje selektorów w See CSS selectors. , "CSS selectors."

Budowa deklaracji

Deklaracja ma dwie części oddzielone dwukropkiem:

  • Właściwość (Property) - przed dwukropkiem
  • Wartość (Value) - po

    [image]

Property jest cechą lub charakterystyką posidan przez elementy. W poprzednim przykładzie jest to color. CSS2 (zobacz ramkę) definiuje 120 właściwości dla których można ustalić wartości.

Value jest dokładnym określeniem własności. W przykładzie jest to "green," ale równie dobrze może to być blue, red, yellow, lub jakiś inny kolor.

Poniższy szkic pokazuje wszystkie składowe reguły. Nawiasy ({ }) i dwukropek (:) pozwalają przeglądarkom odróżnić selektory, właściwości i wartośći.

Rysunek 2.2 Szkic reguły.

[image]

Grupowanie selektorów i reguł

W projektowaniu CSS naszym celem była zwięzłość. Pomyśleliśmy, że jeśli zmniejszymy wielkości arkusza to ułtwimy projektantom pisanie i edytowanie arkuszy "ręcznie". Krótsze arkusze ładują się szybciej niż dłuższe. CSS zawiera kilka mechanizmów do skracania arkusza poprzez grupowanie selektorów i deklaracji.

Np: rozważ takie reguły:

H1 { font-weight: bold }
H2 { font-weight: bold }
H3 { font-weight: bold }
     

Wszystkie te reguły mają tak samą deklarcję - ustalają czcionkę na pogrubioną. (Robi się to za pomocą własności font-weight, która jest omówiona w rozdziale See Fonts. ) Skoro wszystkie deklarcje są identyczne możemy zgrupować selektory w listę na której oddzielone są one przecinkami i umieścić jedynie jedną deklarację w taki oto sposób:

H1, H2, H3 { font-style: bold }

Reguła ta będzie miał taki sam rezultat jak poprzednie trzy.

Selektor może mieć więcej niż jedną deklarację. Możemy, na przykład, napisać arkusz z tymi dwoma regułami:

H1 { color: green }
H1 { text-align: center }

W tym wypadku, ustaliliśmy h1 na zielony i wypośrodkowany. (Robi się to za pomocą wlasności text-align, omówiona w rozdziale 5 .)

Możemy uzyskać ten sam efekt szybciej poprzez zgrupowanie deklaracji odnoszcych się do tego samego selektora, umieszczjąc je w liście oddzielonej średnikami:

H1 {
  color: green;
  text-align: center;
}

Wszystkie deklaracje muszą się znaleźć pomiędzy nawiasami. Średnik oddziela deklaracje ale nie musi występować na końcu ostatniej deklaracji. Aby uczynić kod czytelniejszym, proponujemy umieszczać deklaracje w oddzielnych liniach, tak jak to uczyniliśmy w naszym przykładzie. (Przeglądarki o to nie dbają, ignorując wszystkie puste miejsca i zakończenia linii.)

Masz już podsatwy jak tworzyć reguły CSS. Jednak to jeszcze nie koniec. Aby arkusz działał musisz go jakoś "przykleić" do dokumentu HTML.

"Przyklejanie" arkusza do dokumentu

Aby arkusz działał musisz go jakoś "przykleić" do dokumentu HTML. Oznacza to, że musi on być połączony z dokumentem HTML i znim współpracować. Można to zrobic na cztery sposoby:

  1. Zastosować arkusz dla pojedynczego dokumentu używakjąc znacznika "style".
  2. Zastosować arkusz dla poszczególnych elementów używając znacznika "style".
  3. Zamieścić odnośnik do zewnętrznego arkusza używając znacznika "Link".
  4. Importować arkusz używając notacji "@import ".

W następnej sekcji omówimy pierwszą metodę: używanie znacznika "style". Omówimy stosowanie atrybutu style w rozdziale 4 , "CSS selectors," oraz stosowanie elementu "Link" i notacji "@import" w rozdziale 16 , "External style sheets."

Przyklejanie używając znacznika STYLE

Można połączyc arkusz razem z dokumentem HTML poprzez umieszczenie arkusza na samej górze dokumentu. Element "style" został wprowadzony w HTML po to aby można było umieścić arkusz w dokumencie HTML. Oto przykład arkusza (pogrubiony), który jest zamieszczony w dokumencie przy zastosowaniu elementu "style". Rezultat jest pokazany na rysunku 2.3 .

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    H1, H2 { color: green }
  </STYLE>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific
        composer. Among his works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
    <H2>Historical perspective</H2>
    <P>Bach composed in what has been referred to as
      the Baroque period.
  </BODY>
</HTML>

Figure 2.3 Rezultat dodania reguły arkusza do h1, który jest zielony oraz umieszczenie arkusza w dokumencie stosując element style . (Spróbuj)

[image]

Zauważ, że element "style" jest umieszczony po tytule i przed elementem "body". Tytuł nie pokazuje się na stronie, dlatego też arkusz go nie zmienia.

Treścią elementu "style" jest arkusz. Jednak podczas gdy treść elementów jak: h1, p i ul pokazuje się na stronie, treść arkusz jest na niej niewidoczna. Raczej widoczny jest efekt arkusza. Nie widać dlatego "{ color: green }" na ekranie; widać natomiast dwa elementy h1 w kolorze zielonym.

PrzeglĄdarki i CSS

Najnowszy przegląd dostępnych przeglądarek, dostępny na stronie W3C

Aby CSS mogło działać w sposób opisany w tej ksiązce, należy używać przeglądarek z funkcją CSS, to znaczy takich, które wspierają CSS. Przeglądarki z taką funkcją rozpoznają elementy stylu i właściwie prezentują dokument. Większość obecnych przeglądarek ma tą funkcję, np: Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) i Opera 3.5 (O3.5). Konserwatywnie szacuje się, że więcej niż połowa użytkowników internetowych posiada takie przeglądarki i liczba ich ciągle wzrasta. Jeśli ktoś nie ma, to ma powód do aktualizowania swojej przeglądarki!

Najlepszym źródłem informacji jak porzeglądarki wspierają CSS jest WebReview's charts

Niestety, nie wszystkie implementacje CSS są perfekcyjne. Jeśli zaczniesz eksperymentować z arkuszami, zauważysz, że przeglądarki mają ograniczenia i "bugs". Ogólnie, nowsze przeglądarki zachowują się lepiej niż starsze. IE4 i O3.5 są wśród najlepszych a Netscape oferuje - code-named Gecko - obiecując również, że znacznie ulepszy wsparcie dla CSS.

Ci, którzy nie używają przeglądarek z funkcją CSS mogą w dalszym ciągu przeglądać strony, które są oparte na arkuszach. CSS zostały zaprojektowane w taki sposób aby treść strony była widoczna nawet gdy przeglądarki takie jak Netscape Navigator wersja 2 i 3 nie wspeiraja arkuszy stylów ale wiedzą wystarczająco dużo o elemencie "style" żeby go kompletnie zignorować. Obok wspierania arkuszy to inne rozsądne rozwiązanie.

Jednakże inne przeglądarki, które nie znają elementu "style" takie jak: Netscape Navigator 1 i Microsoft Internet Explorer 2, zignorują znaczniki stylu ale wyświetlą zawartość elementów stylów. Użytkownik będzie widział arkusz na górze strony. W trakcie pisania tej książki tylko nieliczni użytkownicy mieli ten problem. Aby uniknąć go można wstawić arkusz w komentarzu HTML, co omówiono z rozdziale 1. Ponieważ komentarze nie są wyświetlane na stronie, osadzenie arkusza w komentarzu HTML uchronisz się przed starszymi przeglądarkami, które wyświetlają treść lementu stylów. Przeglądarki z funkcją CSS są tego świadome i potraktują zawartość elementu "style" jako arkusz.

Komentarz HTML zaczyna się od <!-- i kończy z -->. Oto przykład poprzedniego kodu z zamieszczonym arkuszem w komentarzu. Komentarz obejmuje jedynie element "style":

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    <!--
      H1 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY> 
</HTML>

CSS ma również swoje wlasne zestawy komentarzy, któr można stosować w arkuszach. Lomentarz CSS zaczyna się od "/*" a kończy znakiem "*/." (Ci, ltórzy znają język C rozpoznają te znaki.) Reguły CSS wewnątrz komentarzy CSS nie będą oddziaływać na prezentację dokumentu.

Przeglądarka również powinna zostać poinformowna, że pracujesz z arkuszamui stylów. CSS jest obecnie jedynym językiem stylów używanym w dokumentach HTML i nie oczekujemy, że to się zmieni. Z XML może być różnie. Ale tak jak istnieje więcej niż jeden format dla obrazów (GIF, JPEG i PNG), może pojawić się więj języków stylów. Dlatego dobrym nawykiem jest przekazywanie przeglądarce informacji, że pracuje ona z CSS. (Właściwie HTML wymaga tego.) Robi się to za pomocą atrybutu type elementu style. Wartość type wskazuje na typ arkusza w użyciu. Dla CSS wartością jest "text/css." Poniżej znajduje się fragment poprzedniego przykładu pokazujący jak to zapisać (w kombinacji z komentarzem HTML):

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    <!--
      H1 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY>
</HTML> 

Kiedy przeglądarka załaduje dokument, sprawdza ona czy rozumie język arkusza. Jeśli tak, to postara się go przeczytać, w przeciwnym razie zignoruje go. Atrybut "type" (rozdział  1 - dyskusja na temat atrybutów HTML) w elemeencie "style" jest sposobem na przekazanie informacji przeglądarce jaki język arkusza stylów jest w użyciu. Atrybut ten musi być wyszczególniony.

Aby ułatwić czytelność przykładów zdecydowaliśmy się nie obejmować arkusza komentarzem HTML, ale stosujemy atrybut "type" w całej książce.

struktura drzewa i dziedzicznoŚĆ

Przypomij sobie z rozdziału 1 dyskusję na temat HTML prezentującego dokument w strukturze podobnej do drzewa i jak elementy HTML posidają children i parents. Jest wiele powodów dla tej struktury. Dla arkuszy istnieje jeden zasadniczy: dziedzictwo. Taki jak dzieci dziedziczą cechy od rodziców tak również elementy HTML. Zamias genów i pieniędzy, elementy HTML dziedziczą własności stylistyczne.

Zacznijmy od przypatrzenia się naszemu przykładowi:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a 
      <STRONG>prolific</STRONG> composer. Among his
        works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
  </BODY>
</HTML>

Struktura drzewa dokumentu:

[image]

Przez dziedziczność, wartości własności CSS ustawione na jednym elemencie są przekazywane swoim potomkom. Na przykład, nasz próbny dokument ma do tej pory ustawiony kolor na zielony dla elementów h1 i h2. Załóżmy, że chciałbyś nadać ten sam kolor wszystkim elementom dokumentu. Można to zrobić przez wyszczególnienie wszystkich typów elementów w selektorze:

<STYLE TYPE="text/css">
  H1, H2, P, LI { color: green }
</STYLE>

Jednak, większość dokumentów HTML jest bardziej kompleksowa niż nasz dokument i arkusz stałby się zbyt długi. Jest lepszy i krótszy sposób. Zamiast określania styłów dla poszczególnych typów elementow, możemy określić wartości w ich wspólnym przodku - elemencie "body":

<STYLE TYPE="text/css">
  BODY { color: green } 
</STYLE>

Ponieważ inne elementy dziedziczą własności od elementu "body", wszystkie oddziedziczą kolor zielony: (rysunek 2.4 ).

Rysunek 2.4 Rezultat dziedziczności (spróbuj)

[image]

Jak widać, dziedziczność jest transporterem, który będzie przekazywał własności stylistyczne wszystkim potomkom elementu. Ponieważ element "body" jest wspólnym przodkiem, to jest on wygodnym selektorem, jeśli chce się określić reguły stylów dla całego dokumentu.

Pomijanie dziedzicznoŚci

W poprzednim przykładzie wszystkie elementy dostały ten sam kolor poprzez dziedzictwo. Czasami jednak dzieci nie wqyglądają jak rodzice. Nic dziwnego, że CSS ma na to sposób. Chciałbyś aby elementy h1 były niebieskie a cala reszta zielona. W CSS wyraża się to w ten sposób:

<STYLE TYPE="text/css">
  BODY { color: green }
  H1 { color: navy }
</STYLE>

Skoro elemet h1 jest dzieckiem elementu "body" (i dlatego dziedziczy od niego), to te dwie reguły w arkuszu są sprzeczne. Pierwsza ustala kolor dla elementu body - i przez to także dla elementu h1 poprzez dziedzictwo - podczas gdy druga określa kolor konkretnie dla elementu h1. Która reguła wygra? Dowiedzmy się:

Powodem dla którego druga reguła wygrała jest to, że jest bardziej konkretna niż ta pierwsza. Pierwsza jest bardzo ogólna - dotycvzy wszystkich elementów. Fruga modyfikuje jedynie element h1 w dokumencie i jest przez do bardziej precyzyjna.

Jeśli CSS byłoby językiem programistycznym, kolejność reguł zdecydowałaby, która z nich wygra. CSS nie jest takim językiem i w powyższym przykładzie kolejność nie jest wiążąca. Rezultat jest taki sam jeśli użyjemy tego arkusza:

<STYLE TYPE="text/css">
  H1 { color: navy }
  BODY { color: green }
</STYLE>

CSS zostało zaprogramowane w ten sposób aby eliminować konflikty pomiędzy regułami. Konkretność jest tylko jednym aspektem. Możez zobaczyć detale w rozdziale 15 , "Cascading and inheritance."

WŁasnoŚci niedziedziczĄce

Ogólną zasadą jest, że własności w CSS dziedziczą od rodziców, tak jak to opisano w powyższym przykładzie. Niektóre własnośći nie dziedziczą i jest na to dobry powód. Użyjemy własności background (opisanej w rozdziale 11) jako przykład własności niedziedziczącej.

Powiedzmy, że chcesz określić tło dla strony - obraz. Jest to często stosowane w dokumentach. W CSS można napisać:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    BODY { 
      background: url(texture.gif) white;
      color: black;
    }
  </STYLE>
  <BODY>
    <H1>Bach's <EM>home</EM> page</H1>
    <P>Johann Sebastian Bach was a prolific
      composer.
  </BODY>
</HTML>

Własność background ma URL ("texture.gif"), który prowadzi do obrazka który jest wartościa własności. Kiedy obraz się załaduje, strona wygląda w ten sposób:

Są dwie rzeczy godne uwagi w tym przykładzie:

To dlaczego własność background nie dziedziczy? Wizualnie, efekt przeźroczystości jest podobny do dziedzictwa: wygląd na to, że wszystkie elementy mają takie samo tło. Są na to dwa powody: po pierwsze, przeźroczyste tło ładuje się szybciej (nie ma co wyświetlać) niż inne. Po drugie, ponieważ obrazki tła dopasowują się do elementu, cała powierznia strony mogła by nie ciekawie wyglądać.

Typowe zadania w CSS

Ustawianie kolorów i tła - jak opisano wyżej - są typowymi zadaniami wykonywanymi w CSS. Inne to czcionki i white space wokół elementów. Sekcja ta pokazuje typowe własności CSS.

Typowe zadanie : czcionki

Zacznijmy od czcionek. Jeśli używałeś programów DTP w przeszłości, to powinieneś rozumieć ten arkusz:

H1 { font: 36pt serif }

Powyższa reguła określa czcionkę dla elementu h1. Pierwsza część wartości - 36pt - ustawia rozmiar na 36 punktów. Punkt jest starą jednostką typograficzną, która przetrwała do dnia dzisiejszego. W następnym rozdziale powiemy dlaczego nleży używać jednostki "em" zamiast "pt". Drugą częścią wartości jest - serif - mówiąca przeglądarce aby stosować czcionkę serif (małe haczyki na końcach, rozdział  5 mówi o nich). Bardziej dekoracyjne czcionki pasują do strony Bacha ponieważ nowoczesne czcionki sans-serif (bez serif) nie były stosowane w jego czasach. Rezultat:

Własność font określa kilka innych własności jednocześnie. Używając jej, można skrócić arkusz i ustawić wartości dla wlasności, które ona zastępuje. Jeśli wolisz dłuższą wersję, musiałbyć ustawić wszystkie wartości w ten sposób:

H1 {
  font-size: 36pt;
  font-family: serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: normal;
}

Czsami potrzebne jest ustawienie tylko jdnej z nich. Na przykład, może chcesz pochylic tekst w nbiektórych elementach:

UL { font-style: italic }

Własność font-style nie zmieni wielkości czcionki lub rodziny czcionki. Pochili ona jedynie istniejącą czcionkę. Kiedy ustawi się ją na elemencie "ul", wszystkie elementy "li" będą ukośne, ponieważ font-style jest dziedziczną własnością. Oto rezultat zastosowany w naszym przykładzie, który już znasz:

Podobnie, właśność font-weight jest używna do określenia wagi czy też grubości liter. Można jeszcze bardziej podkreślić elementy listy poprzez ustawienia ich przodka na pogrubiony:

UL { 
  font-style: italic;
  font-weight: bold;
}
     

Co daje :

Ostanimi własnościami są font-variant i line-height, które nie są szeroko wspierane w przeglądarkach i z tego powodu nie za często stosowane w kodzie.

Typowe zadanie : marginesy

Ustawienie przestrzenie wokół elementów jest podstawowym narzędziem w drukarstwie. Naglówek nad tym pargrafem ma przestrzeń nad sobą i pod sobą (troszeczkę mniej). Paragraf w tej książce ma przestrzeń po lewej stronie jak i prowej. CSS można zastosować do wyrażania jak dużo przestrzeni powinno być dookoła różnego typu elementów.

Domyślnie, przeglądarka wie troszeczkę na temat jak wyświetlać różnego typu elementy HTML. Np: wie, że listy i blockquote powinny być ustawione w sposób odróżniający je od reszty. Zastosujmy element "blockquote" w tym przykładzie:

<HTML>
  <TITLE>Fredrick the Great meets Bach</TITLE>
  <BODY>
    <P>One evening, just as Fredrick the Great was 
      getting his flute ready, and his musicians 
      were assembled, an officer brought him a 
      list of the strangers who had arrived. With
      his flute in his hand he ran over the list,
      but immediately turned to the assembled 
      musicians, and said, with a kind of 
      agitation:
    <BLOCKQUOTE>"Gentlemen, old Bach is come."
    </BLOCKQUOTE>
    <P>The flute was now laid aside, and old Bach, who
      had alighted at his son's lodgings, was immediately
      summoned to the Palace.
  </BODY>
</HTML>

Zdjęcie obrazu pokzuje jak typowa przeglądarka HTML wyświetli dokument:

Jak widać, przeglądarka dodała przestrzeń ze wszystkich stron cytatu. W CSS przestrzeń taka nazywa się marginesem i wszystkie elementy mają margines ze wszystkich stron. Własności nazywają się: margin-top, margin-right, margin-bottom, margin-left. Można zmienić wygląd elementu "blockquote" w arkuszu w następujący sposób:

BLOCKQUOTE {
  margin-top: 1em;
  margin-right: 0em;
  margin-bottom: 1em;
  margin-left: 0em;
  font-style: italic;
}

Jednostka "em" będzie omówiona dokładniej w następnym rozdziale, ale już wyjawiamy jej sekret: skaluje odpowiednio w zależności od wielkości czcionki. Powyższy przykład da w rezultacie marginesy pionowe wielkości rozmiaru czcionki (1em) elementu "blockquote" a poziome marginesy są równe zero. Aby cytat był nadal widoczny, będzie wyświetlany jako kursywa:

Tak jak własność font ustawia kilka wlasności spokrewnionych tak samo i własność margin. Powyżzy przykład można napisać w następujący sposób:

BLOCKQUOTE { 
  margin: 1em 0em 1em 0em;
  font-style: italic;
}

Pierwsza część wartości -1em - ustawia margin-top a następnie według wskazówek zegara: 0em dla margin-right, 1em dla margin-bottom i 0em dla margin-left.

Z lewym marginesem ustawionym na zero cytat potrzebuje więcej styłów aby odróżniał się od reszty tekstu. Ustawienie font-style na kursywę pomoże pod tym względem a dodanie koloru tła dlalej go wyróżni:

BLOCKQUOTE { 
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
}

Rezulatem jest:

Jak oczekiwaliśmy, kolor tła cytatu zmienił się. Inaczej niż w poprzednim przykładzie, kolor był ustawiony w komponentach red/green/blue (RGB). Kolory RGB są opisane w rozdziale 11 .

Jednym problemem stylistyczym w powyższym przykładzie jest to, że kolor tła pokrywa cytat z ledwością. Przestrzeń wokół cytatu - powierzchnia marginesu nie stosuje koloru tła elementu. CSS ma inny rodzaj powierzchni nazwanej padding, która używa koloru tła elementu. Pod innymi względami własności padding są identyczne jak własności margin: dodają przestrzeń wokół elementów. Dodajmy padding:

BLOCKQUOTE { 
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
  padding: 0.5em;
}

Rezultatem ustawienia padding jest dodanie przestrzeni pomiędzy tekstem i prostokątem, który ich otacza:

Zauważ, że własność padding dostała tylko jedną wartość (0.5em). Tak jak własność margin, własność padding może mieć 4 wartości dla top, right, bottom i left padding. Jednak jeśli ta sama wartość jest użyta dla wszystkich własności, wystarczy ją umieścić tylko raz. Sprawdza się to zrówno z padding jak i margin (i innymi własnościami granic, opisanymi w rozdziale See Space around boxes. ).

Typowe zadania: linki

Aby ułatwić czytelnikom przemieszczanie się po dokumencie HTML linki powinny mieć styl, który je odróżnia od normalnego tekstu. Przeglądarki HTML bardzo często pokreślają linki tekstowe. Również różnego rodzaju kolorów używa się do wskazania linków już odwiedzonych przez użytkownika. Ponieważ hiperlinki są fundamentalną częścią sieci, CSS ma także sposób na ich stylowanie np:

A:link { text-decoration: underline }

Powyższy przykład określa, że nie odwiedzone linki powinny być podkreślone:

Linki są podkreślone, tak jak to określiliśmy i są one również niebieskie, czegho nie określaliśmy. Kiedy autorzy nie określają styłów, przeglądarki używają stylów domyślnych. Interakcja pomiędzy autorami stylów, domyślnymi stylami przeglądarki i stylami użytkownika (jego własnych preferencji) jest innym przykladem roziązywania konfliktu reguł CSS. Nazywa się to kaskadą ("C" w CSS). Poniżej omówimy kaskadę.

Selector (A:link) zasługuje na specjalną uwagę. Ropoznajesz najprawdopodobniej "A" jako element HTML, ale druga część jest nowa. ":link" jest jedną z wielu tzw. pseudo-klas w CSS. Pseudo-klasy są stosowane do nadawania stylu elementom w oparciu o informacje, które są poza samym dokumentem. Np: autor dokumentu nie wie czy dany link b ędzie odwiedzany czy nie. Pseudo-klasy są opisane szczegółowo w rozdziale 4. Podamy tu jedynie kilka przykładów:

A:visited { text-decoration: none }

Reguła ta dodaje stylu do linków odwiedzonych, tak jak A:link nadała styl linkom nie odwiedzonym. Bardziej kompleksowy przykład:

A:link, A:visited { text-decoration: none }
A:hover { background: cyan }

Ostatnia reguła wprowadza nową pseudo-klasę :hover. Zakładając, że użytkownik używa np: myszki określony styl będzie zstosowany kiedy myszka znajdzie się nad linkiem. Typowym efektem jest inne tło np:

Pseudo-klasa :hover ma interesująca historię. Została wprowadzona w CSS2 po tym jak efekt ten stał się bardzo popularny wśród programistów Java. JavaScript wymaga skomplikowanego kodu a to jest przykładem zastosowania efektu CSS, który stał się popularny wśród projektantów witryn.

Jedno sŁowo na temat kaskad

Fundamentalną cechą CSS jest to, że więcej niż jeden arkusz może oddziaływać na prezentacje dokumentu. Cecha ta jest znana jako kaskada, ponieważ myśli się o różnych arkuszach w serii. Kaskad jest fundamentalną cechą CSS ponieważ zdajemy sobie sprawę, że jeden dokument może korzystać z arkuszy pochodzących z różnych źródeł: przeglądarka, projektant oraz użytkownik.

W ostatnim zestawie przykładów można zaobserwować, że kolor tekstu linków jest niebieski bez wyraźnej reguły w arkuszu. Również przeglądarka wie jak formatować element " blockquote" czy też h1 bez wyraźnej reguły. Wszystko to co przeglądarka wie na temat formatowania jest ustawione w domyślnym arkuszu stylów przeglądarki i łączy się to z arkuszami autora strony lub ustawieniami użytkownika.

Wiedzieliśmy od lat, że projektanci chcą rozwijać swoje własne style. Jednak odkryliśmy, że użytkownicy także chcą mieć opcje wpływające na prezentację dokumentu. W CSS mogą oni to zrobić poprzez dostarczenie swoich własnych arkuszy, które będą łączone z arkuszami przeglądarki i projektanta strony. Wszystkie konflikty zostaną rozwiązane przez przeglądarkę. Zazwyczaj arkusz projektanta strony będzie miał największy wpływ na gokument, po nim użytkownik a na końcu przeglądarka. Jednak użytkownik może stwierdzić, że reguła jest bardzo ważna i będzie miała ona priorytet nad regułą projektanta czy przeglądarki.

Omawiamy szczegółowo kaskady w rozdziale 15, "Cascading and inheritance." Przed tym można się sporo nauczyć na temat fonts, space i ­colors.

Mapa. Strony o CSS:1, 2, 3