CSS je formalni jezik koji se koristi za opisivanje izgleda dokumenta kreiranog pomoću jezika za označavanje (HTML, XHTML, XML). Naziv dolazi od engleskog Cascading Style Sheets, što znači "kaskadni listovi stilova".

Zašto se koristi CSS?

Svrha CSS-a je razdvojiti ono što specificira izgled stranici, od njenog sadržaja. Ako je dokument izrađen samo sa koristeći HTML, tada definira ne samo svaki element, već i način na koji se prikazuje (boja, font, položaj bloka itd.). Ako su kaskadni listovi stilova povezani, tada HTML opisuje samo redoslijed objekata. A CSS je odgovoran za sva njihova svojstva. U HTML-u je dovoljno navesti klasu bez ispisivanja svih stilova svaki put.

Ova tehnologija:

• Osigurava relativno jednostavan i brz razvoj jer se jednom kreirani dizajn može primijeniti na mnoge stranice;
• povećava fleksibilnost i jednostavnost uređivanja - samo uredite u CSS-u da bi se dizajn svugdje promijenio;
• čini kôd jednostavnijim, smanjujući ponavljanje elemenata. Lakše ga je čitati programerima i pretraživačima;
• ubrzava vrijeme učitavanja jer se CSS može spremiti u predmemoriju pri prvom otvaranju, a pri sljedećim otvaranjima čitaju se samo struktura i podaci;
• povećava količinu vizualna rješenja prezentirati sadržaj;
• pruža mogućnost jednostavne primjene različitih stilova na jedan dokument (na primjer, stvaranje prilagođene verzije za Mobilni uredaji ili posebni stilovi za slabovidne osobe).

Odnosno, kaskadne tablice služe ne samo za implementaciju dizajna, već i radikalno mijenjaju pristup izradi web stranica, pojednostavljujući rad programera i pružajući fleksibilnost u implementaciji. Tome služi CSS.

Razvoj CSS-a

Potrebu za razvojem CSS-a prepoznao je W3C 1990-ih. Godine 1996. usvojen je standard CSS1 koji vam omogućuje promjenu postavki fonta, boje, atributa teksta, poravnanja i ispune. Godine 1998. objavljen je CSS2 koji je dodao mogućnosti za korištenje raspored blokova, zvučne tablice, generirani sadržaj, indeksi, stranica medija. Verzija CSS3 značajno je povećala mogućnosti stilova: postala je pristupačna kreacija animirani elementi bez koristeći JavaScript, pojavila se podrška za anti-aliasing, sjene, gradijente itd. Specifikacija je podijeljena na module, od kojih se svaki počeo razvijati zasebno. Od 2011. godine u tijeku je razvoj CSS4 modula. Značajke su trenutno opisane u nacrtima.

Struktura jezika

CSS se može okarakterizirati jednostavnim riječima kao skup pravila koja opisuju kako bi element trebao izgledati.

Pravilo se sastoji od selektora i bloka deklaracije.

Selektori

Selektor govori u kojem je elementu opisano CSS svojstva stil. Bilo koja oznaka koja se može formatirati (veličina, boja itd.) može djelovati kao selektor. Ako trebate postaviti različite stilove za oznaku ili primijeniti jedan za različite elemente, koriste se klase i zapis u obliku “Tag.Class (property: value;)”. Naziv klase naveden je latiničnim slovima i može sadržavati podvlaku ili crticu. Ako ne navedete oznaku, ali započnete unos s ".Class", tada možete koristiti pravilo za bilo koju oznaku. Ako navedete nekoliko klasa za jednu oznaku, na nju će se primijeniti svi opisani stilovi. Identifikator specificira jedinstveno ime za element koji treba stilizirati ili kojemu treba pristupiti pomoću skripte. Unos "#Identifikator (svojstvo: vrijednost;)". Naziv identifikatora sastoji se od slova latinica, prihvatljivo je koristiti crticu i podvlaku. Da biste primijenili identifikator na određenu oznaku, navedite njegov naziv, a zatim bez razmaka i odvojen znakom funte, naziv identifikatora.

Blok oglasa

Blok deklaracije sastoji se od parova svojstvo: vrijednost (unos uvijek slijedi dvotočka), smještenih u vitičaste zagrade. Unosi završavaju točkom i zarezom. CSS ne razlikuje tabulatore, razmake i velika i mala slova. Odabir načina snimanja (uvučeni stupac ili jednostavno u liniji) je prema nahođenju programera. Ako su za jedan selektor navedeni različita značenja za jedno svojstvo, donji unos ima prednost.

Povezivanje CSS-a

CSS se može povezati s HTML-om na nekoliko načina:

• unutar oznake pomoću atributa style. Nema potrebe za navođenjem selektora;
• dodaj oznaku

  Primjer teksta

  Ako je u decimalnom cijeli dio jednaka nuli, tada je dopušteno ne pisati. Oznake .7 i 0.7 su ekvivalentne.

  Interes

  Oznaka postotka obično se koristi u slučajevima kada je potrebno promijeniti vrijednost u odnosu na nadređeni element ili kada dimenzije ovise o vanjski uvjeti. Dakle, širina tablice od 100% znači da će se prilagoditi veličini prozora preglednika i mijenjati zajedno sa širinom prozora (primjer 6.3).

  Primjer 6.3. Postotni unos

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Sadržaj tablice

  Postoci ne moraju biti cijeli broj, kao što je 56,8%, mogu se koristiti.

  Dimenzije

  Za postavljanje dimenzija raznih elemenata, CSS koristi apsolutne i relativne mjerne jedinice. Apsolutne jedinice neovisne su o izlaznom uređaju, ali relativne jedinice definiraju veličinu elementa u odnosu na vrijednost druge veličine.

  Relativne jedinice

  Relativne jedinice obično se koristi za rad s tekstom ili kada trebate izračunati postotni odnos između elemenata. U tablici 6.1 navodi glavne relativne jedinice.

  Jedinica em je varijabilna vrijednost koja ovisi o veličini fonta trenutnog elementa (veličina se postavlja putem stila svojstvo veličine fonta). Svaki preglednik ima ugrađenu veličinu teksta koja se koristi kada ta veličina nije izričito navedena. Stoga je u početku 1em jednako veličini zadani font preglednika ili veličina fonta nadređenog elementa. Postotni zapis je identičan em, jer su vrijednosti 1em i 100% jednake.

  Jedinica ex je definirana kao visina znaka "x" u mala slova. ex podliježe istim pravilima kao i em, točnije da je vezan na zadanu veličinu fonta preglednika ili na veličinu fonta svog roditeljskog elementa.

  Piksel je elementarna točka prikazana na monitoru ili drugom sličan uređaj, na primjer, pametni telefon. Veličina piksela ovisi o razlučivosti uređaja i njegovoj tehničke karakteristike. Primjer 6.4 prikazuje korištenje piksela i em-ova za postavljanje veličine fonta.

  Primjer 6.4. Korištenje relativnih jedinica

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  30px zaglavlje

  Veličina teksta 1,5 em

  Rezultat ovog primjera prikazan je u nastavku (Slika 6.1).

  Riža. 6.1. Veličina teksta s različitim jedinicama

  Apsolutne jedinice

  Apsolutne jedinice se koriste rjeđe od relativnih i obično pri radu s tekstom. U tablici 6.2 navedene su osnovne apsolutne jedinice.

  Možda je najčešća jedinica točka, koja se koristi za označavanje veličine fonta. Iako smo navikli sve mjeriti u milimetrima i sličnim jedinicama, bit je možda jedina vrijednost koja nije metrički sustav mjerenje, koje se kod nas svuda upotrebljava. I sve hvala uređivači teksta i izdavački sustavi. Primjer 6.5 prikazuje korištenje točaka i milimetara.

  Primjer 6.5. Korištenje apsolutnih jedinica

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Naslov od 24 točke

  Pomak teksta udesno za 30 milimetara

  Rezultat korištenja apsolutnih mjernih jedinica prikazan je u nastavku (slika 6.2).

  

  Riža. 6.2. Veličina teksta s različitim jedinicama

  Prilikom postavljanja dimenzija svakako navedite mjerne jedinice, na primjer širina: 30px. U suprotnom, preglednik neće moći prikazati željeni rezultat jer ne razumije koju veličinu trebate. Jedinice se ne dodaju samo kada nulta vrijednost(margina: 0).

  Boja

  Boja u stilovima može se postaviti na tri načina: po heksadecimalna vrijednost, imenom i u RGB formatu.

  Po heksadecimalnoj vrijednosti

  Za određivanje boja koriste se heksadecimalni brojevi. Heksadecimalni sustav, za razliku od decimalnog, temelji se, kao što mu i samo ime kaže, na broju 16. Brojevi će biti sljedeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Brojevi od 10 do 15 se zamjenjuju latiničnim slovima. Brojevi veći od 15 in heksadecimalni sustav nastaju spajanjem dva broja u jedan. Na primjer, broj 255 in decimalni sustav odgovara broju FF u heksadecimalnom zapisu. Da ne bude zabune pri određivanju brojevnog sustava, prije heksadecimalni broj stavite simbol #, na primjer #666999. Svaka od tri boje - crvena, zelena i plava - može imati vrijednosti od 00 do FF. Dakle, simbol boje je podijeljen na tri komponente #rrggbb, gdje prva dva simbola označavaju crvenu komponentu boje, srednja dva - zelenu, a posljednja dva - plavu. Dopušteno je koristiti skraćeni oblik kao što je #rgb, gdje se svaki znak treba udvostručiti (#rrggbb). Na primjer, unos #fe0 smatra se #ffee00.

  Imenom

  Preglednici podržavaju neke boje prema njihovom nazivu. U tablici 6.3 prikazuje imena, heksadecimalni kod i opis.

  Stol 6.3. Imena boja

  Ime	Boja	Kodirati	Opis
  bijela		#ffffff ili #fff	Bijela
  srebro		#c0c0c0	Sivo
  siva		#808080	Tamno siva
  crno		#000000 ili #000	Crno
  kesten		#800000	Tamno crvena
  Crvena		#ff0000 ili #f00	Crvena
  naranča		#ffa500	naranča
  žuta boja		#ffff00 ili #ff0	Žuta boja
  maslina		#808000	Maslina
  vapno		#00ff00 ili #0f0	Svijetlo zelena
  zelena		#008000	zelena
  aqua		#00ffff ili #0ff	Plava
  plava		#0000ff ili #00f	Plava
  mornarica		#000080	Tamno plava
  plavozelena		#008080	Plavo zeleno
  fuksija		#ff00ff ili #f0f	Ružičasta
  ljubičasta		#800080	ljubičica

  Korištenje RGB

  Boju možete definirati pomoću vrijednosti crvene, zelene i plave u decimalnom obliku. Vrijednost svake od tri boje može biti u rasponu od 0 do 255. Također možete postaviti boju kao postotak. Prvo se navodi ključna riječ rgb, a zatim se u zagradama navode komponente boje, odvojene zarezima, na primjer rgb(255, 0, 0) ili rgb(100%, 20%, 20%).

  Primjer 6.6 predstavlja razne načine postavljanje boja za elemente web stranice.

  Primjer 6.6. Predstavljanje boja

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Lorem ipsum dolor sit amet

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

  Rezultat ovog primjera prikazan je na sl. 6.3.

  

  Adrese

  Adrese (URI, jedinstveni identifikatori resursa, jedinstveni identifikator resursa) koriste se za određivanje puta do datoteke, na primjer, za instalaciju pozadinska slika Na stranici. Da biste to učinili, upotrijebite ključnu riječ url(), napišite relativno ili apsolutna adresa datoteka. U tom slučaju, adresa se može navesti u opcionalnom pojedinačnom ili dvostruki navodnici(primjer 6.7).

  Primjer 6.7. Adresa grafičke datoteke

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Pažnja, tražena stranica nije pronađena!

  U ovom primjeru selektor tijela koristi apsolutnu adresu za grafička datoteka, a u selektoru div - relativno.

  Ključne riječi

  Ključne riječi se aktivno koriste kao vrijednosti koje određuju željeni rezultat svojstava stila. Ključne riječi napisano bez navodnika.

  Ispravno: P ( poravnanje teksta: desno; )
  Netočno: P ( poravnanje teksta: "desno"; )

  Pitanja za provjeru

  1. Koji redak sadrži pogrešku?

  1. veličina fonta: 20px
  2. veličina fonta: 0
  3. veličina fonta: 1.5em
  4. veličina slova: 5 mm
  5. veličina fonta: 300ex

  2. Koji je izraz pravilno napisan?

  1. boja: #fco
  2. širina: "auto"
  3. veličina fonta: plava
  4. pozadina: crvena
  5. granica: nema

  3. Koje će veličine u točkama biti tekst?

  Primjer teksta

  , ako je na stranici postavljen sljedeći stil?

  BODY (veličina fonta: 24pt; )
  P (veličina fonta: 50%; )
  SPAN (veličina fonta: 1,5 em; )

  4. Anya želi instalirati ljubičasta boja pozadina web stranice. Koja vrijednost svojstva pozadine je najbolja?

  1. #cbd1e8
  2. rgb(121, 232, 47)
  3. #b6b7be
  4. rgb (205%, 85%, 53%)

  5. Što nije u redu sa sljedećim stilom?

  img ( float: lijevo; border-width: 3; display: block )

  1. Na kraju unosa nedostaje točka-zarez.
  2. Jedinice za svojstvo border-width nisu navedene.
  3. Lijeve i blok vrijednosti su napisane bez navodnika.
  4. svojstva širine granice ne postoji.
  5. Vrijednost bloka svojstva prikaza ne može se primijeniti na slike.

  Odgovori

  1.veličina fonta: 1.5em

  5. Mjerne jedinice za svojstvo širine granice nisu navedene.

  Pustili smo nova knjiga"Sadržajni marketing u u društvenim mrežama: Kako ući u glave svojih pretplatnika i navesti ih da se zaljube u vaš brend.”

  Pretplatite se

  

  CSS je jezik za oblikovanje izgleda dokumenta kreiranog pomoću označnog jezika. CSS se obično koristi kao alat za opisivanje web stranica koje su prethodno bile napisane u XHTML-u i .

  Osim toga, CSS se može koristiti s drugim XML dokumentima, a najčešće se koriste XUL i SVG dokumenti.

  Da bismo razumjeli što je CSS, pogledajmo jednostavan primjer. Kada zaposlenik uredništva novina ili časopisa izradi prijelom publikacije, on pravi bilješke, koje se zatim koriste za razvoj izgleda gotovog materijala. Na primjer: “označite naslov crvenom bojom”, “uvucite ga”, “povećajte razmak između informacijski blokovi" i tako dalje. Kada radite s web stranicama, ne možete pisati takve bilješke na običnom jeziku; preglednik ih neće moći pročitati. Da bi uzeo u obzir ocjene, morate ih napisati u CSS-u.

  Kako radi CSS

  Princip rada temelji se na činjenici da CSS pronalazi specifičnu HTML element(naslov) i definira za to specifično svojstvo(boja) da biste mu dodijelili vrijednost (crvena). Napisano je ovako:

  

  CSS se koristi za donošenje stilskih odluka, kao i za izgled dokumenta HTML vrsta: zadaci visine, stupaca, postavljanja elemenata i tako dalje.

  Kako i gdje napisati CSS

  • CSS se može napisati kao atribut izravno u HTML-u.

  

  • Možete primijeniti oznaku