CSS

CSS ( – pakopiniai stilių šablonai) – pakopinių stilių aprašo kalba, skirta HTML kalba rašomų dokumentų stiliams aprašyti. Nors įprastai CSS kalba aprašomas HTML dokumentų pateikimas, be to ją galima taikyti ir įvairiems kitomis kalbomis parašytiems dokumentams (pvz., XML paremtiems 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 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 elementui turėti skirtingus stilius. Pavyzdžiui, norima, kad dvi pastraipos būtų skirtingai lygiuojamos:
p.desineje {text-align: right;}
p.centruoti {text-align: center;}

HTML dokumente norimos pastraipos aprašomos taip:
<p class="desineje">Ši pastraipa bus lygiuota dešinėje.</p>
ir
<p class="centruoti">Ši pastraipa bus centruota.</p>

Elementui galima priskirti keletą klasių vienu metu, tačiau persidengiantys stiliai bus perrašyti:
<p class="desineje kitaklase">Pastraipa su dviem klasėm.</p>

Labai patogu, kai klasės pavadinamos pagal tai, kokį stilių jos suteikia. Iš užrašo p class="desineje" 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:
<p id="identifikatorius">Ši pastraipa bus lygiuota dešinėje.</p>

 CSS priskyrimas HTML puslapiui 

 Išoriniai CSS 
CSS tekstas įrašomas atskirame faile, pvz., stilius.css, o kelias iki failo nurodomas HTML dokumente  <head> dalyje, naudojant  žymes:
<head>
<title>Susietas CSS</title>
<link rel="stylesheet" type="text/css" href="stilius.css">
</head>
Šis variantas patogus, kai svetainę sudaro daug failų. Tokiu būdu galima pakartotinai panaudoti tą patį stilių skirtinguose tinklalapiuose nedubliuojant jo teksto, o stiliaus pataisymai iš karto paveikia visus tinklalapius, kuriuose jis yra  naudojamas.

 Vidiniai CSS 

Toks stilius aprašomas antraštinėje HTML dokumento dalyje. Štai toks tinklalapio išeities tekstas nupieš Lietuvos Respublikos vėliavą.
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <title> Lietuvos vėliava, nupiešta CSS </title>
   <style type="text/css">
   body {
     margin:0;    
     padding:0;
   }
   #veliava {
     margin: 0 auto 0 auto;
     height: 300px;
     width: 450px;
   }
   #geltona {
     background-color: rgb(253, 185, 19); /* arba background-color: #FDB913; */
   }
   #zalia {
     background-color: rgb(0, 106, 68); /* arba background-color: #006A44; */
   }
   #raudona {
     background-color: rgb(193, 39, 45); /* arba background-color: #C1272D; */
   }
   #geltona, #zalia, #raudona {
     height: 100px;
   }
   </style>
</head>
<body>
<div id="veliava">
      <div id="geltona">
      </div>
      <div id="zalia">
      </div>
      <div id="raudona">
      </div>
    </div>
</body>
</html>

 Šaltiniai 

 Nuorodos 
 Cascading Style Sheets home page 
 Nemokamos CSS pamokos 

Kategorija:Internetas