Čak i prije specifikacije CSS razine 2 iz 1998., elementi obrasca već su bili široko podržani u svim glavnim preglednicima. CSS 2 specifikacija još uvijek nije odgovorila na pitanje kako se elementi forme trebaju prikazati korisnicima. Budući da su elementi obrasca dio korisničkog sučelja u svakom web dokumentu, autori specifikacije odlučili su napustiti vizualni prikaz zadani elementi html obrasca za svaki preglednik.

Dugi niz godina nedostatak pojedinosti u specifikaciji u vezi s elementima obrasca tjerao je programere na stvaranje veliki broj testovi i primjeri, čija je glavna zadaća bila dovesti vizualne komponente svih elemenata obrasca u jedan prikaz na više preglednika. U ovom ćemo članku pogledati neke CSS predlošci, koji će vam omogućiti da dovedete elemente obrazaca na jedan zajednički nazivnik.

Testovi Rogera Johanssona za oblikovanje elemenata oblika

Još 2004. i ponovno 2007. Roger Johansson stvorio je posebne testne pakete za elemente obrasca i CSS. Postojao je jedan zaključak iz ovih testova koji je uznemirio Rogera:

Dakle, što je eksperiment pokazao? Kao što sam već napomenuo, testovi su pokazali da sa koristeći CSS Nije moguće kontrolirati stilove obrasca za dosljedan prikaz elemenata obrasca u svim preglednicima i platformama. Testovi su također pokazali da većina preglednika zanemaruje mnoga CSS svojstva kada se koriste za stiliziranje elemenata obrasca.

Unatoč neporecivoj istinitosti ovih otkrića, web programeri nastavljaju eksperimentirati CSS elementi forme u potrazi za svetim gralom ili barem razumnim kompromisom između zadanog prikazivanja preglednika i prilagođenog stila.

Zadani model prikaza elementa obrasca

Prema zadanim postavkama, CSS 2.1 specifikacija za HTML4 postavlja elemente obrasca kao što su textarea, input i select na inline-block mod prikaza:

Tekstualno područje, unos, odabir ( prikaz: umetnuti blok; )

Nasuprot tome, elementi obrasca i skupa polja imaju način blok prikaza:

Skup polja, obrazac ( prikaz: blok; )

CSS specifikacijski model za stilske elemente u obrascima završava ovim korakom. Svi ostali aspekti vizualnog prikaza elemenata obrasca ovise o zadanom listu stilova preglednika. Međutim, gore navedena pravila znače sljedeće:

• Elementi umetnutog bloka mogu se stilizirati pomoću konteksta umetnutog oblikovanja. Iz čega slijedi koristeći CSS svojstva kao što su line-height i vertical-align za kontrolu visine elementa i okomitog poravnanja. Svojstva ispune i margine također se mogu koristiti za kontrolu ispune i ispune elemenata obrasca. Vrijedno je napomenuti da se inline-block elementi također mogu kontrolirati korištenjem širine i visine; njihovo ponašanje u tom smislu se ne razlikuje od običnih blok elemenata.
• Elementi bloka mogu se stilizirati na standardan način, koristeći uobičajeni kontekst oblikovanja bloka. Međutim, postoje problemi s elementima obrasca fieldset i legende jer se oni u potpunosti oslanjaju na stil samog preglednika.

Postavlja se pitanje kako programeri mogu riješiti te probleme?

Rješavanje problema dimenzioniranja elemenata oplate

Web programeri ubrzo su uvidjeli da preglednici postupaju s inline-block elementima prilično čudno kada je u pitanju određivanje njihove veličine. Određivanje visine često dovodi do neočekivanih rezultata:

Unos, odabir ( širina: 120px; visina: 32px; )

Programeri su pokušali riješiti ovaj problem koristeći inline-block:

Unos, odabir ( širina: 120px; visina: 32px; prikaz: blok; )

Rezultati još uvijek ostavljaju mnogo toga za poželjeti s izuzetkom elementa textarea. Da biste riješili ovaj problem, prvo trebate normalizirati font i veličinu fonta za elemente obrasca:

Unos, odabir ( širina: 120px; font: 1em Arial, sans-serif; )

Nakon što je font instaliran, možete dodati ispunu:

Unos, odabir ( širina: 120px; font: 1em Arial, sans-serif; ispuna: 3px 6px; )

Elementima input i textarea također se može dati obrub, što će utjecati na njihove dimenzije u skladu s box-modelom:

Unos, unos, tekstualno područje ( obrub: 1px solid #ccc; )

Elementi vrsta unosa gumb i podnesi mogu imati dodatne ispune koje je dodao preglednik. Uobičajena praksa je njihovo normaliziranje:

Unos, unos ( padding: 2px; )

Problem s ovim pristupom je taj što preglednici često primjenjuju prefikse dobavljača na svojstva elementa, tako da normalizacija ispune nije uvijek moguća. Na primjer, za web-kit možete ga normalizirati ovako:

Unos, unos, unos, unos ::-webkit-file-upload-button, gumb ( -webkit-box-align: center; text-align: center; cursor: default; color: buttontext; padding: 2px 6px 3px; border : 2px početni gumb; granična slika: početna; pozadinska boja: gumb; veličina okvira: granični okvir; ) unos, unos, unos ( -webkit-appearance: pritisni gumb; razmak: pre; )

Ispuna također utječe na elemente polja i legende, ali s različitim rezultatima:

• Postavljanje ispune za fieldset na 0 resetira zadanu ispunu samo u nekim preglednicima (ne IE)
• Postavljanje ispune legende na 0 uzrokuje smanjenje elementa

Odaberite, potvrdni okvir, radio elementi mogu se normalizirati s dobrim rezultatima samo za nekoliko svojstava:

• Obitelj fontova
• Veličina fonta
• Širina (za odabir)
• Padding

Primjena drugih svojstava na ove elemente obrasca daje nedosljedne rezultate.

Poravnavanje elemenata u formama

Elementi obrasca mogu se poravnati okomito i vodoravno. Mogu se nalaziti na istoj liniji ili u grupi. Da biste ih poravnali duž jedne linije, možete koristiti float ili standardni inline-block kontekst.

Kada koristite plutajuće elemente, elementi se automatski pretvaraju u blok elemente. To znači da kontrolu nad tim elementima sada osigurava još devet pravila okvirnog modela.

S plutajućim elementima, glavni zadatak je postići dobro okomito poravnanje na trenutna linija. U ovom slučaju, uobičajena praksa je korištenje okomite margine ili ispune:

Unos, odabir (širina: 120px; float: lijevo; margin-top: 0.4em; )

Ovaj pristup funkcionira kada ne trebate poravnati blokove teksta, kao što je element oznake. U ovom slučaju možete koristiti relativno pozicioniranje, ispunu ili marginu na elementu koji sadrži samo tekst:

Još jedan problem nastaje s gumbima. U ovom slučaju, kada imate gumb čija je veličina veća od ostalih elemenata, možete postaviti okomito poravnanje koristeći relativno pozicioniranje:

Unos ( float: lijevo; širina: 90px; pozicija: relativna; vrh: 0,4em; )

Ovaj pristup relativnog pozicioniranja također funkcionira za potvrdne okvire i radio gumbe. Relativno pozicioniranje može se čak koristiti za normalizaciju lijevog ispuna elementa legende u skupu polja.

Ako koristite elemente u kontekstu ugrađenog oblikovanja, možete koristiti svojstvo vertical-align za okomito poravnanje:

Oznaka, unos ( okomito poravnanje: sredina; margina desno: 1em; )

Dobri rezultati može se postići kombiniranjem ovog svojstva sa svojstvom visine linije. Međutim, ovo svojstvo mora biti postavljeno na roditeljski element. Ako ga postavite izravno na sam element obrasca, to će utjecati na visinu elementa:

Redak obrasca (visina retka: 1,4;)

Korištenje deklaracije visine za nadređeni element uparen s istom vrijednošću visine linije također je dobra praksa:

Redak obrasca (visina linije: 1,8; visina: 1,8em;)

U kontekstu ugrađenog oblikovanja, možete koristiti svojstvo poravnanja teksta za nadređeni element za poravnavanje sadržaja elementa obrasca lijevo, središte ili desno.

Čudno ponašanje unosa datoteke

Ulazni element tipa file je Posebna prigoda. Takav bi element uvijek trebao biti vidljiv i prepoznatljiv u sučelju preglednika iz sigurnosnih razloga. To znači da preglednici namjerno ignoriraju neka stilska pravila (kao što su ona koja se odnose na vidljivost) i, u pravilu, primjenjuju vlastite algoritme definirane njihovim zadanim stilskim listom.

Osim toga, neki preglednici prikazuju samo jedan gumb, dok drugi također dodaju polje za put datoteke.

Međutim, web programeri pronašli su načine kako zaobići ovo ograničenje. Najprije su element zamotali u posudu.

CSS (Cascading Style Sheets), ili kaskadni stilski listovi, koriste se za opisivanje izgled dokument napisan u označnom jeziku. Obično se CSS stilovi koriste za stvaranje i promjenu stila elemenata web stranice i korisnička sučelja napisano u HTML jezici i XHTML, ali se također može primijeniti na bilo koju vrstu XML dokumenta, uključujući XML, SVG i XUL.

Kaskadni listovi stilova opisuju pravila za oblikovanje elemenata pomoću svojstava i prihvatljive vrijednosti ova svojstva. Za svaki element možete koristiti ograničeni skup svojstava; druga svojstva neće imati nikakav učinak na njega.

Deklaracija stila sastoji se od dva dijela: element web stranice − selektor i naredbe za oblikovanje - oglasni blok. Selektor govori pregledniku koji element treba formatirati, a blok deklaracije (kod u vitičastim zagradama) navodi naredbe za oblikovanje - svojstva i njihove vrijednosti.

Riža. 1. Struktura deklaracije CSS stila

Vrste kaskadnih stilskih listova i njihove specifičnosti

1. Vrste stilskih listova

1.1. Vanjski stilski list

Vanjski stilski list predstavlja tekstualna datoteka s ekstenzijom .css, koja sadrži skup CSS stilova za elemente. Datoteka se stvara u uređivaču koda, baš kao i HTML stranica. Datoteka može sadržavati samo stilove, bez HTML označavanja. Vanjski stilski list povezan je s web stranicom pomoću oznake , koji se nalazi unutar odjeljka . Ovi stilovi funkcioniraju za sve stranice web-mjesta.

Možete priložiti više listova stilova svakoj web stranici dodavanjem više oznaka uzastopno , označavajući svrhu ovog lista stilova u atributu medijske oznake. rel="stylesheet" specificira vrstu veze (veza na stilsku tablicu).

Atribut type="text/css" nije potreban prema HTML5 standardu, pa se može izostaviti. Ako atribut nedostaje, zadana vrijednost je type="text/css" .

1.2. Unutarnji stilovi

Unutarnji stilovi ugrađen u odjeljak HTML dokument i definirani su unutar oznake. Unutarnji stilovi imaju prednost nad vanjskim, ali su inferiorni u odnosu na ugrađene stilove (određene atributom style).

...

1.3. Ugrađeni stilovi

Kada pišemo umetnuti stilovi, zapisujemo CSS kod u HTML datoteku, izravno unutar oznake elementa pomoću atributa style:

Obratite pažnju na ovaj tekst.

Takvi stilovi utječu samo na element za koji su postavljeni.

1.4. pravilo @uvoza

pravilo @uvoza Omogućuje učitavanje vanjskih listova stilova. Da bi direktiva @import radila, mora se pojaviti u listu stilova (vanjskoj ili internoj) prije svih ostalih pravila:

Pravilo @import također se koristi za uključivanje web fontova:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Vrste selektora

Selektori predstavljaju strukturu web stranice. Oni pomažu stvoriti pravila za oblikovanje elemenata web stranice. Selektori mogu biti elementi, njihove klase i identifikatori, kao i pseudoklase i pseudoelementi.

2.1. Univerzalni selektor

Odgovara bilo kojem HTML elementu. Na primjer, * (margina: 0;) vratit će se na nulu margine za sve elemente stranice. Selektor se također može koristiti u kombinaciji s pseudo-klasom ili pseudo-elementom: *:after (CSS stilovi), *:checked (CSS stilovi) .

2.2. Selektor elementa

Selektori elemenata omogućuju formatiranje svih elemenata ove vrste na svim stranicama stranice. Na primjer, h1 (font-family: Lobster, cursive;) će postaviti opći stil oblikovanja za sve h1 naslove.

2.3. Izbornik razreda

Selektori klasa omogućuju vam da odredite stilove za jedan ili više elemenata s isto ime razred postavljen na različita mjesta na stranici ili na različite stranice mjesto. Na primjer, da biste stvorili naslov s klasom naslova, morate dodati atribut klase s vrijednošću naslov u početnu oznaku

i postavite stil za navedenu klasu. Stilovi stvoreni pomoću klase mogu se primijeniti na druge elemente, ne nužno te vrste.

Upute za korištenje osobno računalo

.naslov (transformacija teksta: velika slova; boja: svijetloplava; )

2.4. ID birač

Selektor ID-a omogućuje vam formatiranje jedan specifični element. ID mora biti jedinstven i može se pojaviti samo jednom na jednoj stranici.

#sidebar (širina: 300px; float: lijevo;)

2.5. Selektor potomaka

Selektori potomaka primjenjuju stilove na elemente unutar elementa spremnika. Na primjer, ul li (transformacija teksta: velika slova;) - odabrat će sve li elemente koji su djeca svih ul elemenata.

Ako želite oblikovati potomke određenog elementa, morate tom elementu dati klasu stila:

p.prvi a (boja: zelena;) — ovaj stil primijenit će se na sve veze potomke odlomka s prvom klasom ;

p .first a (boja: zelena;) - ako dodate razmak, stilizirat će se veze unutar bilo koje oznake .first klase koja je dijete elementa

First a (boja: zelena;) - ovaj stil će se primijeniti na bilo koju vezu koja se nalazi unutar drugog elementa, označenog class.first .

2.6. Izbornik djeteta

Element dijete izravno je dijete elementa koji ga sadrži. Jedan element može imati nekoliko podređenih elemenata, ali svaki element može imati samo jedan nadređeni element. Selektor djeteta omogućuje vam primjenu stilova samo ako podređeni element dolazi odmah nakon nadređenog elementa i nema drugih elemenata između njih, odnosno podređeni element nije ugniježđen ni u što drugo.
Na primjer, p > strong će odabrati sve jake elemente koji su djeca elementa p.

2.7. Sestra selektor

Sestrinstvo se javlja između elemenata koji dijele zajedničkog roditelja. Srodni selektori omogućuju odabir elemenata iz grupe elemenata iste razine.

h1 + p - odabrat će sve prve paragrafe odmah iza bilo koje oznake

bez utjecaja na preostale paragrafe;

h1 ~ p - odabrat će sve paragrafe koji su sestrinski bilo kojem h1 naslovu i odmah nakon njega.

2.8. Selektor atributa

Selektori atributa odabiru elemente na temelju naziva atributa ili vrijednosti atributa:

[atribut] - svi elementi koji sadrže navedeni atribut - svi elementi za koje je naveden atribut alt;

selektor[atribut] - elementi ovog tipa koji sadrže navedeni atribut, img - samo slike za koje je naveden atribut alt;

selector[attribute="value"] - elementi ove vrste koji sadrže navedeni atribut s određenom vrijednošću, img - sve slike čiji naslov sadrži riječ cvijet;

selektor[atribut~="vrijednost"] - elementi koji djelomično sadrže dana vrijednost, na primjer, ako je navedeno nekoliko klasa za element odvojen razmakom, p - odlomci čije ime klase sadrži značajku ;

selektor[atribut|="vrijednost"] - elementi čiji popis vrijednosti atributa počinje navedenom riječju, p - paragrafi čije je ime klase značajka ili počinje značajkom;

selektor[atribut^="vrijednost"] - elementi čija vrijednost atributa počinje navedenom vrijednošću, a - sve veze koje počinju s http://;

selektor[attribute$="value"] - elementi čija vrijednost atributa završava navedena vrijednost, img - sve slike u png formatu;

selector[attribute*="value"] - elementi čija vrijednost atributa sadrži navedenu riječ bilo gdje, a - sve veze čije ime sadrži book .

2.9. Selektor pseudo-klasa

Pseudo-klase su klase koje zapravo nisu priložene HTML oznakama. Omogućuju vam primjenu CSS pravila na elemente kada se događaj dogodi ili podliježe događaju određeno pravilo. Pseudoklase karakteriziraju elemente sa sljedećim svojstvima:

:hover - bilo koji element nad kojim se nalazi kursor miša;

:focus - interaktivni element koji je navigiran pomoću tipkovnice ili aktiviran pomoću miša;

:active - element koji je aktivirao korisnik;

:valid - polja obrasca čiji je sadržaj provjeren u pregledniku radi usklađenosti s navedenim tipom podataka;

:invalid — polja obrasca čiji sadržaj ne odgovara navedenom tipu podataka;

:enabled - sva aktivna polja obrasca;

:onemogućeno — blokirana polja obrasca, tj. u neaktivnom stanju;

:in-range - polja obrasca čije su vrijednosti u navedenom rasponu;

:out-of-range - polja obrasca čije vrijednosti nisu unutar navedenog raspona;

:lang() - elementi s tekstom na navedenom jeziku;

:not(selektor) - elementi koji ne sadrže navedeni selektor - klasa, identifikator, ime ili tip polja obrasca - :not() ;

:target je element sa simbolom # koji se spominje u dokumentu;

:checked — odabrani (korisnički odabrani) elementi obrasca.

2.10. Strukturni selektor pseudo-klasa

Strukturalne pseudoklase odabiru podređene elemente prema parametru navedenom u zagradama:

:nth-child(odd) - neparni podređeni elementi;

:nth-child(even) - parni elementi djeteta;

:nth-child(3n) - svaki treći element među djecom;

:nth-child(3n+2) - odabire svaki treći element, počevši od drugog djeteta (+2) ;

:nth-child(n+2) - odabire sve elemente počevši od drugog;

:nth-child(3) - odabire treći element djeteta;

:nth-last-child() - na popisu podređenih elemenata odabire element s navedeno mjesto, slično:nth-child() , ali počevši od posljednjeg, u suprotnom smjeru;

:first-child - omogućuje stiliziranje samo prvog podređenog elementa oznake;

:last-child - omogućuje formatiranje posljednjeg podređenog elementa oznake;

:only-child - odabire element koji je jedini podređeni element;

:empty - odabire elemente koji nemaju djecu;

:root - odabire element koji je korijen u dokumentu - html element.

2.11. Selektor pseudo-klasa strukturnog tipa

Označava određenu vrstu podređene oznake:

:nth-of-type() - odabire elemente slične :nth-child() , ali uzima u obzir samo tip elementa;

:first-of-type - odabire prvo dijete zadanog tipa;

:last-of-type - odabire posljednji element ove vrste;

:nth-last-of-type() - odabire element dati tip u popisu elemenata prema navedenoj lokaciji, počevši od kraja;

:only-of-type - odabire jedini element navedene vrste među podređenim elementima nadređenog elementa.

2.12. Selektor pseudo elemenata

Pseudoelementi se koriste za dodavanje sadržaja koji se generira pomoću svojstva sadržaja:

:prvo-slovo - odabire prvo slovo svakog odlomka, odnosi se samo na elemente bloka;

:first-line - odabire prvi redak teksta elementa, primjenjuje se samo na elemente bloka;

:before - umeće generirani sadržaj prije elementa;

:after - dodaje generirani sadržaj nakon elementa.

3. Kombinacija selektora

Da biste točnije odabrali elemente za oblikovanje, možete koristiti kombinacije birača:

img:nth-of-type(even) - odabrat će sve parne slike, alternativni tekst koji sadrži riječ css.

4. Selektori grupiranja

Isti stil može se primijeniti na više elemenata u isto vrijeme. Da biste to učinili, trebate navesti potrebne selektore na lijevoj strani deklaracije, odvojene zarezima:

H1, h2, p, raspon ( boja: rajčica; pozadina: bijela; )

5. Nasljeđivanje i kaskada

Nasljeđivanje i kaskada dva su temeljna pojma u CSS-u koji su usko povezani. Nasljeđivanje je mjesto gdje elementi nasljeđuju svojstva od svog roditelja (elementa koji ih sadrži). Kaskada se očituje u tome kako različiti tipovi listovi stilova se primjenjuju na dokument i kako se sukobljena pravila poništavaju.

5.1. Nasljedstvo

Nasljedstvo je mehanizam kojim se određena svojstva prenose s pretka na njegove potomke. CSS specifikacija dopušta nasljeđivanje svojstava povezanih s tekstualnim sadržajem stranice, kao što su boja, font, razmak između slova, visina retka, stil popisa, poravnanje teksta, uvlačenje teksta, transformacija teksta, vidljivost, bijela -razmak i razmak između riječi. U mnogim je slučajevima to zgodno jer ne morate postavljati veličinu fonta i obitelj fontova za svaki element na web stranici.

Svojstva koja se odnose na oblikovanje bloka se ne nasljeđuju. To su pozadina, obrub, prikaz, lebdenje i brisanje, visina i širina, margina, minimalna-maksimalna visina i širina, obris, preljev, ispuna, položaj, ukras teksta, okomito poravnanje i z-indeks.

Prisilno nasljeđivanje

Pomoću ključna riječ inherit može prisiliti element da naslijedi bilo koju vrijednost svojstva svog nadređenog elementa. Ovo funkcionira čak i za svojstva koja nisu naslijeđena prema zadanim postavkama.

Kako se postavljaju i funkcioniraju CSS stilovi

1) Stilovi se mogu naslijediti od nadređenog elementa (naslijeđena svojstva ili korištenjem vrijednosti nasljeđivanja);

2) Stilovi koji se nalaze u tablici stilova ispod nadjačavaju stilove koji se nalaze u gornjoj tablici;

3) Mogu se primijeniti stilovi iz jednog elementa različiti izvori. Možete provjeriti koji se stilovi primjenjuju u modu razvojnog programera preglednika. Da biste to učinili, kliknite na element desni klik mišem i odaberite “View code” (ili nešto slično). Desni stupac će navesti sva svojstva koja su postavljena na ovaj element ili naslijeđena od nadređenog elementa, zajedno sa stilskim datotekama u kojima su navedena, i serijski broj linije koda.

Riža. 2. Način rada za razvojne programere u Google preglednik Krom

4) Kada definirate stil, možete koristiti bilo koju kombinaciju selektora - selektor elementa, pseudoklasu elementa, klasu ili identifikator elementa.

div (border: 1px solid #eee;) #wrap (width: 500px;).box (float: left;).clear (clear: both;)

5.2. Kaskada

Kaskadno je mehanizam koji kontrolira konačni rezultat u situaciji kada se različita CSS pravila primjenjuju na isti element. Postoje tri kriterija koji određuju redoslijed primjene svojstava—!važno pravilo, specifičnost i redoslijed kojim su uključeni listovi stilova.

Pravilo!važno

Težina pravila može se odrediti pomoću ključne riječi!important, koja se dodaje odmah nakon vrijednosti svojstva, na primjer, span (font-weight: bold!important;) . Pravilo se mora staviti na kraj deklaracije ispred zagrade, bez razmaka. Takva će objava imati prednost nad svim ostalim pravilima. Ovo pravilo vam omogućuje da poništite vrijednost svojstva i postavite novu za element iz grupe elemenata u slučaju kada ne postoji Direktni pristup u datoteku stila.

Specifičnost

Za svako pravilo preglednik izračunava selektorsku specifičnost, a ako element ima proturječne deklaracije svojstava, u obzir se uzima pravilo koje ima najviše specifičnosti. Vrijednost specifičnosti ima četiri dijela: 0, 0, 0, 0. Specifičnost selektora definirana je na sljedeći način:

za id se dodaje 0, 1, 0, 0;
za klasu 0, 0, 1, dodaje se 0;
za svaki element i pseudoelement dodaje se 0, 0, 0, 1;
za inline stil dodan izravno elementu - 1, 0, 0, 0 ;
Univerzalni selektor nema specifičnosti.

H1 (boja: svijetloplava;) /*specifičnost 0, 0, 0, 1*/ em (boja: srebrna;) /*specifičnost 0, 0, 0, 1*/ h1 em (boja: zlatna;) /*specifičnost: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (boja: plava;) /*specifičnost: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .bočna traka (boja: siva;) /*specifičnost 0, 0, 1, 0 */ #bočna traka (boja: narančasta;) /*specifičnost 0, 1, 0, 0*/ li#bočna traka (boja: aqua;) /*specifičnost: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Kao rezultat toga, na element će se primijeniti ona pravila koja su specifičnija. Na primjer, ako element ima dvije specifičnosti s vrijednostima 0, 0, 0, 2 i 0, 1, 0, 1, tada će drugo pravilo pobijediti.

Redoslijed povezanih tablica

Možete stvoriti više vanjskih listova stilova i povezati ih s jednom web stranicom. Ako u različite tabliceću upoznati različita značenja svojstva jednog elementa, tada će se kao rezultat na element primijeniti pravilo u dolje navedenoj tablici stilova.

CSS je kratica za “Cascading Style Sheets”, što znači “kaskadni stilski listovi”. Koristi se za dizajn web stranica. Ako HTML kod sadrži sadržaj (ono što će preglednik prikazati), tada CSS određuje njegov dizajn (kako će ga preglednik prikazati). Ljepota CSS-a je u tome što uz pomoć jednog stila možete dizajnirati sve iste vrste elemenata stranice ili cijele stranice (sve veze, odlomci, popisi odjednom). Kod CSS stila jednom definirate kako bi pojedini element, na primjer slike, trebao izgledati, a oni mijenjaju svoj dizajn u svim dokumentima odjednom. Da biste promijenili oblikovanje teksta na cijelom web-mjestu, trebate samo jednom promijeniti CSS kod.

Osnovni CSS elementi

Kao što se HTML sastoji od oznaka, atributa i vrijednosti, CSS se sastoji od njih vlastite elemente. Bit CSS konstrukcija može se objasniti na sljedeći način: "Odredite koji element stranice stilizirati i odredite kako ga stilizirati." Ovdje su gradivni blokovi CSS-a.

• Selektor. Identifikator koji govori pregledniku na koji element stranice treba primijeniti dizajn. Zahvaljujući njemu, preglednik "razumije" da je stil namijenjen, na primjer, dizajniranju popisa ili tablica.
• Blok deklaracije stila. Piše se nakon selektora i nalazi se u naramenice. Određuje stil elementa (njegov dizajn). Blok deklaracije stila sastoji se od dva dijela.
• Vlasništvo. Analog atributa u HTML-u. Određuje koje će svojstvo izgleda biti promijenjeno.
• Značenje. Određuje svojstvo putem dvotočke i točno određuje kako će se svojstvo promijeniti.

Može postojati nekoliko svojstava i vrijednosti u bloku deklaracije stila, u kojem slučaju su navedeni odvojeni točkom i zarezom.

Vrste selektora

Ovisno o svojstvima elemenata stranice koje definiraju, birači dolaze u različitim vrstama.

• Univerzalni. Postavlja pravila za sve elemente stranice za koje nisu postavljena druga pravila.
  Šifra * (veličina fonta: 14px;) postavlja veličinu fonta na 14 piksela za sve elemente dokumenta za koje nisu određena druga pravila pomoću drugih selektora.
• Tega. Ova vrsta birača određuje pravila oblikovanja za sadržaj određene HTML oznake. Ime selektora je isto kao i ime deskriptora, samo je napisano bez uglastih zagrada: str, h1, ul.
  Na primjer, kod h2 (boja: crvena;) postavlja zelene boje tekst za sve naslove druge razine, odnosno sadržaj oznaka
  .
• Atribut. Pomoću ove grupe selektora možete odrediti stil sadržaja svih oznaka koje imaju naveden određeni atribut. Selektori se mogu preciznije odrediti navođenjem ne samo naziva atributa, već i vrijednosti koja mu je dodijeljena, kao i naziva oznake koja ga sadrži. To se može koristiti kako bi dizajn bio individualniji.
• razreda. Vrsta selektora kada trebate drugačije formatirati sadržaj oznaka iste vrste. Na primjer, želite da linkovi na dnu stranice budu crveni, dok svi ostali trebaju ostati plavi kao što su bili. Da biste primijenili pravila klase na element stranice, trebate navesti naziv klase u atributu razreda odgovarajuću oznaku.

Recimo korištenje klase korak pojedinačni elementi trebate postaviti lijevu marginu na 15 piksela.

CSS kod će biti ovakav:

Korak (margina-lijevo: 15px;)

HTML kod koji će vezati element za pravilo bit će:

Uvučeni tekst

• iskaznica. Koristi se zajedno s atributom iskaznica HTML oznaka i koristi se kada je potrebno postaviti svojstva za jedan element. Za razliku od selektora klase, čijem nazivu prethodi točka, on se piše koristeći hash:

#exclusive (boja:narančasta;)

• Kontekstualno. U HTML-u se određene oznake često nalaze unutar drugih oznaka, a kontekstualni birači pomažu definirati pravila upravo za takve slučajeve. Na primjer, možete ih koristiti za oblikovanje stavki unutar numeriranih popisa ili kurzivnog teksta unutar odlomaka:

P i (fint-obitelj: Century;)

Ostale grupe selektora temelje se na kombinaciji navedenih tipova, kao i na principu nasljeđivanja, kada element dijete preuzima svojstva svog roditelja.

Kombiniranje i grupiranje birača prikladno je u mnogim situacijama. Na primjer, za postavljanje pravila razreda korak samo za poveznice morate navesti oba selektora odvojena točkom (prvo oznaka, zatim klasa):

A.korak (margin-lijevo: 15px;)

Kako uključiti CSS u HTML stranicu?

Postoji nekoliko načina da alati za izradu web stranica budu u međusobnoj interakciji. Na temelju načina dodavanja, stilovi su podijeljeni u sljedeće kategorije.

Ugrađeni stilovi

Postavite u dokumentu izravno unutar HTML oznake pomoću atributa stil. Imajte najveći prioritet. To znači da ako je zadan isti element drugačiji dizajn, tada će se prednost dati pravilu koje je napisano unutar oznake. Selektor za ugrađeni stil nije potreban, jer je veza između stila i oznake očita - u njemu je naveden dizajn oznake.

Sljedeći kod postavlja veličinu i boju fonta za tekst unutar oznake

Tekst oblikovan korištenjem internog stila.

Globalni stilovi

Postavljeno oznakom …

Srodni stilovi

Najprikladnije, jer se uz njihovu pomoć lako možete registrirati ujednačenog stila cijelo mjesto. Povezani stil znači da su svi CSS stilovi u zasebnoj datoteci s ekstenzijom .css.

Ovaj pristup je također zgodan jer odvaja pravila dizajna stranica od njihovog sadržaja, CSS kod se može lako mijenjati bez uplitanja u HTML datoteke, a princip odvajanja koda je vrlo važan, posebno u velikim projektima.

Za povezivanje pravila iz CSS datoteke s HTML stranicom upotrijebite oznaku dodano u spremnik , i njegove atribute.

Ovdje je redak koji povezuje pravila iz datoteke moj stil.css sa HTML stranicom:

rel="stylesheet" navodi da se oznaka odnosi na datoteku stilske tablice, href="mysyle.css" postavlja svoju adresu. Pravila adresiranja su ista kao redovne veze– put može biti apsolutan, relativan i sl.

Uvezeni stilovi

Pomoću naredbe @uvoz možete dodati stilove iz CSS datoteke u trenutnu tablicu. Ovo može biti potrebno, na primjer, ako želite nadopuniti individualni dizajn dokumenta, definiran korištenjem globalnih stilova, s univerzalnim pravilima iz zasebna datoteka. Metoda se ne može koristiti s ugrađenim stilovima.

Kod u nastavku uvozi tablicu datoteke u dokument bilo koji.css, koji se nalazi u mapi s uređenim HTML dokumentom:

@uvezi url(bilo koji.css);

Naredba je zapisana u retku ispod uvodne oznake