|
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
Pierwotnym przeznaczeniem języka HTML było prezentowanie tekstów, rozpowszechnianych w Internecie i to determinowało jego możliwości. Z czasem do tego języka dodane zostały nowe znaczniki i technologie takie, jak tabele, ramki, kontrola nad wyrównaniem tekstu, czy też skrypty JavaScript, które umożliwiły większy wpływ na wygląd dokumentów HTML. Elementy graficzne, czy animacje, które uatrakcyjniają wygląd graficzny dokumentu, często powodują, że czas pobierania tak bogatego graficznie dokumentu jest bardzo długi. Chciałoby się w miejsce elementów graficznych stosować odpowiedni kod, który dawałby właściwy efekt. Kod w postaci tekstu znacznie szybciej jest pobierany z sieci niż grafika. Brak elastyczności języka HTML spowodował, że pojawiły się głosy domagające się od World Wide Web Consortium udostępnienia większej kontroli nad dokumentem HTML. w efekcie wprowadzone zostały kaskadowe arkusze stylów (CSS), których zadaniem jest uzupełnienie braków prostego języka HTML. Style pozwalają w dość łatwy sposób ujednolicić wygląd dokumentów HTML. Kolejne strony pisane są z zastosowaniem "czystych" znaczników HTML, bez ustawiania jakichkolwiek atrybutów określających np.: wielkość czcionek, kolory elementów itp. w treści dokumentu umieszcza się natomiast definicje stylów. Wielką zaletą CSS jest np.: możliwość łatwej modyfikacji wyglądu wszystkich stron, korzystających z tego samego arkusza stylów. w razie potrzeby zmiany sposobu wyświetlania na przykład wszystkich tytułów wyróżnionych znacznikiem <h2> na każdej stronie witryny (np.: zmiana wielkości i koloru czcionki), wystarczy określić wartość odpowiednich atrybutów w jednym miejscu - w zewnętrznym pliku stylów. Konieczność wprowadzenia zmian nie zmusza, więc autora dokumentu do poprawiania kodu źródłowego wszystkich plików, w których trzeba wprowadzić zmiany. Arkusze stylów mogą być dołączane do dokumentów na trzy sposoby: · style wpisane, · osadzone, · style zewnętrzne. We wszystkich przypadkach dostępne są te same atrybuty stylów, różnica polega na umiejscowieniu samej definicji arkusza. Umiejscowienie arkusza ma też wpływ na zakres jego działania. Arkusze wpisane odnoszą się tylko do jednego znacznika HTML. Arkusze osadzone odnoszą się już do całego dokumentu. Natomiast arkusze zewnętrzne odnoszą się do wszystkich dokumentów, używających danego stylu. Sposób dołączenia stylu decyduje o poziomie łatwości ustalania wyglądu tworzonych dokumentów. Style zewnętrze są najefektywniejsze - przy małej ilości zmian możemy szybko uzyskać widoczny efekt.
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
Definicja stylu składa się z dwóch elementów - selektora określającego elementy, do których ma się odnosić dany styl, i deklaracji stylu. Deklaracja składa się z listy par "atrybut: wartość". Lista ta ograniczona jest nawiasami klamrowymi. Selektory można grupować, oddzielając je przecinkami. w takim wypadku deklaracja stylu będzie się odnosić do wszystkich selektorów. Mogą mieć one jedną z wymienionych poniżej postaci. Jeśli istnieje potrzeba umieszczenia komentarzy w obrębie definicji stylu, to umieszcza się je pomiędzy parą znaczników /* i */. Selektory proste: Każdy rodzaj znaczników HTML może być selektorem prostym. Zdefiniowany styl będzie się odnosił do tych elementów strony, które są znacznikami określonego typu. w poniższym przykładzie wszystkie nagłówki typu <h1> będą wypisywane kursywą hl {font-style: italic}. Selektory klasowe: Każdy rodzaj elementów HTML może mieć zdefiniowane różne warianty dostępnych stylów (tak zwane klasy) i dzięki temu może przyjmować różne style. Odwołanie do danej klasy następuje przez umieszczenie w znaczniku HTML oznaczenia klasy elementu. Przykładowe definicje klas: hl.zielona
{color: green} Użycie klas: <h1 class="zielona">Nagłówek zielony</h1> <h1 class="czerwona">Nagłówek czerwony</h1> Klasy mogą być również definiowane bez określania znaczników, których dotyczą, np.: czerwony
{color: red} - można stosować je w odniesieniu do wszystkich elementów
strony np.: <b class="czerwony">pogrubiony czerwony
tekst</b> lub Selektory ID Umożliwiają definiowanie stylów dla pojedynczych elementów HTML. Selektor w tym przypadku jest poprzedzony znakiem #. Odwołanie do stylu odbywa się poprzez użycie w znaczniku HTML atrybutu ID=nazwa identyfikatora stylu. Ten rodzaj selektorów stosowany jest w razie potrzeby skojarzenia elementu ze skryptem odwołującym się do niego. Definicja stylu: hl
{color: green} Użycie stylu: <hl>Nagłówek
zielony</hl> Selektory kontekstowe Są zbudowane z dwóch lub więcej znaczników HTML rozdzielonych spacją (normalnie znaczniki w selektorze rozdziela się przecinkami). w przypadku dwóch znaczników drugi z nich będzie przyjmował styl określony w deklaracji tylko w przypadku znajdowania się w obrębie pierwszego znacznika: Definicja
stylu: Użycie
stylu: Selektory kontekstowe Są zbudowane z dwóch lub więcej znaczników HTML rozdzielonych spacją (normalnie znaczniki w selektorze rozdziela się przecinkami). w przypadku dwóch znaczników drugi z nich będzie przyjmował styl określony w deklaracji tylko w przypadku znajdowania się w obrębie pierwszego znacznika: Definicja
stylu: Użycie
stylu:
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
Style wpisane dołącza się do poszczególnych znaczników HTML w dokumencie. Określają one sposób wyświetlania tylko tego elementu, którego dany znacznik dotyczy. Nie wpływają one na sposób wyświetlania innych elementów nawet, jeśli są one tego samego typu. Przykładowy zapis: <h1
style="font-size: 4mm; color: rgb(255,255,255); Ta metoda ma charakter lokalny, powinna być stosowana przy niezbędnych małych korektach. Na przykład dla wszystkich tekstów objętych znacznikami<h1> i </h1> ustalono kolor tła biały, a tekstu czarny i tylko w tym przypadku zaistniała konieczność odwrócenia kolorów. W przypadku określania stylów dla większej ilości znaczników stosowanie stylu wpisanego jest dość kłopotliwe i powoduje powstawanie dużej ilości zbędnego kodu. W takich wypadkach lepiej jest stosować style osadzone lub zewnętrzne.
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
Słowo osadzone oznacza, że definicja stylu jest umieszczana między znacznikami <style> i </style>. Znaczniki te umieszcza się w nagłówku dokumentu. Przykład kodu: <html> <style> Działanie stylu osadzonego jest ograniczone wyłącznie do dokumentu, w którym został umieszczony. Przydatne jest ukrywanie treści definicji stylów przed przeglądarkami nie interpretującymi ich. Definicje umieszcza się między znacznikami komentarza. Jeśli się tego nie zrobi, istnieje niebezpieczeństwo, że przeglądarka nie zrozumie treści stylu i wyświetli go jako treść strony.
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
Arkusz stylów zewnętrznych jest zwykłym plikiem tekstowym, w którym są zapisane definicje stylów. Adres pliku stylu jest określany w sekcji nagłówka dokumentu HTML za pomocą znacznika <link>: Przykład kodu: <head> Do arkuszy osadzonych można dołączać arkusze zewnętrzne (pomiędzy znaczniki <style>) - używając polecenia @import określając adres URL pliku ze stylami: <style> W ten sposób można dołączać większą ilości arkuszy stylów. Wszystkie polecenia @import muszą występować na początku listy. Dopiero po nich mogą się pojawić definicje stylów osadzonych. W przypadku korzystania ze wszystkich trzech metod dołączania stylów objawia się kaskadowość ich hierarchii: najwyższy priorytet ma styl wpisany, następnie osadzony, a na końcu zewnętrzny.
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
font-family: Wartością tej własności może być dokładna nazwa czcionki lub ogólne określenie czcionki np.: times new roman ce. Dobrze jest określić, co najmniej dwa typy czcionek. Jeśli w komputerze użytkownika nie będzie typu występującego na pierwszej pozycji, to zastosowana zostanie następna. Jeśli użytkownik nie będzie posiadał żadnej z wymienionych czcionek, zastosowana zostanie domyślna czcionka użytkownika. W przypadku określania kilku czcionek, należy nazwy ich oddzielać przecinkiem i spacją. Jeśli nazwa czcionki składa się z kilku wyrazów, należy zastosować cudzysłów. Ogólne rodzaje czcionek: serif, sans-serif, cursive, fantasy i monospace. Przykład: {font-family: "arial ce", "sans-serif"} W powyższym przykładzie w pierwszej kolejności zdefiniowana została czcionka arial ce, jeśli jednak użytkownik nie będzie miał takiej czcionki w swoim komputerze (co jest możliwe), to zastosowana zostanie inna czcionka bezszeryfowa. font-style: Własność ta określa styl czcionki. Dopuszczalne wartości to: normal - czcionka prosta, jest to wartość domyślna. italic - kursywa predefiniowana, stosuje się ją w przypadku czcionki, w zestawie której przewidziano znaki pochylone. oblique - w tym przypadku komputer pochyli czcionkę prostą. Wartość ta stosowana jest wtedy, gdy w zestawie danej czcionki nie ma znaków pochylonych. font-variant: Określa sposób wyświetlania małych liter. small-caps - powoduje wyświetlenie małych liter w postaci kapitalików. W przypadku braku kapitalików dla danej czcionki, małe litery są tworzone przez przeskalowanie wielkich do mniejszego rozmiaru normal - małe litery wyświetlane będą normalnie, jest to wartość domyślna. font-weight: Określa grubość czcionki. wielokrotność 100 w zakresie 100-900 - możliwe jest ustalenie grubości przez podanie jej wartość liczbową co 100 "stopni" w zakresie od 100 do 900. Przykład: {font-weight: 900} W powyższym przykładzie ustala się czcionkę o grubości 900 jest to największa z możliwych grubości. bold - określa pogrubienie czcionki - wartość ta odpowiada wartości liczbowej równej 700. bolder - zwiększa grubość czcionki o 100 w odniesieniu do czcionki domyślnej. lighter - zmniejsza grubość czcionki o 100 w odniesieniu do czcionki domyślnej. normal - ustala grubość normalną - odpowiada ona wartości liczbowej równej 400. font-size: Określa wysokość czcionki. Można określić wysokość czcionki tekstu podając dokładnie rozmiary czcionki w punktach lub pikselach, opisując wielkość czcionki słowami lub określając relatywne powiększenie lub pomniejszenie w stosunku do domyślnej wielkości czcionki. medium - wartość domyślna - określa wielkość czcionki taką, jaką posiada domyślna czcionka. small - jest
to wielkość wyliczona w wyniku działania: x-small - jest
to wielkość wyliczona w wyniku działania: xx-small - jest to
wielkość wyliczona w wyniku działania: large - jest
to wielkość wyliczona w wyniku działania: x-large - jest
to wielkość wyliczona w wyniku działania: xx-large - jest
to wielkość wyliczona w wyniku działania: larger -
czcionka większa w odniesieniu do domyślnej, a wielkość jej wyliczona jest w
wyniku działania: smaller -
czcionka mniejsza w odniesieniu do domyślnej, a wielkość jej wyliczona jest w
wyniku działania: rozmiar absolutny - "rozmiar absolutny" oznacza określenie wysokości czcionki przez podanie wartości numerycznej w punktach, pikselach lub milimetrach lub innych jednostkach (patrz jednostki miar). rozmiar procentowy - "rozmiar procentowy" oznacza procentowe określenie wysokości czcionki w odniesieniu do czcionki domyślnej. · Określając wysokość czcionki można jednocześnie określić wysokość linii tekstu regulując w ten sposób odstępy między poszczególnymi wierszami. Przykład: {font-size: 15pt; line-height: 20pt;} · Można określić każdy parametr czcionki osobno stosując zasady wyżej przedstawione.
· Wszystkie wyżej wymienione parametry można ustalić jednocześnie: {font: font-style font-variant font-weight font-size font-family;} W tym wypadku obowiązuje kolejność atrybutów taka jak podano wyżej.
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
word-spacing: Określa odstępy między wyrazami. długość w jednostkach em (patrz jednostki miar). - liczba wskazuje odstęp będący wielokrotnością szerokości litery "m" używanej czcionki. Dopuszczalne są wartości ujemne. normal - odstępy standardowe przewidziane dla danego rodzaju czcionki, jest to wartość domyślna. letter-spacing: Określa odstępy między literami. długość w jednostkach em (patrz jednostki miar). - liczba wskazuje odstęp będący wielokrotnością szerokości litery "m" używanej czcionki. Dopuszczalne są wartości ujemne. normal - odstępy standardowe przewidziane dla danego rodzaju czcionki, jest to wartość domyślna. text-decoration: Pozwala ustalić elementy dekoracyjne dla tekstu. underline - podkreślenie. overline - nadkreślenie. line-through - przekreślenie. blink - miganie. none - brak elementów dekoracyjnych. Typowym zastosowaniem jest wyłączenie podkreślenia odnośników. Przykład: A {text-decoration: none} vertical-align: Określa pozycję elementu względem elementu nadrzędnego w pionie. baseline - powoduje wyrównywanie linii bazowej danego elementu względem linii bazowej elementu nadrzędnego. middle - połowa wysokości elementu jest wyrównywana względem wysokości linii bazowej elementu nadrzędnego plus połowa wysokości litery "x". sub - indeks dolny. super - index górny. text-top - wyrównanie do górnego marginesu tekstu nadrzędnego. text-botom - wyrównanie do dolnego marginesu tekstu nadrzędnego. top - wyrównuje górną krawędź elementu względem najwyższego elementu w bieżącym wierszu. bottom - wyrównuje górną krawędź elementu względem najniższego elementu w bieżącym wierszu. procent - dodatnie lub ujemne wartości procentowe, liczone względem linii bazowej elementu nadrzędnego. text-transform: Powoduje zamianę wielkości liter. capitalize - ustawia wielką literę na początku każdego wyrazu. uppercase - wypisanie całego tekstu wielkimi literami. lowercase - wypisanie całego tekstu małymi literami. none - tekst będzie wyświetlany tak jak został wpisany w kodzie źródłowym - jest to wartość domyślna. text-align: Określa dla elementów blokowych (np.: <div>) sposób wyrównywania tekstu w poziomie. left - powoduje wyrównywanie tekstu do lewego marginesu elementu nadrzędnego. right - powoduje wyrównywanie tekstu do prawego marginesu elementu nadrzędnego. center - wyrównuje tekst względem środka elementu nadrzędnego. justify - powoduje wyrównywanie tekstu do lewego i prawego marginesu (justowanie) elementu nadrzędnego. text-indent: Określa wielkość wcięcia w pierwszej linii tekstu w elementach blokowych. długość - długość jest podawana w dopuszczalnych jednostkach miary (patrz jednostki miary). procent - procentowe określenie wcięcia względem długości całego wiersza tekstu. white-space: Powoduje, że tekst będzie wyświetlany jak tekst preformatowany. pre - wszystkie dodatkowe spacje i znaki końca linii będą uwzględniane przez przeglądarkę. nowrap - cały tekst wyświetlany będzie w jednej linii, nawet, jeśli jest dłuższy niż szerokość okna przeglądarki. Linię można złamać jedynie stosując znacznik <br>. normal - ustala (przywraca) standardowe ustawienia - wartość domyślna. line-height: Ustala wysokość linii to znaczy odległość między liniami bazowymi sąsiadujących ze sobą wierszy. liczba - jeśli wartością jest liczba, to wysokość zostanie obliczona przez pomnożenie liczby przez wysokość czcionki danego elementu. wielkość - liczba mianowana (pt, px, mm itd.). procent - procentowe określenie linii względem wysokości czcionki. normal - przyjęcie standardowych ustawień przeglądarki.
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
list-style-type: Określa sposób wyświetlania oznaczeń pozycji listy. disc - pełne kółka. circle - puste kółka. square - kwadraty. decimal - cyfry arabskie. lower-roman - małe cyfry rzymskie. upper-roman - duże cyfry rzymskie. lower-alpha - małe litery. upper-alpha - duże litery. none - lista nienumerowana. list-style-image: Określa adres URL obrazu używanego do wyświetlenia wypunktowań pozycji listy. adres URL - określenie adresu URL obrazu. none - wyłączenie wyświetlania grafiki w oznaczeniach listy. list-style-position: Określa sposób wyrównania (wcięcia) tekstu względem pozycji listy. inside - inside tekst jest wyrównywany względem znaku będącego oznaczeniem pozycji w liście (numer, punkt, itp.). outside - tekst pozycji jest wyrównywany względem pierwszego znaku pierwszego wiersza listy. list-style: Służy do zbiorczego ustalania własności listy w kolejności: 1. list-style-type 2. list-style-position 3. list-style-image
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
margin-top: Własności te służą do określania rozmiarów marginesów wokół elementu. Definiują odpowiednio marginesy: lewy górny, prawy i dolny. procent długość Wartości procentowe odnoszą się do szerokości elementu nadrzędnego. Dozwolone są wartości ujemne jednak ich interpretacja zależy od przeglądarki. margin: auto długość procent Własność ta służy do skrótowego definiowania rozmiarów wszystkich czterech marginesów. Gdy są podane cztery parametry, są one odpowiednio przyporządkowywane (margines górny, prawy, dolny, lewy). Gdy jeden - dotyczy on wszystkich marginesów. Gdy są podane dwie lub trzy wartości, brakujące wartości marginesów są ustawiane na takie same, jak po stronie przeciwnej (pary: górny - dolny, prawy - lewy). padding-top: długość procent Własności te służą do określania odległości między granicą obszaru a jego zawartością (np. odstęp między tekstem w komórce tabeli a jej krawędzią). Wartości procentowe odnoszą się do szerokości elementu nadrzędnego. Wartości ujemne nie są dozwolone. padding: długość procent Grupuje wartości odstępów analogicznie do własności margin. border-top-width: długość thin medium thick Własności te służą do definiowania szerokości obramowania obszaru. Oprócz wartości liczbowych mogą przyjmować predefiniowane wartości: thin (obramowanie cienkie), medium (średnie) oraz thick (grube). Wartości ujemne nie są dozwolone. border-width: długość thin medium thick Własność ta grupuje definicje szerokości obramowań podobnie jak własności margin i padding border-color: kolor Określa kolor obramowania elementów. Własność może mieć od jednego do czterech atrybutów. Ich przypisanie do odpowiednich boków jest takie samo, jak we własności margin. border-style: dotted dashed solid double groove ridge inset outset none Określa wygląd obramowania elementów. Atrybuty określają kolejno linię kropkowaną, kreskowaną, ciągłą i podwójną. Kolejne cztery atrybuty definiują linie rysowane w trzech wymiarach - ich wygląd zależy m. in. od wartości własności color. Możliwe jest podanie jednocześnie od jednego do czterech parametrów. Dopasowanie ich do odpowiednich boków następuje podobnie jak we własności margin. border-top: Własności te służą do skrótowego określania własności każdego z czterech obramowań. wartość własności border-...-width wartość własności border-style kolor border: wartość własności border-width wartość własności border-style kolor Własność ta służy do skrótowego określania własności wszystkich czterech obramowań jednocześnie. width: długość procent auto Własności te określają odpowiednio całkowitą szerokość i wysokość obszaru zawierającego tekst lub grafikę. Gdy tekst nie mieści się w zdefiniowanym obszarze, dodawane są do niego paski przewijania. Jeżeli nie mieści się obraz i jednocześnie jedna z jego własności (height lub width) ma wartość auto, to obraz jest odpowiednio skalowany. Wartość procentowa odnosi się do szerokości elementu nadrzędnego. Wartości ujemne nie są dozwolone. float: right left none Ma działanie podobne do atrybutu align w HTML-u. Określa ona wzajemne położenie elementu i otaczającego go tekstu. W przypadku parametru none element zostanie wyświetlony po poprzedzającym go elemencie, przy ustawieniu right element będzie wyświetlony po prawej stronie (tekst znajduje się z lewej strony) a przy wartości left - po lewej (tekst opływa element z prawej strony). clear: none right left both Określa boki elementu, obok których niemożliwe jest ustawienie innych elementów (za pomocą atrybutu float). Przy ustawieniu atrybutu na left element, którego ona dotyczy, zostanie przesunięty maksymalnie na lewo (ustawiana jest jego lewa strona jako "czysta" - clear). Analogicznie jest dla parametru right. Przy ustawieniu both obok żadnej ze stron nie może być innych elementów, dla parametru none element może być otoczony z obu stron.
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
position: Określa typ położenia elementu, do którego atrybut się odnosi względem innych elementów w dokumencie. static (patrz jednostki miar). - Umiejscawia element jako statyczny. Takie umiejscowienie elementu uniemożliwia późniejsze przesunięcie elementu w inne miejsce. Jest to wartość domyślna i jeśli nie określimy żadnego sposobu umiejscowienia elementu to będzie on statyczny. absolute - Takie
umiejscowienie czyni element niezależnym od całej reszty dokumentu. Elementy
zdefiniowane w ten sposób są umieszczane w oknie przeglądarki w ściśle
określonym miejscu. relative - Umiejscowienie relatywne powoduje, że dany element będzie wyświetlany za wszystkimi elementami zdefiniowanymi przed nim, a przed elementami zdefiniowanymi. Takie naturalne położenie elementu można zmienić stosując własności top i left. Jeśli elementy znajdujące się przed elementem usytuowanym relatywnie będą zmieniały swoje położenie, to i on odpowiednio do nich będzie się ustawiał (relatywnie). left: Określa położeni elementu, do którego atrybut się odnosi względem lewej krawędzi elementu nadrzędnego. auto (patrz jednostki miar). - Przeglądarka automatycznie ustali najdogodniejszą odległość od lewej krawędzi elementu nadrzędnego tego elementu. długość - długość może być określona w pikselach lub w milimetrach. procent - Określa odległość od lewej krawędzi elementu nadrzędnego w procentach (za 100% przyjmując szerokość elementu nadrzędnego). top: Określa położeni elementu, do którego atrybut się odnosi względem górnej krawędzi elementu nadrzędnego. auto (patrz jednostki miar). - Przeglądarka automatycznie ustali najdogodniejszą odległość od górnej krawędzi elementu nadrzędnego tego elementu. długość - długość może być określona w pikselach lub w milimetrach.. procent - Określa odległość od górnej krawędzi elementu nadrzędnego w procentach (za 100% przyjmując wysokość elementu nadrzędnego). overflow: Decyduje jak ma być wyświetlana część niewidoczna elementu. Stosuje się tę własność w odniesieniu do elementów potraktowanych własnością clip lub do elementów rozmiarami przekraczających rozmiary przydzielonego obszaru. visible (patrz jednostki miar). - Powoduje, że widoczną staje się nawet odcięta przez własność clip część elementu. hidden - Nadmierna część elementu zostanie ukryta. scroll - jeśli element przekracza wymiarami wymiary przeznaczonego dla niego obszaru to pojawią się paski przewijania. auto - przeglądarka sama "podejmie" decyzję jak potraktować element. z-index: Definiuje porządek (kolejność) wyświetlania elementów. auto (patrz jednostki miar). - Kolejność będzie przypisana elementowi w porządku pojawiania się w dokumencie. liczba - Tu liczba podana jako wartość decyduje o kolejności wyświetlania. Jeśli kolejne elementy zachodzą na siebie to w pierwszej kolejności wyświetlany będzie ten, któremu przypiszemy wartość 0. visibility: Określa widzialność (lub nie) elementu, do którego się odnosi. inherit (patrz jednostki miar). - Element przejmie (odziedziczy) wartość tej własności po elemencie nadrzędnym. visible - Element będzie widoczny. hidden - Element będzie niewidoczny (ukryty).
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
Jednostki długości zostały podzielone na dwa rodzaje - jednostki absolutne i jednostki względne. Jednostki absolutne zależą w bardzo dużym stopniu od parametrów urządzeń wyjściowych (ekran, drukarka). Są one mniej użyteczne od jednostek względnych. Można używać następujących typów jednostek absolutnych: cm - centymetr, 1 cm = 10 mm, Jednostki względne określają wartości zależne od wartości innych parametrów. Umożliwiają lepsze dopasowanie wyglądu elementów strony WWW do różnego rodzaju urządzeń wyjściowych. Zdefiniowano następujące rodzaje jednostek względnych: em - rozmiar liczony względem szerokości litery m w aktualnie używanej czcionce, ex - określa wysokość litery x w danej czcionce, tzw. wartość x-height (np.: przy rozmiarze czcionki 5 pt margines ustawiony na 4 ex będzie miał szerokość 4 razy większą od wysokości litery x o wielkości 5 pt), px - piksel. Dziedziczone są wartości absolutne oraz wartości wyliczone na podstawie wartości względnych. Jednostki procentowe są wyrażane w postaci liczb poprzedzonych opcjonalnymi znakami + albo -. Bezpośrednio po liczbie występuje znak %. Wartości procentowe są względne w stosunku do innych wartości w sposób zdefiniowany dla poszczególnych atrybutów. Jednostki określające kolory. Kolor jest ustalany poprzez określenie wartości jego składowych RGB. W użyciu jest 16 predefiniowanych wartości określanych przez następujące słowa kluczowe: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. Odpowiadają one kolorom standardowej palety VGA. Wartości RGB można definiować na cztery sposoby: rrggbb, np. #00CC00 - notacja heksadecymalna (szesnastkowa), rgb(x,x,x), gdzie x jest liczbą z zakresu 0 - 255, np. rgb(0,204,0), rgb(y%,y%,y%), gdzie y jest liczbą z zakresu 0 - 100, np. rgb(0%,80%,0%).
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
color: Określa kolor tekstu dla danego elementu. #RRGGBB - zapis heksadecymalny (szesnastkowy) określający udział poszczególnych kolorów składowych w standardzie RGB. rgb(r%,g%,b%) - zapis procentowy określający udział poszczególnych kolorów składowych w standardzie RGB. rgb(r,g,b) - zapis liczbowy (liczby od 0 do 255) określający udział poszczególnych kolorów składowych w standardzie RGB. background-color: Określa kolor tła danego elementu. #RRGGBB - zapis heksadecymalny (szesnastkowy) określający udział poszczególnych kolorów składowych w standardzie RGB. rgb(r%,g%,b%) - zapis procentowy określający udział poszczególnych kolorów składowych w standardzie RGB. rgb(r,g,b) - zapis liczbowy (liczby od 0 do 255) określający udział poszczególnych kolorów składowych w standardzie RGB. transparent - ustawia kolor tła na przezroczysty - widoczne będzie tło elementu nadrzędnego. Jest to wartość domyślna. background-image: Określa adres pliku z grafiką mającą stanowić tło elementu. adres URL - wskazuje adres grafiki wypełniającej tło dokumentu. none - wyłącza tło graficzne danego elementu. background-repeat: Określa sposób wyświetlania grafiki będącej tłem elementu. repeat - spowoduje zapełnienie grafiką całego tła elementu. repeat-x - powoduje powtarzanie grafiki odpowiednio tylko w poziomie. repeat-y - powoduje powtarzanie grafiki odpowiednio tylko w pionie. no-repeat - rysunek zostanie wyświetlony jako tło bez powtarzania. background-attachment: Określa sposób przewijania tła elementu. fixed - tło pozostaje nieruchome. scroll - tło jest przewijane razem z zawartością ekranu. background-position: Określa początkową pozycję wyświetlania grafiki będącej tłem elementu. procent - określa w procentach odległość grafiki od górnej lub lewej krawędzi elementu. długość - określa w liczbach mianowanych (np. mm, px, itd.) odległość grafiki od górnej lub lewej krawędzi elementu. top - obraz tworzący tło wyrównywany będzie do górnej krawędzi elementu. center - obraz tła wyrównywany będzie do środka elementu w pionie lub w poziomie. bottom - obraz tworzący tło wyrównywany będzie do dolnej krawędzi elementu. left - obraz tworzący tło wyrównywany będzie do lewej krawędzi elementu. right - obraz tworzący tło wyrównywany będzie do prawej krawędzi elementu. Można używać słów kluczowych określających orientację poziomą (left, center, right), pionową (top, center, bottom), wartości procentowych oraz jednostek długości. Wartości procentowe są względne w stosunku do rozmiarów elementu. Przy podaniu dwóch wartości pierwsza z nich określa ustawienie tła w pionie, druga - w poziomie. Przy określeniu tylko jednej wartości druga zostanie ustawiona na 50%. background: Służy do grupowania własności odnoszących się do tła elementów. Będące atrybutami własności z grupy background są oddzielone spacjami i mogą być wymienione w dowolnej kolejności.
|
||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||
|
Pseudoklasy i pseudoelementy są to specjalne
"klasy" i "elementy" automatycznie rozpoznawane przez
przeglądarki, obsługujące style. Pseudoklasy służą do odróżniania elementów
HTML, mogących przyjmować różne stany (np. odnośniki odwiedzone i
nieodwiedzone). Pseudoelementy odnoszą się do pewnych części znaczników (np.
pierwsza litera w paragrafie - możliwe jest wtedy zastosowanie inicjałów).
Selektor jest zbudowany z następujących kolejno po sobie: elementu HTML,
opcjonalnie nazwy klasy poprzedzonej kropką, dwukropka i nazwy pseudoklasy
(pseudoelementu), np.: A.klasa:active.
|
