sobota, 30 Październik 2010
Umożliwia wybranie stosowanych czcionek. Tekst na stronie WWW zostanie wyświetlony pierwszym z wybranej listy krojów czcionki, o ile jest on zainstalowany na komputerze użytkownika. W przeciwnym razie zastosowana zostanie druga w kolejności czcionka i tak do skutku. Możesz zdefiniować własną listę krojów pisma.
Określa rozmiar czcionki w pikselach lub względem otaczającego tekstu. Tak więc, konieczne jest podanie wartości liczbowej i jednostki. Jednostkę wybiera się z listy rozwijanej umieszczonej z prawej strony pola Size. Wielu projektantów woli stosować piksele, ponieważ zapewnia to powtarzalność efektu w różnych przeglądarkach.
Określa grubość czcionki. Można ją zdefiniować w pikselach lub względem otaczającego tekstu. Poeksperymentuj z różnymi ustawieniami i wybierz najlepsze według Ciebie. Zwykłemu tekstowi odpowiada wartość 400, a czcionce pogrubionej 700.
Umożliwia zdefiniowanie pisma zwykłego, kursywy i pochyłego.
Pozwala przełączać się między czcionką zwykła a kapitalikami. W przypadku wybrania kapitalików, cały tekst jest wyświetlany wielkimi literami, a wersaliki są nieco większe niż zwykłe litery.*
Definiuje wysokość wiersza (musisz podać liczbę i jednostkę). Jest to odstęp między kolejnymi wierszami dokumentu, zazwyczaj o wartości kilku pikseli. Odstęp ten można dowolnie zwiększać lub
zmniejszać.*
Przekształca tekst w tekst pisany wielkimi lub małymi literami, albo wersalikami.
Umożliwia dodanie podkreślenia, nadkreślenia i przekreślenia oraz efektu migającego tekstu. Tego ostatniego efektu nie nadużywaj. Irytuje on wielu użytkowników. Opcje tej sekcji pozwalają wyłączyć podkreślanie połączeń, czego tak bardzo pragną twórcy stron WWW.
Umożliwia wybranie koloru tekstu.
Ustawienia kategorii Background służą wyłącznie do definiowania tła dokumentów. Początkowo tła stron były automatycznie składane z kafelków ? identycznych obrazów powtarzających się w pionie i poziomie. Nie dość, że ograniczało to kreatywność, to jeszcze na dodatek działało irytująco po odwiedzeniu iluś tam stron. Dzięki arkuszom CSS znacznie powiększyła się kontrola projektanta nad tłem strony.
Umożliwia wybranie koloru tła, które będzie stosowane poprzez arkusz stylów CSS.
Umożliwia wybranie obrazu jako tła, które będzie stosowane poprzez arkusz stylów CSS.
Umożliwia złożenie tła z powtarzalnych elementów i określenie sposobu zestawiania elementów. Do wyboru są cztery możliwości. Ustawienie no-repeat wymusza jednokrotne wyświetlenie obrazu, bez powtórzeń. Opcja Repeat działa podobnie jak domyślna metoda składania tła z kafelków ? obraz jest powtarzany w pionie i w poziomie strony. Opcja Repeat-x powoduje wyświetlenie powtórzeń tylko w poziomie, a Repeat-y ? tylko w pionie.
Pozwala wybrać, czy tło ma przewijać się wraz ze stroną, czy też pozostać nieruchome i niezależne od przewijania strony.
Umożliwia zdefiniowanie pozycji obrazu wskazanego jako tło (na osi x). Pozycja jest określana względem elementu HTML, do którego styl jest dołączony.
Ustawienia kategorii Border pozwalają skonfigurować i wyświetlić obramowania wokół różnych elementów, takich jak obrazy lub tekst. Są one bardzo użyteczne przy umieszczaniu akapitów tekstu w ramkach. Poszczególne ustawienia tej kategorii
Umożliwia zdefiniowanie grubości obramowania w oparciu o miarę względną lub liczbową.
Umożliwia wybranie koloru krawędzi obramowania.*
Pozwala wybrać styl obramowania (dla wszystkich czterech krawędzi). Wśród opcji są: dotted (kropki), dashed (linia przerywana), solid (linia ciągła), double (linia podwójna), groove (pseudo 3D ? rowek), ridge (pseudo 3D ? linia wypukła), inset (wypukłe) i outset (wklęsłe).
Tagi: css, style
Kategoria: Tworzenie stron | Komentarze są wyłączone
czwartek, 28 Październik 2010
Tam, gdzie kończy się HTML, tam zaczyna się CSS ? a przynajmniej w aspekcie układu i stylu dokumentu internetowego. Wraz z rozwojem przeglądarek i śmiałości twórców stron WWW, termin kaskadowe arkusze stylów przejdzie do codzienności, a same arkusze CSS będą stosowane na niemal wszystkich stronach WWW. Ponieważ to wiemy, nie możemy nie sięgnąć po tę technologię. Zacznijmy od zastanowienia się nad tym, czym w rzeczywistości są arkusze CSS.
O impresji dzieła multimedialnego lub wizualnego wywieranej na publiczność decydują dwa czynniki: treść i styl. Tak jest zawsze, niezależnie od tego, czy dzieło ma postać wirtualną, jak strona WWW, czy też materialną. W odniesieniu do publikacji sieciowych termin treść oznacza zawartość strony WWW. To przede wszystkim zawartość przyciąga czytelników. Z drugiej strony styl to finezja, dekoracja i ostatnie muśnięcie, dzięki którym danie staje się bardziej smakowite.
Tradycyjny HTML usiłuje wspomóc projektanta w stylizacji stron, ale bieżąca implementacja języka jest mało precyzyjna i ma ograniczone możliwości. I tu właśnie pojawiają się kaskadowe arkusze stylów, propozycja autorstwa W3C standaryzacji zaawansowanych atrybutów stylu do zastosowań na stronach WWW. Dzięki arkuszom stylów nie ma już potrzeby stosowania stylu do każdego elementu, czy nawet każdej strony. Jeden styl może być wykorzystywany w całej witrynie, a jego aktualizacja wymaga jedynie zmian w jednym pliku. Co więcej, wszelkie zmiany wprowadzone w procesie aktualizacji są natychmiast uwzględniane na wszystkich stronach, do których styl został zastosowany. Arkusze stylów wykazują dwojakiego rodzaju przewagę nad tradycyjnym formatowaniem HTML:
W kwestii stylu umożliwiają uzyskanie efektów, które są praktycznie nie do realizacji za pomocą języka HTML. Dotyczy to wykorzystania warstw i innych efektów dynamicznych.
W kwestii ekonomiki pracy zdecydowanie przyspieszają i ułatwiają aktualizację stylów stron WWW.
Podobnie jak w przypadku potraw, styl i stopień perfekcji jego definicji zależą od dwóch spraw. Pierwsza to czas i pieniądze. Budżet i ograniczenia czasowe określające termin przygotowania witryny wymuszają włączenie bądź wyłączenie pewnych rozwiązań (podobnie jak w przypadku wyboru między barem szybkiej obsługi a restauracją z prawdziwego zdarzenia). Drugim czynnikiem są Twoi czytelnicy. Typowy kierowca ciężarówki zamówi z dużym prawdopodobieństwem solidny stek, a typowa nastolatka dbająca o linię będzie preferowała sałatkę szefa. Zawsze więc staraj się przeanalizować Twoją potencjalną publiczność pod kątem preferencji i w oparciu o taką analizę równoważ zawartość i styl każdej aplikacji.
Arkusze stylów budowane są z reguł, które rezydują w dokumencie lub osobnym pliku połączonym z dokumentem. Reguła zawiera dwa elementy: selektor i deklarację. Deklarację tworzy z kolei para: właściwość i wartość. Oto przykład reguły CSS:
h3 {text-decoration: underline }
W tym przykładzie h3 to selektor. To on właśnie wiąże arkusz stylów z dokumentem. W tym przypadku definiowany jest styl elementu HTML jakim jest nagłówek Heading 3. Wyrażenie text-decoration: underline to deklaracja ? definicja sposobu, w jaki chcesz wpłynąć na znacznik <H3>. W naszym przykładzie text-decoration to właściwość, a underline wartość. Tak więc reguła spowoduje zastosowanie podkreślenia do tekstu zawartego między znacznikami <H3></H3>. Jak zauważysz, inne atrybuty znacznika <H3> nie zostaną usunięte ? innymi słowy formatowanie poprzez arkusze CSS nie usuwa formatowania domyślnego, a jedynie go rozszerza. Nie oznacza to jednak, że nie masz możliwości całkowitej zmiany definicji stylu H3. Jest taka możliwość, a w dalszej części rozdziału dowiesz się jak z niej korzystać.
Jak widzisz, zmiana właściwości znacznika jest bardzo prosta. Co więcej, jak już wspominałem, można zmienić także całą definicję znacznika. Jak to zrobić? Tutaj dochodzimy do innej cechy kaskadowych arkuszy stylów. Reguła arkusza CSS może zawierać wiele deklaracji. Rozbudowując poprzedni przykład możesz dodać deklaracje koloru i rozmiaru, podobne to przedstawionych poniżej:
h3 { text-decoration: underline; color: blue; font-size: 14pt }
Nie tylko deklaracje można grupować, lecz także selektory. O ile deklaracje oddziela się średnikami, to grupowane selektory przecinkami. Oto przykład arkusza CSS, w którym definiowane są identyczne style dla tekstu nagłówka H3 i tekstu pogrubionego:
h3, b { text-decoration: underline; color: blue; font-size: 14pt }
Inną charakterystyczną cechą arkuszy CSS jest możliwość ich zastosowania do wielu znaczników poprzez dziedziczenie. Elementy zawarte w selektorze CSS będą dziedziczyć deklarację stylu tego selektora. Na przykład jeżeli w obszarze elementu H3 znajdują się inne znaczniki, odziedziczą one deklaracje stylu określone dla H3. Oto przykład tego, o czy tu mówiliśmy:
<h3>Witam na mojej <em>NOWEJ</em> stronie WWW</h3>
W tym przykładzie tekst NOWEJ odziedziczyłby właściwości takie jak podkreślenie, niebieski kolor tekstu i rozmiar czcionki 14 punktów, o ile oczywiście zastosowana zostałaby deklaracja stylu H3 taka, jak w poprzednim przykładzie. Znacznik <em> również wpłynąłby na styl tekstu, powodując dodanie emfazy (kursywa).
Dziedziczenie funkcjonuje także w relacji element nadrzędny-element podrzędny. Dzięki tej zależności istnieje możliwość określenia atrybutów stylu stosowanych na całej stronie za pomocą jednego stylu. Można to uzyskać definiując selektor body, tak jak w tym oto przykładzie:
body { font-family: Arial, Helvetica, sans-serif; font-size: 12pt }
W ten sposób wszystkie elementy dokumentu HTML domyślnie dziedziczą zdefiniowane w deklaracji właściwości (oczywiście o ile mogą mieć takie właściwości). Nie jest to żelazna reguła, od której nie ma odstępstwa. Odstępstwa są możliwe, a wprowadza się je bezpośrednio dla danego przypadku.
Mówiąc o cechach kaskadowych arkuszy stylów CSS ograniczaliśmy się na razie do dwóch członów ich nazwy. Poruszaliśmy kwestię stylu i arkusza. Trzeci aspekt, także znajdujący odzwierciedlenie w nazwie, jest niewątpliwie decydujący i chyba równie ważny co pozostałe. To oczywiście termin kaskadowy. Termin ten opisuje zasadę przejmowania pierwszeństwa przez style lokalne nad stylami zdefiniowanymi na poziomie strony, które z kolei dominują nad stylami globalnymi.
Wyobraź sobie, że korzystasz z zewnętrznego arkusza stylów, który definiuje styl całego tekstu przypisując mu krój czcionki Arial, rozmiar 12 pt i kolor czarny (można by to osiągnąć poprzez zmianę definicji znacznika <body>). Taka definicja miałaby wpływ na wszystkie elementy dokumentu HTML, dla których dopuszczalne jest stosowanie którejkolwiek z tych trzech właściwości. Jest to dobra metoda ustanawiania i stosowania ogólnego układu i stylu strony WWW. Jeśli na przykład zdecydowałbyś się na dodanie do fotografii podpisów pisanych kursywą
o rozmiarze 8 punktów drukarskich i na dodatek chciałbyś zastosować do tego celu styl nagłówka H1, aby wyróżnić znacząco podpisy, należałoby utworzyć nowy styl, stanowiący redefinicję stylu H1. Wówczas w arkuszu stylów styl lokalny zdominuje styl wyższego poziomu. Umożliwi to zastosowanie stylu podpisu do podpisów i zapewni im żądany wygląd nawet w warunkach zasad stylu globalnego.
Atrybuty stylu
W metodzie najniższego poziomu wykorzystuje się atrybuty stylu, które umieszczane są w znaczniku HTML, do którego styl ma być zastosowany. Ustawienia stylu wprowadzone w ten sposób dominują nad wszelkimi innymi definicjami stylu (tego typu zastosowanie stylu nosi nazwę stylu wpisanego ? przypis tłum.). Oto przykład typowego zastosowania atrybutów stylu:
<div id=?Layer1? style=?position:absolute; width:358px; height:378px; zindex:1; left: 160px; top: 225px?></div>
Jest to kod definiujący element DHTML zwany warstwą. Jak możesz zobaczyć, położenie warstwy na stronie WWW określone jest w arkuszu CSS. Ponieważ warstwy zazwyczaj miewają różne pozycje, reguły CSS są definiowane w obrębie każdego znacznika warstwy osobno.
Style osadzone
W metodzie pośredniego poziomu styl stosowany jest w obrębie strony, lecz nie w poszczególnych znacznikach. Takie podejście pozwala zdefiniować styl strony bez potrzeby przygotowywania odrębnego pliku. Jedną z największych zalet takiego rozwiązania jest szybka aktualizacja stylu ? mówiliśmy o tym wcześniej. Chociaż regułę stylu można wpisać w dowolnym miejscu dokumentu, standardowo przyjmuje się, że miejscem osadzonego stylu CSS jest sekcja HEAD dokumentu. Oto typowa definicja stylu osadzonego:
<head>
<meta blah blah…>
<head>
<style type=?text/css?>
<!-.
background { background-color: #0066FF; background-image: url(bg.gif);background-repeat: no-repeat }
p { font-family: Arial, Helvetica, sans-serif; font-size: 12 pt }
–>
</style>
</head>
</head>
Analizując ten kod źródłowy zauważysz w pierwszej kolejności, że osadzony arkusz stylów jest zawarty w elemencie STYLE, którego wartością atrybutu type jest text/css. Zauważysz także prawdopodobnie, choć być może nie będziesz wiedział na razie co to oznacza, że rzeczywista definicja stylu umieszczona jest w znacznikach komentarza HTML.
W tych przeglądarkach, które nie potrafią obsługiwać arkuszy stylów, znaczniki komentarza obejmujące wszystkie reguły CSS spowodują potraktowanie kodu jako komentarza (i pominięcie go). Z kolei te przeglądarki, którym arkusze CSS nie są obce, wiedzą, że między znacznikami zawarte są definicje stylów.
Zewnętrzne arkusze stylów
Ostatnia z metod wykorzystuje zewnętrzne arkusze stylów. Jest to idealne rozwiązanie tam, gdzie celem jest stworzenie ogólnego stylu całej witryny (na przykład witryny firmy). Zmiana jednej reguły, wpłynie na styl wszystkich stron, na których umieszczono odwołania do zewnętrznego arkusza stylów. Jest to jeden z powodów, dla których arkusze CSS mają tak szerokie możliwości.
Zewnętrzne arkusze stylów są łączone z dokumentem za pomocą połączenia. Aby zastosować do dokumentu zewnętrzny arkusz CSS, możesz skorzystać z dwóch metod. Pierwsza metoda opiera się na imporcie. Oto jej przykład:
<style type=?text/css?> @import?arkusz_stylow.css?; </style>
W metodzie alternatywnej definiowane jest połączenie do pliku zewnętrznego zawierającego arkusz CSS:
<link rel=?stylesheet? href=?arkusz_stylow.css? type=”text/css”>
Wyrażenie to powinno znaleźć się na zewnątrz jakichkolwiek znaczników określających styl, lecz nadal w obrębie znaczników <head></head>. Ta metoda uznana jest za standardową metodę łączenia zewnętrznych arkuszy stylów z dokumentem. Wynika to między innymi z tego, że połączenia jako takie są obsługiwane przez większość przeglądarek. Zawartość pliku .css ma taką samą postać jak w przypadku każdego innego arkusza stylów. Oto przykładowa definicja:
.background { background-color: #0066FF; background-image: url(bg.gif);background-repeat: no-repeat }
p { font-family: Arial, Helvetica, sans-serif; font-size: 12 pt }
Tagi: arkusz, css, style
Kategoria: Tworzenie stron | Komentarze są wyłączone