CSS
Kitos reikšmės – CSS (reikšmės).- Kitos reikšmės – CSS (reikšmės).
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 (tarp jų 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 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
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.
Vidiniai CSS
Š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
| ||||||