Arkusze styli zwi kszaj kontrol nad wygl dem strony, poprzez zastosowanie szeregu opcji przypisywanych do danych elementów samego HTML'a.

Transkrypt

1 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 niejako wi kszo atrybutów znaczników HTML'a, dodaj c swoje 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.

2 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).

3 Składnia stylu Definicja stylu składa si z dwóch cz ci - selektorów okre laj cych 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 1: warto 1; własno 2: warto 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

4 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">

5 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

6 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.

7 Czcionka Wła ciwo Opis Warto Odnosi si do Przykład font-family font-style la typ czcionki nazwa czcionki la styl czcionki normal, italic, oblique font-variant normal, small-caps font-weight font-size font la grubo czcionki la rozmiar czcionki Zawiera w sobie wła ciwo ci dotycz ce czcionki normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, font-family, font-size, font-variant, font-weight, font-size {font-family: Arial} Przykład: Tekst {font-style: italic} Przykład: Tekst {font-variant: smallcaps} Przykład: TEKST {font-weight: bolder} Przykład: Tekst {font-size: 20px} Przykład: Tekst {font: 12pt sans-serif bold italic} Przykład: Tekst

8 Ŝ Tekst Wła ciwo Opis Warto Odnosi si do Przykład word-spacing letter-spacing textdecoration vertical-align la odległo la odległo mi mi la czy tekst ma by dzy wyrazami dzy literami podkre lony, przekre lony, itd. la poło enie tekstu w pionie wzgl dem elementu poprzedzaj cego normal, wzgl dem (em), normal, wzgl dem (em), none, underline, overline, line-through, blink baseline, sub, super, top, text-top, middle, bottom,procent {word-spacing: 1.2em} Przykład: Tekst {letter-spacing: 0.2em} Przykład: T e k s t {text-decoration: linethrough} Przykład: Tekst wewn trzne {vertical-align: top}

9 Ŝ text-transform la sposób przemiany tekstu text-align text-indent line-height la poło la odległo la odległo enie tekstu wewn trz elementu od lewego marginesu mi dzy dwoma s capitalize, uppercase, lowercase, none left, right, center, justify procent, wzgl dem (em), siednimi liniami normal, liczba, procent, wzgl dem (em), b b d d {text-transform: uppercase} Przykład: TEKST ce blokiem {text-align: center} ce blokiem {text-indent: 20%} {line-height: 120%}

10 Kolor i tło Wła ciwo Opis Warto Odnosi si do Przykład color la kolor czcionki nazwa koloru, warto hex {color: red} Przykład: Tekst {color: rgb(0,0,255)} Przykład: Tekst background-color la kolor tła nazwa koloru, warto hex {background-color: #FF5500} backgroundimage la grafik pełni ca rol tła none, adres URL {background-image: url(tlo.gif)} backgroundrepeat la powtrzalno tła repeat, repeat-x, repeat-y, no-repeat {background-repeat: repeat-x} backgroundattachment la czy tło ma si przesuwa wraz z zawarto ci (scroll) czy ma by stałe (fixed) scroll, fixed {background-attachment: scroll} backgroundposition la pozycj pocz tkow tła [top, center, bottom], [left, center, right], procent, b d ce blokiem {background-position: 100% 30%}

11 background Zawiera w sobie wła ciwo ci dotycz ce tła backgroundcolor, backgroundimage, backgroundrepeat, backgroundattachment, backgroundposition {background: red url(tlo.jpg) left top norepeat}

12 Elementy kwadratowe Wła ciwo Opis Warto Odnosi si do Przykład margin-top margin-right margin-bottom margin-left la odległo la odległo la odległo la odległo od górnej kraw od prawej kraw od dolnej kraw od lewej kraw dzi strony auto, procent, wzgl dem (em), dzi strony auto, procent, wzgl dem (em), dzi strony auto, procent, wzgl dem (em), dzi strony auto, procent, wzgl dem (em), {margin-top: 3em} {margin-right: 4px} {margin-bottom: 13%} {margin-left: 4em}

13 margin la odległo dolna, lewa od kraw dzi strony według kolejno ci: górna, prawa, auto, procent, centymetr (cm), wzgl dem (em), {margin: 2em 3em 1em 4em} padding-top la górny odst p elementu procent, centymetr (cm), wzgl dem (em), {padding-top: 0.2em} padding-right la prawy odst p elementu procent, centymetr (cm), wzgl dem (em), {padding-right: 12px} paddingbottom la dolny odst p elementu procent, centymetr (cm), wzgl dem (em), {padding-bottom: 0.4em}

14 padding-left la lewy odst p elementu procent, wzgl dem (em), {padding-left: 7%} padding la odst p elementu według kolejno ci: górna, prawa, dolna, lewa procent, wzgl dem (em), {padding: 2em 1em 3em 4em} border-top-width la szeroko górnej granicy (ramki) elementu thin, medium, thick, wzgl dem (em), {border-top-width: thin} border-rightwidth la szeroko prawej granicy (ramki) elementu thin, medium, thick, wzgl dem (em), {border-right-width: medium}

15 border-bottomwidth la szeroko dolnej granicy (ramki) elementu thin, medium, thick, wzgl dem (em), {border-bottom-width: thick} border-leftwidth la szeroko lewej granicy (ramki) elementu thin, medium, thick, wzgl dem (em), {border-left-width: 3px} border-width la szeroko granicy (ramki) elementu według kolejno ci: górna, prawa, dolna, lewa thin, medium, thick, wzgl dem (em), {border-width: thin thick medium thick} border-color la kolor granicy (ramki) elementu nazwa koloru, warto hex {border-color: red} border-style la styl granicy (ramki) elementu none, dotted, dashed, solid, double, groove, ridge, inset, outset {border-style: double}

16 border-top border-right border-bottom border-left border width height la szeroko la szeroko la szeroko la szeroko, kolor i styl górnej granicy (ramki) elementu border-top-width, border-style, color, kolor i styl prawej granicy (ramki) elementu border-rightwidth, border-style, color, kolor i styl dolnej granicy (ramki) elementu border-bottomwidth, border-style, color, kolor i styl lewej granicy (ramki) elementu border-left-width, border-style, color la szeroko, kolor i styl granicy (ramki) elementu według kolejno ci: górna, prawa, dolna, lewa la szeroko la wysoko elementu (np. grafiki) elementu (np. grafiki) float left, right, none border-width, border-style, color auto, procent, wzgl dem (em), auto, wzgl dem (em), {border-top: thin blue solid} {border-right: } {border-bottom: } {border-left:} {border: } b d ce blokiem b d ce blokiem {width: 80px} {height: 170px} {float: left}

17 clear none, left, right, both {clear: right}

18 Ŝ Klasyfikacja Wła ciwo Opis Warto Odnosi si do Przykład display white-space la w jaki sposób dany element ma by la w jaki sposób nale y obchodzi elementu si wy z odst wietlony pami wewn trz block, inline, list-item, none normal, pre, nowarp list-style-type disc, circle, square, decimal, lowerroman, upperroman, lower-alpha, upper-alpha, none list-style-image adres URL, none z display = listitem list-styleposition inside, outside b z display = listitem z display = listitem d {display: none} ce blokiem {white-space: pre} {list-style-type: lower-roman} {list-style-image: url(rysunek.gif)} {list-style-position: outside}

19 list-style disc, circle, square, decimal, lowerroman, upperroman, lower-alpha, upperalpha, none, inside, outside, adres URL, none z display = listitem {list-style: circle outside}

20 Grupowanie Je eli kilka selektorów posiada te same deklaracje, to mo na je zgrupowana w jedn deklaracj, a poszczególne 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 }

21 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'.

22 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 example atrybutu class: 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, których warto atrybutu LANG jest równa 'fr' (tzn. kiedy j zyk jest francuski): *[LANG=fr] { display : none } Poni szy przykład pokazuje wykorzystanie " =" i dotyczy znaczników, których warto atrybutu LANG rozpoczynaj si od 'en' (np.: 'en', 'en-us', 'en-cockney'): *[LANG ="en"] { color : red }

23 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": lub inaczej: *.wartosc { color: green }.wartosc { color: green }

24 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".

25 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">

26 Selektory potomne Czasami autorzy chc wyró ni, 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>

27 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.

28 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 } /* o klasie classname b d czerwone */ H1 * PRE { color:red } /* bloki PRE zawarte w H1 b d czerwone */

29 mo wo Ŝ Ŝ Ŝ Ŝ t k s e t e c j k u fi d y S C e l t y es w t a d s P o Własno ci czcionek Atrybut Opis atrybutu Warto font-family 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 font-size rozmiar czcionki warto Parametry tekstu lighter, normal, bold, bolder, warto ci liczbowe od 100 do 900 ci ci liczbowe, np. 12px, 9 pt Atrybut Opis atrybutu Warto word-spacing letter-spacing text-decoration vertical-align text-align text-transform text-indent text-height odst p mi dzy wyrazami odst p mi dzy znakami dekoracja tekstu pionowe ustawienie tekstu poziome ustawienie tekstu transformacja tekstu wielko wysoko wci linii warto warto cia tekstu warto ci liczbowe ci liczbowe underline, overline, strikethrough (przekre lony) bottom, middle, top, text-top, textbottom, baseline, sub, super, warto ci procentowe left, center, right, justify (wy rodkowany), warto ci procentowe ci np. na du e litery = uppercase; capitalize, lowercase, none warto ci liczbowe ci liczbowe Za pomoc własno ci przedstawionych w powy szej tabeli mo emy dowolnie formatowa h1...h6, a, div, li, blockquote, code itd. tekst u ywaj c naprzykład nastepuj cych selektorów: p, text,

30 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}

31 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>

32 Styl ten poprawnie interpretowany jest przez IE, natomiast Netscape interpretuje go cz efekt nale y w sekcji HEAD wstawi poni szy znacznik styli wraz z kilkoma definicjami: ciowo. Aby uzyska ten <style type="text/css">  </style>

33 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).

34 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>

35 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.