CSS - Povijest promjena

WikiSysop: bnz

2022-05-01T16:45:42Z

bnz

←Starija inačica		Inačica od 16:45, 1. svibnja 2022.
Redak 1:		Redak 1:
	~~<!--'''CSS'''-->~~{{dz}}		{{dz}}
	'''CSS''' je kratica od {{jezikk\|eng.\|Engleski}} ''Cascading Style Sheets''. Radi se o ''stilskom'' [[programski jezik\|jeziku]], koji se rabi za opis prezentacije dokumenta napisanog pomoću [[markup jezik\|''markup'']] ([[HTML]]) jezika.<ref>{{Citiranje weba\|title = CSS developer guide\|url = https://developer.mozilla.org/en-US/docs/Web/Guide/CSS\|website = Mozilla Developer Network\|accessdate = 2015-09-24}}</ref>		'''CSS''' je kratica od {{jezikk\|eng.\|Engleski}} ''Cascading Style Sheets''. Radi se o ''stilskom'' [[programski jezik\|jeziku]], koji se rabi za opis prezentacije dokumenta napisanog pomoću [[markup jezik\|''markup'']] ([[HTML]]) jezika.<ref>{{Citiranje weba\|title = CSS developer guide\|url = https://developer.mozilla.org/en-US/docs/Web/Guide/CSS\|website = Mozilla Developer Network\|accessdate = 2015-09-24}}</ref>

WikiSysop: Bot: Automatska zamjena teksta (-{{cite web +{{Citiranje weba)

2021-11-16T04:56:13Z

Bot: Automatska zamjena teksta (-{{cite web +{{Citiranje weba)

←Starija inačica		Inačica od 04:56, 16. studenoga 2021.
Redak 17:		Redak 17:

	=== Deklaracijski blok ===		=== Deklaracijski blok ===
	Deklaracijski blok su vitičaste zagrade unutar kojih se nalaze deklaracije. Svaka deklaracija sastoji se od svojstva, dvotočke (<code>:</code>) i vrijednosti. Između svake dvije uzastopne deklaracije mora se nalaziti točka zarez (<code>;</code>).<ref>{{~~cite web~~\|url=http://www.w3.org/TR/CSS21/syndata.html#q10 \|title=W3C CSS2.1 specification for rule sets, declaration blocks, and selectors \|publisher=World Wide Web Consortium\|date=7 June 2011 \|accessdate=2009-06-20\|language=engleski}}</ref>		Deklaracijski blok su vitičaste zagrade unutar kojih se nalaze deklaracije. Svaka deklaracija sastoji se od svojstva, dvotočke (<code>:</code>) i vrijednosti. Između svake dvije uzastopne deklaracije mora se nalaziti točka zarez (<code>;</code>).<ref>{{Citiranje weba\|url=http://www.w3.org/TR/CSS21/syndata.html#q10 \|title=W3C CSS2.1 specification for rule sets, declaration blocks, and selectors \|publisher=World Wide Web Consortium\|date=7 June 2011 \|accessdate=2009-06-20\|language=engleski}}</ref>

	Vrijednosti mogu biti ključne riječi poput "center" (sredina) i "inherit" (naslijedi), brojčane vrijednosti poput 100 (debljina fonta), 200px (200 [[piksel]]a), 50vw (50 % širine viewporta) ili 80% (80 % širine prozora). Vrijednosti boja mogu biti ključne riječi (npr. "red" za crveno), heksadecimalne vrijednosti (npr. #FF0000 ili #F00), RGB vrijednosti od 0 do 255 (npr. <code>rgb(255, 0, 0)</code>), RGBA vrijednosti koje uključuju i alpha prozirnost (npr. <code>rgba(255, 0, 0, 0.8)</code>) ili HSL/HSLA vrijednosti (npr. <code>hsl(000, 100%, 50%)</code>, <code>hsla(000, 100%, 50%, 80%)</code>).<ref>{{~~cite web~~ \|url=https://developer.mozilla.org/en-US/docs/Web/CSS/color \|title=CSS Color \|publisher=Mozilla Developer Network \|date=2016-06-28 \|accessdate=2016-08-23\|language=engleski}}</ref>		Vrijednosti mogu biti ključne riječi poput "center" (sredina) i "inherit" (naslijedi), brojčane vrijednosti poput 100 (debljina fonta), 200px (200 [[piksel]]a), 50vw (50 % širine viewporta) ili 80% (80 % širine prozora). Vrijednosti boja mogu biti ključne riječi (npr. "red" za crveno), heksadecimalne vrijednosti (npr. #FF0000 ili #F00), RGB vrijednosti od 0 do 255 (npr. <code>rgb(255, 0, 0)</code>), RGBA vrijednosti koje uključuju i alpha prozirnost (npr. <code>rgba(255, 0, 0, 0.8)</code>) ili HSL/HSLA vrijednosti (npr. <code>hsl(000, 100%, 50%)</code>, <code>hsla(000, 100%, 50%, 80%)</code>).<ref>{{Citiranje weba \|url=https://developer.mozilla.org/en-US/docs/Web/CSS/color \|title=CSS Color \|publisher=Mozilla Developer Network \|date=2016-06-28 \|accessdate=2016-08-23\|language=engleski}}</ref>

	=== Primjeri ===		=== Primjeri ===

WikiSysop: Bot: Automatska zamjena teksta (-{{Cite web +{{Citiranje weba)

2021-11-11T00:08:00Z

Bot: Automatska zamjena teksta (-{{Cite web +{{Citiranje weba)

←Starija inačica		Inačica od 00:08, 11. studenoga 2021.
Redak 1:		Redak 1:
	<!--'''CSS'''-->{{dz}}		<!--'''CSS'''-->{{dz}}
	'''CSS''' je kratica od {{jezikk\|eng.\|Engleski}} ''Cascading Style Sheets''. Radi se o ''stilskom'' [[programski jezik\|jeziku]], koji se rabi za opis prezentacije dokumenta napisanog pomoću [[markup jezik\|''markup'']] ([[HTML]]) jezika.<ref>{{~~Cite web~~\|title = CSS developer guide\|url = https://developer.mozilla.org/en-US/docs/Web/Guide/CSS\|website = Mozilla Developer Network\|accessdate = 2015-09-24}}</ref>		'''CSS''' je kratica od {{jezikk\|eng.\|Engleski}} ''Cascading Style Sheets''. Radi se o ''stilskom'' [[programski jezik\|jeziku]], koji se rabi za opis prezentacije dokumenta napisanog pomoću [[markup jezik\|''markup'']] ([[HTML]]) jezika.<ref>{{Citiranje weba\|title = CSS developer guide\|url = https://developer.mozilla.org/en-US/docs/Web/Guide/CSS\|website = Mozilla Developer Network\|accessdate = 2015-09-24}}</ref>

	Kako se web razvijao, prvotno su u HTML ubacivani elementi za definiciju prezentacije (npr. [[tag]] <nowiki><font></nowiki>), ali je dovoljno brzo uočena potreba za stilskim jezikom koji će HTML osloboditi potrebe prikazivanja sadržaja (što je prvenstvena namjena HTML-a) i njegovog oblikovanja (čemu danas služi CSS). Drugim riječima, stil definira kako prikazati HTML elemente. CSS-om se uređuje sam izgled i raspored stranice.		Kako se web razvijao, prvotno su u HTML ubacivani elementi za definiciju prezentacije (npr. [[tag]] <nowiki><font></nowiki>), ali je dovoljno brzo uočena potreba za stilskim jezikom koji će HTML osloboditi potrebe prikazivanja sadržaja (što je prvenstvena namjena HTML-a) i njegovog oblikovanja (čemu danas služi CSS). Drugim riječima, stil definira kako prikazati HTML elemente. CSS-om se uređuje sam izgled i raspored stranice.

WikiSysop: Bot: Automatski unos stranica

2021-08-27T00:38:28Z

Bot: Automatski unos stranica

Nova stranica

{{dz}}
'''CSS''' je kratica od {{jezikk|eng.|Engleski}} ''Cascading Style Sheets''. Radi se o ''stilskom'' [[programski jezik|jeziku]], koji se rabi za opis prezentacije dokumenta napisanog pomoću [[markup jezik|''markup'']] ([[HTML]]) jezika.<ref>{{Cite web|title = CSS developer guide|url = https://developer.mozilla.org/en-US/docs/Web/Guide/CSS|website = Mozilla Developer Network|accessdate = 2015-09-24}}</ref>

Kako se web razvijao, prvotno su u HTML ubacivani elementi za definiciju prezentacije (npr. [[tag]] <nowiki><font></nowiki>), ali je dovoljno brzo uočena potreba za stilskim jezikom koji će HTML osloboditi potrebe prikazivanja sadržaja (što je prvenstvena namjena HTML-a) i njegovog oblikovanja (čemu danas služi CSS). Drugim riječima, stil definira kako prikazati HTML elemente. CSS-om se uređuje sam izgled i raspored stranice.

== Sintaksa ==
Style sheet u CSS-u sastoji se od nekoliko pravila. Svako pravilo sastoji se od selektora i deklaracijskog bloka.
=== Selektor ===
Selektor (engl. selector) označava dio markupa na koji se primjenjuje stil. Selektor može biti:
* svi elementi istog tipa, npr. svi h2 elementi
* elementi određenog id ili class atributa:
** ''id'': jedinstven element
** ''class'': može obuhvaćati više od jednog elementa
* elementi u odnosu na druge elemente u DOM-u

Pseudoklase su klase koje omogućuju opisivanje informacija koje nisu dostupne u DOM-u poput <code>:hover</code> koji identificira sadržaj samo ako korisnik drži pokazivač nad sadržajem.

=== Deklaracijski blok ===
Deklaracijski blok su vitičaste zagrade unutar kojih se nalaze deklaracije. Svaka deklaracija sastoji se od svojstva, dvotočke (<code>:</code>) i vrijednosti. Između svake dvije uzastopne deklaracije mora se nalaziti točka zarez (<code>;</code>).<ref>{{cite web|url=http://www.w3.org/TR/CSS21/syndata.html#q10 |title=W3C CSS2.1 specification for rule sets, declaration blocks, and selectors |publisher=World Wide Web Consortium|date=7 June 2011 |accessdate=2009-06-20|language=engleski}}</ref>

Vrijednosti mogu biti ključne riječi poput "center" (sredina) i "inherit" (naslijedi), brojčane vrijednosti poput 100 (debljina fonta), 200px (200 [[piksel]]a), 50vw (50 % širine viewporta) ili 80% (80 % širine prozora). Vrijednosti boja mogu biti ključne riječi (npr. "red" za crveno), heksadecimalne vrijednosti (npr. #FF0000 ili #F00), RGB vrijednosti od 0 do 255 (npr. <code>rgb(255, 0, 0)</code>), RGBA vrijednosti koje uključuju i alpha prozirnost (npr. <code>rgba(255, 0, 0, 0.8)</code>) ili HSL/HSLA vrijednosti (npr. <code>hsl(000, 100%, 50%)</code>, <code>hsla(000, 100%, 50%, 80%)</code>).<ref>{{cite web |url=https://developer.mozilla.org/en-US/docs/Web/CSS/color |title=CSS Color |publisher=Mozilla Developer Network |date=2016-06-28 |accessdate=2016-08-23|language=engleski}}</ref>

=== Primjeri ===

CSS možemo pisati unutar same HTML stranice, na dva načina:

* kao stilove u zaglavlju HTML dokumenta (tj. između <style> i </style> elementa)

<style type="text/css">
h1 { color: blue }
</style>

* unutar samih HTML tagova, npr. <code><nowiki><p style="color: magenta;">Neki tekst</p></nowiki></code> što daje: <p style="color: magenta;">Neki tekst</p> 

ili ga možemo definirati u posebnom dokumentu, i rabiti pomoću poziva:

* <code><nowiki><link rel="stylesheet" href="xyz.css" type="text/css"></nowiki></code>
ili pak:

<style type="text/css">
@import url(http://www.neki.url/neki_stil);
</style>

=== Izvori ===
Informacija se u CSS-u može primiti na nekoliko načina. Izvori tih informacija mogu biti preglednik, korisnik i autor.

Različiti izvori imaju različite prioritete. U konačnici se prikazuje izvor s najvišim prioritetom. To se zove ''cascading''.

{| class="wikitable"
|+ Shema prioriteta u CSS-u (od najvišeg do najnižeg)
|-
! Prioritet !! Izvor !! Opis
|-
| 1 || Importance || Bilješka ‘<code>!important</code>’ ima najviši prioritet
|-
| 2 || Inline || Stil primijenjen na HTML element preko ‘style’ HTML atributa
|-
| 3 || Medijski upit || Definicija nekog svojstva primjenjuje se na sve medije (računalo, mobitel, ispis, ...), osim ako<br />je definiran poseban CSS za taj medij
|-
| 4 || Definirano od strane korisnika || Većina preglednika ima značajku pristupačnosti: korisnički definiran CSS
|-
| 5 || Specifičnost selektora || Posebni kontekstualni selektor (<code>#heading p</code>) ima prioritet nad općenitim (samo #heading)
|-
| 6 || Redoslijed pravila || Posljednje deklarirano pravilo ima najviši prioritet
|-
| 7 || '''Nasljeđivanje od roditelja''' || Ako svojstvo nije deklarirano, nasljeđuje se od roditelja
|-
| 8 || CSS svojstvo unutar HTML dokumenta || CSS stil ima prednost pred vrijednosti koju definira sam preglednik
|-
| 9 || Zadano u pregledniku || Najniži prioritet ima vrijednost već deklarirana u samom pregledniku određena prema W3C specifikacijama zadanih vrijednosti
|}

== Povijest ==

=== CSS1 ===

=== CSS2 ===

=== CSS3 ===

== Izvori ==
{{izvori}}

== Vanjske poveznice ==

* {{jezikk|eng.}} [http://www.w3.org/TR/CSS1 CSS1 specifikacija]
* {{jezikk|eng.}} [http://www.w3.org/TR/CSS2 CSS2 specifikacija]
[[Kategorija:CSS]]
[[Kategorija:Tipizacija datoteka po nastavcima]]
[[Kategorija:W3C]]

[[mk:CSS селектори]]
{{Mrva-rač}}