\dev\null: Naujas puslapis: '''CSS''' (angl. Cascading Style Sheets – pakopiniai stilių šablonai) – kalba, skirta nusakyti kita struktūrine kalba aprašyto dokumento vaizdavimą. Dažniausiai CSS a...

2016-02-22T19:04:26Z

Naujas puslapis: '''CSS''' (angl. Cascading Style Sheets – pakopiniai stilių šablonai) – kalba, skirta nusakyti kita struktūrine kalba aprašyto dokumento vaizdavimą. Dažniausiai CSS a...

Naujas puslapis

'''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ė ==
Stiliaus taisyklė apibrėžiama šia sintakse:<br />
<pre> identifikatorius {savybė: reikšmė;} </pre>

== Identifikatorius ==
CSS identifikatorium gali būti bet kuris HTML elementas, taip pat vietoje identifikatoriumi gali būt apibrėžta klasė. Pavyzdžiui,

: <code>p {text - align: center;}</code> aprašo stilių HTML pastraipos elementui '''p''' (<nowiki><p></nowiki>). Stilius gali būti sudaromas aprašant keletą savybių (atskirtų kabliataškiu):

<pre> p {text-align:center; color:red;}</pre>

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:
<pre>p.right {text-align: right;}
p.center {text-align: center;}</pre>

[[HTML]] dokumente norimos pastraipos aprašomos taip:
<pre><p class="right">Ši pastraipa lygiuosis dešinės.</p></pre>
ir
<pre><p class="center">Ši pastraipa bus centruota.</p></pre>

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

Labai patogu, kai klasės pavadinamos pagal tai, kokį stilių jos suteikia. Iš užrašo <code>p class="right"</code> galima suprasti, kad pastraipa bus lygiuojama prie dešinės paraštės.
* '''ID''' atributas
Galima aprašyti stilių pagal elemento identifikatorių:
<pre>#identifikatorius {text-align: right;}</pre>

Tada tik elementui su tuo identifikatorium bus taikomas aprašytas stilius:
<pre><p id="identifikatorius">Ši pastraipa bus lygiuota dešinėje.</p></pre>

== 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:
<pre><head>
<title>Susietas CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</pre>
Šis variantas patogus esant dideliam svetainės failų kiekiui.

=== Vidiniai CSS ===
----
Štai tokio kodo pagalba galite nupiešti Lietuvos vėliavą.
<pre>
<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>
</pre>

== Nuorodos ==
* [http://www.w3.org/Style/CSS Cascading Style Sheets home page]
* [http://w3schools.com/css/default.asp Nemokamos CSS pamokos]

[[Kategorija:Internetas]]
[[Category:Programavimas]]

Cascading Style Sheets - Versijų istorija

\dev\null: Naujas puslapis: '''CSS''' (angl. Cascading Style Sheets – pakopiniai stilių šablonai) – kalba, skirta nusakyti kita struktūrine kalba aprašyto dokumento vaizdavimą. Dažniausiai CSS a...