Sieci Komputerowe i Technologie Internetowe

Materiał pomocniczy na podstawie

fragmentu

t w

ykła

ł du:

:

KASKADOWE ARKUSZE STYLÓW

CSS (ang. Cascading Style Sheets) Opracowanego przez dr inż. Dariusza Trawickiego

Gdańsk 2009

1

Tło

•

Tło jednolite

Kolor tła ustala właściwość background-color.

background-color: red;

background-color: transparent; /*tło przezroczyste*/

•

Grafika w tle

Grafikę w tle ustala właściwość background-image.

background-image: url(./sciezka/tło.png);

/*ścieżka jest zawsze względna do lokalizacji arkusza stylów*/

2

Tło c.d.

• Grafika w tle c.d.

Poprzez użycie background-repeat. Właściwość ta może przyjmować war

a to

t ści

c :

i

: r

ep

e ea

e t (graf

a ik

i a

a j

es

e t

t p

owta

t r

a za

z n

a a,

a w

yp

y eł

e n

ł ia

i

a c

a

c ł

a ą

ł

ą powie

i r

e zc

z h

c nię

i

ę

tła – zachowanie domyślne), repeat-x (g. jest powtarzana tylko w poziomie), repeat-y (g. jest powtarzana tylko w pionie), no-repeat (g.

jest wstawiana tylko w jednym miejscu).

3

Używając background-position możemy ustalić poziomą i pionową pozycję grafiki. Lewy górny róg jest wartością domyślną. Właściwość ta może przyjmować:

• jedną wartość:

o center - obrazek na środku (w centrum),

o left - obrazek po lewej,

o right - po p

ra

r w

a e

w j

e ,

o top - na górze,

o bottom - na dole,

o jednostka długości - odległość od lewej krawędzi,

• dwie wartości (oddzielone spacją):

o left top - lewy-górny róg,

o left bottom - lewy-dolny róg,

o right top - prawy-górny róg,

o right bottom - prawy-dolny róg,

o dwie jednostki długości, z których pierwsza oznacza odległość od lewej krawędzi, a druga - od górnej.

4

• Grafika w tle c.d. (przykłady)

background-position: 0 0; /*lewy górny róg*/

background-position: 100% 100%; /*prawy dolny róg*/

background-position: 10px 5px; /*grafika odsunięta o 10 pikseli od lewej i o 5 pikseli od

góry*/

background-position: 50% 0; /*grafika umieszczona na górze i wyśrodkowana w poziomie*/

5

• Grafika w tle c.d. (przykłady)

Przez użycie background-attachment uzyskujemy możliwość przesuwanie grafiki. Wartości dostępne w ramach tej właściwości to: fixed (tło jest nieruchome względem okna przeglądarki), scroll (tło przesuwa się razem ze stroną).

Skrócony zapis właściwości tła: background.

background: red url(bg_plik.png) 5px 100% no-repeat; 6

Style tekstu

• Kolor

Kolo

l r t

e

t k

e stu

t (

w t

y

t m

y

m równie

i ż

e

ż d

omy

m ś

y ln

l y

y k

olo

l r d

la

l

a p

odkreś

e le

l n

e i

n a

i

a i

i

obramowania elementu ) ustala właściwość color.

p {color: gray}

7

Style tekstu c.d.

• Krój pisma

Krój pisma ustala właściwość font-family. Wybór kroju pisma określa się listą krojów ułożoną wg kolejności od najbardziej pożądanej. Ostatni na liście powinien się znaleźć krój typu:

– sans-serif - krój bezszeryfowy, np. Arial,

– serif - krój szeryfowy, np. Times,

– monospace - krój o stałej szerokości znaków, np. Courier font-family: Verdana, Helvetica, sans-serif;

8

Style tekstu c.d.

• Wielkość pisma

Wielkość pisma ustala właściwość font-size. Stosowane jednostki ab

a solu

l tn

t e

e t

o

t x

x-sma

m l

a l

l ,

l x

-sma

m l

a l

l ,

l s

ma

m l

a l

l ,

l me

m d

e iu

i m,

m la

l r

a ge,

e x

-la

l g

a re,

e x

x-

large. Dopuszczalne są pozostałe jednostki CSS (pt, ex, em, px itd.).

body {font-size: 0.9em;}

9

Style tekstu c.d.

• Grubość pisma

Grubość pisma ustala właściwość font-weight. Podstawowe wartości dla grubości to normal (zwykła) oraz bold (wytłuszczona).

p.wazne {font-weight: bold;}

10

Style tekstu c.d.

• Pochylenie

Pochylenie pisma ustala właściwość font-style. Właściwość tej można przypisać jedną z dwóch wartości: normal (normalna) oraz it

i a

t li

l c

i (kursyw

y a)

a .

p.kursywa {font-style: italic;}

11

Style tekstu c.d.

• Wariant pisma

Wariant pisma pisma ustala właściwość font-variant, której możemy przypisać wartość small-caps (kapitaliki), która zamienia litery małe na

a w

ie

i l

e k

l ie

i ,

e a

l

a e

l

e z

z za

z c

a h

c owan

a ie

i m

e

m w

ys

y okośći

ć

i l

i

l t

i e

t r

e m

a

m ł

a y

ł c

y h

c .

12

Style tekstu c.d.

• Odstęp między literami

Odstęp między literami ustala właściwość letter-spacing. Ustawiona na 0 (zero) oznacza normalny odstęp. Dopuszczalne są wartości ujem

e n

m e.

e

h1 {letter-spacing: 0.3ex;}

13

Style tekstu c.d.

• Odstęp między słowami

Odstęp między słowami ustala właściwość word-spacing.

Dopuszczalne są wartości ujemne.

14

Style tekstu c.d.

• Wysokość linii

Wysokość linii ustala właściwość line-height. Może przyjmować wartości bez jednostki, które oznaczają krotność wysokości linii te

t k

e stu

t . D

opuszc

z z

c a

z l

a n

l e

e j

es

e t

t o

kreś

e le

l n

e ie

i

e w

ys

y okości

c

i z

a

z

a pomo

m cą

c

ą w

ar

a to

t ści

c

i z

z

jednostką.

h3 {line-height: 1.25}

/*Wysokość linii będzie 1¼ wysokości tekstu*/

15

Style tekstu c.d.

• Zapis skrócony

Właściwości opisujące styl tekstu można połączyć wg schematu: fo

f n

o t

n :

t

: s

t

s y

t l

y

l w

a

w r

a i

r a

i n

a t

n

t g

r

g u

r b

u o

b ś

o ć

ś

ć w

i

w e

i l

e k

l o

k ś

o ć

ś /

ć w

/ y

w s

y o

s k

o o

k ś

o ć

ś -

ć l

- i

l n

i i

n i

i

i k

r

k ó

r j

ó -

j p

- i

p s

i m

s a

m ,

a

, k

r

k ó

r j

ó -

j p

- i

p s

i m

s a

m

16

Style tekstu c.d.

• Dekoracja tekstu

Dodanie ozdobników tekstu umożliwia właściwość text-decoration.

Może ona przyjmować jedną z wartości: none (zwyczajna), blink (mi

m g

i aj

a ąc

ą y

c

y t

e

t k

e st)

t , l

i

l n

i e-

e th

t rough

g (prze

z k

e reś

e lo

l n

o y

y t

e

t k

e st)

t , o

ve

v r

e li

l n

i e

(nakreślenie), underline (podkreślenie).

#menu a {text-decoration:none;}

#menu a:hover {text-decoration:underline;}

17

Style tekstu c.d.

• Położenie tekstu wewnątrz elementu blokowego

Położenie tekstu wewnątrz elementu blokowego określa właściwość text-align. Może ona przyjmować jedną z wartości: left (wyrównanie do l

e

l w

e ej

e ), r

ig

i ht (do p

raw

a ej

e ), c

e

c n

e te

t r

e (wyś

y rodkowan

a y

n )

y ,

, j

u

j sti

t f

i y

f

y

(rozciągnięcie tekstu do obu krawędzi).

p.uwaga {text-align:center;}

18

Style tekstu c.d.

• Położenie tekstu w linii tekstu

Położenie tekstu w linii tekstu określa właściwość vertical-align. W

przypadku elementów liniowych ( inline) wyrównuje zawartość dan

a eg

e o w

zg

z lę

l d

ę em

e

m l

i

l n

i ii

i

i e

l

e e

l m

e e

m n

e tu

t n

ad

a rzę

z d

ę neg

e o

o (

np. <

s

< tr

t ong>

>

względem linii w <p>). Może ona przyjmować jedną z wartości: baseline (wyrównuje linie bazow), middle (wyśrodkowuje element w pionie), sub i super (pozycja subskryptu i superskryptu), % lub długość.

19

Style tekstu c.d.

• Wcięcie akapitowe

Wcięcie pierwszej linii bloku (np. dla <p>) określa właściwość text-indent. Dopuszczalne są wartości ujemne.

p {text-indent: 1em;}

20

Style tekstu c.d.

• Kontrola wielkości liter

Wielkość wyświetlanych liter może być kontrolowana przez właściwość text-transform. Może ona przyjmować jedną z wartości: none (bez zmian), capitalize (każdy wyraz zaczyna się od wielkiej litery), uppercase (wyświetlanie wielkimi literami), lowercase (małymi literami).

21

Style list

• Rodzaj wypunktowania

Rodzaj wypunktowania ustala właściwość list-style-type. Może ona przyjmować jedną z wartości: none (bez wypunktowania), disc, circle i

i s

quare

e (

nad

a aj

a ąc

ą e

c

e w

yp

y unkto

t wan

a iu

i

u k

szt

z a

t ł

a t

ł

t o

dpowie

i d

e nio

i

o d

ys

y ku, k

oła

ł

a

lub kwadratu).

Wypunktowania list numerowanych (<ol>) mogą być m.in. dziesiętne ( decimal), rzymskie ( upper-roman) literami alfabetu łacińskiego ( lower-alpha) lub greckiego ( lower-greek).

22

Style list c.d.

• Graficzne wypunktowanie

Graficzne wypunktowanie ustala właściwość list-style-position. Może ona przyjmować jedną z wartości: outside (wypunktowanie umi

m e

i s

e zc

z z

c o

z ne

e z

o

z sta

t n

a ie

i

e n

a

a z

e

z w

e nąt

ą r

t z

z l

i

l s

i ty

t )

y , i

n

i sid

i e (wyr

y óżn

ż ik

i i

i w

ew

e nąt

ą r

t z

z

wykazu).

li {list-style: disc url(wyroznik.png);}

23

Elemnety pływające

Do tworzenia obiektów pływających przy

lewej lub prawej krawędzi elementu, w

którym się znajdują służy właściwość

flo

l at . Przy

z k

y ła

ł d

a owym

y

m z

a

z s

a to

t sowan

a ie

i m

e

m f

l

f o

l at

jest wstawianie ilustracji i adnotacji z boku

tekstu - podobnie jak opływane ramki

tekstowe i grafiki w programach do składu

tekstu.

img.float_left {float: left;}

24

Pozycjonowanie

Pozycjonowanie umożliwia rozmieszczenie

elementów w ramach tworzonej strony.

Specyfikacja CSS rozróżnia następujące metody pozycjonowania: 1.

domyślne - statyczne,

2.

bezwzględne,

3.

względne,

4.

ustalone.

25

Pozycjonowanie c.d.

• Pozycjonowanie statyczne

( normalny przepływ treści)

Elementy układają się kolejno jeden pod drugim.

Obecność elementu w dokumencie odsuwa inne

elementy, tak że żadne na siebie nie zachodzą.

W CSS jest to zachowanie domyślne i określane jest pozycją statyczną (position: static).

p.statyczne {position: static;}

26

Pozycjonowanie c.d.

• Pozycjonowanie bezwzględne

Pozycjonowanie bezwzględne polega na określaniu dokładnego położenia elementu względem elementu zawierającego(*) (domyślnie <body>).

p {position:absolute; top:0; right:0;}

/*prawy górny róg akapitu będzie w prawym górnym rogu elementu zawierającego*/

position:absolute; left: 50px; bottom: 25%;

/*lewy dolny róg elementu będzie odsunięty 50 pikseli od lewej i 25% od dołu*/

(*) tu w znaczeniu: najbliższy nadrzędny element, który ma position inny, niż (domyślny) static 27

Pozycjonowanie c.d.

• Pozycjonowanie względne

Pozycjonowanie względne polega na określaniu położenia względnego elementu w odniesieniu do jego domyślnej lokalizacji.

p {position: relative; topt:1cm; left:1cm;}

28

Pozycjonowanie c.d.

• Pozycjonowanie stałe

Pozycjonowanie stałe skutkuje tym, iż element, którego dotyczy zawsze pozostaje w widocznej części okna przeglądarki.

Jes

e t

t r

ównoważ

a n

ż e

e p

osit

i i

t o

i n:ab

a so

s lu

l te

t ,

e

, z

z ty

t m

y

m wyj

y ąt

ą k

t ie

i m

e ,

m ż

e

ż

e za

z m

a i

m a

i s

a t

t

pozycjonować względem elementu zawierającego zawsze pozycjonuje względem okna przeglądarki.

p {position: fixed; top:10px; width:180px;}

29