docZasób uzupełniający do podręcznika Technologia
download 
Reklamacja Transkrypt
Zasób uzupełniający do podręcznika Technologia
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.
Zdzisław Nowakowski, Krótki przegląd właściwości języka CSS
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
Zdzisław Nowakowski, Krótki przegląd właściwości języka CSS
Czcionka
Definiując czcionkę, warto zwrócić uwagę na:
font-family – krój pisma:
o
o
o
serif – pismo szeryfowe,
sans-serif – pismo bezszeryfowe,
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
Zdzisław Nowakowski, Krótki przegląd właściwości języka CSS
Interpretacja treści tego pliku nie powinna sprawić kłopotów. Omówimy pokrótce jego zawartość.
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.
1.
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
Zdzisław Nowakowski, Krótki przegląd właściwości języka CSS
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
