„CSS“: Munur á milli breytinga
mEkkert breytingarágrip |
mEkkert breytingarágrip |
||
(33 millibreytinga eftir 19 notendur ekki sýndar) | |||
Lína 1: | Lína 1: | ||
{{Skráarforsnið |
{{Skráarforsnið |
||
| nafn = CSS (Cascading Style Sheets) |
| nafn = CSS ''(Cascading Style Sheets)'' |
||
| merki = |
| merki = |
||
| vörumerki = |
| vörumerki = |
||
| mynd = [[Mynd: |
| mynd = [[Mynd:P2t css sample 2.jpg]] |
||
| myndatexti = Dæmi um CSS skjal. |
| myndatexti = Dæmi um CSS skjal. |
||
| lenging = .css |
| lenging = .css |
||
| mime = text/css |
| mime = text/css |
||
| tegund kóða = |
| tegund kóða = |
||
| uniform tegund = public.css |
|||
| galdur = |
| galdur = |
||
| eigandi = [[World Wide Web Consortium|W3C]] |
| eigandi = [[World Wide Web Consortium|W3C]] |
||
Lína 19: | Lína 18: | ||
}} |
}} |
||
'''Cascading Style Sheets'' |
'''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 == |
== Munur á gömlu HTML og XHTML/HTML og CSS == |
||
Í eldri útgáfum HTML var hægt að skilgreina rauðan texta svona: |
Í 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: |
Í ú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: |
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. |
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. |
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" |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
||
"http://www.w3.org/TR/html4/strict.dtd"> |
"http://www.w3.org/TR/html4/strict.dtd"> |
||
Lína 52: | Lína 51: | ||
</body> |
</body> |
||
</html> |
</html> |
||
</syntaxhighlight> |
|||
</source> |
|||
== Uppbygging == |
== 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. |
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 { |
h1 { |
||
color: red; |
color: red; |
||
Lína 64: | Lína 63: | ||
/* athugið að bilið milli „color:“ og „gray“ (litað blátt) hefur verið tekið burt */ |
/* athugið að bilið milli „color:“ og „gray“ (litað blátt) hefur verið tekið burt */ |
||
} |
} |
||
</syntaxhighlight> |
|||
</source> |
|||
=== Veljarar === |
=== 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. |
Þó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 ==== |
==== 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.''' |
'''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"> |
<span class="klasi1"> |
||
Hér er texti í klasa 1. |
Hér er texti í klasa 1. |
||
Lína 76: | Lína 75: | ||
Og hér er texti í bæði klasa 1 og 2. |
Og hér er texti í bæði klasa 1 og 2. |
||
</p> |
</p> |
||
</syntaxhighlight> |
|||
</source> |
|||
'''Klasarnir eru valdir með því að hafa punkt og svo klasann strax á eftir.''' Hægt er að hafa nafnið á markinu á undan. |
'''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 { |
.klasi1 { |
||
color: red; |
color: red; |
||
text-style: italic; |
text-style: italic; |
||
} |
} |
||
p.klasi2 { |
p.klasi2 { |
||
background-color: green; |
background-color: green; |
||
font-style: none; |
font-style: none; |
||
font- |
font-weight: bold; |
||
} |
} |
||
</syntaxhighlight> |
|||
</source> |
|||
Þetta myndi líta nokkurn veginn svona út: |
Þetta myndi líta nokkurn veginn svona út: |
||
<br /> |
<br /> |
||
Lína 96: | Lína 96: | ||
<p style="color: red;background-color: green; |
<p style="color: red;background-color: green; |
||
font-style: none; |
font-style: none; |
||
font- |
font-weight: bold;"> |
||
Og hér er texti í bæði klasa 1 og 2. |
Og hér er texti í bæði klasa 1 og 2. |
||
</p> |
</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ð. |
Þ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 === |
=== ID === |
||
'''Hægt er að velja mörk eftir því hvaða „ID“ þau hafa. Í [[HTML]] er það gildi <code>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; |
color: yellow; |
||
} |
} |
||
span#merkilegt /* velur span markið með ID-ið merkilegt */ { |
span#merkilegt /* velur span markið með ID-ið merkilegt */ { |
||
color: red; /* litar textann rauðan */ |
color: red; /* litar textann rauðan */ |
||
text-decoration: underline; /* strikar undir textann */ |
text-decoration: underline; /* strikar undir textann */ |
||
font-wheight: bold; /* þykkir letrið með gleiðletri */ |
font-wheight: bold; /* þykkir letrið með gleiðletri */ |
||
font-size: x-large; /* stækkar leturgerðina */ |
font-size: x-large; /* stækkar leturgerðina */ |
||
} |
|||
</source> |
|||
==== gervi-klasar ==== |
|||
'''Gervi klasar''' (e. [[wikt:pseudo|pseudo]]) '''eru klasar marka sem þurfa ekki endilega að hafa <code>class</code> eigindið''' skilgreint, '''heldur fylla þ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ærzt á milli gerviklasa við aðgerðir notendans. |
|||
<source lang="css"> |
|||
: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 */ |
|||
} |
} |
||
</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 */ { |
a:hover /* velur tengla sem notandinn er með bendilinn (tölvumús eða álíka tæki) yfir */ { |
||
color: blue; |
color: blue; |
||
text-decoration: underline; |
text-decoration: underline; |
||
} |
} |
||
</syntaxhighlight> |
|||
</source> |
|||
=== Stílar === |
=== 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). |
'''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"> |
||
veljari { /* sjá #veljarar */ |
|||
eigindi: gildi; /* dæmið virkar ekki */ |
|||
} |
|||
/* Dæmi sem virkar: */ |
|||
p { |
p { |
||
color: black; /* Þetta gefur eigindinu color (litinn) gildið black (svartan). Það litar textann svartan. */ |
color: black; /* Þetta gefur eigindinu color (litinn) gildið black (svartan). Það litar textann svartan. */ |
||
} |
} |
||
</syntaxhighlight> |
|||
</source> |
|||
Eigindin og gildin eru venjulega orð á [[Enska|amerískri ensku]]. |
Eigindin og gildin eru venjulega orð á [[Enska|amerískri ensku]]. |
||
== Kostir CSS == |
== 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. |
* Í ''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. |
||
Lína 142: | Lína 139: | ||
* CSS býður upp á möguleika sem bæta aðgengi fatlaðra að innihaldi 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. |
* CSS minnkar í mörgum tilfellum stærð skjala. |
||
== Tenglar == |
|||
=== Tengt efni === |
|||
'''Hér eru''' nokkrir '''tenglar á efni þar sem þú getur lesið þér''' meira '''til um CSS'''. |
|||
{{Wikibækur}} |
|||
=== Sjá einnig === |
|||
* [[JSON]] |
* [[JSON]] |
||
* [[XSL]] |
* [[XSL]] |
||
Lína 153: | Lína 148: | ||
* [[XSL Transform]] |
* [[XSL Transform]] |
||
* [[XSL Formatting Objects]] |
* [[XSL Formatting Objects]] |
||
=== Útværir tenglar === |
|||
=== Tenglar === |
|||
{{Wikibækur}} |
|||
* [http://www.w3.org/TR/CSS W3C CSS staðallinn] |
* [http://www.w3.org/TR/CSS W3C CSS staðallinn] |
||
* [http://www.w3.org/Style/ heimasíða vefstílmála á W3C] |
* [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] |
* [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 --> |
<!-- interwiki tungumálatenglar --> |
||
[[Flokkur:Tölvumál|CSS]] |
[[Flokkur:Tölvumál|CSS]] |
||
[[Flokkur:Tölvunarfræði]] |
[[Flokkur:Tölvunarfræði]] |
||
[[ar:صفحات الطرز المتراصة]] |
|||
[[az:CSS]] |
|||
[[bat-smg:CSS]] |
|||
[[bg:CSS]] |
|||
[[bs:CSS]] |
|||
[[ca:Cascading Style Sheets]] |
|||
[[cs:Cascading Style Sheets]] |
|||
[[cy:Cascading Style Sheets]] |
|||
[[da:CSS]] |
|||
[[de:Cascading Style Sheets]] |
|||
[[el:CSS]] |
|||
[[en:Cascading Style Sheets]] |
|||
[[eo:CSS]] |
|||
[[es:Hojas de estilo en cascada]] |
|||
[[et:CSS]] |
|||
[[eu:CSS]] |
|||
[[fa:الگوهای آبشاری]] |
|||
[[fi:Cascading Style Sheets]] |
|||
[[fr:Feuilles de style en cascade]] |
|||
[[ga:Stílbhileoga cascáideacha]] |
|||
[[gd:CSS]] |
|||
[[gl:CSS]] |
|||
[[he:גיליונות סגנון מדורגים]] |
|||
[[hr:CSS]] |
|||
[[hsb:CSS]] |
|||
[[hu:CSS]] |
|||
[[id:Cascading Style Sheets]] |
|||
[[it:Fogli di stile a cascata]] |
|||
[[ja:Cascading Style Sheets]] |
|||
[[ka:CSS]] |
|||
[[km:Cascading Style Sheets]] |
|||
[[ko:CSS]] |
|||
[[la:CSS]] |
|||
[[lt:CSS]] |
|||
[[lv:Cascading Style Sheets]] |
|||
[[ml:കാസ്കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്സ്]] |
|||
[[ms:Cascading Style Sheets]] |
|||
[[nl:Cascading Style Sheets]] |
|||
[[nn:Stilark]] |
|||
[[no:Cascading Style Sheets]] |
|||
[[pl:Kaskadowe arkusze stylów]] |
|||
[[pt:Cascading Style Sheets]] |
|||
[[ro:Cascading Style Sheets]] |
|||
[[ru:Каскадные таблицы стилей]] |
|||
[[simple:Cascading Style Sheets]] |
|||
[[sk:Kaskádové štýly]] |
|||
[[sl:CSS]] |
|||
[[sq:Fletat e Stileve të Shkallëzuar]] |
|||
[[sr:CSS]] |
|||
[[sv:Cascading Style Sheets]] |
|||
[[ta:விழுத்தொடர் பாணித் தாள்கள்]] |
|||
[[th:แคสเคดดิงสไตล์ชีตส์]] |
|||
[[tk:CSS]] |
|||
[[tr:Stil şablonları]] |
|||
[[uk:CSS]] |
|||
[[vi:CSS]] |
|||
[[zh:CSS]] |
Nýjasta útgáfa síðan 23. desember 2023 kl. 13:25
CSS (Cascading Style Sheets) | |
---|---|
Dæmi um CSS skjal. | |
Skráarending: | .css |
MIME-gerð: | text/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) |
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
[breyta | breyta frumkóða]Í eldri útgáfum HTML var hægt að skilgreina rauðan texta svona:
<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 í sérstakri CSS-skrá með eftirfarandi hætti:
p { color: red; }
Og stiklutextinn 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
[breyta | breyta frumkóða]Grunnmálfræði CSS 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
[breyta | breyta frumkóða]Þó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
[breyta | breyta frumkóða]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-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 color: red
áhrif á báða klasana en font-style: italic
hafði bara áhrif á fyrra dæmið.
ID
[breyta | breyta frumkóða]Hægt er að velja mörk eftir því hvaða „ID“ þau hafa. Í HTML er það gildi id
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 */
}
Gerviklasar
[breyta | breyta frumkóða]Gerviklasar eru klasar marka sem þurfa ekki endilega að hafa class
eigindið skilgreint, heldur uppfylla þ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æ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
[breyta | breyta frumkóða]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.
Kostir CSS
[breyta | breyta frumkóða]- Í 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.
Tengt efni
[breyta | breyta frumkóða]Tenglar
[breyta | breyta frumkóða]- W3C CSS staðallinn
- heimasíða vefstílmála á W3C
- Firebug viðbótin fyrir Firefox Geymt 23 október 2007 í Wayback Machine
- Instant CSS Code Geymt 31 október 2010 í Wayback Machine