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į. CSS patogus nes:

• Toks dokumentas užima mažiau vietos ir greičiau pasirodo vartotojo naršyklėje (įvairių puslapių išvaizdą aprašantis CSS dokumentas iš serverio atsisiunčiamas tik vienąkart);
• Toks dokumentas lengviau bei kokybiškiau apdorojamas automatiškai, todėl tokius dokumentus geriau indeksuoja paieškos sistemos.
• Naudojant CSS, lengviau keisti iškart visų puslapių išvaizdą;
• Taip paprasčiau pasiekti, jog šiuos puslapius įvairios naršyklės rodytų vienodai;
• Esant ribotam perdavimo kanalui galima siųsti tik patį HTML dokumentą, bei nesiųsti jo CSS;
• Galima siųsti tik patį HTML dokumentą, bei nesiųsti jo CSS, jei naršyklė nepajėgi jį atvaizduoti;

CSS

CSS (angl. Cascading Style Sheets) – kalba, skirta nusakyti kita struktūrine kalba aprašyto dokumento vaizdavimą. Dažniausiai CSS aprašomas HTML dokumentų pateikimas, tačiau ją galima taikyti ir įvairiems kitiems XML dokumentams (tame tarpe SVG ir XUL).

Pagrindinė sintaksė

Stiliaus taisyklė apibrėžiama šia sintakse:

identifikatorius {savybė: reikšmė}

Identifikatorius

CSS identifikatorium gali būti bet kuris HTML elementas, taip pat vietoje identifikatoriumi gali būt apibrėžta klasė. Pavyzdžiui,

p {text-align:center}

aprašo stilių HTML pastraipos elementui p (

). Stilius gali būti sudaromas aprašant keletą savybių (atskirtų kabliataškiu):

p {text-align:center;color:red}

Internetinio puslapio pastraipų tekstas bus centruotas, raudonas.

Klasės (class) atributas

HTML elementui galima priskirti klasės atributą, o tai leidžia tam pačiam elemetui turėti skirtingus stilius. Pavyzdžiui, norima, kad dvi pastraipos būtų skirtingai lygiuojamos:

p.right {text-align: right}
p.center {text-align: center}

HTML dokumente norimos pastraipos aprašomos taip:

Ši pastraipa lygiuosis dešinės.

ir

Ši pastraipa bus centruota.

Elementui galima priskirti keletą klasių vienu metu, tačiau persidengiantys stiliai bus perrašyti:

Pastraipa su dviem klasėm.

Labai patogu, kai klasės pavadinamos pagal tai, kokį stilių jos suteikia. Iš užrašo p class="right" galima suprasti, kad pastraipa bus lygiuojama prie dešinės paraštės.

ID atributas

Galima aprašyti stilių pagal elemento identifikatorių:

#identifikatorius {text-align: right}

Tada tik elementui su tuo identifikatorium bus taikomas aprašytas stilius:

Ši pastraipa bus lygiuota dešinėje.

CSS priskyrimas HTML puslapiui

Išoriniai CSS

CSS kodas įrašomas atskirame faile, pvz., style.css, o kelias iki failo nurodomas HTML dokumente

žymų, patalpintų

sekcijoje, pagalba:

Susietas CSS

Šis variantas patogus esant dideliam svetainės failų kiekiui.

Vidiniai CSS

Štai tokio kodo pagalba galite nupiešti Lietuvos vėliavą.

Lietuvos vėliava, nupiešta CSS pagalba

Keletas įdomesnių panaudojimo atvejų

Labai dažnai prieš pradedant rašyti CSS stilius, išvalomi visų elementų vidiniai ir išoriniai tarpai (padding, margin):

* { padding:0; margin:0 }

Jei norite, jog stilius būtų pritaikomas visada, naudokite "!important":

p { color: #f00 !important }

Ne visos naršyklės supranta, tačiau CSS galima naudoti ir išraiškas:

p { width:expression (document.body.clientWidth > 800 ? "800px" : "auto" );

Dar daugiau CSS

Pseudo klasės

Pseudo klasės sintaksė:

žymė:pseudo-klasė {savybė:reikšmė;}

CSS klasės gali būti naudojamos kartu su pseudo klasėmis:

žymė.klasė:pseudo-klasė {savybė:reikšmė;}

Nuorodos gali būti vaizduojamos kelias būdais:

a:link {color:#FF0000;}      /* neaplankyta nuoroda */
a:visited {color:#00FF00;}  /* aplankyta nuoruoda */
a:hover {color:#FF00FF;}  /* pelės kursorius virš nuorodos */
a:active {color:#0000FF;}  /* pažymėta nuoroda */

Pastaba: a:hover CSS apraše PRIVALO eiti po a:link ir a:visited, jei norite, kad jis būtų efektyvus!!

Pastaba: a:active CSS apraše PRIVALO eiti po a:hover, jei norite, kad jis būtų efektyvus!!

Pastaba: Pseudo klasių vardai yra ne case-sensitive.

Pseudo klasės ir CSS klasės

Pseudo klases ir kitas CSS klases galima naudoti drauge:

a.red:visited {color:#FF0000}

Kitos naudingos pseudo klasės

Pastaba: Kad pseudo klasės veiktų teisingai ant IE būtinai nurodykite .

:first-child

Jei norite pažymėti pirmąjį elementą aibėje, naudokite :first-child pseudo klasę. Pavyzdyje parodytas pirmo paragrafo puslapyje išskyrimas:

p:first-child {color:blue} 

Sekančiame pavyzdyje yra išskiriama kiekviena pirma žymė, kiekviename paragrafe:

p > i:first-child {font-weight:bold} 

:first-child

Išskirkime visas žymes pirmame dokumento paragrafe.

p:first-child i {color:blue} 

:lang

Pseudo klasė :lang suteikia kitokį stilių elmentui turinčiam specifinį "lang" atributą:

q:lang(no) {quotes: "~" "~"}  /* stilius */

Some text A quote in a paragraph Some text.

/* html */ Some text ~A quote in a paragraph~ Some text. /* Atvaizdavimas */

:focus

Naudokite pseudo klasę :focus, jei norite sufokusuotam elementui suteikti kitokį stilių:

input:focus {color:yellow}

CSS3

Įdomūs pakeitimai atėję su CSS3

Rėmeliai

• border-color - Leidžia sukurti gradieninį spalvų perėjimą rėmelyje;
• border-image - Leidžia rėmelį sudaryti iš atskirų paveiksliukų;
  • border-top-image
  • border-right-image
  • border-bottom-image
  • border-left-image
• border-corner-image - Leidžia nustatyti atskirus rėmelio kampus;
  • border-top-left-image;
  • border-top-right-image;
  • border-bottom-left-image;
  • border-bottom-right-image;
• border-radius - Leidžia užapvalinti rėmelio kampus;
• box-shadow - Sukuria šešėlį rėmeliui.

Teksto efektai

• text-shadow - Sukuria šešėlį tekstui;
• word-wrap - Leidžia suskaldyti žodį ir perkelti jį į kitą eilutę.

Spalvos

• opacity - Leidžia nurodyti spalvos permatomumą;
• RGBA colors - Panašiai kaip ir opacity, leidžia nurodyti spalvą su Alfa kanalu, t.y. permatomumu.

Kiti

• column-width, column-count, column-gap - Leidžia sukurti stulpelius dokumente, nurodyti tarpus tarp jų ir jų kiekį.