CSS

CSS (af "Cascading Style Sheets"; oft hreinlega kallað stílsnið) er mál sem notað er til að skilgreina útlit skjala, oftast vefsíðna. CSS segir vafranum hvar kassar eigi að vera og hvernig texti eigi að líta út, sá texti er settur fram í HTML.

Munur á gömlu HTML og XHTML/HTML og CSS.

Í eldri útgáfum HTML var hægt að skilgreina rauðan texta svona:

&lt;p color="red"&gt;Rauður Texti&lt;/p&gt;

Í útgáfu 4.01 t.d. og öllum útgáfum XHTML þykir eðlilegra að skilgreina útlit textans í sérstakri CSS-skrá með eftirfarandi hætti:

Og stiklutextinn sjálfur lítur einfaldlega svona út:

&lt;p&gt;Rauður Texti&lt;/p&gt;

Til að tengja skjölin tvö saman þarf að vísa í CSS skjalið innan codice_1 hluta (X)HTML skjalsins.

&lt;link rel="stylesheet" type="text/css" media="screen,projection" href="screen.css" /&gt;

Einnig er hægt að hafa stílreglurnar í codice_1 hluta HTML skjals, innan í codice_3 marki.

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Halló heimur! – CSS&lt;/title&gt;

&lt;style&gt;

p {

color: black;

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;Halló heimur!&lt;/p&gt;

&lt;p&gt;Þessi texti mun vera svartur.&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;

Uppbygging.

Grunnmálfræði CSS samanstendur af veljara (e. selector) og stíl (e. declaration). Veljarinn kemur á undann síðan kemur slaufusvigi („codice_4“), því næst stíllinnn – sem aftur er skipt í eigindi (e. property og gildi (e. value), aðskilin með tvípunkti („codice_5“) – og loks öfugur slaufusvigi („codice_6“). Þessi skrifmáti er nokkurn veginn nákvæmlega eins og skrifmáti JSON. Veljarinn er venjulega nafnið á markinu sem það á við eða kommu („codice_7“) skiptur listi yfir þau. Hægt er að hafa umsagnir (e. comment í CSS kóðanum innan í „codice_8“ og „codice_9“-pari. Bilið milli tvípunktsins eftir eigindið í stílnum og gildisins er ekki nauðsynlegt og valfrjálst.

h1 {

color: red;

h2, h3, h4, h5, h6 {

color:gray;

/* athugið að bilið milli „color:“ og „gray“ (litað blátt) hefur verið tekið burt */

Veljarar.

Þótt veljarar séu oft bara listi yfir mörk þarf stundum að sigta sum úr, eða jafnvel láta stílinn gilda fyrir allt skjalið – hvort sem það er XML- eða HTML-skjal.

klasar.

Hægt er að tengja mörk saman með klösum (e. classes). Það er gert með því að láta markið vera með eigindið codice_10 sem hefur klasann sem gildi. Hægt er að hafa mark í mörgum klösum og er þá codice_10 eigindið látið innihalda bilskiptan lista (lista þar sem gildin eru aðskilin með bili) með klösunum.

&lt;span class="klasi1"&gt;

Hér er texti í klasa 1.

&lt;/span&gt;

&lt;p class="klasi1 klasi2"&gt;

Og hér er texti í bæði klasa 1 og 2.

&lt;/p&gt;

Klasarnir eru valdir með því að hafa punkt og svo klasann strax á eftir. Hægt er að hafa nafnið á markinu á undan.

.klasi1 {

color: red;

text-style: italic;

p.klasi2 {

background-color: green;

font-style: none;

font-weight: bold;

Þetta myndi líta nokkurn veginn svona út:

Hér er texti í klasa 1.

Og hér er texti í bæði klasa 1 og 2.

Þarna hafði codice_12 áhrif á báða klasana en codice_13 hafði bara áhrif á fyrra dæmið.

ID.

Hægt er að velja mörk eftir því hvaða „ID“ þau hafa. Í HTML er það gildi codice_14 eigindisins og í XML er það gildi codice_15 (strangt til tekið þarf ekki að vera codice_16 á undan codice_14 en eigindið verður að vera í XML nafnaplássinu (XML Namespace). Það er gert með því að hafa ferhyrning („codice_18“) á undan id-inu. Einungis eitt mark er með hvert ID svo að það þarf að hafa kommuskiptan lista yfir ID-in ef velja á mörg mörk.

color: yellow;

span#merkilegt /* velur span markið með ID-ið merkilegt */ {

color: red; /* litar textann rauðan */

text-decoration: underline; /* strikar undir textann */

font-wheight: bold; /* þykkir letrið með gleiðletri */

font-size: x-large; /* stækkar leturgerðina */

Gerviklasar.

Gerviklasar eru klasar marka sem þurfa ekki endilega að hafa codice_10 eigindið skilgreint, heldur uppfylla þeir þau skilyrði sem hver klasi setur. Tvípunktur („codice_5“) er hafður á undan nafni gerviklasans frekar en punkturinn á undan „venjulegu“ klösunum. Mörk geta færst á milli gerviklasa við aðgerðir notandans.

a:hover /* velur tengla sem notandinn er með bendilinn (tölvumús eða álíka tæki) yfir */ {

color: blue;

text-decoration: underline;

Stílar.

CSS stílar samanstanda af eigindi og gildi, þ.e.a.s. hverju á að breyta og í hvað, rétt eins og stílreglur eru af veljurum og stílum (hvaða mörkum á að breyta og hvernig).

p {

color: black; /* Þetta gefur eigindinu color (litinn) gildið black (svartan). Það litar textann svartan. */

Eigindin og gildin eru venjulega orð á amerískri ensku.