tomas m >> tekstai >> cascading style sheets

„Cascading Style Sheets“

2002 09

Sukurti paprastą tinklapį nesunku. Daug sunkiau sulaukti lankytojų dėmesio ir teigiamų atsiliepimų. Dažna priežastis - prastas interneto svetainių apipavidalinimas. Sprendimas - pakopiniai stilių šablonai (Cascading Style Sheets; CSS), tinklapių išvaizdos pagrindas. CSS - neatskiriama didžiųjų portalų ir mažų asmeninių svetainių dalis.

CSS kūrėjai - „Pasaulio voratinklio konsorciumas“ (World Wide Web Consorcium; W3C). Ši organizacija kartu su didžiosiomis IT bendrovėmis kuria HTML ir kitus interneto standartus. Interneto naršyklių kūrėjai („Microsoft“, „Netscape“, „Opera Software“ ir t.t.) atsižvelgia ir pritaiko savo gaminius prie W3C rekomendacijų. Pirmasis CSS standartas pristatytas dar 1996 metais, antrasis - 1998 m. Stiliai vadinami pakopiniais, nes tai atitinka HTML dokumentų apipavidalinimo principą. Naudojant daug stilių, jie veikia pagal svarbą, tarsi pakopomis. Žinant, jog internetui nėra nė penkiolikos metų, CSS - sąlyginai senas ir pripažintas būdas paprasčiau ir tiksliau išdėstyti tinklapio turinį. Dažniausiai interneto dizaineriai CSS naudoja norėdami:

1. Nurodyti teksto dydį, šriftą, foną, spalvą, storį;

2. Nurodyti teksto lygiavimą, transformacijas, efektus;

3. Nurodyti fono paveiksliukų vietą;

4. Nurodyti slinkties juostų (scroll bar) spalvas;

5. Pakeisti daugelio HTML dokumentų išvaizdą, pakeičiant tik vieną CSS bylą;

6. Sumažinti internete publikuojamų dokumentų dydį;

Norint sukurti savo CSS ar HTML dokumentą, nereikia jokių ypatingų programų. Užtenka paprasčiausios tekstų redagavimo programos ir interneto naršyklės. Jeigu naudojate „Windows“, tikriausiai kompiuteryje yra „Notepad“ ir „Internet Explorer“. Kadangi CSS ir HTML - visuotinai pripažinti interneto standartai, galima apsieiti ir be brangių „Microsoft“ gaminių. Naudodami nemokamas „UNIX“ šeimos OS, pvz., „Linux“, tikrai nenusivilsite. Rezultatas bus toks pat kaip ir naudojant „Windows“ ar „Mac“ OS. Tačiau Interneto naršyklė turėtų būti kuo naujesnė, pvz. IE 5.5, „Mozilla 1.1“. Senesnės versijos prasčiau pritaikytos CSS. IE 2, populiariojo standarto iš viso nesupranta. Profesionalūs tinklapių kūrėjai naudoja galingas brangias programas („Macromedia Dreamweaver“, „Adobe GoLive“…), kuriose palengvina darbą su CSS. Tačiau tai nėra būtinybė. Gebėjimas išsiversti su paprastu „Notepad“ - profesionalumo požymis. Kadangi CSS suderinamas su perspektyviais XHTML/XML, pakopinių stilių šablonų reikšmė ateityje sumažėti neturėtų.

Dažniausiai naudojami trys CSS integravimo į HTML puslapius būdai:

1. Sukuriama atskira CSS byla, o HTML dokumente pateikiama nuoroda į ją. Šis būdas leidžia pakeisti neriboto skaičiaus HTML dokumentų išvaizdą, redaguojant tik vieną CSS bylą. Taip sukuriamas bendras visos interneto svetainės stilius. Nereikia atskirai redaguoti kiekvieno tinklapio, todėl sutaupoma laiko. Bendras svetainės dydis gerokai sumažėja. Todėl šį būdą naudoja dauguma didžiųjų inteneto svetainių, portalų, pvz., MSN, Delfi, www.on.lt. Jei naudojatės internetu, „C:\WINDOWS\Temporary Internet Files“ aplanke rasite daug bylų su *.css plėtiniu. Nuorodos į šias bylas rašomos HTML dokumento HEAD dalyje. Pavyzdžiui:

<HTML>

<HEAD>

<TITLE>DELFI - Žinios</TITLE>

...

</HEAD>

Nuorodoje pateiktas pilnas „styles.css“ bylos adresas. Tačiau tai nėra būtina, jeigu HTML dokumentas ir jam skirta CSS byla yra viename kataloge. Tuomet pakaktų HREF="styles.css".

2. CSS stiliai įrašomi pačiame HTML dokumente. Taip pakeičiama tik vieno HTML dokumento išvaizda. 7-ojo WWW čempionatų nugalėtojų tinklapio dalis:

<HTML>

<HEAD>

<!--

a {text-decoration: none}

p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; padding-top: 3px; padding-right: 6px; padding-bottom: 3px; padding-left: 6px}

.tekstas {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1px; padding-right: 6px; padding-left: 6px}

...

-->

</STYLE>

</HEAD>

Kaip ir pirmajame pavyzdyje, CSS rašomas po svetainės antraštės (ore.lt), kurią matome viršutinėje naršyklės dalyje. Ženklai „“ išskiria informaciją, kurios nesupranta su CSS nesuderinamos interneto naršyklės. Taip išskirta informacija naršyklės lange nėra matoma.

3. Trečiasis būdas pritaikytas keisti atskirų HTML dokumeto dalių, pvz., pastraipų, išvaizdą. CSS įrašomi į kiekvieną HTML žymę (angl. tag) atskirai. Likusios tinklapio dalies išvaizda nuo CSS nepriklauso. Norėdami tuo įsitikinti, atidarykite „Notepad“ ir įrašykite:

<HTML>

<HEAD>

</HEAD>

<BODY>

<P STYLE="color: yellow; font-family: Verdana; font-size: 14px; background: black; padding-top: 40px;">Ši pastraipa rašoma geltonu Verdana šriftu juodame fone. Raidžių dydis - 14, o atstumas nuo puslapio viršaus - 40 taškų.</P>

<P>Tai nauja pastraipa be CSS.</P>

</BODY>

</HTML>

Išsaugokite sukurtą dokumentą, pasirinkę File->Save As->Save As Type->All Files. Dokumento pavadinimo laukelyje (File Name) įrašykite: CSS.HTM. Vietoj „CSS“ galima rašyti bet kokį pavadinimą, tačiau bylos plėtinys turi būti HTM arba HTML. Sukurtas dokumentas - pats paprasčiausias tinklapis, kurį galima patalpinti internete ar peržiūrėti su naršykle.

Tą patį rezultatą gautumėte ir sukurę dvi atskiras bylas: „tinklapis.htm“ ir „stiliai.css“. Pirmosios tekstas:

<HTML>

<HEAD>

<TITLE>Tinklapis</TITLE>

</HEAD>

<BODY>

<P CLASS="stilius">Ši pastraipa rašoma geltonu Verdana šriftu juodame fone. Raidžių dydis - 14, o atstumas nuo puslapio viršaus - 40 taškų.</P>

<P>Tai nauja pastraipa be CSS.</P>

</BODY>

</HTML>

Antrosios:

.stilius {color: yellow; font-family: Verdana; font-size: 14px; background: black; padding-top: 40px;}

Išsaugant antrąją bylą su „Notepad“, laukelyje „Save As Type“ pasirinkite „All Files“, o pavadinimo laukelyje įrašykite: STILIAI.CSS. Galima naudoti ir mažąsias raides, tai nieko nekeičia. Kadangi pateiktuose pavyzdžiuose nenurodyta tinklapio koduotė, tai teks atlikti naršyklėje. Priešingu atveju, galite nematyti lietuviškų rašmenų. Jei naudojate IE, pasirinkite View->Encoding->Baltic (Windows), jei „Netscape“ - View->Character Coding->More->East European->Baltic (Windows-1257). Kaip matote, parengti elementarų tinklapį su CSS visiškai paprasta.

Interneto dizainerio specialybė viena jauniausių pasaulyje. Nepaisant to, daug žmonių dirba šioje srityje. Patirtimi jie dalinasi viešose elektroninio pašto konferencijose (usenet). Lietuvoje jos taip pat sėkmingai gyvuoja, žmonės aktyviai bendrauja rašydami laiškus. Daugiau apie tai galite sužinoti tinklapyje www.konferencijos.lt. Prie šios bendravimo formos nuolat prisijungia nauji vartotojai. Pradedančiųjų klausimai nuolat kartojasi. Tai erzina senbuvius, kurie nenori šimtus kartų atsakinėti į tuos pačius klausimus. Taip pat niekas nenori sulaukti šiurkštaus atsakymo ar, blogiausiu atveju, būti iš viso atjungtas nuo konferencijos. Reikėtų vengti klausimų, kurių atsakymus galima rasti pačiam. CSS skirtose konferencijose dominuoja du dažnai užduodami klausimai.

Pirmasis jų - nuorodų formavimas su CSS. Nuorodos - išskirtinis interneto bruožas. Būtent jos leidžia akimirksniu pasiekti bet kurią virtualiojo pasaulio vietą. Nenuostabu, jog joms skiriamas ypatingas dėmesys. Paprastai nuorodos išskiriamos spalva ar pabraukimu. Jei naudojate IE, šias nuostatas galite pakeisti pasirinkę Tools->Internet Options->General->Colors.

Tai gana patogu, kai naudojiesi svetimu kompiuteriu. Vienoda išvaizda supaprastina naršymą. Tačiau įnoringų dizainerių tai netenkina. Standartinės nuorodos gali nepritapti prie individualaus puslapio stiliaus. Ką daryti, kai nuoroda ir tinklapio fonas vienodos spalvos? CSS dalyje arba atskiroje byloje pakanka įrašyti:

a:link {text-decoration: none; color: #396594}

a:visited {text-decoration: none; color: #396594}

a:active {text-decoration: none; color: #646464}

a:hover {text-decoration: underline; color: Black}

Jeigu norite pamatyti, kaip atrodo taip apipavidalintos nuorodos, aplankykite www.news.lt. Pateiktas pavyzdys - jų svetainės dalis. Pirmoji eilutė skirta dar nelankytoms nuorodoms, antroji - jau aplankytoms, trečioji - aktyvioms, ketvirtoji - nuorodoms, kai ant jų užvestas pelės žymeklis. Naudojant „text-decoration“ atributą, nuorodas galima pabraukti, perbraukti ir pan. Taip pat galima nurodyti spalvą, foną, šriftą ir kitas savybes. Ši CSS gudrybė vienodai veikia trijose populiariausiose interneto naršyklėse (IE, „Netscape“ ir „Opera“). To negalima pasakyti apie naujausius CSS pritaikymus, kurie taip domina usenet konferencijų dalyvius - slinkties juostų modifikavimą.

Įvairių kompiuteriams skirtų žurnalų platinamuose kompaktiniuose diskuose dažniausiai informacija pateikiama HTML formatu. Tai turi savų privalumų lyginant su įsigalinčia „Flash“ technologija. Taip pateikta informacija nereikalauja galingų kompiuterių. Pakanka paprastos interneto naršyklės. Iš bėdos - ir „Notepad“. Dažnai atidarę kompaktiniame diske esantį HTML dokumentą, matysite ne pilkas, o geltonas slinkties juostas. Tačiau tik jeigu naudojate IE 5.5 ar naujesnę naršyklės versiją. Atidžiau panagrinėję šių metų balandžio mėnesio „Kompiuterijos-PC World“ CD, rasite keletą CSS bylų. Vienoje jų (general.css) įrašytos šios eilutės:

scrollbar-face-color: #FAE876;

scrollbar-track-color: White;

scrollbar-arrow-color: Black;

scrollbar-highlight-color: White;

scrollbar-shadow-color: #FAE330;

scrollbar-3dlight-color: #FAE330;

scrollbar-darkshadow-color: #FAE330;

scrollbar-base-color: #FAE876;

Tai - įvairių slinkties juostos dalių spalvų nuostatos. Tokios juostos sutrumpintai vadinamos CCS (colour coded scrollbars). Spalvos nurodytos RGB kodu. Deja, alternatyviose naršyklėse, pvz., „Netscape“, matomos tradicinės pilkai rusvos juostos.

Geriausias būdas išmokti HTML ir CSS - nagrinėti profesionalų darbus ir drąsiai experimentuoti.

Paprasčiausių CSS atributų aprašymas
Atributas	Paaiškinimas	Pavyzdžiai
font-family	šrifto rūšis	Times, Verdana, Arial, Courier
font-style	šrifto pobūdis	normal, italic, oblique
font-weight	šrifto storis	normal, bold, bolder, lighter, 100, 900
font-size	šrifto dydis	xx-small, 50mm, 12pt, large, 1in, 5pc
background-color	fono spalva	white, #000080, rgb(0,204,0), maroon, #0c0
letter-spacing	tarpai tarp raidžių	0.1em, -0.1em, 12px
text-decoration	teksto efektai	none, underline, overline, line-through, blink
text-align	teksto lygiavimas	left, right, center, justify
vertical-align	vertikalus lygiavimas	baseline, sub, super, top, text-top, middle