Čak i prije 1998. godine, kada se pojavila specifikacija CSS nivoa 2, elementi obrasca su već bili široko podržani u svim glavnim pretraživačima. CSS 2 specifikacija tek treba da odgovori na pitanje kako elementi forme treba da budu predstavljeni korisnicima. Budući da su elementi obrasca dio korisničkog sučelja u svakom web dokumentu, autori specifikacije su odlučili da odu vizuelna prezentacija html elementi obrasca po defaultu za svaki pretraživač.

Tokom godina, nedostatak detalja u specifikaciji u vezi sa elementima forme primorao je programere da kreiraju veliki broj testove i primjere, čiji je glavni zadatak bio da vizuelne komponente svih elemenata forme dovedu u jedan cross-browser izgled. U ovom članku ćemo pogledati neke CSS šabloni koji će vam omogućiti da elemente forme dovedete u jedan zajednički nazivnik.

Testovi Rogera Johanssona za oblikovanje elemenata forme

Još 2004., a zatim 2007., Roger Johansson je kreirao prilagođene testne pakete za elemente forme i CSS. Iz ovih testova proizašao je jedan zaključak koji je uznemirio Rodžera:

Dakle, šta je eksperiment pokazao? Kao što sam već napomenuo, testovi su pokazali da sa koristeći CSS nije moguće kontrolisati stilove obrazaca kako bi se elementi obrasca prikazali istim na svim pretraživačima i platformama. Testovi su takođe pokazali da većina pretraživača ignoriše mnoga CSS svojstva kada se primenjuju na elemente obrasca stila.

Uprkos nepobitnoj istinitosti ovih nalaza, web programeri nastavljaju da eksperimentišu CSS elementi forme u potrazi za Svetim gralom, ili barem razumnim kompromisom između podrazumevanog prikazivanja pretraživača i izvornog stila.

Zadani model prikaza za elemente forme

Prema zadanim postavkama, CSS 2.1 specifikacija za HTML4 postavlja način prikaza inline-bloka za elemente obrasca kao što su polje za tekst, unos i odabir:

Područje teksta, unos, odabir (prikaz: inline-block;)

Obrnuto, elementi forme i skupa polja imaju način prikaza blokova:

Skup polja, obrazac (prikaz: blok;)

Model CSS specifikacije za stilizovanje elemenata u obrascima završava se u ovom koraku. Svi ostali aspekti vizuelnog prikaza elemenata forme zavise od podrazumevanog stilskog lista pretraživača. Međutim, gore navedena pravila znače sljedeće:

• Inline-blok elementi se mogu stilizirati korištenjem konteksta inline formatiranja. Ovo implicira koristeći CSS svojstva kao što su line-height i vertical-align za kontrolu visine elementa i vertikalnog poravnanja. Svojstva odstupanja i margine također se mogu koristiti za kontrolu dopuna i dopuna za elemente obrasca. Vrijedi napomenuti da se inline-blok elementi također mogu kontrolirati pomoću širine i visine, njihovo ponašanje u tom pogledu se ne razlikuje od običnih blok elemenata.
• Blok elementi se mogu stilizirati na standardan način koristeći uobičajeni kontekst formatiranja blokova. Međutim, postoje problemi sa elementima forme za skup polja i legendu jer se oni u potpunosti oslanjaju na stilove samog pretraživača.

Postavlja se pitanje kako programeri rješavaju ove probleme?

Rješavanje problema s veličinom elemenata forme

Web programeri su ubrzo uvidjeli da pretraživači rukuju inline-blok elementima na prilično čudan način kada je u pitanju njihova veličina. Određivanje visine često dovodi do neočekivanih rezultata:

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

Programeri su pokušali riješiti ovaj problem pomoću inline-bloka:

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

Rezultati su još uvijek loši s izuzetkom elementa textarea. Da biste riješili ovaj problem, prvo morate normalizirati font i veličinu fonta za elemente obrasca:

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

Nakon što je font instaliran, možete dodati uvlačenje:

Unesite, odaberite (širina: 120px; font: 1em Arial, sans-serif; padding: 3px 6px;)

Elementima unosa i textarea se takođe može dati obrub, što će uticati na njihove dimenzije prema box-modelu:

Input, input, textarea (rub: 1px pun #ccc;)

Elementi tip unosa dugme i submit može imati dodatni padding koji pretraživač dodaje. Uobičajena praksa je njihova normalizacija:

Unos, unos (dopuna: 2px;)

Problem sa ovim pristupom je što pretraživači često primenjuju prefikse dobavljača na svojstva elementa, tako da nije uvek moguće normalizovati padding. Na primjer, za web-kit, možete normalizirati ovako:

Input, input, input, input :: - webkit-file-upload-button, button (-webkit-box-align: center; text-align: center; kursor: default; color: buttontext; padding: 2px 6px 3px; granica : 2px izlazno dugme dugmeta; granica-slika: početna; boja pozadine: lice dugmeta; veličina okvira: okvir-boder;) ulaz, unos, unos (-webkit-appearance: dugme; beli razmak: pre;)

Padding također radi na elementima skupa polja i legende, ali s različitim rezultatima:

• Postavljanje dopuna za set polja na 0 resetuje zadani padding samo u nekim pretraživačima (ne u IE)
• Postavljanje dopuna legende na 0 uzrokuje smanjenje tog elementa

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

• Font-familija
• Veličina slova
• Širina (za odabir)
• Padding

Primjena drugih svojstava na ove elemente forme daje nedosljedne rezultate.

Poravnavanje stavki u obrascima

Elementi forme mogu se poravnati okomito i horizontalno. Mogu se nalaziti na istoj liniji ili u grupi. Da biste ih poravnali na istoj liniji, možete koristiti float ili standardni inline-blok kontekst.

Kada koristite float, elementi se automatski pakiraju. To znači da sada postoji još devet pravila box-modela koja kontroliraju ove elemente.

Sa plutajućim elementima, glavni zadatak je postizanje dobrog vertikalnog poravnanja na trenutna linija... U ovom slučaju, uobičajena je praksa da se koriste vertikalne margine ili padding:

Unesite, odaberite (širina: 120px; float: lijevo; margin-top: 0,4em;)

Ovaj pristup funkcioniše kada ne morate da poravnate blokove sa tekstom, kao što je element oznake. U ovom slučaju, možete koristiti relativno pozicioniranje, padding ili marginu na elementu koji sadrži samo tekst:

Još jedan problem se javlja sa dugmadima. U ovom slučaju, kada imate dugme koje je veće od ostalih elemenata, možete ga postaviti vertikalno 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 dugmad. Relativno pozicioniranje može se čak koristiti za normalizaciju lijevog dopuna legende u skupu polja.

Ako koristite elemente u kontekstu inline formatiranja, tada možete koristiti svojstvo vertical-align za vertikalno poravnanje:

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

Dobri rezultati može se postići kombinovanjem ovog svojstva sa svojstvom visine linije. Međutim, ovo svojstvo mora biti postavljeno na roditeljski element. Ako ga postavite direktno na sam element obrasca, koristit će se visina elementa:

Red-form (visina linije: 1,4;)

Korištenje deklaracije visine za roditeljski element upareno s istom visinom linije je također dobra praksa:

Forma-red (visina linije: 1.8; visina: 1.8em;)

U kontekstu inline formatiranja, možete koristiti svojstvo poravnanja teksta za roditeljski element za poravnavanje sadržaja elementa obrasca lijevo, središte ili desno.

Čudno ponašanje unosa datoteka

Ulazni element tipa file je posebna prigoda... Takav element treba uvijek biti vidljiv i prepoznatljiv u sučelju pretraživača iz sigurnosnih razloga. To znači da pretraživači namjerno zanemaruju neka pravila stila (kao što su ona koja se odnose na vidljivost) i teže primjeni vlastitih algoritama kako je definirano njihovom zadanom tablicom stilova.

Takođe, neki pretraživači prikazuju samo jedno dugme, dok drugi i dalje dodaju polu za putanju datoteke.

Međutim, web programeri su pronašli načine da zaobiđu ovo ograničenje. Prvo, omotaju kontejner oko elementa.

CSS (Cascading Style Sheets) ili Cascading Style Sheets se koriste za opisivanje izgled dokument napisan u jeziku za označavanje. Obično se CSS stilovi koriste za kreiranje i modificiranje stila elemenata web stranice i korisničkih interfejsa upisano u HTML jezici i XHTML, ali se takođe može primeniti na bilo koju vrstu XML dokumenta, uključujući XML, SVG i XUL.

Kaskadni listovi stilova opisuju pravila za oblikovanje elemenata koristeći svojstva i prihvatljive vrijednosti ove osobine. Za svaki element možete koristiti ograničen skup svojstava, ostala svojstva neće imati nikakav utjecaj na njega.

Deklaracija stila sastoji se od dva dijela: element web stranice - selektor, a naredbe za formatiranje su - oglasni blok... Selektor govori pretraživaču koji element da formatira, a blok deklaracije (kôd u vitičastim zagradama) navodi komande za formatiranje – svojstva i njihove vrednosti.

Rice. 1. Struktura deklaracije u CSS stilu

Vrste kaskadnih stilskih tablica i njihove specifičnosti

1. Vrste stilskih tablica

1.1. Eksterni stilski list

Eksterni stilski list predstavlja tekstualni fajl css ekstenziju, koja sadrži skup elemenata u CSS stilu. Fajl se kreira u uređivaču koda, baš kao HTML stranica. Datoteka može sadržavati samo stilove, bez HTML oznake. Eksterni stilski list je povezan s web stranicom pomoću oznake nalazi unutar sekcije ... Ovi stilovi funkcionišu za sve stranice na sajtu.

Više listova stilova može se priložiti svakoj web stranici dodavanjem više oznaka u nizu specificiranjem svrhe ovog stilskog lista u atributu medijske oznake. rel = "stylesheet" označava tip veze (veza stilskog lista).

Atribut type = "text / css" nije obavezan u HTML5 standardu i može se izostaviti. Ako je atribut odsutan, default je type = "text / css".

1.2. Interni stilovi

Interni stilovi ugrađen u sekciju HTML dokument i definirani su unutar oznake... Unutrašnji stilovi imaju prednost nad vanjskim stilovima, ali su inferiorni u odnosu na inline stilove (navedene pomoću atributa style).

...

1.3. Inline Styles

Kada pišemo inline stilovi, pišemo CSS kod u HTML datoteku, direktno unutar oznake elementa koristeći atribut style:

Obratite pažnju na ovaj tekst.

Ovi stilovi utječu samo na element za koji su specificirani.

1.4. @Import rule

@Import rule omogućava učitavanje eksternih stilova. Da bi direktiva @import radila, mora se pojaviti u tablici stilova (vanjskoj ili internoj) prije svih ostalih pravila:

Pravilo @import se također 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. Koriste se za kreiranje pravila za formatiranje elemenata web stranice. Selektori mogu biti elementi, njihove klase i identifikatori, kao i pseudo-klase i pseudo-elementi.

2.1. Univerzalni selektor

Odgovara bilo kojem HTML elementu. Na primjer, * (margina: 0;) će nula vanjski padding za sve elemente sajta. Također, selektor se može koristiti u kombinaciji sa pseudo-klasom ili pseudo-elementom: *: poslije (CSS stilovi), *: označeno (CSS stilovi).

2.2. Birač elemenata

Selektori elemenata vam omogućavaju da formatirate sve elemente ovog tipa na svim stranicama sajta. Na primjer, h1 (familija fontova: Jastog, cursive;) će postaviti opći stil oblikovanja za sve h1 naslove.

2.3. Selektor klase

Selektori klasa vam omogućavaju da stilizirate jedan ili više elemenata isto ime klase postavljene na različitim mjestima na stranici ili na različite stranice site. Na primjer, da kreirate naslov s klasom naslova, dodajte atribut klase s vrijednošću naslova u početnu oznaku

i postavite stil za navedenu klasu. Stilovi kreirani klasom mogu se primijeniti na druge elemente, ne nužno ovog tipa.

Uputstvo za upotrebu PC

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

2.4. Selektor identifikatora

Id selektor vam omogućava formatiranje jedan specifična stavka. 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 kontejnera. Na primjer, ul li (transformacija teksta: velika slova;) će odabrati sve li elemente koji su potomci svih ul elemenata.

Ako želite formatirati potomke određenog elementa, morate postaviti klasu stila za taj element:

p.prvi a (boja: zelena;) - dati stil primjenjivat će se na sve veze koje su potomci paragrafa sa klasom prva;

p .first a (boja: zelena;) - ako dodate razmak, onda će veze koje se nalaze unutar bilo koje oznake klase .first, koja je potomak elementa, biti stilizirane

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

2.6. Selektor djece

Podređeni element je direktni potomak elementa koji ga sadrži. Jedan element može imati više djece, a svaki element može imati samo jednog roditelja. Podređeni selektor vam omogućava da primijenite stilove samo ako podređeni element odmah slijedi roditeljski element i nema drugih elemenata između njih, odnosno dijete više nije ugniježđeno ni u čemu.
Na primjer, p> strong će odabrati sve jake elemente koji su potomci elementa p.

2.7. Sestra selektor

Sestrinski odnos nastaje između elemenata sa zajedničkim roditeljem. Selektori braće i sestara vam omogućavaju da odaberete stavke iz grupe braće i sestara.

h1 + p - će odabrati sve prve pasuse odmah nakon bilo koje oznake

bez uticaja na ostale paragrafe;

h1 ~ p - odabire sve paragrafe koji su braća i sestre bilo kojem h1 naslovu i odmah nakon njega.

2.8. Selektor atributa

Selektori atributa odabiru elemente na osnovu imena atributa ili vrijednosti atributa:

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

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

selektor [attribute = "value"] - elementi ovog tipa koji sadrže navedeni atribut sa određenom vrijednošću, img - sve slike čiji nazivi sadrže riječ cvijet;

selektor [attribute ~ = "value"] - elementi koji djelimično sadrže datu vrijednost, na primjer, ako je nekoliko klasa specificirano za element odvojen razmakom, p - paragrafi, čije ime klase sadrži karakteristike;

selektor [attribute | = "value"] - elementi čija lista vrijednosti atributa počinje navedenom riječi, p - paragrafi čije je ime klase karakteristika ili počinje sa karakteristika;

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

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

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

2.9. Pseudo selektor klase

Pseudo-klase su klase koje zapravo nisu vezane za HTML oznake. Oni vam omogućavaju da primijenite CSS pravila na elemente na događaju ili submissive određeno pravilo... Pseudo-klase karakteriziraju elemente sa sljedećim svojstvima:

: lebdeći - bilo koji element preko kojeg lebdi kursor miša;

: fokus - interaktivni element do kojeg je navigirano pomoću tastature ili aktiviran pomoću miša;

: active - element koji je aktivirao korisnik;

: valid - polja forme čiji je sadržaj proveren u pretraživaču da li je usklađen sa navedenim tipom podataka;

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

: omogućeno - sva aktivna polja obrasca;

: disabled - onemogućena polja obrasca, tj. u neaktivnom stanju;

: u opsegu - polja forme čije su vrijednosti u navedenom rasponu;

: izvan opsega - polja forme čije vrijednosti nisu uključene u navedeni raspon;

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

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

: target - element sa simbolom # koji je referenciran u dokumentu;

: označeno - odabrani (odabrano od strane korisnika) elementi obrasca.

2.10. Strukturni selektor pseudoklasa

Strukturne pseudo-klase odabiru djecu prema parametru navedenom u zagradama:

: nth-child (odd) - neparna djeca;

: nth-dijete (parno) - parna djeca;

: 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) - bira sve elemente počevši od drugog;

: nth-child (3) - bira treće dijete;

: nth-last-child () - na listi djece bira element sa navedena lokacija, slično: nth-child (), ali počevši od posljednjeg u suprotnom smjeru;

: first-child - omogućava vam da stilizirate samo prvo dijete oznake;

: last-child - omogućava vam da formatirate posljednje dijete oznake;

: only-child - odabire element koji je jedino dijete;

: prazno - odabire elemente koji nemaju djece;

: root - odabire element koji je korijen dokumenta - html element.

2.11. Selektor pseudoklasa strukturnog tipa

Označava određeni tip podređene oznake:

: nth-of-type () - odabire elemente po analogiji sa: nth-child (), uzimajući u obzir samo tip elementa;

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

: zadnji od tipa - bira posljednji element ovog tipa;

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

: only-of-type - Bira jedini element navedenog tipa među potomcima nadređenog elementa.

2.12. Pseudo selektor elemenata

Pseudoelementi se koriste za dodavanje sadržaja koji je generiran korištenjem svojstva sadržaja:

: prvo slovo - odabire prvo slovo svakog pasusa, primjenjuje se samo na blok elemente;

: first-line - odabire prvi red teksta elementa, primjenjuje se samo na blok elemente;

: prije - ubacuje generirani sadržaj prije elementa;

: poslije - dodaje generirani sadržaj nakon elementa.

3. Kombinacija selektora

Za precizniji odabir elemenata za formatiranje možete koristiti kombinacije selektora:

img: nth-of-type (paran) - odabire sve parne slike, alternativni tekst koji sadrži riječ css.

4. Grupisanje selektora

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

H1, h2, p, raspon (boja: paradajz; pozadina: bijela;)

5. Nasljeđivanje i kaskada

Nasljeđivanje i kaskada su dva fundamentalna koncepta u CSS-u koji su usko povezani. Nasljeđivanje znači da elementi nasljeđuju svojstva od svog roditelja (elementa koji ih sadrži). Kaskada se manifestuje u načinu različite vrste stilski listovi se primjenjuju na dokument i kako sukobljena pravila nadjačavaju jedno drugo.

5.1. Nasljedstvo

Nasljedstvo je mehanizam kojim se određena svojstva prenose sa predaka na njegove potomke. CSS specifikacija omogućava nasljeđivanje svojstava vezanih za tekstualni sadržaj stranice, kao što su boja, font, razmak između slova, visina reda, stil liste, poravnanje teksta, uvlačenje teksta, transformacija teksta, vidljivost, bela -razmak i razmak između riječi. Ovo je zgodno u mnogim slučajevima jer ne morate postavljati veličinu fonta i porodicu fontova za svaki element na web stranici.

Svojstva oblikovanja bloka se ne nasljeđuju. To su pozadina, ivica, prikaz, plutanje i jasno, visina i širina, margina, min-max-visina i -širina, obris, preljev, padding, pozicija, dekoracija teksta, vertikalno poravnanje i z-indeks.

Prinudno nasljeđivanje

Via ključna riječ naslijediti Možete prisiliti element da naslijedi bilo koju vrijednost svojstva od roditeljskog elementa. Ovo čak radi i za svojstva koja nisu naslijeđena po defaultu.

Kako su CSS stilovi postavljeni i funkcionišu

1) Stilovi se mogu naslijediti od roditeljskog elementa (naslijeđene osobine ili korištenje vrijednosti nasljeđivanja);

2) Stilovi koji se nalaze u tabeli stilova ispod zamenjuju stilove koji se nalaze u gornjoj tabeli;

3) Jedan element se može stilizirati različitih izvora... Možete provjeriti koji se stilovi primjenjuju u modu programera pretraživača. Da biste to učinili, kliknite iznad elementa. desni klik miša i odaberite "View Code" (ili nešto slično). Desna kolona će ispisati sva svojstva koja su postavljena za ovaj element ili naslijeđena od nadređenog elementa, kao i stilske datoteke u kojima su specificirane, i serijski broj linije koda.

Rice. 2. Način rada za programere u Google pretraživač Chrome

4) Prilikom definiranja stila možete koristiti bilo koju kombinaciju selektora - selektor elementa, pseudo-klasa elementa, klasa ili identifikator elementa.

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

5.2. kaskada

Kaskadno Je mehanizam koji kontrolira krajnji rezultat kada se različita CSS pravila primjenjuju na isti element. Postoje tri kriterijuma koji određuju redosled u kojem se svojstva primenjuju - važno pravilo, specifičnost i redosled u kojem su stilski listovi uključeni.

Važno pravilo

Težina pravila se može postaviti pomoću ključne riječi! Važno, koja se dodaje odmah iza vrijednosti svojstva, na primjer, span (težina fonta: bold! Važno;). Pravilo se mora staviti na kraj deklaracije, prije završne zagrade, bez razmaka. Takva objava će imati prednost nad svim ostalim pravilima. Ovo pravilo vam omogućava da poništite vrijednost svojstva i postavite novu za element iz grupe elemenata u slučaju kada nema direktan pristup u datoteku sa stilovima.

Specifičnost

Za svako pravilo, pretraživač izračunava specifičnost selektora a ako element ima konfliktne deklaracije svojstva, uzima se u obzir pravilo sa najviše specifičnosti. Vrijednost specifičnosti ima četiri dijela: 0, 0, 0, 0. Specifičnost selektora određuje se na sljedeći način:

za id dodajte 0, 1, 0, 0;
0, 0, 1, 0 se dodaje za klasu;
0, 0, 0, 1 se dodaje za svaki element i pseudo-element;
za inline stil dodan direktno 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 # glavni p.o (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: narandž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, ta pravila će se primijeniti na element čija je specifičnost veća. Na primjer, ako stavka ima dvije specifičnosti sa vrijednostima 0, 0, 0, 2 i 0, 1, 0, 1, onda drugo pravilo pobjeđuje.

Redoslijed priloženih tabela

Možete kreirati više eksternih listova stilova i povezati ih na jednu web stranicu. Ako u različiti stoloviće se sastati različita značenja svojstva jednog elementa, onda će kao rezultat na element biti primijenjeno pravilo koje se nalazi u listi stilova na listi ispod.

CSS je skraćenica od Cascading Style Sheets, što znači Cascading Style Sheets. Koristi se za ukrašavanje web stranica. Ako HTML sadrži sadržaj (šta će pretraživač prikazati), onda CSS određuje njegov izgled (kako će ga pretraživač prikazati). Ljepota CSS-a je u tome što uz pomoć jednog stila možete dizajnirati sve elemente istog tipa stranice ili cijele stranice odjednom (sve veze, pasuse, liste odjednom). Sa CSS stilom, jednom definirate kako bi određeni element trebao izgledati, na primjer, slike, a oni mijenjaju svoj izgled u svim dokumentima odjednom. Da biste promijenili formatiranje teksta na cijeloj web lokaciji, trebate samo jednom promijeniti CSS kod.

Osnovni CSS elementi

Baš kao što se HTML sastoji od oznaka, atributa i vrijednosti, tako se i CSS sastoji od vlastitih sopstvenim elementima... Suština CSS konstrukcija može se objasniti na sljedeći način: "Navedite koji element stranice treba stilizirati i naznačiti kako ga stilizirati." Evo sastavnih CSS konstrukcija.

• Selektor... Identifikator koji govori pretraživaču na koji element na stranici treba primijeniti dizajn. Zahvaljujući njemu, pretraživač "razumije" da je stil namijenjen, na primjer, za ukrašavanje lista ili tabela.
• Blok deklaracije stila... Piše se iza selektora i sastoji se od proteze... Postavlja stil elementa (njegov dizajn). Blok deklaracije stila sastoji se od dva dijela.
• Nekretnina... Analog atributa u HTML-u. Određuje koje će se posebno svojstvo stila promijeniti.
• Značenje... Postavlja se na svojstvo, odvojeno dvotočkom, i određuje kako će se točno svojstvo promijeniti.

U bloku deklaracije stila može postojati nekoliko svojstava i vrijednosti, u kom slučaju su navedene odvojene tačkom i zarezom.

Tipovi selektora

Postoje različite vrste selektora ovisno o svojstvima elemenata stranice koje definiraju.

• Universal... Postavlja pravila za sve elemente stranice za koje nisu postavljena druga pravila.
  kod * (veličina fonta: 14px;) postavlja veličinu fonta na 14 piksela za sve elemente u dokumentu, za koje nisu specificirana drugačija pravila korištenjem drugih selektora.
• Tega. Ovaj tip selektora specificira pravila oblikovanja za sadržaj određene HTML oznake. Ime selektora je isto kao i naziv deskriptora, samo što se piše bez uglatih zagrada: str, h1, ul.
  Na primjer kod h2 (boja: crvena;) setovi zelene boje tekst za sve naslove drugog nivoa, odnosno sadržaj oznaka
  .
• Atributi... Pomoću ove grupe selektora možete definirati stil sadržaja svih oznaka kojima je dodijeljen određeni atribut. Selektori se mogu preciznije specificirati navođenjem ne samo imena atributa, već i vrijednosti koja mu je dodijeljena, kao i imena oznake koja ga sadrži. Ovo se može koristiti za personalizaciju dizajna.
• Klasa... Neka vrsta selektora u slučaju da trebate stilizirati sadržaj tagova istog tipa na različite načine. Na primjer, želite da linkove na dnu stranice učinite crvenim, dok svi ostali trebaju ostati plavi, kao što su bili. Da biste primijenili pravila klase na element web mjesta, potrebno je navesti ime klase u atributu klasa odgovarajuća oznaka.

Pretpostavimo da koristite klasu korak pojedinačni elementi trebate postaviti lijevo uvlačenje na 15 piksela.

CSS kod će biti ovakav:

Korak (margin-lijevo: 15px;)

HTML kod koji će povezati element sa pravilom će biti sljedeći:

Uvučen tekst

• ID... Koristi se zajedno sa atributom id HTML oznaka i koristi se kada je potrebno postaviti svojstva na jedan element. Za razliku od selektora klasa, kojem prethodi tačka, on se piše kroz hash:

#exclusive (boja: narandžasta;)

• Kontekstualno... U HTML-u se neke oznake često nalaze unutar drugih, a kontekstualni selektori vam pomažu da definirate pravila za baš takav slučaj. Koristeći ih, na primjer, možete formatirati stavke unutar numeriranih lista ili kurziv tekst unutar pasusa:

P i (fint-familija: Century;)

Ostale grupe selektora baziraju se na kombinaciji navedenih tipova, kao i na principu nasljeđivanja, kada podređeni element preuzima svojstva roditelja.

Kombiniranje i grupiranje selektora je korisno u mnogim situacijama. Na primjer, za definiranje pravila klase korak samo za veze, potrebno je da navedete oba selektora odvojena tačkom (prvo oznaku, zatim klasu):

A.step (margin-left: 15px;)

Kako da povežem CSS sa HTML stranicom?

Postoji nekoliko načina na koje možete natjerati alate za izgradnju web stranice da međusobno komuniciraju. Stilovi su podeljeni u sledeće kategorije na osnovu načina dodavanja.

Inline Styles

Postavljaju se u dokumentu direktno unutar HTML oznake pomoću atributa stil... Imajte najviši prioritet. To znači da ako je za isti element dat drugačiji dizajn, tada će se prednost dati pravilu koje je napisano unutar oznake. Selektor za inline stil nije potreban, jer je odnos između stila i oznake očigledan - dizajn oznake je postavljen u njemu.

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

Tekst sa unutrašnjim stilom.

Global Styles

Definisano oznakom …

Povezani stilovi

Najpovoljnije, jer se uz njihovu pomoć lako možete dogovoriti uniformni stil cijeli sajt. Povezani stil pretpostavlja da su svi CSS stilovi u zasebnoj datoteci sa ekstenzijom .css.

Ovaj pristup je zgodan i po tome što odvaja pravila izgleda stranica od njihovog sadržaja, CSS kod se može lako mijenjati bez ometanja HTML datoteka, a princip razdvajanja koda je vrlo važan, posebno u velikim projektima.

Da biste povezali pravila iz CSS datoteke sa HTML stranicom, koristite oznaku dodato u kontejner , i njegove atribute.

Ovdje je red koji povezuje pravila iz datoteke mystyle.css sa HTML stranicom:

rel = "stylesheet" specificira da se oznaka odnosi na datoteku stilova, href = "mysyle.css" postavlja svoju adresu. Pravila adresiranja su ista kao za regularne veze- putanja može biti apsolutna, relativna, itd.

Uvezeni stilovi

Koristeći komandu @import možete dodati stilove iz CSS datoteke u trenutnu tabelu. Ovo može biti potrebno, na primjer, ako želite dopuniti pojedinačni izgled dokumenta, specificiran korištenjem globalnih stilova, sa univerzalnim pravilima iz poseban fajl... Metoda se ne može koristiti s inline stilovima.

Kod ispod će uvesti tabelu datoteka u dokument any.css, koji se nalazi u folderu sa HTML dokumentom koji se uređuje:

@import url (any.css);

Naredba je napisana na liniji ispod početne oznake