CSS pamoka
5 (100%) 1 vote

CSS pamoka

11

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 (<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:

<p>Ši pastraipa lygiuosis dešinės.</p>

ir

<p>Ši pastraipa bus centruota.</p>

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

<p>Pastraipa su dviem klasėm.</p>

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

ID atributas

Galima aprašyti stilių pagal elemento identifikatorių:

Ieškokite žinių tarp 100 000+ kokybiškų dokumentų tinklapyje mokslobaze.lt
#identifikatorius {text-align: right}

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

<p id="identifikatorius">Ši pastraipa bus lygiuota dešinėje.</p>

CSS priskyrimas HTML puslapiui

Išoriniai CSS

CSS kodas įrašomas atskirame faile, pvz., style.css, o kelias iki failo nurodomas HTML dokumente <link> žymų, patalpintų <head> sekcijoje, pagalba:

<head>
<title>Susietas CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

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

Šiuo metu Jūs matote 51% šio straipsnio.
Matomi 603 žodžiai iš 1194 žodžių.
Siųskite sms numeriu 1337 su tekstu INFO MEDIA (kaina 0,87 €) ir įveskite gautą kodą į laukelį žemiau:
Kodas suteikia galimybę atrakinti iki 100 straispnių svetainėje ir galioja 24 val.