Skoða frumkóða fyrir CSS

{{Skráarforsnið
| nafn = CSS ''(Cascading Style Sheets)''
| merki =
| vörumerki =
| mynd = [[Mynd:P2t css sample 2.jpg]]
| myndatexti = Dæmi um CSS skjal.
| lenging = .css
| mime = text/css
| tegund kóða = 
| galdur =
| eigandi = [[World Wide Web Consortium|W3C]]
| tegund = [[Stílmál]]
| ívaf fyrir =
| ívaf af =
| útvíkkað frá =
| útvíkkað í =
| staðall = W3C 1,0 (Tilmæli) <br /> W3C 2,0 (Tilmæli) <br /> W3C 2,1 (Í vinnslu)
}}

'''CSS''' (af ''Cascading Style Sheets''; oft hreinlega kallað '''stílsnið''') er mál sem notað er til að skilgreina útlit skjala, oftast [[Vefsíða|vefsíðna]]. CSS segir [[Vafri|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:
<syntaxhighlight lang="html"><p color="red">Rauður Texti</p></syntaxhighlight>

Í ú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:
<syntaxhighlight lang="css">p { color: red; }</syntaxhighlight>

Og stiklutextinn sjálfur lítur einfaldlega svona út:
<syntaxhighlight lang="html"><p>Rauður Texti</p></syntaxhighlight>

Til að tengja skjölin tvö saman þarf að vísa í CSS skjalið innan <code><head></code> hluta (X)HTML skjalsins.
<syntaxhighlight lang="html"><link rel="stylesheet" type="text/css" media="screen,projection" href="screen.css" /></syntaxhighlight>

Einnig er hægt að hafa stílreglurnar í <code><head></code> hluta HTML skjals, innan í <code><style></code> marki.
<syntaxhighlight lang="html">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Halló heimur! – CSS</title>
<style>
p {
color: black;
}
</style>
</head>
<body>
<p>Halló heimur!</p>
<p>Þessi texti mun vera svartur.</p>
</body>
</html>
</syntaxhighlight>

== Uppbygging ==
Grunnmálfræði CSS samanstendur af veljara''' (e. selector) '''og stíl''' (e. declaration). '''Veljarinn kemur á undann síðan''' kemur '''slaufusvigi''' („<code>{</code>“), því '''næst stíllinnn – sem aftur er skipt í eigindi''' (e. [[wikt:property|property]] '''og gildi''' (e. [[wikt:value|value]]), '''aðskilin með tvípunkti''' („<code>:</code>“) – '''og loks öfugur slaufusvigi''' („<code>}</code>“). '''Þ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''' („<code>, </code>“) '''skiptur listi yfir þau. Hægt er að hafa umsagnir''' (e. [[wikt:comment|comment]] '''í CSS''' kóðanum '''innan í „<code>/*</code>“ og „<code>*/</code>“'''-pari. Bilið milli tvípunktsins eftir eigindið í stílnum og gildisins er ekki nauðsynlegt og valfrjálst.
<syntaxhighlight lang="css">
h1 {
color: red;
}
h2, h3, h4, h5, h6 {
color:gray;
/* athugið að bilið milli „color:“ og „gray“ (litað blátt) hefur verið tekið burt */
}
</syntaxhighlight>
=== 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ð <code>class</code> sem hefur klasann sem gildi. Hægt er að hafa mark í mörgum klösum og er þá <code>class</code> eigindið látið innihalda bilskiptan lista''' (lista þar sem gildin eru aðskilin með bili) með klösunum.'''
<syntaxhighlight lang="html">
<span class="klasi1">
Hér er texti í klasa 1.
</span>
<p class="klasi1 klasi2">
Og hér er texti í bæði klasa 1 og 2.
</p>
</syntaxhighlight>
'''Klasarnir eru valdir með því að hafa punkt og svo klasann strax á eftir.''' Hægt er að hafa nafnið á markinu á undan.
<syntaxhighlight lang="css">
.klasi1 {
  color: red;
  text-style: italic;
}

p.klasi2 {
  background-color: green;
  font-style: none;
  font-weight: bold;
}
</syntaxhighlight>
Þetta myndi líta nokkurn veginn svona út:
<br />
<span style="color: red;font-style: italic;">
Hér er texti í klasa 1.
</span>
<p style="color: red;background-color: green;
font-style: none;
font-weight: bold;">
Og hér er texti í bæði klasa 1 og 2.
</p>
Þarna hafði <code>color: red</code> áhrif á báða klasana en <code>font-style: italic</code> 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 <code>id</code> [[eigindi]]sins og í [[XML]] er það gildi <code>xml:id</code>''' (strangt til tekið þarf ekki að vera <code>xml:</code> á undan <code>id</code> en eigindið verður að vera í XML nafnaplássinu ([[XML Namespace]]). Það er gert með því að hafa ferhyrning („<code>#</code>“) á 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.
<syntaxhighlight lang="css">
#id /* velur markið með ID-ið „id“ */ {
  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 */
}
</syntaxhighlight>

==== Gerviklasar ====
Gerviklasar eru klasar marka sem þurfa ekki endilega að hafa <code>class</code> eigindið skilgreint, heldur uppfylla þeir þau skilyrði sem hver klasi setur. Tvípunktur („<code>:</code>“) 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.
<syntaxhighlight lang="css">
a:hover /* velur tengla sem notandinn er með bendilinn (tölvumús eða álíka tæki) yfir */ {
  color: blue;
  text-decoration: underline;
}
</syntaxhighlight>

=== Stílar ===
'''CSS stílar samanstanda af eigindi og gildi''', [[Listi yfir algengar skammstafanir í íslensku#þ.e.a.s.|þ.e.a.s.]] hverju á að breyta og í hvað, '''rétt eins og [[#Uppbygging|stílreglur]] eru af veljurum og stílum''' (hvaða mörkum á að breyta og hvernig).
<syntaxhighlight lang="css">
p {
  color: black; /* Þetta gefur eigindinu color (litinn) gildið black (svartan). Það litar textann svartan. */
}
</syntaxhighlight>
Eigindin og gildin eru venjulega orð á [[Enska|amerískri ensku]].

== Kostir CSS ==
* Í ''media'' hluta [[#Munur á HTML og XHTML/CSS|dæmisins að ofan]] er miðill skjalsins er tilgreindur. Með þessu móti má aðgreina mismunandi útlit á sama innihald ([[XML]]/[[XHTML]]) fyrir t.d. prentverk eða lófatölvu og vísa þá í mismunandi CSS skjal fyrir hvern og einn miðil.
* Mun auðveldara er að uppfæra útlit yfir heilt vefsvæði þar sem öllum útlitstengdum reglum er haldið til haga í fáum skjölum.
* CSS býður upp á fullkomnari stjórn á útliti skjala.
* CSS býður upp á möguleika sem bæta aðgengi fatlaðra að innihaldi skjala.
* CSS minnkar í mörgum tilfellum stærð skjala.

=== Tengt efni ===
* [[JSON]]
* [[XSL]]
* [[HTML]]
* [[XHTML]]
* [[XML]]
* [[XSL Transform]]
* [[XSL Formatting Objects]]

=== Tenglar ===
{{Wikibækur}}
* [http://www.w3.org/TR/CSS W3C CSS staðallinn]
* [http://www.w3.org/Style/ heimasíða vefstílmála á W3C]
* [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug viðbótin fyrir Firefox] {{Webarchive|url=https://web.archive.org/web/20071023070201/https://addons.mozilla.org/en-US/firefox/addon/1843 |date=2007-10-23 }}
* [http://instantcsscode.com/ Instant CSS Code] {{Webarchive|url=https://web.archive.org/web/20101031011031/http://instantcsscode.com/ |date=2010-10-31 }}
{{W3C}}
<!-- interwiki tungumálatenglar -->

[[Flokkur:Tölvumál|CSS]]
[[Flokkur:Tölvunarfræði]]