CSS
Straipsnis iš Vikipedijos, laisvosios enciklopedijos.
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).
Turinys |
[taisyti] Pagrindinė sintaksė
Stiliaus taisyklė apibrėžiama šia sintakse:
identifikatorius {savybė: reikšmė}
[taisyti] 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>
[taisyti] CSS priskyrimas HTML puslapiui
[taisyti] 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.
[taisyti] 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: yellow; } #zalia { background-color: #239E46; } #raudona { background-color: red; } #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>