„CSS“: Munur á milli breytinga

CSS (Cascading Style Sheets)
	Mynd:CSS.svg; Dæmi um CSS skjal.
Skráarending:	.css
MIME-gerð:	text/css
UTI:	public.css
Hönnun:	W3C
Tegund forsniðs:	Stílmál
Staðall:	W3C 1,0 (Tilmæli) ; W3C 2,0 (Tilmæli) ; W3C 2,1 (Í vinnslu)

Fletta í gegnum breytingarskrá

← Eldri breyting Nýrri breyting →

Efni eytt Efni bætt við

MyndræntWiki-texti

Innfellt

Útgáfa síðunnar 12. febrúar 2010 kl. 12:18

Cascading Style Sheets (CSS) eru sérstök snið sem notuð eru til að skilgreina umbrot og útlit stiklutexta á borð við SGML og XHTML sem hafa skrifmáta líkan JSON. Stílsnið henta vel til aðskilnaðar innihalds og útlits þar sem innihaldi XML skjals eru gerð útlitstengd skil. Aðskilnaður innihalds og útlits HTML var boðaður af W3C með XHTML staðlinum.

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

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

<p color="red">Rauður Texti</p>

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

p { color: red; }

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

<p>Rauður Texti</p>

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

<link rel="stylesheet" type="text/css" media="screen,projection" href="screen.css" />

Einnig er hægt að hafa stílreglurnar í <head> hluta HTML skjals, innan í <style> marki.

<!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>

Uppbygging

CSS stílmáls regla samanstendur af veljara (e. selector) og stíl (e. declaration). Veljarinn kemur á undann síðan kemur slaufusvigi („{“), því næst stíllinnn – sem aftur er skipt í eigindi (e. property og gildi (e. value), aðskilin með tvípunkti („:“) – og loks öfugur slaufusvigi („}“). Þ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 („, “) skiptur listi yfir þau. Hægt er að hafa umsagnir (e. comment í CSS kóðanum innan í „/*“ og „*/“-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ð class sem hefur klasann sem gildi. Hægt er að hafa mark í mörgum klösum og er þá class eigindið látið innihalda bilskiptan lista (lista þar sem gildin eru aðskilin með bili) með klösunum.

<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>

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-wheight: 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 color: red áhrif á báða klasana en font-style: italic 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 id</cide> eigindisins og í XML er það gildi xml:id(strangt til tekið þarf ekki að vera xml: á undan id en eigindið verður að vera í XML nafnaplássinu (XML Namespace). Það er gert með því að hafa ferhyrning („#“) á 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.

# 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 */
}

gervi-klasar

Gervi klasar (e. pseudo) eru klasar marka sem þurfa ekki endilega að hafa class eigindið skilgreint, heldur fylla þeir þau skilyrði sem hver klasi setur. Tvípunktur („:“) er hafður á undan nafni gerviklasans frekar en punkturinn á undan „venjulegu“ klösunum. Mörk geta færzt á milli gerviklasa við aðgerðir notendans.

:root /* velur rótarmark skjalsins, í HTML er það <html> markið */ {
background-image: url(http://is.wikibooks.org/skins-1.5/monobook/headbg.jpg) /* gerir bakgrunnsmyndina þá sömu og á Wikibókum */
}
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).

veljari { /* sjá #veljarar */
eigindi: gildi; /* dæmið virkar ekki */
}
/* Dæmi sem virkar: */
p {
color: black; /* Þetta gefur eigindinu color (litinn) gildið black (svartan). Það litar textann svartan. */
}

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

Kostir CSS

Í media hluta 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.

Tenglar

Hér eru nokkrir tenglar á efni þar sem þú getur lesið þér meira til um CSS.




Wikibækur eru með efni sem tengist CSS.

Sjá einnig

JSON
XSL
HTML
XHTML
XML
XSL Transform
XSL Formatting Objects

Útværir tenglar

W3C CSS staðallinn
heimasíða vefstílmála á W3C
Firebug viðbótin fyrir Firefox

@@ Lína 151: / Lína 151: @@
 * [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]
+<!-- interwiki tungumálatenglar -->
 [[Flokkur:Tölvumál|CSS]]
 [[Flokkur:Tölvunarfræði]]
-<!-- interwiki tungumálatenglar -->
 [[ar:صفحات الطرز المتراصة]]
@@ Lína 191: / Lína 190: @@
 [[la:CSS]]
 [[lt:CSS]]
-[[lv:CSS]]
+[[lv:Cascading Style Sheets]]
 [[ml:കാസ്‌കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്‌സ്]]
 [[ms:Cascading Style Sheets]]