Formatowanie strukturalne: style w dokumencie HTML

Jak to działa

Obejrzyj tekst źródłowy powyższego przykładu. Zwróć uwagę na sposób zdefiniowania rozmiarów, kroju i kolorów czcionki, wielkości wcięć poziomych i odstępów pionowych. Informacje o parametrach prezentacji skupione są tylko w jednym miejscu: w definicji arkusza stylów. Żadnej informacji tego typu nie znajdziesz w głównej części dokumentu.

Przeformatowanie dokumentu możemy więc wymusić, zmieniając parametry stylów przypisanych poszczególnym elementom dokumentu, bez ingerencji w sposób oznakowania odpowiednich fragmentów tekstu.

Jak to się robi

Jak widać w tekście źródłowym, definicja stylu mieści się wewnątrz elementu style. Definicja stylu może się odnosić:

• wprost do wszystkich elementów HTML, np. wpis postaci * {opis-stylu} definiuje styl formatowania elementów wszystkich typów;
• wprost do elementu danego typu HTML, np. wpis postaci h1 {opis-stylu} definiuje styl formatowania wszystkich elementów typu h1;
• wprost do elementu zanurzonego w innym elemencie, np. wpis postaci ul li {opis-stylu} definiuje styl formatowania elementów list nienumerowanych; tym sposobem określiliśmy głębokość wcięcia i odstępy pionowe dla elementów list w tym dokumencie;
• wprost do elementu umieszczonego bezpośrednio po innym elemencie, np. wpis postaci h2 + p {text-indent: 0cm} wymusi rezygnację z wcięć akapitowych w akapitach (elementach typu p) następujących bezpośrednio po nagłówku rozdziału (elementach typu h2);
• do klasy nie związanej z określonym elementem, np. wpis postaci .notatka {opis-stylu} definiuje nową klasę stylu o nazwie notatka, którą można przypisać wybranym elementom różnych typów — w tym dokumencie użyto jej do niektórych elementów typu div, p i ul;
• do klasy związanej z określonym elementem, np. wpis postaci p.pierwszy {opis-stylu} definiuje nową klasę stylu o nazwie pierwszy, którą można przypisać tylko elementom typu p, czyli akapitom;
• do klasy nie związanej z określonym elementem, lecz działającej w elementach zanurzonych w inne elementy, np. wpis postaci ul .notatka {opis-stylu} definiuje znaczenie klasy stylu o nazwie notatka, jeżeli będzie użyta do dowolnego elementu znajdującego się wewnątrz elementu ul;
• do elementu lub do klasy, zanurzonych w elemencie określonej klasy, np. wpis postaci .dialog h2 {opis-stylu} umożliwia określenie wyglądu elementu h2 umieszczonego w obszarze działania klasy .dialog; wpis taki spowodował np. to, że w obszarze przykładowego dialogu (sformatowanego jako element div klasy .dialog) nagłówek typu h2 jest składany czcionką barwy czarnej, chociaż styl domyślny dla elementu h2 obowiązujący w naszym dokumencie przewiduje barwę niebieską;
• do pseudoelementu związanego z określonym elementem lub kombinacją elementów. Nazwę pseudoelementu — w odróżnieniu od nazwy klasy — poprzedza się dwukropkiem. Oto lista najważniejszych pseudoelementów:
  • pseudoelement :before definiuje wpis poprzedzający blok, np. styl

    p.wskaz:before {content: "Wskazówka. " color: blue}
    

    spowoduje poprzedzenie każdego akapitu klasy wskaz drukowanym na niebiesko słowem Wskazówka. (razem z kropką i spacją). Tym sposobem uzyskano poziome kreski rozpoczynające kwestie rozmówców w dialogu stanowiącym bazowy przykład prezentowany w tym rozdziale;
  • podobny pseudoelement :after zarządza tekstem dodawanym po zakończeniu elementu;
  • pseudoelement :first-line określa specjalny sposób przedstawiania pierwszego wiersza zakresu elementu, np. zgodnie z definicją stylu

    p:first-line {font-size: larger; font-weight: bold}
    

    pierwszy wiersz każdego akapitu będzie drukowany czcionką powiększoną (w stosunku do domyślnej) i pogrubioną;
  • podobny pseudoelement :first-letter definiuje sposób traktowania pierwszego znaku znajdującego się w zakresie elementu. Na przykład styl

    p:first-letter {color: gray; font-size: 16pt; font-style: oblique}
    

    wymusi drukowanie pierwszego znaku każdego akapitu pochyloną odmianą obowiązującej czcionki o wielkości 16 punktów, w kolorze szarym. Jednak takie litery będą rozpoczynać każdy nowy akapit, co nie jest zbyt mądre. Rozsądniej zaprojektowany jest opis stylu

    h2 + p:first-letter {color: gray; font-size: 16pt; font-style: oblique}
    

    który wymusza sposób prezentacji inicjałów, czyli pierwszych liter akapitów otwierających kolejne rozdziały poziomu h2.

Co można określić za pomocą stylu?

Mówiąc ogólnie — prawie wszystko, co jest związane z wyglądem i sposobem prezentacji elementu. Więc przede wszystkim można sterować:

• sposobem traktowania bloku elementu jako całości, a w szczególności zadawać:
  • ogólny sposób formatowania bloku: display: typ-prezentacji. Możliwe wartości to: blok wierszowy (inline), blok eksponowany (display), blok ignorowany (none) i klika innych, które pominiemy;
  • sposób ustawienia ilustracji (bloku ruchomego) względem tekstu głównego: float: strona. Możliwe wartości to: element tekstu głównego (none), element pływający z lewej (left) lub z prawej (right) strony;
  • zasady współbieżności elementów tekstu głównego i ilustracji (bloków ruchomych): clear: strona. Możliwe wartości to: brak efektu (none), unikanie elementów pływających umieszczonych z lewej (left), prawej (right) lub obu (both) stron;
• sposobem formowania tekstu w blok, a w szczególności zadawać:
  • sposób wyrównywania tekstu: text-align: sposób-wyrównywania (do lewej, do prawej, centrowanie, justowanie),
  • szerokość i wysokości bloku (w pikselach, centymetrach, procentach lub innych jednostkach długości). Jest to jedyny poprawny sposób ustalania stałych wymiarów bloków tekstu (o ile taka potrzeba zachodzi):
    • width: szerokość,
    • height: szerokość,
  • szerokość marginesów z obu stron bloku (w pikselach, centymetrach, procentach lub innych jednostkach długości). Jest to jedyny poprawny sposób wcinania bloków tekstu:
    • margin-left: szerokość,
    • margin-right: szerokość,
  • wysokość odstępów pionowych przed i za blokiem. Jest to jedyny poprawny sposób oddzielania akapitów od siebie, a także robienia odstępów po tytułach:
    • margin-top: szerokość,
    • margin-bottom: szerokość,
  • wielkość wcięcia pierwszego wiersza bloku akapitowego: text-indent: szerokość (jest to jedyny poprawny sposób określania wcięcia akapitowego!),
• parametrami czcionki, takimi jak:
  • wielkość: font-size: rozmiar,
  • grubość: font-weight: grubość,
  • krój: font-family: nazwa rodziny lub grupy czcionek (ogólnie: czcionka szeryfowa, bezszeryfowa, stałej szerokości lub przez nazwę, np. Palatino, Helvetica),
  • odmiana: font-style: odmiana (np. kursywa, czcionka prosta, czcionka pochyła);
• odstępami poziomymi i pionowymi wewnątrz bloku:
  • między literami: letter-spacing: szerokość (np. pismo rozstrzelone),
  • między wyrazami: word-spacing: szerokość;
  • między wierszami (interlinia): line-height: interlinia;
• kolorami:
  • tekstu: color: kolor,
  • tła: background-color: kolor;
• automatycznie generowanym tekstem rozpoczynającym lub kończącym element: content: "treść" w definicji stylu pseudoelementu :before lub odpowiednio :after.

Style mogą zawierać także określenia dziesiątków innych parametrów. Każdy element ma przypisane domyślnie wartości wszystkich składników stylu. Obowiązują one tam, gdzie autor lub redaktor nie przypisał odpowiednim składnikom własnych wartości.

Dalsze obserwacje

Zawartości elementu q, którego zadaniem jest wyróżnianie cytatów, w tym dokumencie są automatycznie ujmowane w cudzysłowy. Osiągnięto to poprzez zdefiniowanie zawartości pseudoelementów o nazwach before (przed) i after (za). I tak style

q:before {content: "\201E"}
q:after {content: "\201D"}

wymuszą automatyczne otaczanie cytatów cudzysłowami (tajemnicze numery są szesnastkowymi kodami UNICODE znaków "„" i "”"). Można osiągnąć nawej więcej: wiadomo, że cytat umieszczony wewnątrz cytatu:

Przyciśnięty do muru, wyjaśnił: <q>powinienem był powiedzieć wtedy
<q>masz rację</q>, ale nie zdobyłem się na to</q>.

winien być otoczony nieco innymi cudzysłowami. Zamiast samemu dbać o odpowiednią postać cudzysłowów, zmusimy do tego automat formatujący, deklarując dodatkowo style pseudoelementów:

q q:before {content: "\BB"}
q q:after {content: "\AB"}

zgodnie z którymi do cytatów wewnętrznych będą stosowane cudzysłowy kątowe. Teraz możemy umieszczać cytaty wewnątrz innych cytatów — lub je stamtąd wyjmować — bez konieczności powtórnego redagowania tekstu:

Przyciśnięty do muru, wyjaśnił: powinienem był powiedzieć wtedy masz rację, ale nie zdobyłem się na to.

Aha! użyłem tak wielu kolorów tylko po to, żeby efekty pracy natychmiast rzucały się w oczy — nawet przesadnie. Nie zachęcam nikogo do tworzenia papuzich dokumentów. Ale czasem warto na chwilę pomalować styl na czerwono, żeby przekonać się, czy używamy go w odpowiednich miejscach — zwłaszcza kiedy naszym narzędziem pracy jest środowisko WYSIWYG, a nie edytor znakowy.

Wnioski

Kiedy definiować styl? W każdej sytuacji, kiedy rozpatrywany fragment tekstu pełni w dokumencie rolę, która — jak się spodziewamy — będzie przypisana także innym fragmentom. Czyli w sytuacji, kiedy spodziewamy się powtarzalności. Ważne jest, żeby umieć nazwać tę rolę słowami — i żeby to zrobić.

Stosowanie stylów upraszcza i ułatwia pracę redakcyjną. Na przykład:

• nie trzeba — więcej: nie powinno się — oddzielać nagłówków od akapitu pustym wierszem: odpowiednie odstępy zdefiniowane w stylu nagłówka zostaną zastosowane automatycznie do wszystkich nagłówków;
• wszystkie tytuły będą wycentrowane (lub wyrównane) i oddzielane od tekstu zawsze w ten sam sposób;
• wszystkie akapity będą tak samo wcięte i tak samo oddzielane od siebie;
• wszystkie włączone do tekstu cytaty będą na pewno wyglądać tak samo, i to tak, jak chcesz: na przykład będą ujęte w cudzysłowy — bez wstawiania samych cudzysłowów do tekstu źródłowego;
• wygląd wypowiedzi w dialogu (wywiadzie, dyskusji) będzie przypisany do rozmówcy, a nie do akapitu;
• wszystkie wyliczenia będą miały tej samej wielkości i kształtu znaczniki, wcięcia i odstępy, zależne tylko od poziomu zagłębienia;
• itd…

Przy tym zmiana wyglądu każdego z tych elementów jest centralnie sterowana: koniec z monotonnym przeglądaniem tekstu, żeby wycentrować tytuły lub zmienić krój czcionki w podpisach rysunków. Wystarczy w jednym miejscu zmienić parametr stylu. Czego chcieć więcej? Umieć i używać…

Naucz się używać stylów. Pod koniec pracy może Ci się wydać, że już nie warto. Ale warto choćby po to, żeby nie napracować się jak wariat przy zmianie szaty graficznej Twojej pracy. I żeby w następnej pracy nie robić wszystkiego od nowa…