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

Zašto koristiti CSS

Svrha CSS-a je da odvoji ono što definiše izgled stranicu, iz njenog sadržaja. Ako je dokument kreiran sa koristeći HTML, tada definira ne samo svaki element, već i način na koji se prikazuje (boja, font, pozicija bloka, itd.). Ako su kaskadni listovi stilova povezani, onda HTML opisuje samo redoslijed objekata. A CSS je odgovoran za sva njihova svojstva. U HTML-u je dovoljno propisati klasu bez navođenja svih stilova svaki put.

Takva tehnologija:

• pruža relativno jednostavan i brz razvoj, jer jednom kreiran dizajn se može primijeniti na mnogo stranica;
• povećava fleksibilnost i jednostavnost uređivanja - dovoljno je napraviti izmjene u CSS-u tako da se dizajn mijenja posvuda;
• čini kod jednostavnijim smanjenjem ponavljanja elemenata. Lakše je za čitanje za programere i botove za pretraživanje;
• ubrzava vrijeme učitavanja, jer se CSS može keširati na prvom otvaranju, a samo se struktura i podaci čitaju u sljedećim;
• povećava broj vizuelna rešenja predstaviti sadržaj;
• pruža mogućnost jednostavne primjene različitih stilova na isti dokument (na primjer, kreiranje prilagođene verzije za mobilnih uređaja ili posebne stilove za slabovide).

Odnosno, kaskadne tablice služe ne samo za utjelovljenje dizajna, već i za radikalnu promjenu pristupa izgradnji lokacije, pojednostavljujući rad programera i pružajući fleksibilnost implementacije. Za to služi CSS.

CSS razvoj

Potrebu za razvojem CSS-a prepoznao je W3C 1990-ih. Godine 1996. usvojen je standard CSS1 koji vam omogućava da promijenite postavke fonta, boju, atribute teksta, poravnanja i uvlake. 1998. objavljen je CSS2, dodajući mogućnost korištenja blok raspored, zvučne tabele, generisani sadržaj, indeksi, stranica medija. CSS3 verzija je značajno povećala mogućnosti stilova: postala je pristupačna kreacija animirani elementi bez Upotreba JavaScripta, postojala je podrška za anti-aliasing, senke, gradijente itd. Specifikacija je podeljena na module, od kojih je svaki počeo da se razvija zasebno. CSS4 moduli se razvijaju od 2011. godine. Mogućnosti su i dalje opisane u nacrtima verzija.

Struktura jezika

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

Pravilo se sastoji od selektora i bloka deklaracije.

Selektori

Selektor govori koji element će biti primijenjen opisan u CSS svojstva stil. Selektor može biti bilo koja oznaka koja je formatirana (veličina, boja, itd.). Ako trebate postaviti različite stilove za oznaku ili primijeniti jedan stil za različite elemente, koriste se klase i unos poput "Tag.Class (property: value;)". Ime klase je navedeno latiničnim znakovima i može sadržavati donju crtu ili crticu. Ako ne navedete oznaku, ali započnete unos sa ".Class", tada možete koristiti pravilo za bilo koju oznaku. Ako navedete nekoliko klasa za jednu oznaku, svi opisani stilovi će se primijeniti na nju. Identifikator specificira jedinstveno ime za element koji treba stilizirati ili skriptirati. Zabilježite "#Identifier (svojstvo: vrijednost;)". Ime identifikatora sastoji se od slova latinica, crtice i donje crte su dozvoljene. Da biste primijenili identifikator na određenu oznaku, navedite njeno ime, zatim bez razmaka i nakon znaka funte naziv identifikatora.

Blok oglasa

Blok deklaracije sastoji se od parova "svojstvo: vrijednost" (unos je uvijek praćen dvotočkom), smještenih u kovrčave zagrade. Unosi završavaju tačkom i zarezom. CSS je neosjetljiv na tabulatore, razmake i velika i mala slova. Izbor metode snimanja (uvučeni stupac ili samo umetnuti) je na diskreciji programera. Ako su za jedan selektor napisane različita značenja za jedno svojstvo, tada prednost ima niži unos.

CSS veza

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

• unutar oznake s atributom style. Nema potrebe specificirati selektor;
• dodaj oznaku

  Primer teksta

  Ako je decimalno cijeli dio je jednako nuli, onda je dozvoljeno ne pisati. Pisanje .7 i 0.7 je ekvivalentno.

  Interes

  Procentualna notacija se obično koristi u slučajevima kada trebate promijeniti vrijednost u odnosu na roditeljski element ili kada dimenzije zavise od spoljni uslovi. Na primjer, širina tabele od 100% znači da će se prilagoditi veličini prozora pretraživača i mijenjati se sa širinom prozora (Primjer 6-3).

  Primjer 6.3. Procentualni rekord

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Sadržaj tabele

  Procenti ne moraju biti cijeli brojevi, dozvoljeni su decimalni razlomci, na primjer 56,8%.

  Dimenzije

  Za postavljanje dimenzija razni elementi, CSS koristi apsolutne i relativne jedinice. Apsolutne jedinice su nezavisne od izlaznog uređaja, dok relativne jedinice definiraju veličinu elementa u odnosu na drugu vrijednost veličine.

  Relativne jedinice

  Relativne jedinice obično se koristi za rad s tekstom ili kada treba izračunati postotak između elemenata. U tabeli. 6.1 navodi glavne relativne jedinice.

  Jedinica em je promjenjiva vrijednost koja ovisi o veličini fonta trenutnog elementa (veličina se postavlja preko stilova). svojstvo veličine fonta). Svaki pretraživač ima ugrađenu veličinu teksta koja se primjenjuje kada ova veličina nije eksplicitno postavljena. Dakle, u početku 1em jednaka veličini podrazumevani font pretraživača ili veličina fonta roditeljskog elementa. Procentualna notacija je identična em , u smislu da su vrijednosti 1em i 100% jednake.

  Ex jedinica je definirana kao visina znaka "x" u mala slova. ex podliježe istim pravilima kao em , naime, vezan je za zadanu veličinu fonta pretraživača ili za veličinu fonta roditeljskog elementa.

  Piksel je elementarna tačka koju prikazuje monitor ili neko drugo sličan uređaj npr. pametni telefon. Veličina piksela ovisi o rezoluciji uređaja i njegovoj specifikacije. Primjer 6-4 pokazuje upotrebu 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

  Naslov od 30 piksela

  Veličina teksta 1,5 em

  Rezultat ovog primjera je prikazan ispod (slika 6.1).

  Rice. 6.1. Veličina teksta u različitim jedinicama

  Apsolutne jedinice

  Apsolutne jedinice se koriste rjeđe od relativnih, i obično kada se radi s tekstom. U tabeli. 6.2 navodi glavne apsolutne jedinice.

  Možda je najčešća jedinica tačka, koja se koristi za označavanje veličine fonta. Iako smo navikli sve mjeriti u milimetrima i sličnim jedinicama, tačka je možda jedina jedinica metrički sistem mjerenje, koje se koristi svuda. I sve hvala uređivači teksta i izdavačke sisteme. Primjer 6.5 pokazuje upotrebu tačaka i milimetara.

  Primjer 6.5. Korištenje apsolutnih jedinica

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Naslov od 24 tačke

  Pomaknite tekst udesno za 30 milimetara

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

  

  Rice. 6.2. Veličina teksta u različitim jedinicama

  Kada postavljate dimenzije, obavezno navedite jedinice mjere, kao što je širina: 30px. U suprotnom, pretraživač neće moći prikazati željeni rezultat, jer ne razumije koja vam je veličina potrebna. Jedinice se ne dodaju samo kada nula vrijednost(margina : 0 ).

  Boja

  Stilovi se mogu postaviti na tri načina: heksadecimalna vrijednost, po imenu iu RGB formatu.

  Po heksadecimalnoj vrijednosti

  Heksadecimalni brojevi se koriste za određivanje boja. Heksadecimalni sistem, za razliku od decimalnog, baziran je, kao što mu ime govori, na broju 16. Brojevi će biti sledeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Brojevi od 10 do 15 se zamjenjuju sa latiničnim slovima. Brojevi veći od 15 inča heksadecimalni sistem nastaje spajanjem dva broja u jedan. Na primjer, broj 255 in decimalni sistem odgovara broju FF u heksadecimalu. Da bi se izbjegla zabuna u definiciji brojevnog sistema, prije heksadecimalni broj stavite heš simbol #, na primjer #666999. Svaka od tri boje - crvena, zelena i plava - može imati vrijednosti od 00 do FF. Tako je oznaka boje podijeljena na tri komponente #rrggbb, gdje prva dva znaka označavaju crvenu komponentu boje, dva srednja označavaju zelenu komponentu, a posljednja dva označavaju plavu komponentu. Dozvoljena je upotreba skraćenog oblika oblika #rgb, gdje svaki znak treba udvostručiti (#rrggbb). Na primjer, unos #fe0 se tretira kao #ffee00.

  po imenu

  Pretraživači podržavaju neke boje po imenu. U tabeli. 6.3 prikazuje nazive, heksadecimalni kod i opis.

  Tab. 6.3. Imena boja

  Ime	Boja	Šifra	Opis
  bijela		#fffff ili #ffff	Bijelo
  Srebro		#c0c0c0	siva
  siva		#808080	Tamno siva
  crna		#000000 ili #000	Crni
  maroon		#800000	Tamno crvena
  crvena		#ff0000 ili #f00	Crveni
  narandžasta		#ffa500	Narandžasta
  žuta		#ffff00 ili #ff0	Žuta
  maslina		#808000	Maslina
  kreč		#00ff00 ili #0f0	svijetlo zelena
  zeleno		#008000	Zeleno
  aqua		#00ffff ili #0ff	Plava
  plava		#0000ff ili #00f	Plava
  mornarica		#000080	Tamno plava
  teal		#008080	plavo zeleno
  fuksija		#ff00ff ili #f0f	Pink
  ljubičasta		#800080	Ljubičasta

  Sa RGB

  Možete definirati boju koristeći crvene, zelene i plave vrijednosti u decimalnim terminima. Vrijednost svake od tri boje može imati vrijednosti od 0 do 255. Boju možete postaviti i kao postotak. Prvo se specificira ključna riječ rgb, a zatim se u zagradama, odvojenim zarezima, navode komponente boje, 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. Prikaz 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, Uniform Resource Identifier, Uniform Resource Identifier) ​​se koriste za određivanje putanje do datoteke, na primjer, za instalaciju pozadinska slika Na stranici. Za to se koristi ključna riječ url(), relativna ili apsolutnu adresu fajl. U ovom slučaju, adresa se može navesti u opcionom 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čki fajl, a u selektoru div je 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.

  Desno: P (poravnanje teksta: desno; )
  Pogrešno: P (poravnanje teksta: "desno"; )

  Pitanja za provjeru

  1. Koji red sadrži grešku?

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

  2. Koji je izraz ispravno napisan?

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

  3. Koju veličinu u bodovima će imati tekst

  Primer teksta

  ako je na stranici postavljen sljedeći stil?

  TIJELO (veličina fonta: 24pt; )
  P (veličina fonta: 50%; )
  SPAN (veličina fonta: 1.5em; )

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

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

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

  img ( float: lijevo; širina ivice: 3; prikaz: blok)

  1. Nedostaje tačka i zarez na kraju unosa.
  2. Za svojstvo širine granice nije navedena jedinica.
  3. Lijeva i blok vrijednosti se pišu bez navodnika.
  4. svojstva širine granice ne postoji.
  5. Vrijednost bloka prikaza svojstva nije dozvoljena na slikama.

  Odgovori

  1.veličina fonta: 1.5em

  5. Jedinice svojstva širine granice nisu specificirane.

  Pustili smo nova knjiga„Marketing sadržaja u na društvenim mrežama: Kako ući u glavu pretplatnika i zaljubiti se u svoj brend.

  Pretplatite se

  

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

  Dodatno, CSS se može koristiti sa drugim dokumentima kao što je XML, a najčešće se koriste XUL i SVG dokumenti.

  Da bismo razumjeli šta je CSS, pogledajmo jednostavan primjer. Kada zaposlenik redakcije novina ili časopisa napravi izgled publikacije, pravi bilješke prema kojima se zatim razvija izgled gotovog materijala. Na primjer: “označi naslov crvenom bojom”, “uvlačenje”, “povećaj razmak između informacioni blokovi" itd. Kada radite sa stranicama, ne možete pisati takve bilješke na jednostavnom jeziku, pretraživač ih neće moći pročitati. Da bi uzeo u obzir ocjene, potrebno ih je napisati u CSS-u.

  Kako CSS radi

  Princip rada se zasniva na činjenici da CSS pronalazi određenu HTML element(zaglavlje) i definira za njega specifična imovina(boja) da mu se da vrijednost (crvena). Napisano je ovako:

  

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

  Kako i gdje napisati CSS

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

  

  • Oznaka se može primijeniti