CSS pagrindai

Taigi, trumpai apie css.

css naudojamas norint atskirti tinklalapio išdėstymą, loginę struktūrą, nuo jo atvaizdavimo, stiliaus.

Tinklalapio elementai išdėstomi html pagalba, o css’u nurodome tų elementų savybes.

Pavyzdžiui, html’as :

<div>

<div>

tekstas tekstas tekstas

<ul>

<li> pirmas

<li> antras

<li> trečias

<li> ketvirtas

</ul>

</div>

<div>

man patinka css

</div>

</div>

css gali būti arba tam pačiam faile, arba atskiram. Jei css yra kitame faile, jį reikia nurodyti head srityje:

<head>
<link rel=“stylesheet“ type=“text/css“ href=“stilius.css“>
</head>

Patogiausia ir daryti css’ą atskirame faile, bet jei tokios galimybės nėra, galima jį įdėt kartu. Bet apie tai atskirai, dabar apie patį css.

Tarkim, norim padaryti, kad tai, kas yra div srityje, būtų melsvo fono. Css faile rašom taip:

div {background-color: #ccccff}

Tarkim, norim, kad būtų melsvo fono ir žaliomis raidėmis:

div {background-color: #ccccff; color:green;}

Ir dar, tarkim, norim, kad sąrašo elementai (li) būtų truputį patraukti į dešinę.

Tada css failo turinys atrodytų taip:

div {background-color: #ccccff; color: green;}

li {margin-left: 40px;}

Taigi, yra selectoriai, yra savybės ir yra galimos tų savybių reikšmės, kurias galima nurodyti.

Galimas savybes galima sužinoti, pavyzdžiui, čia: http://www.w3schools.com/css/default.asp Galimos savybių reikšmės taip pat ten nurodytos prie kiekvienos savybės.

Dabar toliau 🙂 Viršuje parodyta, kaip nustatyti savybes visiems vienodiems elementams, pavyzdžiui, visiems div elementams. Bet tarkim, norim, kad vienas div’as būtų vienoks, o kitas – kitoks. Arba, kad pirmas sąrašo elementas būtų vienoks, o kiti – kitokie.

Tam reikalui yra sugalvoti identifikatoriai  (id) ir klasės (class).

<div class=“isorinis“>

<div class=“vidinis“ id=“turinys“>

tekstas tekstas tekstas

<ul>

<li class=“pirmas“> pirmas

<li> antras

<li> trečias

<li> ketvirtas

</ul>

</div>

<div class=“vidinis“ id=“apacia“>

man patinka css

</div>

</div>

css failas galėtų atrodyti taip:

.isorinis {padding: 20px;}

.vidinis {border: solid 1px;}

#apacia {font-size: 10px;}

li.pirmas {font-style: italic;}

Čia . (taškas) nurodo klasę, o # (grotelės) – identifikatorių (id). Taigi, ką tik nurodėm, kad elementas, kuriam priskirta klasė “isorinis“ turi būti su 20px vidine parašte, o elemento, kurio klasė “vidinis“ – su rėmeliu. Taip pat nurodėm, kad konkretaus elemento, kurio id – “apacia“ teksto dydis turi būti 10px. O sąrašo elementas, kurio klasė “pirmas“ – pasviręs.

Tą pačią klasę galima nurodyti skirtingo tipo elementams.

<div class=“grazus“>

<p> labas </p>

<p class=“grazus“> pasauli </p>

</div>

Jei šiam html parašysim css:

.grazus {border: solid 1px;}

tai rėmelį uždės div’ui ir dar apatiniam paragrafui.

Apibendrinant, stilių galima nurodyti pagal

  • elementą, pavyzdžiui, visiems <div> elementams,
  • pagal id – konkrečiam elementui, pavyzdžiui div’ui “apacia“
  • pagal klasę – įvairiems elementams su nurodyta klase, pvz. “vidinis“

Dar yra kai kurie išskirtiniai atvejai, pvz. kaip gražinti aplankytas nuorodas, ar kaip pridėti turinį prie elementų su css, bet čia kitam kartui 🙂

Gero css’inimo 🙂

Reklama

Parašykite komentarą

Įveskite savo duomenis žemiau arba prisijunkite per socialinį tinklą:

WordPress.com Logo

Jūs komentuojate naudodamiesi savo WordPress.com paskyra. Atsijungti / Keisti )

Twitter picture

Jūs komentuojate naudodamiesi savo Twitter paskyra. Atsijungti / Keisti )

Facebook photo

Jūs komentuojate naudodamiesi savo Facebook paskyra. Atsijungti / Keisti )

Google+ photo

Jūs komentuojate naudodamiesi savo Google+ paskyra. Atsijungti / Keisti )

Connecting to %s