Cascading Style Sheets: Skirtumas tarp puslapio versijų

Dabartinė 21:04, 22 vasario 2016 versija

CSS (angl. Cascading Style Sheets – pakopiniai stilių šablonai) – 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 (tarp jų SVG ir XUL).

Pagrindinė sintaksė[keisti]

Stiliaus taisyklė apibrėžiama šia sintakse:

 identifikatorius {savybė: reikšmė;}

Identifikatorius[keisti]

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 class="right">Ši pastraipa lygiuosis dešinės.</p>

ir

<p class="center">Ši pastraipa bus centruota.</p>

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

<p class="right 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="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:

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

CSS priskyrimas HTML puslapiui[keisti]

Išoriniai CSS[keisti]

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.

Vidiniai CSS[keisti]

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

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>    Lietuvos vėliava, nupiešta CSS pagalba</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>

Nuorodos[keisti]