Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji <body>. Niżej zestawiono wybrane parametry formatowania CSS. Jednostki miar Podczas definiowania określonego stylu poleceniom CSS najczęściej nadaje się określoną wartość i podaje jej jednostkę, np. font-size:15px. W języku CSS stosuje się następujące jednostki miar: Jednostki względne są preferowane, ponieważ określają wielkość w stosunku do ustawionych parametrów przeglądarki, np. jej rozmiarów wyrażonych w pikselach: em rozmiar podany jako wielokrotność bieżącego rozmiaru czcionki; % rozmiar podany w procentach wielkości elementu, do którego odnosi się użyty znacznik, np. może dotyczyć wielkości czcionki, rozmiaru komórki w tabeli lub rozmiaru wiersza tabeli na stronie. Jednostki bezwzględne nie są zalecane, ponieważ powodują, że wygląd dokumentu zmienia się w zależności od rozdzielczości ekranu i ustawionych parametrów przeglądarki: cm rozmiar podawany w centymetrach; stosowany np. do określania rozmiarów drukowanej fotografii; pt rozmiar podawany w punktach; jego praktyczne zastosowanie jest związane z określaniem rozmiaru czcionki; px rozmiar podawany w pikselach; ta jednostka miary ma bardzo istotną wadę, ponieważ ostateczny wynik skalowania (np. fotografii) jest zależny od ustawionej rozdzielczości monitora (próba umieszczenia zdjęcia w zbyt małej komórce tabeli spowoduje obcięcie tego zdjęcia). Przykłady poprawnych definicji stylów umieszczonych bezpośrednio w dokumencie XHTML <body style= font-size: 11pt > w całym dokumencie domyślna wielkość czcionki wynosi 11 punktów. <p style= margin-left: 3.5em > ten akapit będzie miał z lewej strony margines o szerokości 3,5 rozmiaru bieżącej czcionki. <table style= width: 50% > szerokość tabeli wynosi 50% szerokości strony. <img style= width: 200px > nastąpi proporcjonalne przeskalowanie obrazka tak, aby jego szerokość wynosiła 200 pikseli. Gdybyśmy z tych poleceń utworzyli zewnętrzny plik CSS, jego treść wyglądałaby następująco: body {font-size: 11pt} p {margin-left: 3.5em} table {width: 50%} img {width: 200px} Uwaga. Jeśli wartość atrybutu ograniczymy jedynie do podania wartości liczbowej, domyślnie jednostką miary będzie piksel.
Marginesy i obramowania Praktycznie każdy element dokumentu XHTML może być otoczony marginesem wewnętrznym (polecenie padding), obramowaniem (polecenie border) oraz marginesem zewnętrznym (polecenie margin). Poglądowo przedstawia to rys. 1. Rysunek 1. Marginesy zewnętrzne, wewnętrzne oraz obramowanie wokół tekstu na stronie Marginesy i obramowania mogą być różnej wielkości z każdej strony. Poprawne będzie zatem następujące polecenie występujące w zewnętrznym pliku CSS: table { margin-left: 3.5px; margin-right: 2.5px; margin-top: 2px; margin-bottom: 2px; border-width: 5px; padding: 5px } Szerokość obramowań można także wyrazić następującymi wartościami: thin cienka, medium średnia, thick gruba. Obramowania mogą przyjmować różne style (border-style) i różne kolory (border-color). W poleceniu border-style można zdefiniować następujące ramki: none brak ramki (wartość domyślna), solid linia ciągła, double linia podwójna, dotted linia kropkowana, dashed linia przerywana. W poleceniu border-color można podawać nazwę koloru (np. red) lub jego wartość numeryczną (np. dla koloru czerwonego będzie to #FF0000). Poprawne będzie następujące polecenie: h1, h2 {border-bottom-style: solid; border-bottom-width: medium; borderbottom: red} Zasób uzupełniający do podręcznika Po prostu informatyka, WSiP, Warszawa 2012 2
Czcionka Definiując czcionkę, warto zwrócić uwagę na: font-family krój pisma: o serif pismo szeryfowe, o sans-serif pismo bezszeryfowe, o nonospace pismo maszynowe (o stałej szerokości). W tym wypadku można także definiować konkretną czcionkę, np. Verdana, Arial, Courier. font-size wielkość czcionki, od najmniejszej do największej: o xx-small o x-small o small o large o x-large o xx-large text-align sposób wyrównania: o left o right o center o justify text-decoration dodatkowe efekty, np. o blink miganie tekstu, o underline podkreślenie. Poprawne są następujące polecenia: h1 {text-align justify; font-size: large; font-family: Arial, Sans-serif} a {text-decoration: none} Drugi z przykładów spowoduje, że odnośniki na stronie nie będą podkreślane. Przykład Na zakończenie tej krótkiej prezentacji wybranych parametrów formatowania CSS zatrzymajmy się przy analizie strony http://ti-a.wsip.pl dotyczącej poprzedniego wydania podręcznika Technologia informacyjna w internecie. Została ona w całości wykonana w Notatniku z użyciem podstawowych znaczników HTML w wersji 4.01. Przeprowadzona walidacja potwierdza poprawność składniową dokumentu. Na ostateczny wygląd strony ma wpływ zdefiniowany prosty plik styl.css. Jego treść prezentujemy niżej. body {background: white; color: navy; font-family: Verdana; width: 720px; margin-left: auto; margin-right: auto} a:link, a:visited {color: blue} a:hover {color: red} h1 {text-align: center; font-size: 17px; line-height: 75%} h2 {text-align: right; font-style: Italic; font-size: 13px} h3 {text-align: center; font-weight: normal; font-size: 11px; line-height: 120%} p {text-align: justify; font-size: 11px; line-height: 120%} ul {text-align: justify; font-size: 11px; line-height: 120%} ol {text-align: justify; font-size: 11px; list-style: upper-alpha; lineheight: 140%} td {vertical-align: top} Zasób uzupełniający do podręcznika Po prostu informatyka, WSiP, Warszawa 2012 3
Interpretacja treści tego pliku nie powinna sprawić kłopotów. Omówimy pokrótce jego zawartość. 1. W znaczniku body zdefiniowaliśmy dla całego dokumentu kolor tła strony (white), kolor czcionki (navy), rodzaj czcionki (Verdana), szerokość strony (720 px), marginesy prawe i lewe (auto). 2. W znaczniku a zdefiniowaliśmy taki sam kolor hiperłączy przed odwiedzeniem i po odwiedzeniu (blue) oraz kolor tła hiperłącza po najechaniu kursorem (red). 3. Kolejne zdefiniowane znaczniki to h1, h2, h3, p. Wyjaśnienia wymaga jedynie parametr lineheight definiuje wysokość linii tekstu, czyli znaną z edytorów tekstu interlinię. 4. W znaczniku ul zdefiniowaliśmy parametry listy nienumerowanej. 5. W znaczniku ol zdefiniowaliśmy parametry listy numerowanej. Zauważmy, że polecenie liststyle: uppear-alpha wprowadzi w miejsce numeracji 1,2,3. numerację A,B,C itd. 6. W znaczniku td zdefiniowaliśmy położenie elementu w tabeli poprzez równanie do górnej krawędzi tabeli (top). Na rysunku poniżej prezentujemy wynik współpracy głównego dokumentu HTML ze zdefiniowanym arkuszem stylów. Rysunek 2. Strona główna podręcznika Technologia informacyjna w internecie Zasób uzupełniający do podręcznika Po prostu informatyka, WSiP, Warszawa 2012 4
Poprawność arkusza CSS Poprawność składniową arkusza stylów CSS można sprawdzić, korzystając z Usługi Walidacji CSS W3C dostępnej pod adresem http://jigsaw.w3.org/css-validator/. Rysunek 3. Walidacja poprzez bezpośrednie wprowadzenie kodu Rysunek 4. Komunikat informujący, że nie znaleziono błędów w walidowanym pliku Zasób uzupełniający do podręcznika Po prostu informatyka, WSiP, Warszawa 2012 5