CSS: razlika između inačica

Izvor: Wikipedija
Pregledaj povijest
← Starija izmjenaNovija izmjena →
Izbrisani sadržaj Dodani sadržaj
VizualnoWikitekst
m uklonjena kategorija Internet; dodana kategorija CSS uz pomoć dodatka HotCat
sintaksa
Redak 1: Redak 1:
{{dz}}
{{dz}}
'''CSS''' je kratica od {{jezikk|eng.}} ''Cascading Style Sheets''. Radi se ''stilskom'' [[programski jezik|jeziku]], koji se rabi za opis prezentacije dokumenta napisanog pomoću ''markup'' ([[HTML]]) jezika.
'''CSS''' je kratica od {{jezikk|eng.|Engleski}} ''Cascading Style Sheets''. Radi se ''stilskom'' [[programski jezik|jeziku]], koji se rabi za opis prezentacije dokumenta napisanog pomoću ''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.
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 selectora i deklaracijskog bloka.
=== Selector ===
Selector označava dio markupa na koji se primjenjuje stil. Selector 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 ==
== Primjeri ==
Redak 26: Redak 43:
</style>
</style>


== CSS1 ==
== Povijest ==

=== CSS1 ===

=== CSS2 ===

=== CSS3 ===


== CSS2 ==
== Izvori ==
{{izvori}}


== Vanjske poveznice ==
== Vanjske poveznice ==

Inačica od 28. svibnja 2017. u 13:46

Ovo je glavno značenje pojma CSS. Za druga značenja pogledajte CSS (razdvojba).

CSS je kratica od (eng.) Cascading Style Sheets. Radi se stilskom jeziku, koji se rabi za opis prezentacije dokumenta napisanog pomoću markup (HTML) jezika.[1]

Kako se web razvijao, prvotno su u HTML ubacivani elementi za definiciju prezentacije (npr. tag <font>), 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 selectora i deklaracijskog bloka.

Selector

Selector označava dio markupa na koji se primjenjuje stil. Selector 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 :hover 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 (:) i vrijednosti. Između svake dvije uzastopne deklaracije mora se nalaziti točka zarez (;).[2]

Vrijednosti mogu biti ključne riječi poput "center" (sredina) i "inherit" (naslijedi), brojčane vrijednosti poput 100 (debljina fonta), 200px (200 piksela), 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. rgb(255, 0, 0)), RGBA vrijednosti koje uključuju i alpha prozirnost (npr. rgba(255, 0, 0, 0.8)) ili HSL/HSLA vrijednosti (npr. hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%)).[3]

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. <p style="color: magenta;">Neki tekst</p> što daje:

    Neki tekst

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

  • <link rel="stylesheet" href="xyz.css" type="text/css">

ili pak: 

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

Povijest

CSS1

CSS2

CSS3

Izvori

  1. ↑ CSS developer guide. Mozilla Developer Network. Pristupljeno 24. rujna 2015.
  2. ↑ W3C CSS2.1 specification for rule sets, declaration blocks, and selectors (engleski). World Wide Web Consortium. 7. lipnja 2011. Pristupljeno 20. lipnja 2009.
  3. ↑ CSS Color (engleski). Mozilla Developer Network. 28. lipnja 2016. Pristupljeno 23. kolovoza 2016.

Vanjske poveznice

Nedovršeni članak CSS koji govori o računarstvu treba dopuniti. Dopunite ga prema pravilima Wikipedije.
Dobavljeno iz "https://hr.wikipedia.org/w/index.php?title=CSS&oldid=4903826"