CSS, kao i svaki jezik, ima svoju sintaksu. Nema elemenata, parametara, oznaka. Ima pravila. Pravilo se sastoji od selektora i bloka deklaracije stila zatvorenog u vitičaste zagrade:

Sam blok deklaracije stila sastoji se od svojstava i njihovih vrijednosti, odvojenih tačkom i zarezom:

Hajde da probamo u praksi. Otvorite html stranicu i css stranicu kreiranu u posljednjem tutorijalu. Dajmo našoj stranici plavu pozadinu. Kao što se sjećate, oznaka je odgovorna za ovo. , pa idite na stranicu style.css i napišite sljedeći kod:

tijelo (pozadina: plava;)

Otvorite svoju html stranicu u pretraživaču i provjerite je li njena pozadina plava. Sada, učinimo tekst na stranici bijelim:

tijelo (pozadina: plava; boja: bijela;)

Osvježite html stranicu u pretraživaču (Ctrl + F5) i uvjerite se da je sav tekst sada bijela... Sada napravimo boje naslova crvenom (za h1) i žutom (za h2):

tijelo (pozadina: plava; boja: bijela;) h1 (boja: crvena;) h2 (boja: žuta;)

Ponovo osvježite stranicu u svom pretraživaču i provjerite je li sve kako je predviđeno.

Mislim da je princip već jasan: specificiramo selektor, tj. element na koji se stil primjenjuje i u kovrčave zagrade- njegova svojstva i njihova značenja. Svojstva i vrijednosti će biti posvećene odvojene lekcije, dok razmatramo opšti princip sastavljanje stilskog lista.

CSS selektori

ID selektori

U našem primjeru, elementi stranice korišteni su kao selektori: tijelo, h1, h2. Ali šta ako naša html stranica ima nekoliko identičnih elemenata (na primjer, pasuse), a želimo da tekst svih pasusa bude crn, a jedan od njih - roze... Zatim moramo navesti jedinstveni identifikator za ovaj paragraf i kreirati stil za njega.

U HTML-u, identifikator elementa se postavlja pomoću parametra id, čija je vrijednost jedinstveno ime. Na primjer:

Tekst pasusa sa identifikatorom (id).

Možete dati bilo koja imena, osim rezerviranih riječi (to uključuje nazive oznaka i parametara HTML i CSS elemenata), na primjer, ne možete dati identifikator tijelo imena. Dodajmo nekoliko pasusa našoj html stranici i dodijelimo identifikator jednom od njih: Ako sada pogledate našu stranicu u pretraživaču, oba paragrafa su bijele boje. Hajde da dodamo stilove za naše pasuse u stylesheet (style.css):

tijelo (pozadina: plava; boja: bijela;) h1 (boja: crvena;) h2 (boja: žuta;) p (boja: crna;) p # roze (boja: roze;)

Prvo smo naznačili da tekst svih pasusa bude crn, a tekst pasusa sa id "ružičasta" neka bude roze. Naš selektor jeste u ovom slučaju iz elementa ( str), separator ( # ) i naziv identifikatora ( roze).

Važno je zapamtiti da na stranici može postojati samo jedan identifikator (id). One. za naš primjer, ne možete kreirati dva pasusa sa id "ružičasta", pasus sa takvim id može biti samo jedan. Ali svaki paragraf može imati svoj identifikator, na primjer, možete kreirati paragraf sa id = "zeleno" i postaviti stil za ovaj paragraf u tabeli sa stilovima.

Selektori klasa

U gornjem primjeru kreirali smo pasus s ružičastom bojom teksta i naznačili da može postojati samo jedan takav id. Ali šta ako želimo roze boje tekst je imao dva ili tri pasusa. Za ovo u HTML-u postoji parametar klasa, čija je vrijednost njegovo ime.

Dodajmo još par pasusa našoj html stranici i dodijelimo ih klasa = "ružičasta": Da bismo specificirali stil za ovu klasu, u listu stilova ćemo napisati pravilo gdje će se element ponovo koristiti kao selektor str i ime roze, ali u ovom slučaju to je ime klase, tako da će se tačka (.) koristiti kao separator:

tijelo (pozadina: plava; boja: bijela;) h1 (boja: crvena;) h2 (boja: žuta;) p (boja: crna;) p # roze (boja: roze;) p.ružičasta (boja: roze;)

Može biti onoliko paragrafa sa takvom klasom.

Hajde da rezimiramo:

• ako svi slični elementi (na primjer, sva h1 zaglavlja) moraju imati isti stil, tada se selektor sastoji samo od tog elementa (na primjer, p (boja: crna;))
• ako bi se element (bilo koji: pasus, naslov ...) trebao razlikovati od svih ostalih, tada mu se dodjeljuje identifikator ( id) a separator u tablici stilova je znak funte ( # ), na primjer, p # roza (boja: roza;) .
• ako na stranici postoji nekoliko elemenata sa istim stilom, tada im se dodjeljuje klasa ( klasa) a separator stilskog lista je tačka (.), na primjer p.pink (boja: roze;).
• identifikator ima prednost nad klasom. Stoga, ako su i klasa i identifikator specificirani za bilo koji element (što nije u suprotnosti CSS principi), tada će se primijeniti stil identifikatora.

Kao što je već spomenuto, identifikatori i klase mogu se postaviti na bilo koji html element. Ali često se dešava da jednim stilom želimo istaknuti nekoliko različitih elemenata, npr. u zelenoj boji... U ovom slučaju možete koristiti unificirani selektor... U takvim selektorima, naziv elementa nije specificiran, tačka ili funta su specificirani kao atribut klase ili identifikatora i ime. Na primjer:

Crvena (boja: crvena;) #žuta (boja: žuta;)

Dakle, bez obzira koji element smo postavili klasa = "crveno"(naslov, pasus ili link), boja njegovog teksta će postati crvena. Možemo postaviti jedan element na stranicu (bilo koji) id = "žuto" a boja teksta tog elementa postaje žuta.

Selektor konteksta

Pretpostavimo da imamo html stranicu sa sljedećim kodom: Želimo da i kurziv bude istaknut zelenom bojom. Zatim ćemo napisati selektor elemenata u stylesheet, tj.

i (boja: zelena;)

Sada naša stranica u pretraživaču izgleda ovako:

Ali šta ako želimo da ne bude sav tekst u kurzivu označen zelenom bojom, već samo onaj koji je u pasusima. Da bismo to učinili, izvršit ćemo promjene u tablici stilova:

p i (boja: zelena;)

Tako smo naznačili, prijavite se dati stil elementima i koji su u elementima str... Imena elemenata su odvojena razmakom. Takvi selektori se nazivaju kontekstualno... Naša stranica pretraživača sada izgleda ovako:

Grupiranje birača

Ako su blokovi deklaracije stila za nekoliko selektora isti (na primjer, želimo da naslovi prva tri nivoa budu zeleni), onda se mogu grupisati. Da biste to učinili, selektori na koje će se primijeniti isti stil moraju biti navedeni odvojeni zarezima. primjer:

h1, h2, h3 (boja: zelena;)

Recimo da osim boje, želimo našim naslovima dati i veličinu. Tada možemo samo dodati u našu tablicu stilova:

h1, h2, h3 (boja: zelena;) h1 (veličina fonta: 18px;) h2 (veličina fonta: 16px;) h3 (veličina fonta: 14px;)

Naša zaglavlja će imati naznačena veličina, ali će svi biti zeleni.

Zapravo, postoje nesuglasice oko frakcija. Neki smatraju da je gornji kod tačan, jer grupisanje je pomoglo da se izbjegne ponavljanje istu imovinu za tri elementa, ovo skraćuje kod.

Drugi smatraju da se na taj način konzistentnost koda pogoršava. Pošto je pronašao selektor za naslov h3, nije odmah jasno zašto je tekst u njemu zelen. Zagovornici logike preporučuju grupisanje samo elemenata u kojima se blokovi opisa potpuno poklapaju.

Generalno, da li ćete se grupirati ili ne, stvar je vašeg ukusa. Ali morate zapamtiti o tome različiti pristupi kada čitate tuđi kod, na primjer, u šablonima.

Ovim je tutorijal o selektorima završen. U sljedećoj lekciji uvest ćemo koncepte kao što su pseudoelementi i pseudoklase.

Postoji četiri načina povezivanja stilova u vaš HTML dokument. Najčešće korišćene metode su inline CSS i eksterni CSS.

Inline CSS u HTML - element

Ispod je primjer CSS injekcija na osnovu gornje sintakse:

Naslov

Paragraf.

Dobijamo sljedeći rezultat:

Atributi

Inline CSS - atribut stila

Možete koristiti atribut na bilo kojem HTML elementu za definiranje stilskih pravila. Ova pravila će se primjenjivati ​​samo na ovaj element... Evo opće sintakse:

<элемент style = "...правила стиля...">

Atributi

Primjer

Ispod je primjer ugrađenog CSS-a zasnovanog na gornjoj sintaksi:

Inline CSS

Dobijamo sljedeći rezultat:

Vanjski CSS stilovi - Element

Element može se koristiti za povezivanje eksternih uređaja CSS fajl s u vaš HTML dokument.

Eksterni sto CSS stilovi je zasebna tekstualni fajl sa produžetkom .css... Definišete sva pravila stila u ovoj tekstualnoj datoteci, a zatim možete uključiti CSS datoteku u bilo koji HTML dokument koristeći element .

Evo općenite sintakse za uključivanje eksterne CSS datoteke:

Atributi

Atributi su povezani sa elementima ili pravila definisana u bilo kom eksterni fajl stilski listovi.

Bilo koje pravilo definirano u oznakama, nadjačava pravila definirana u bilo kojoj vanjskoj CSS datoteci.

Bilo koje pravilo definirano u vanjskoj datoteci sa stilskim listovima ima najniži prioritet u CSS-u, a pravila definirana u toj datoteci primjenjivat će se samo kada se prethodna dva pravila ne primjenjuju.

Rukovanje starijim pretraživačima

Postoji mnogo starijih pretraživača koji ne podržavaju CSS. Stoga moramo voditi računa o pisanju inline CSS-a u našem HTML dokumentu. Sljedeći isječak koda pokazuje kako se oznake komentara mogu koristiti za sakrivanje CSS-a iz starijih pretraživača:

CSS pravila

CSS, kao i svaki drugi kompjuterski jezik, ima strogo definisanu sintaksu, tj. pravila po kojima se kreiraju listovi stilova. U prethodnom poglavlju, već ste vidjeli nekoliko primjera različitih stilova i možda ste primijetili da se sintaksa CSS-a razlikuje od sintakse HTML-a. U CSS-u nema elemenata, nema atributa, nema oznaka. Sadrži pravila, od kojih svako opisuje izgled jednog ili grupe HTML elemenata. Pravilo određuje kako će određeni element izgledati. Hajde da damo definiciju.

CSS pravilo je strukturna jedinica lista stilova koja opisuje stilove za određeni element. Pravilo se sastoji od selektora, koji je uvijek na lijevoj strani, i bloka za deklaraciju stila, koji je zatvoren u vitičastim zagradama i odmah slijedi iza selektora (slika). Svaka deklaracija se, zauzvrat, sastoji od svojstva i njegove vrijednosti. To je svojstvo koje određuje tip stila koji će se primijeniti na element.

Pravilo može sadržavati više deklaracija, odvojenih tačkom i zarezom. Ne morate stavljati tačku i zarez nakon posljednje objave.

Radi lakšeg čitanja i uređivanja stilskih listova, pravila su obično napisana na takav način da se svaka deklaracija pojavljuje u zasebnom redu. Na primjer:

To će se percipirati na isti način, čak će i dati dodatne uštede u veličini koda uklanjanjem dodatni karakteri razmaci i novi redovi. Ali ovakva vrsta pisanja otežava čitanje koda. Možete napraviti kompromis: prvo napišite pravila, razbijajući ih u redove, a nakon što je stilski list konačno spreman, uklonite nepotrebne beznačajne znakove. Ali nema garancije da nakon toga nećete htjeti popraviti nešto drugo, pa ćete se morati malo mučiti prije nego što pronađete željeno svojstvo i uredite ga.

Za svaku nekretninu CSS specifikacija specificira mnoge vrijednosti koje ovo svojstvo može imati, kao i zadanu vrijednost i opseg! svojstva, tj. one elemente na koje se može primijeniti. Takođe ukazuje da li je ovo svojstvo nasljedno, tj. da li će se primijeniti na elemente potomke. Izlazni uređaji na koje se ova svojstva odnose. Pošto ćemo razmotriti kompjuterski dizajn, tada ćemo spomenuti samo ona svojstva koja su primjenjiva u našem slučaju, tj. dizajnirani su za kontrolu prikaza na ekranu monitora, a podržavaju ih i moderni pretraživači.

Razmotrite glavne CSS pravila za registraciju tekstualni elementi Na stranici.

• font-family: porodica fontova | tip fonta. Jedno upozorenje: ako naziv fonta sadrži razmak, onda ovo ime mora biti stavljeno u navodnike.
• veličina slova: vrijednost |%. Ovo je veličina fonta. Može se specificirati u pikselima, procentima, em. Štaviše, procenat se izračunava iz veličine fonta koju je ovaj element naslijedio.
• font-weight: normalno | podebljano | podebljano | svjetlije | broj između 100 i 900. Ovo je težina fonta. 400 = normalno, 700 = podebljano.
• font-style: normalno | kurziv. Ovo je nagib vašeg fonta. Zadana vrijednost je normalna.
• font-varijanta: normalna | mala slova. Ovo je nacrt malih slova.
• timska pravila font... Oni vam omogućavaju da specificirate posebna pravila, odvojena razmacima. U većini montažnih pravila, redoslijed nije važan, ali u pravilu za font jeste.
• font: font-style font-varijanta font-weigth font-size porodica fontova... Pravila pišemo samo ovim redoslijedom. Obavezno je navesti pravila veličine fonta i porodice fontova (pošto nemaju zadane vrijednosti), druga pravila se mogu izostaviti.

porodica fontova: Arial, Geneva, Helvetica, sanserif; veličina fonta: 10px; težina fonta: bold; stil fonta: kurziv; varijanta fonta: mala slova; font: bold 10px Arial;

Pravila za rad sa tekstom u CSS-u

• text-align: lijevo | desno | centar | poravnati. Ovo je zamjena atribut align, ovo je horizontalno poravnanje linije. Primjenjuje se samo na blok elemente.
• tekst-dekoracija: nema | precrtaj (|) podcrtaj (|) do kraja. Ovo odobrenje horizontalna linija(bez reda, red iznad reda teksta, ispod reda teksta, precrtan).
• uvlaka teksta: vrijednost |%. Ovo je crvena linija. Procenti se računaju iz veličine područja na kojem se nalazi isti tekst. Primjenjuje se samo na blok elemente.
• text-transform: ništa | veliko slovo | velika | mala slova (znakovi se ne mijenjaju, svaka riječ sa velikim slovom, transformirati u mala ili velika slova). Ovo je transformacija simbola.
• slovni razmak: normalna | veličina. Ovo je udaljenost između znakova. Ne može se navesti kao postotak.
• razmak između riječi: normalna | veličina. Ovo je udaljenost između riječi. Ne može se navesti kao postotak.
• vertikalno poravnanje: osnovna linija | sub | super | vrh | tekst-vrh | sredina | dno | tekst-dno |%. Vertikalno poravnanje. Ovo poravnanje inline elementi između sebe. Ali za elemente tabele "td" i "th" vertikalno poravnanje poravna sav sadržaj koji je unutra.
• visina linije: normalno | vrijednost |%. Visina reda na kojem se nalazi tekst.
• razmak: normalno | pre | nowrap. Kako postupati razmaka znakova u našem elementu (normalno - skraćuju se i na njima se vrši automatska hifenacija, nowrap - razmaci se skraćuju, ali nisu premotani, predrazmaci se ne obrađuju na bilo koji način, tj. ne poništavaju se i nema prevlake bilo).

text-align: desno; tekst-dekoracija: podvučena; uvlačenje teksta: 10px; transformacija teksta: velika slova; razmak između slova: 10px; razmak između riječi: 10px; vertikalno- poravnati: vrh; visina linije: 5%; razmak: pre;

Stiliziranje lista u CSS-u

Pravila za formatiranje lista u css-u mogu se primijeniti i za cijelu listu i za pojedinačni elementi lista.

• tip-stil liste: nema | krug | disk | kvadrat | decimalni | donji alfa | gornji alfa | donji rimski | gornji rimski. Ovo je tip označavanja: bez markera, kruga, diska, kvadrata, arapskih brojeva, pisma u različitim registrima, rimska numeracija u različitim registrima.
• list-style-position: van | iznutra (spolja, iznutra). Ovo je postavljanje područja sa markerom. Za marker se formira posebna oblast: izvan elementa „li“ ili unutar njega (podrazumevano, izvan elementa).
• slika u stilu liste: nema | url. Slika za dizajn markera. Možemo odrediti url slike tako da se ona prikazuje umjesto markera.
• u stilu liste: list-style-type list-style-position list-style-image. One. ovdje sva tri pravila upisujemo u jedno, kolektivno pravilo. Redoslijed ovdje nije bitan.

lista- stil- tip: kvadrat; lista-style- pozicija: unutra; list-style-image: url ("ball.gif"); list-style: decimalni unutra;

CSS boja i svojstva pozadine

• boja: Boja.
• boja pozadine: boja | transparentan. Ovo je boja pozadine. Podrazumevano je transparentan.
• pozadinska slika: nema | url. Pozadinska slika... Možete staviti sliku tako što ćete navesti njen url.
• background-position: vrh | dno | centar | lijevo | desno | magnituda |%. Pozicioniranje slike u elementu.
• background-attachment: fiksno | skrolovanje (sidro za element, okvir za prikaz). Ovo je pitanje prilaganja slike, iz koje se izračunavaju koordinate. Popravljeno je čitanje koordinata iz okvira za prikaz.
• background-repeat: ponavljanje | ponavljanje-x | ponavljanje-y | bez ponavljanja. Ponavljanje: Obe ose, ponavljanje x-osa (horizontalno), y-osa (vertikalno), bez ponavljanja.
• pozadini: transparentan background-color background-image background-repeat background-attachment background-position. Kolektivno pravilo kombinuje sva pozadinska pravila.

boja: crvena; boja pozadine: # 330033; background- image: url ("fon.gif"); pozadina- pozicija: gore desno; pozadina- prilog: fiksni; pozadina- ponavljanje: ponavljanje- x; pozadina: #ffffff no- repeat url (fon.gif);

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 je tekstualna datoteka sa ekstenzijom .css koja sadrži skup stilova CSS elemenata. 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;) - ovaj stil će se primijeniti na sve veze, potomke pasusa sa prvom klasom;

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 između njih nema drugih elemenata, odnosno dijete više nije ugniježđeno.
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 - odabire jedini element navedenog tipa među djecom roditeljski element.

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, bijela -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, granica, prikaz, plutanje i jasno, visina i širina, margina, min-max-visina i -širina, obris, prelijevanje, padding, pozicija, dekoracija teksta, vertikalno poravnanje i z-indeks.

Prinudno nasljeđivanje

Korišćenjem 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 nakon 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.