Informacje ogólne
Transkrypt
Informacje ogólne
Informacje ogólne Arkusze styli zwi kszaj kontrol nad wygl dem strony, poprzez zastosowanie szeregu opcji przypisywanych do danych elementów samego HTML'a. Dzieki nim mo na okre li takie cechy jak: rodzaje czcionek, sposób formatowania tekstu, kolory, tła, marginesy itp. Same style nadpisuj atrybutów znaczników HTML'a, dodaj c swoje niejako wi kszo rozsze enia. Obecnie zalecane jest stosowanie styli zamiast takich atrybutów jak: align, face, size itp. Dzi ki stylom mo na te w do znaczny sposób ograniczy ilo wykorzystywanych rodzajów znaczników. Kaskadowo stylów Informacja o stylu mo e by zapisana w oddzielnym pliku b d w samym dokumencie HTML. Od lokalizacji stylu zale y zasi g jego oddziaływania. • • • • Importowany arkusz stylów (imported Style Sheet). Zewn trzny arkusz stylów, który został importowany (doł czony) do innego arkusza. Zewn trzny arkusz stylów (external Style Sheet). Zwykły plik tekstowy z rozszerzeniem .css zawieraj cy definicje stylów. Odwołania do zewn trznego arkusza stylów znajdowa si mog w dowolnym dokumencie HTML. Styl osadzony (embedded style). Styl o zasi gu lokalnym - jego oddziaływanie ograniczone jest do dokumentu, w którym został umieszczony. Styl wpisany (in-line style). Styl o zasi gu lokalnym, doł czany do okre lonego znacznika HTML i okre laj cy sposób wy wietlania tylko tego elementu. Kaskadowo stylów objawia si w przypadku korzystania z przynajmniej dwóch z wymienionych wcze niej rodzajów arkuszy. W przypadku konfliktu (gdy jaki element znajduje si w zasi gu wi cej ni jednego stylu), obowi zuje zasada, e styl znajduj cy si „bli ej” formatowanego elementu znosi działanie stylu odległego. Najwy szy priorytet ma wówczas styl wpisany, drugim w kolejno ci jest styl osadzony, nast pnie zewn trzny, a na ko cu importowany. Przykładowo, styl wprowadzony w nagłówku HEAD dokumentu HTML (styl osadzony) b dzie miał pierwsze stwo przed stylem pochodz cym z pliku arkusza (zewn trznym). Sam jednak zostanie „zneutralizowany” przez styl umieszczony w obr bie znacznika formatowanego elementu - np. H1 (styl wpisany). Składnia stylu Definicja stylu składa si z dwóch cz ci - selektorów okre laj cych elementy HTML, do których b dzie odnosi si styl oraz deklaracji stylu. Definicj umieszcza si w znaczniku STYLE lub w zewn trznym pliku (arkuszu stylów) z zachowaniem nast puj cej składni: selektor1, selektor2, ... , selektorn { własno własno ... } 1: warto 2: warto 1; 2; Na deklaracj stylu składa si lista par własno :warto oddzielonych rednikiem i ograniczonych nawiasami klamrowymi. Własno to atrybut znacznika HTML, który podlega specyfikacji CSS (np. wielko czcionki dla akapitu), warto – dookre lenie własno ci (np. 12px). Przykłady: P { text-indent: 10pt } – wci cie akapitu o gł boko ci 10 punktów H1, H2 { font-style: bold } – wytłuszczona czcionka dla nagłówków typu H1 i H2 A { color: red; text-decoration: none } - odsyłacz w kolorze czerwonym, bez podkre lenia Umieszczanie stylu w dokumencie Specyfikacja HTML 4.0 okre la w jakim miejscu opis wygl du mo e si znajdowa : • • w dokumencie HTML; w osobnym pliku *.css. Aby umie ci opis wygl du wewn trz dokumentu HTML nale y u y znacznika <style>. W sekcji head wstawiamy np: <style type="text/css"> H1 { color: red } </style> Bardziej praktyczne jest zastosowanie zewn trznego arkuszu stylów. Takie rozwi zanie ma dwie zalety: • • tre opisu mo e by zmieniana bez modyfikacji ródłowego dokumentu HTML, pliki CSS mog by współdzielone przez kilka dokumentów. W celu przył czenia zewn trznego opisu wygl du dokumentu nale y wykorzysta znacznik <link> i w sekcji head wstawi : <LINK rel="stylesheet" href="przyklad.css" type="text/css"> Znacznik <link> zawiera: • • • typ: "stylesheet"; nazw i poło enie opisu wygl du wewn trz atrybutu "href"; typ opisu wygl du okre lonego przez: "text/css". Nast pnie tworzymy plik tekstowy (np. w notatniku) zawierajacy styl: H1 { color: red } Plik zapisujemy z rozsze eniem *.css Dziedziczenie Dziedziczenie jest zwi zane z hierarchi znaczników HTML'a. Polega na tym i warto ci przypisane danemu znacznikowi b d te miały zastosowanie dla znaczników mu podległych czyli zawartych w jego ciele. Przyporz dkowuj c znacznikowi <body> jak własno (np.: kolor) b dzie ona te nadana wszystkim pozostałym znacznikom poza <head> i <html>. Warto nadana elementowi <p> zostanie odziedziczona przez znacznik <font>. Niestety nie zawsze wszystko wygl da tak jak powinno, np.: Netscape nie dziedziczy wła ciwo ci dla elementów tabeli. Warto Odnosi si do ę Opis Przykład ś Wła ciwo ć ś ć ś ś Czcionka Okre la typ czcionki font-style Okre la styl czcionki nazwa czcionki wszystkie elementy {font-family: Arial} Przykład: Tekst normal, italic, oblique wszystkie elementy {font-style: italic} Przykład: Tekst normal, small-caps wszystkie elementy {font-variant: smallcaps} Przykład: TEKST normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 wszystkie elementy {font-weight: bolder} Przykład: Tekst xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, punkt (pt), inch (in), centymetr (cm), piksel (px) wszystkie elementy {font-size: 20px} Przykład: Tekst font-family, font-size, font-variant, font-weight, font-size wszystkie elementy {font: 12pt sans-serif bold italic} Przykład: Tekst ś font-family ć ś ś font-variant Okre la grubo czcionki font-size Okre la rozmiar czcionki font Zawiera w sobie wszystkie wła ciwo ci dotycz ce czcionki ą ś ś ś font-weight ę Odnosi si do Przykład ć Warto Okre la odległo mi dzy wyrazami normal, wszystkie elementy {word-spacing: 1.2em} punkt (pt), Przykład: Tekst inch (in), centymetr (cm), wzgl dem (em), piksel (px) mi dzy literami normal, wszystkie elementy {letter-spacing: 0.2em} punkt (pt), Przykład: T e k s t inch (in), centymetr (cm), wzgl dem (em), piksel (px) ś vertical-align Okre la poło enie tekstu w pionie wzgl dem elementu poprzedzaj cego ą ę Ŝ Okre la czy tekst ma by podkre lony, przekre lony, itd. ś textdecoration none, underline, overline, line-through, blink wszystkie elementy {text-decoration: linethrough} Przykład: Tekst baseline, elementy sub, wewn trzne super, top, text-top, middle, bottom,procent ę ś ć ś ę ę letter-spacing Okre la odległo ć ś ś ę ę word-spacing ś Opis ś Wła ciwo ć ś ć ś ś Tekst {vertical-align: top} ś capitalize, uppercase, lowercase, none wszystkie elementy left, right, center, justify elementy b d ce blokiem {text-align: center} {text-transform: uppercase} Przykład: TEKST text-indent Okre la odległo line-height Okre la odległo ć ą procent, elementy b d ce blokiem {text-indent: 20%} punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) ć ę ą mi dzy dwoma s siednimi liniami normal, wszystkie elementy liczba, procent, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) ę ś ś ę od lewego marginesu ę ś ś ą Okre la poło enie tekstu wewn trz elementu ą text-align ę Ŝ ś text-transform Okre la sposób przemiany tekstu {line-height: 120%} Odnosi si do ę Warto Przykład nazwa koloru, warto hex wszystkie elementy {color: red} Przykład: Tekst {color: rgb(0,0,255)} Przykład: Tekst nazwa koloru, warto hex wszystkie elementy {background-color: #FF5500} none, adres URL wszystkie elementy {background-image: url(tlo.gif)} repeat, repeat-x, repeat-y, no-repeat wszystkie elementy {background-repeat: repeat-x} scroll, fixed wszystkie elementy {background-attachment: scroll} [top, center, bottom], [left, center, right], procent, punkt (pt), inch (in), centymetr (cm), piksel (px) elementy {background-position: b d ce blokiem 100% 30%} background-color Okre la kolor tła backgroundimage Okre la grafik pełni ca rol tła backgroundrepeat Okre la powtrzalno backgroundattachment Okre la czy tło ma si przesuwa wraz z zawarto ci (scroll) czy ma by stałe (fixed) backgroundposition Okre la pozycj pocz tkow tła ę ą ć ą ę ą ą ę ś ć ą ś ę ć ś tła ś ś ę ś ś ś Okre la kolor czcionki ć color ć ś Opis ś Wła ciwo ć ś ć ś ś Kolor i tło ą ś Zawiera w sobie wszystkie wła ciwo ci dotycz ce tła ś background backgroundcolor, backgroundimage, backgroundrepeat, backgroundattachment, backgroundposition wszystkie elementy {background: red url(tlo.jpg) left top norepeat} Okre la odległo ę Odnosi si do Przykład od górnej kraw dzi strony auto, wszystkie elementy {margin-top: 3em} procent, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) od prawej kraw dzi strony auto, wszystkie elementy {margin-right: 4px} procent, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) ś ć ś ć od dolnej kraw dzi strony auto, wszystkie elementy {margin-bottom: 13%} procent, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) ę margin-bottom Okre la odległo ę ś ś ę ę ć ś ś ę margin-right Warto ę Okre la odległo ć margin-top ś Opis ś Wła ciwo ć ś ć ś ś Elementy kwadratowe od lewej kraw dzi strony auto, wszystkie elementy {margin-left: 4em} procent, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) ę Okre la odległo ę margin-left ś ć ś ś Okre la odległo dolna, lewa od kraw dzi strony według kolejno ci: górna, prawa, padding-top Okre la górny odst p elementu padding-right Okre la prawy odst p elementu paddingbottom Okre la dolny odst p elementu auto, procent, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) wszystkie elementy {margin: 2em 3em 1em 4em} procent, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) wszystkie elementy {padding-top: 0.2em} procent, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) wszystkie elementy {padding-right: 12px} procent, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) wszystkie elementy {padding-bottom: 0.4em} ę ę ś ę ę ś ę ę ś ę ę margin ś Okre la lewy odst p elementu procent, wszystkie elementy punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) padding Okre la odst p elementu według kolejno ci: górna, prawa, dolna, lewa border-top-width Okre la szeroko border-rightwidth Okre la szeroko {padding-left: 7%} ś procent, wszystkie punkt (pt), elementy inch (in), centymetr (cm), wzgl dem (em), piksel (px) {padding: 2em 1em 3em 4em} thin, wszystkie medium, elementy thick, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) {border-top-width: thin} thin, wszystkie medium, elementy thick, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) {border-right-width: medium} ś ć ś ć prawej granicy (ramki) elementu ę ę ś górnej granicy (ramki) elementu ś ę ę ś ę ę padding-left ś ś ć dolnej granicy (ramki) elementu ś ś ć lewej granicy (ramki) elementu thin, medium, thick, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) wszystkie elementy {border-bottom-width: thick} thin, medium, thick, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) wszystkie elementy {border-left-width: 3px} Okre la szeroko border-leftwidth Okre la szeroko border-width Okre la szeroko granicy (ramki) elementu według kolejno ci: górna, thin, medium, prawa, dolna, lewa thick, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) border-color Okre la kolor granicy (ramki) elementu border-style Okre la styl granicy (ramki) elementu wszystkie elementy {border-width: thin thick medium thick} wszystkie elementy {border-color: red} none, dotted, dashed, solid, double, groove, ridge, inset, outset wszystkie elementy {border-style: double} ś ć nazwa koloru, warto hex ś ś ę ś ć ś ś ę ę border-bottomwidth ś ś ć , kolor i styl górnej granicy (ramki) elementu ś ś ć , kolor i styl prawej granicy (ramki) elementu ś ś ć , kolor i styl dolnej granicy (ramki) elementu ś ś ć , kolor i styl lewej granicy (ramki) elementu ś ś ć ś ć border-top Okre la szeroko border-right Okre la szeroko border-bottom Okre la szeroko border-left Okre la szeroko border Okre la szeroko , kolor i styl granicy (ramki) elementu według kolejno ci: górna, prawa, dolna, lewa width Okre la szeroko height Okre la wysoko border-rightwidth, border-style, color wszystkie elementy {border-right: } border-bottomwidth, border-style, color wszystkie elementy {border-bottom: } border-left-width, wszystkie elementy {border-left:} border-style, color elementu (np. grafiki) auto, procent, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) elementy b d ce blokiem {width: 80px} elementu (np. grafiki) auto, punkt (pt), inch (in), centymetr (cm), wzgl dem (em), piksel (px) elementy b d ce blokiem {height: 170px} left, right, none wszystkie elementy {float: left} ą ę ę ć ś ś ę ą wszystkie elementy {border: } ę border-width, border-style, color ś ś border-top-width, wszystkie elementy {border-top: thin blue solid} border-style, color float clear none, left, right, both wszystkie elementy {clear: right} ą ę ę ć Okre la w jaki sposób nale y obchodzi si z odst pami wewn trz normal, pre, elementu nowarp Ŝ white-space ś Okre la w jaki sposób dany element ma by wy wietlony ę wszystkie elementy Przykład {display: none} elementy b d ce blokiem {white-space: pre} ą ś block, inline, list-item, none display Odnosi si do ę Warto ć Opis ś Wła ciwo ć ś ć ś ś Klasyfikacja list-style-type disc, elementy z display = listcircle, item square, decimal, lowerroman, upperroman, lower-alpha, upper-alpha, none {list-style-type: lower-roman} list-style-image adres URL, none elementy z display = listitem {list-style-image: url(rysunek.gif)} list-styleposition inside, outside elementy z display = listitem {list-style-position: outside} list-style disc, elementy z display = listcircle, item square, decimal, lowerroman, upperroman, lower-alpha, upperalpha, none, inside, outside, adres URL, none {list-style: circle outside} Grupowanie Je eli kilka selektorów posiada te same deklaracje, to mo na je zgrupowana w jedn deklaracj , a poszczególne elementy b d oddzieli przecinkami. Na przykład: H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif } mo na zapisa równie jako: H1, H2, H3 { font-family: sans-serif } Atrybuty selektorów CSS2 pozwala autorom zaw a opisy wygl du poszczególnych elementów. Na przykład mo na opisa wygl d elementów o konkretnych atrybutach zdefiniowanych w dokumencie. Atrybuty selektorów mog wygl da nast puj co: [att] kiedy element ma atrybut 'att' i jak kolwiek jego warto [att=val] kiedy warto . atrybutu 'att' jest równa 'val'. [att~=val] kiedy warto atrybutu 'att' jest słowem lub zbiorem słów oddzielonych 'spacj ', a jedno z tych słów jest równe warto ci 'val'. Warto 'val' nie mo e zawiera 'spacji'. [att|=val] kiedy warto atrybutu 'att' rozpoczyna si wyrazem okre lonym przez warto 'val'. Dla przykładu, poni sza instrukcja dotyczy wszystkich znaczników H1, które maj okre lony atrybut title: H1[title] { color: blue; } Poni szy przykład dotyczy przypadku, kiedy znacznik SPAN musi posiada warto atrybutu class: example SPAN[class=example] { color: blue; } Inny przykład pokazuje wyst powanie dwóch atrybutów w znaczniku SPAN: SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; } Poni szy przykład pokazuje jak ukry wszystkie elementy, których warto równa 'fr' (tzn. kiedy j zyk jest francuski): atrybutu LANG jest *[LANG=fr] { display : none } Poni szy przykład pokazuje wykorzystanie "|=" i dotyczy znaczników, których warto LANG rozpoczynaj si od 'en' (np.: 'en', 'en-US', 'en-cockney'): *[LANG|="en"] { color : red } atrybutu Klasy <style> .nazwa_klasy1 {definicja_stylu} element.nazwa_klasy2 {definicja_stylu} </style> Odwołanie do tak zadeklarowanych klas: <dowolny_znacznik class="nazwa_klasy1"> <element class="nazwa_klasy2"> W opisie wygl du u ytym w HTML autorzy mog u ywa kropki (.) jako alternatywnego rozwi zania w stosunku do "~=" w przypadku atrybutu o nazwie class. Czyli, DIV.wartosc jest równowa ny zapisowi DIV[class~=wartosc]. Na przykład, mo na przypisa informacj o wygl dzie do wszystkich elementów, których atrybut class~="wartosc": *.wartosc { color: green } lub inaczej: .wartosc { color: green } Poni szy przykład dotyczy tylko znacznika <code>, którego atrybut class~="wartosc": code.wartosc { color: green } Wykonanie tej instrukcji w pierwszej linii poni szego dokumentu HTML nie spowoduje ustawienia koloru tekstu na zielony, za w drugiej linii tak: <code>Ten tekst nie jest w kolorze zielonym.<code> <code class="wartosc">Ten tekst jest w kolorze zielonym.</code> W przypadku wi kszej ilo ci warto ci atrybutu class, ka da warto musi by oddzielona kropk ".". Poni szy przykład pokazuje instrukcj , w której znacznik P powinien mie za warto ci atrybutu class wyrazy: wart1 i wart2 oddzielone klawiszem spacji: P.wart1.wart2 { color: green} Instrukcja ta zadziała w przypadku, gdy class="wart1 jest jakas tam i wart2 tez", ale nie zadziała je eli class="wart1 jest jakas tam". Identyfikatory Dzi ki identyfikatorom dany styl mo na przypisa tylko do okre lonych elementów. Deklaracja styli przy u yciu identyfikatorów: <style> #nazwa_id1 {definicja_stylu} element#nazwa_id2 {definicja_stylu} </style> Odwołanie do tak zadeklarowanych identyfikatorów: <dowolny_znacznik id="nazwa_id1"> <element id="nazwa_id2"> Selektory potomne Czasami autorzy chc wyró ni elementy, które zawieraj si wewn trz innych elementów w dokumencie (np. element I, który znajduje si w elemencie P). Nast puj ce deklaracje: Deklaracja: p i{color:cyan; font-weight:bold;} B dzie wykorzystywana przez element i, pod warunkiem e znajduje si on bezpo rednio w ciele znacznika p np. <p>tekst<i>tekst</i>tekst</p> Deklaracja: p * i{color:cyan; font-weight:bold;} B dzie wykorzystywana przez element i, pod warunkiem e znajduje si on w ciele znacznika p (wcze niej mo e wyst powa jeszcze w ciele innego znacznika) np. <p>tekst<b>tekst<i>tekst</i>tekst</b>tekst</p> Selektor dziecka Selektor 'dziecko' wyst puje wtedy, gdy znacznik 'dziecko' znajduje si wewn tz innego znacznika. Np. <h1> tekst<h3>tekst </h3>tekst </h1> Selektor 'dziecko' składa si z dwóch lub wi cej selektorów oddzielonych znakiem ">". Poni sza instrukcja ustawia wygl d wszystkich znaczników P, które s 'dzie mi' w stosunku do znacznika BODY: BODY > P { line-height: 1.3 } Poni szy przykład przedstawia kombinacj selektorów potomnych i selektorów 'dzieci': DIV OL>LI P Opis: w tym przypoadku znacznik P jest elementem potomnym w stosunku do LI; znacznik LI musi by 'dzieckiem' znacznika OL; znacznik OL musi by elementem potomnym w stosunku do DIV. Selektor uniwersalny Warto ci uniwersalne mo emy nadawa na poziomie BODY albo stosuj c uniwersalny selektor z gwiazdk : * { color : red } /* cały tekst b dzie czerwony */ *.classname {color : red } /* wszystkie elementy o klasie classname b d czerwone */ H1 * PRE { color:red } /* wszystkie bloki PRE zawarte w H1 b d czerwone */ k t ś s e c e y o m t j ą i k u f d S S C l e t y s e w a o w t d s P o Atrybut Opis atrybutu Warto ci krój pisma np. Tahoma, Arial, Times New Roman font-style styl czcionki normal, italic, oblique font-variant wariant czcionki normal, small-caps font-weight waga kroju lighter, normal, bold, bolder, warto ci liczbowe od 100 do 900 font-size rozmiar czcionki warto ci liczbowe, np. 12px, 9 pt ś ś font-family ś Własno ci czcionek ś Parametry tekstu Atrybut Opis atrybutu Warto ci warto ci liczbowe letter-spacing odst p mi dzy znakami warto ci liczbowe text-decoration dekoracja tekstu underline, overline, strikethrough (przekre lony) vertical-align pionowe ustawienie tekstu bottom, middle, top, text-top, textbottom, baseline, sub, super, warto ci procentowe text-align poziome ustawienie tekstu left, center, right, justify (wy rodkowany), warto ci procentowe text-transform transformacja tekstu np. na du e litery = uppercase; capitalize, lowercase, none text-indent wielko text-height wysoko ś ś ś ć warto ci liczbowe Ŝ linii ś ę ć ś ś wci cia tekstu warto ci liczbowe ć Ŝ Ŝ ś Ŝ ś ś ś ś ę ę ę odst p mi dzy wyrazami ę word-spacing ą ą ą Za pomoc własno ci przedstawionych w powy szej tabeli mo emy dowolnie formatowa tekst u ywaj c naprzykład nastepuj cych selektorów: p, text, h1...h6, a, div, li, blockquote, code itd. Przykłady: p { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: normal; color: #002448; text-decoration: none} li { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: normal; color: #330099; text-decoration: none} h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; font-style: normal; font-weight: bold; color: #2C2C43; text-decoration: none} code { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-style: normal; font-weight: bold; color: #666666; text-decoration: none} Kolorowe tło pierwszy akapit drugi akapit trzeci akapit W ramach znacznika <p> wstaw styl definiuj cy kolor tła: style='background:#CCCC99' przykładowy kod html: <p style='background:#CCCC99'>pierwszy akapit<br></p> <p style='background:#E0E0E0'>drugi akapit<br></p> <p style='background:#9DA2BF'>trzeci akapit<br></p> Styl ten poprawnie interpretowany jest przez IE, natomiast Netscape interpretuje go cz ciowo. Aby uzyska ten efekt nale y w sekcji HEAD wstawi poni szy znacznik styli wraz z kilkoma definicjami: <style type="text/css"> <!-a:link { font-family: arial; text-decoration: none; color: blue; } a:visited { font-family: arial; text-decoration: none; color: blue; } a:hover { color: red; font-family: arial; text-decoration: none; } a:active { font-family: arial; text-decoration: none; color: blue; } --> </style> ZNACZENIE POSZCZEGÓLNYCH STYLI: • • • • a:link - oznacza kolor i atrybuty linku "normalnego", a:visited - okre la kolor i atrybuty linku odwiedzonego, a:hover - okre la kolor i atrybuty linku pod wietlonego, a:active - okre la kolor i atrybuty linku aktywnego. ATRYBUTY: • • • • font-family: - okre la krój czcionki (np. Arial, Verdana), text-decoration: - okre la czy link ma by podkre lony (underline), czy nie podkre lony (none), color: - okre la kolory (np. Red, Blue, #FFCC00), font-size: - rozmiar czcionki (np. np. 12px, 9 pt). Tworzenie pod wietlanych linków przedstawione zostało na stronie pod wietlane linki. W celu u ycia kilku, ró ego rodzaju pod wietlanych linków, nale y w kodzie stylu linku zdefiniowa klasy: Kod podstawy: (definiowanie stylu podstawowych linków) a:link {} a:active {} a:visited {} a:hover {} Kod zawieraj cy klasy: (definiowanie stylów ró nych linków) a.klasa:link {} a.klasa:active {} a.klasa:visited {} a.klasa:hover {} gdzie: klasa - zdefiniowana przez Ciebie (dowolna, ale zaczynaj ca si od litery) nazwa klasy. KOD ODNO NIKA WYKORZYSTUJ CEGO ZDEFINIOWAN KLAS : <a href="strona.html" class="klasa">odno nik</a> ś PRZYKŁADY: ś pod wietlany link I, pod wietlany link II A.right:link { color: #336699; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; line-height: normal; text-decoration: none} A.right:visited { color: #9999FF; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; text-decoration: none} A.right:hover { color: #996699; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; text-decoration: none} A.right:active { color: #009999; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-decoration: none} A.left:link { font-family: "Courier New", Courier, mono; font-size: 10pt; font-style: normal; font-weight: bold; color: #CC0000; text-decoration: none} A.left:hover { font-family: "Courier New", Courier, mono; font-size: 10pt; font-style: normal; font-weight: bold; color: #FF9900; text-decoration: none} A.left:visited { font-family: "Courier New", Courier, mono; font-size: 10pt; font-style: normal; font-weight: bold; color: #336600; text-decoration: none} A.left:active { font-family: "Courier New", Courier, mono; font-size: 10pt; font-style: normal; font-weight: bold; color: #009999; text-decoration: none} Gdzie right i left to dwie klasy Uwaga!!! Istotna jest kolejno aby działała funkcja hover - je eli umie cimy definicj hover po visited to efekt hover b dzie widoczny tylko przed klikni ciem.