css.pdf

5DIDÆ 6SU JD =62 QU Z 6]F]HFLQLH

3RGVWDZ\ M ]\ND +70/

NFLH SURMHNWRZDQLD ZáDVQHJR VHUZLVX Z M ]\NX +70/ QDSRWNDP\ SUREOHP ] RNUH OHQLHP

precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu. Te problemy

PRJ E\ü UR]ZL ]DQH SU]\ SRPRF\ VW\OyZ

Styl to po prostu zestaw parametrów do

W\F] F\FK F]FLRQNL

$E\ ]DVWRVRZDü VW\O Z GRNXPHQFLH +70/ PXVLP\ ZSURZDG]Lü SRQL*V]\ ]DSLV

DNDSLWyZ NWyU\ SU]\SLVDü PR*QD GR RNUH ORQHJR IUDJPHQWX WHNVWX

VW\OH W\SH WH[W FVV !

VW\OH!

6DP VW\O GHILQLXMHP\ SRPL G]\ GUXJLP D WU]HFLP ZLHUV]HP L PD RQ SRVWDü

VHOHNWRU ^ZÆD FLZR ü ZDUWR ü ZÆD FLZR ü ZDUWR ü ‘

gdzie selektor

R]QDF]D GRZROQ\ ]QDF]QLN NWyUHPX FKFHP\ SU]\SLVDü MDNLH ZáDVQR FL QS

3 ^ IRQW IDPLO\ +HOYHWLFD IRQW VL]H SW FRORU EOXH‘

8/ ^ IRQW ZHLJKW EROG FRORU )) ‘

$E\ XáDWZLü 7RELH SUDF ]H VW\ODPL ]HEUDáHP QDMSRSXODUQLHMV]H ZáDVQR FL VW\OL L XPLH FLáHP MH Z SOLNX

CSS.rtf

NWyU\ ]QDMGXMH VL QD G\VNX

G w folderze zadania\html .

ZADANIE 30

Otwórz teraz w edytorze HTML plik wstep.html

]QDMGXM F\ VL QD G\VNX

G w katalogu

zadania/internet

7ZRLP FHOHP E G]LH XVWDZLHQLH QDVW SXM F\FK VW\OL GOD ]QDF]QLNyZ

NRORU WáD QD ]LHORQ\ WáR XVWDZ QD GRZROQ\ REUD]HN JUDILF]Q\ ]QDMGXM F\ VL Z W\P

samym katalogu co plik wstep.html (lub inny),

SR]\FMH WáD Z\ URGNXM L XVWDO EUDN SRZWDU]DQLD WáD

Â P –

NRORU F]FLRQNL XVWDO QD ELDá\ Z\UyZQDQLH WHNVWX

– wyjustowane, rodzina czcionek – Arial,

ZLHONR F SW

Â H1 –

W\WXá VWRSQLD SLHUZV]HJR XVWDO QD *yáW\P WOH

Â UL – ustal obrazek zielony.gif

MDNR Z\Uy*QLN WáD

:VND]yZND 0R*HV] SRVáX*\ü VL

Edytorem Styli

NWyU\ ]QDMGXMH VL Z PHQX

Generatory/Edytor

Styli CSS

styl.css

ZyZF]DV MH OL FKFHP\ JR GRá F]\ü GR QDV]HJR GRNXPHQWX WR Z QDJáyZNX QDV]HJR GRNXPHQWX

XPLHV]F]DP\ VSHFMDOQ\ RGV\áDF]

OLQN KUHI VW\O FVV UHO VW\OHVKHHW W\SH WH[W FVV !

Wówczas plik styl.css

PD SRVWDü

VW\OH W\SH WH[W FVV !

VHOHNWRU ^ZÆD FLZR ü ZDUWR ü ZÆD FLZR ü ZDUWR ü ‘

VW\OH!

Kaskadowe arkusze stylów (CSS)

W tra

Â BODY –

ZADANIE 31

'HILQLFM VW\OX PR*HP\ UyZQLH* XPLH FLü Z RVREQ\P SOLNX VW\O ]HZQ WU]Q\ QS R QD]ZLH

5DIDÆ 6SU JD =62 QU Z 6]F]HFLQLH

3RGVWDZ\ M ]\ND +70/

ZADANIE 32

Na dysku G w katalogu zadania/internet

]QDMGXMH VL IROGHU

serwis

] SURMHNWHP VHUZLVX ED]XM F\P QD

QD VZyM G\VN VLHFLRZ\ D QDVW SQLH GRGDM GR ND*GHJR SOLNX +70/

RGV\áDF] GR GHILQLFML VW\OX ]HZQ WU]QHJR ]QDMGXM FHJR VL Z SOLNX

style.css

-HVW RF]\ZLVWH *H Z ZL NV]\P GRNXPHQFLH VNáDGDM F\P VL ] ZLHOX DNDSLWyZ QLH ZV]\VWNLH DNDSLW\

PXV] PLHü WDNL VDP Z\JO G QS F]FLRQND 7LPHV R UR]PLDU]H SXQNWyZ Z NRORU]H F]DUQ\P 0R*H VL

SU]HFLH* ]GDU]\ü *H QLHNWyUH DNDSLW\ E G]LHP\ FKFLHOL Z\Uy*QLü SRJUXELHQLHP LQQH ]D]QDF]\ü

odmiennym kolorem, a jeszcze inne -

PQLHMV] F]FLRQN 7H QLHW\SRZH DNDSLW\ PR*HP\ áDWZR

]GHILQLRZDü ]D SRPRF NODV L W\ONR Z RGSRZLHGQLP PLHMVFX SU]\ZRá\ZDü VWRVRZQH GHILQLFMH SRGF]D

JG\ JURV WHNVWX E G]LH Z\ ZLHWODQH ]D SRPRF SRGVWDZRZHJR IRUPDWRZDQLD SU]HZLG]LDQHJR GOD DNDSLWX

1D SU]\NáDG GHILQLFMD VW\OyZ DNDSLWyZ Z F] FL QDJáyZNRZHM GRNXPHQWX PR*H PLHü WDN SRVWDü

3 ^IRQW IDPLO\ +HOYHWLFD IRQW VL]H SW‘

3 XZDJL ^IRQW IDPLO\ +HOYHWLFD IRQW VL]H SW IRQW ZHLJKW EROG‘

3 LVWRWQH ^IRQW IDPLO\ 7LPHV IRQW VL]H SW FRORU UHG‘

3 SU]\SLV\ ^IRQW IDPLO\ +HOYHWLFD IRQW VL]H SW‘

1DWRPLDVW Z VDP\P WHN FLH E G]LHP\ SU]\ZRá\ZDü NODV\ ]D SRPRF SROHFHQLD

Utwórz teraz nowy dokument HTML. W tym dokumencie zdefiniujemy klasy dla znacznika TD, tak aby

RWU]\PDü IODJL QLHNWyU\FK SD VWZ WDN MDN QD U\VXQNX SRQL*HM

$ RWR SU]\NáDGRZH NODV\

• TD –

XVWDZ V]HURNR ü QD ]D Z\VRNR ü QD SLNVHOL NODVD ED]RZD

• TD.niebieski – kolor niebieski

• TD.czerwony – kolor czerwony

• TD.czarny – kolor czarny

• TD.zolty –

• TD.zielony – kolor zielony

ûZLF]

NRORU *yáW\

enie zapisz jako flagi.html

stylach CSS . Skopiuj ów folder

ZADANIE 33

- ]\N &66 SU]HZLGXMH WZRU]HQLH W]Z NODV NWyUH SR]ZDODM ]Uy*QLFRZDü WHQ VDP HOHPHQW ]QDF]QLN

]DOH*QLH RG SRMDZLDM F\FK VL RNROLF]QR FL

S FODVV NRQNUHWQDBNODVD!$NDSLW S!

=ZUyü XZDJ *H ] GHILQLFML NODV NRU]\VWDOL P\ MX* Z SRSU]HGQLP üZLF]HQLX

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: