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 točkom i zarezom:

Isprobajmo u praksi. Otvorite html stranicu i css stranicu stvorenu u posljednjem tutorialu. Dajmo našoj stranici plavu pozadinu. Kao što se sjećate, oznaka je odgovorna za to. , stoga idite na stranicu style.css i napišite sljedeći kod:

tijelo (pozadina: plava;)

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

tijelo (pozadina: plava; boja: bijela;)

Osvježite html stranicu u pregledniku (Ctrl + F5) i provjerite je li sav tekst sada bijelim... Sada napravimo boje naslova crvenom (za h1) i žutom (za h2):

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

Ponovno osvježite stranicu u svom pregledniku i provjerite je li sve kako je predviđeno.

Mislim da je princip već jasan: specificiramo selektor, t.j. 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ći princip sastavljanje stilskog lista.

CSS selektori

ID birači

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

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

Tekst odlomka s 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 odlomaka našoj html stranici i dodijelimo identifikator jednom od njih: Ako sada pogledate našu stranicu u pregledniku, oba su odlomka bijele boje. Dodajmo stilove za naše odlomke u stylesheet (style.css):

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

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

Važno je zapamtiti da na stranici može postojati samo jedan identifikator (id). Oni. za naš primjer, ne možete stvoriti dva paragrafa s id "ružičasta", odlomak s takvim iskaznica može biti samo jedan. Ali svaki odlomak može imati svoj vlastiti identifikator, na primjer, možete stvoriti odlomak s id = "zeleno" i postaviti stil za ovaj odlomak u tablici stilova.

Selektori razreda

U gornjem primjeru napravili smo odlomak s ružičastom bojom teksta i naznačili da može postojati samo jedan takav id. Ali što ako želimo ružičasta boja tekst je imao dva ili tri odlomka. Za to u HTML-u postoji parametar razreda, čija je vrijednost njegovo ime.

Dodajmo još par odlomaka našoj html stranici i dodijelimo ih klasa = "ružičasta": Kako bismo odredili stil za ovu klasu, u listu stilova ćemo napisati pravilo gdje će se element ponovno koristiti kao selektor str i ime ružičasta, ali u ovom slučaju to je naziv klase, pa će se točka (.) koristiti kao razdjelnik:

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

S takvom klasom može biti toliko odlomaka.

Sumirajmo:

• ako svi slični elementi (na primjer, sva h1 zaglavlja) moraju imati isti stil, tada se selektor sastoji samo od tog elementa (npr. p (boja: crna;))
• ako bi se element (bilo koji: odlomak, naslov ...) trebao razlikovati od svih ostalih, tada mu se dodjeljuje identifikator ( iskaznica) a razdjelnik u stilskoj tablici je znak funte ( # ), Na primjer, p # roza (boja: roza;) .
• ako na stranici postoji nekoliko elemenata s istim stilom, tada im se dodjeljuje klasa ( razreda) a separator stilskog lista je točka (.), na primjer p.ružičasta (boja: roza;).
• identifikator ima prednost nad klasom. Stoga, ako su i klasa i identifikator navedeni 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. No često se događa da jednim stilom želimo istaknuti nekoliko različitih elemenata, npr. u zelenoj boji... U ovom slučaju možete koristiti jedinstveni selektor... U takvim selektorima naziv elementa nije specificiran, točka ili funta navedena je kao atribut klase ili identifikatora i ime. Na primjer:

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

Dakle, bez obzira koji element postavimo klasa = "crveno"(naslov, odlomak ili veza), boja 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, t.j.

i (boja: zelena;)

Sada naša stranica izgleda ovako u pregledniku:

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

p i (boja: zelena;)

Tako smo naznačili, prijavite se zadanog stila na elemente i koji su u elementima str... Nazivi elemenata su odvojeni razmakom. Takvi selektori se nazivaju kontekstualne... Naša stranica preglednika sada izgleda ovako:

Grupiranje birača

Ako su blokovi deklaracije stila za nekoliko selektora isti (na primjer, želimo da naslovi prve tri razine budu zeleni), tada se mogu grupirati. 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 točan, budući da grupiranje je pomoglo izbjegavanju ponavljanja isto svojstvo za tri elementa, to skraćuje kod.

Drugi smatraju da se na taj način konzistentnost koda pogoršava. Budući da, nakon što smo pronašli selektor za naslov h3, nije odmah jasno zašto je tekst u njemu zelen. Zagovornici logike preporučuju grupiranje samo elemenata u kojima se blokovi opisa potpuno podudaraju.

Općenito, hoćete li se grupirati ili ne, stvar je vašeg ukusa. Ali morate zapamtiti o različiti pristupi kada čitate tuđi kod, na primjer, u predlošcima.

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

Postoji četiri načina povezivanja stilova u svoj HTML dokument. Najčešće korištene metode su inline CSS i vanjski CSS.

Inline CSS u HTML - element

U nastavku je primjer CSS injekcija na temelju gornje sintakse:

Naslov

Stavak.

Dobivamo 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... Ovdje je opća sintaksa:

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

Atributi

Primjer

Ispod je primjer ugrađenog CSS-a koji se temelji na gornjoj sintaksi:

Inline CSS

Dobivamo sljedeći rezultat:

Vanjski CSS stilovi - Element

Element može se koristiti za spajanje vanjskih CSS datoteka s u vaš HTML dokument.

Vanjski stol CSS stilovi je zasebna tekstualnu datoteku s produžetkom .css... Definirate sva pravila stila u ovoj tekstualnoj datoteci, a zatim možete uključiti CSS datoteku u bilo koji HTML dokument koristeći element .

Ovdje je opća sintaksa za uključivanje vanjske CSS datoteke:

Atributi

Atributi su povezani s elementima ili pravila definirana u bilo kojem vanjska datoteka stilski listovi.

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

Svako pravilo definirano u vanjskoj datoteci lista stilova 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 preglednicima

Postoji mnogo starijih preglednika koji ne podržavaju CSS. Stoga se moramo pobrinuti za pisanje inline CSS-a u našem HTML dokumentu. Sljedeći isječak koda pokazuje kako se oznake komentara mogu koristiti za skrivanje CSS-a iz starijih preglednika:

CSS pravila

CSS, kao i svaki drugi računalni jezik, ima strogo definiranu sintaksu, t.j. pravila prema kojima se kreiraju stilski listovi. 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. Dajmo definiciju.

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

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

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

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

Za svaku nekretninu CSS specifikacija specificira mnoge vrijednosti koje ovo svojstvo može imati, kao i zadane vrijednosti i opseg! svojstva, tj. one elemente na koje se može primijeniti. Također ukazuje da li je ovo svojstvo nasljedno, tj. hoće li se primjenjivati ​​na elemente potomke. Izlazni uređaji na koje se ova svojstva odnose. Budući da ćemo razmotriti dizajn računala, tada ćemo spomenuti samo ona svojstva koja su primjenjiva u našem slučaju, t.j. dizajnirani su za upravljanje prikazom na zaslonu monitora, a podržavaju ih i moderni preglednici.

Razmotrite glavno CSS pravila za registraciju tekstualni elementi Na stranici.

• obitelj fontova: obitelj fontova | vrsta fonta. Jedno upozorenje: ako naziv fonta sadrži razmak, onda se ovo ime mora staviti u navodnike.
• veličina fonta: vrijednost |%. Ovo je veličina fonta. Može se odrediti u pikselima, postocima, em. Štoviše, postotak 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.
• stil fonta: normalno | kurziv. Ovo je nagib vašeg fonta. Zadana vrijednost je normalna.
• font-varijanta: normalno | mala slova. Ovo je nacrt malih slova.
• timska pravila font... Omogućuju vam određivanje zasebnih pravila, odvojenih 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 font-family... Pravila pišemo samo ovim redoslijedom. Obavezno je navesti pravila veličine fonta i obitelji fontova (budući da nemaju zadane vrijednosti), druga pravila se mogu izostaviti.

font- obitelj: Arial, Geneva, Helvetica, sans-serif; veličina fonta: 10px; težina fonta: podebljano; stil fonta: kurziv; varijanta fonta: mala slova; font: bold 10px Arial;

Pravila za rad s tekstom u CSS-u

• poravnati tekst: lijevo | desno | središte | opravdati. Ovo je zamjena atribut align, to horizontalno poravnanje linije. Primjenjuje se samo na blok elemente.
• tekst-ukras: ništa | nadcrtaj (|) podcrtaj (|) do kraja. Ovo odobrenje vodoravna crta(bez reda, red iznad retka teksta, ispod retka teksta, precrtan).
• uvlaka teksta: vrijednost |%. Ovo je crvena linija. Postoci se izračunavaju iz veličine područja na kojem se nalazi isti tekst. Primjenjuje se samo na blok elemente.
• preobrazba teksta: ništa | velika | velika | mala slova (znakovi se ne mijenjaju, svaka riječ s velikim slovom, transformira se u mala ili velika slova). Ovo je transformacija simbola.
• razmak između slova: normalna | veličina. Ovo je udaljenost između znakova. Ne može se odrediti kao postotak.
• razmak između riječi: normalna | veličina. Ovo je razmak između riječi. Ne može se odrediti kao postotak.
• vertikalno poravnati: osnovna linija | sub | super | vrh | tekst-vrh | sredina | dno | tekst-dno |%. Vertikalno poravnanje. Ovo poravnanje inline elementi između sebe. Ali za elemente tablice "td" i "th" vertikalno poravnanje poravnava sav sadržaj koji je unutra.
• linija-visina: normalno | vrijednost |%. Visina retka na kojem se nalazi tekst.
• bijeli prostor: normalno | prije | sadarap. Kako postupati razmak znakova u našem elementu (normalno - skraćuju se i na njima se vrši automatska hifenacija, nowrap - razmaci su skraćeni, ali nisu premotani, predrazmaci se ne obrađuju na bilo koji način, tj. ne poništavaju se i nema hifene ili).

poravnavanje teksta: desno; tekst- ukras: podcrtati; uvlaka teksta: 10px; text- transform: velika slova; razmak između slova: 10px; razmak između riječi: 10px; okomito- poravnati: vrh; linija- visina: 5%; bijeli- prostor: pre;

Stiliziranje popisa u CSS-u

Pravila za oblikovanje popisa u css-u mogu se primijeniti i za cijeli popis i za pojedinačni elementi popis.

• list-style-type: nema | krug | disk | kvadrat | decimalni | donji alfa | gornji alfa | donji rimski | gornji rimski. Ovo je vrsta označavanja: bez markera, kruga, diska, kvadrata, arapskih brojeva, slova u različitim registrima, rimska numeracija u različitim registrima.
• lista-stil-pozicija: izvana | iznutra (izvana, iznutra). Ovo je postavljanje područja s markerom. Za oznaku se formira posebno područje: izvan elementa "li" ili unutar njega (prema zadanim postavkama, izvan elementa).
• slika u stilu liste: nema | url. Slika za dizajn markera. Možemo odrediti url slike tako da se prikazuje umjesto markera.
• u stilu liste: list-style-type list-style-position list-style-image. Oni. ovdje sva tri pravila upisujemo u jedno, kolektivno pravilo. Redoslijed ovdje nije bitan.

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

CSS boja i svojstva pozadine

• boja: boja.
• boja pozadine: boja | prozirna. Ovo je boja pozadine. Standardno je transparentan.
• pozadinska slika: nema | url. Pozadinska slika... Možete staviti sliku tako da navedete njen url.
• pozadinski položaj: vrh | dno | središte | lijevo | desno | magnituda |%. Pozicioniranje slike u elementu.
• pozadinu-privitak: fiksno | pomicanje (sidro za element, okvir za prikaz). Ovdje se radi o pričvršćivanju slike iz koje se izračunava koordinata. Popravljeno je čitanje koordinata iz okvira za prikaz.
• pozadina-ponoviti: ponavljanje | ponavljanje-x | ponavljanje-y | bez ponavljanja. Ponavljanje: obje osi, ponavljanje os x (horizontalno), os y (vertikalno), bez ponavljanja.
• pozadini: prozirna boja pozadine pozadinska slika background-repeat background-attachment background-position. Kolektivno pravilo kombinira sva pozadinska pravila.

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

CSS (Cascading Style Sheets) ili Cascading Style Sheets koriste se za opisivanje izgled dokument napisan u jeziku za označavanje. Obično se CSS stilovi koriste za stvaranje i modificiranje 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, ostala svojstva neće imati nikakav utjecaj na njega.

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

Riža. 1. Struktura deklaracije u CSS stilu

Vrste kaskadnih stilskih tablica i njihove specifičnosti

1. Vrste stilskih tablica

1.1. Vanjski stilski list

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

Više stilskih tablica može se priložiti svakoj web stranici dodavanjem više oznaka u nizu određivanjem svrhe ovog stilskog lista u atributu medijske oznake. rel = "stylesheet" označava vrstu veze (veza stilskog lista).

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

1.2. Interni stilovi

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

...

1.3. Umetnuti stilovi

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

Obratite pažnju na ovaj tekst.

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

1.4. @Pravilo uvoza

@Pravilo uvoza omogućuje učitavanje vanjskih stilova. Da bi direktiva @import funkcionirala, mora se pojaviti u tablici stilova (vanjski ili interni) 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. Koriste se za stvaranje 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;) će nula vanjski padding za sve elemente stranice. Također, selektor se može koristiti u kombinaciji s pseudo-klasom ili pseudo-elementom: *: poslije (CSS stilovi), *: označeno (CSS stilovi).

2.2. Birač elemenata

Selektori elemenata omogućuju formatiranje svih elemenata ovog tipa na svim stranicama stranice. Na primjer, h1 (familija fontova: Jastog, cursive;) će postaviti opći stil oblikovanja za sve naslove h1.

2.3. Selektor razreda

Selektori klasa omogućuju vam stiliziranje jednog ili više elemenata 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, dodajte atribut klase s naslovom vrijednosti u početnu oznaku

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

Upute za korištenje osobno računalo

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

2.4. Selektor identifikatora

ID birač omogućuje formatiranje jedan specifična stavka. ID mora biti jedinstven i može se pojaviti samo jednom na jednoj stranici.

#bočna traka (š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;) ć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 poveznice, potomke odlomka s prvom klasom;

p .first a (boja: zelena;) - ako dodate razmak, onda će veze koje se nalaze unutar bilo koje oznake klase .first, koja je dijete 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 strane .first class.

2.6. Selektor djece

Podređeni element izravni je 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 omogućuje vam primjenu stilova 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 podređeni elementu p.

2.7. Sestra selektorica

Sestrinski odnos nastaje između elemenata sa zajedničkim roditeljem. Selektori braće i sestara omogućuju vam odabir stavki iz grupe braće i sestara.

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

bez utjecaja na ostale odlomke;

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 temelju naziva 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 s određenom vrijednošću, img - sve slike čiji nazivi sadrže riječ cvijet;

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

selektor [attribute | = "value"] - elementi čiji popis vrijednosti atributa počinje navedenom riječju, p - odlomci čiji je naziv klase značajka ili počinje značajkom;

selektor [attribute ^ = "value"] - 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 navedenu vrijednost, img - sve slike u png formatu;

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

2.9. Pseudo selektor klase

Pseudo-klase su klase koje zapravo nisu vezane uz HTML oznake. Omogućuju vam primjenu CSS pravila na elemente na događaju ili submissive određeno pravilo... Pseudo-klase karakteriziraju elemente sa sljedećim svojstvima:

: lebdjeti - bilo koji element iznad kojeg lebdi kursor miša;

: fokus - interaktivni element do kojeg je navigirano 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 na usklađenost s navedenom vrstom podataka;

: invalid - polja obrasca čiji sadržaj ne odgovara navedenoj vrsti podataka;

: omogućeno - sva aktivna polja obrasca;

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

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

: izvan raspona - polja oblika čije vrijednosti nisu uključene u navedeni raspon;

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

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

: cilj - element sa simbolom # koji se referencira u dokumentu;

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

2.10. Strukturni selektor pseudoklasa

Strukturne pseudoklase 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) - odabire sve elemente počevši od drugog;

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

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

: first-child - omogućuje vam stiliziranje samo prvog djeteta oznake;

: last-child - omogućuje formatiranje posljednjeg podređenog elementa 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đenu vrstu podređene oznake:

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

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

: last-of-type - odabire posljednji element ovog tipa;

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

: only-of-type - odabire jedini element navedene vrste među djecom roditeljski element.

2.12. Pseudo selektor 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 blok elemente;

: first-line - odabire prvi redak teksta elementa, odnosi se samo na blok elemente;

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

: poslije - dodaje generirani sadržaj nakon elementa.

3. Kombinacija selektora

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

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

4. Grupiranje 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: rajčica; pozadina: bijela;)

5. Nasljeđivanje i kaskada

Nasljeđivanje i kaskada dva su temeljna 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 očituje u načinu različiti tipovi 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 s pretka na njegove potomke. CSS specifikacija osigurava nasljeđivanje svojstava vezanih uz tekstualni sadržaj stranice, kao što su boja, font, razmak između slova, visina reda, stil liste, poravnanje teksta, uvlaka teksta, transformacija teksta, vidljivost, bijela -razmak i razmak riječi. To je zgodno u mnogim slučajevima jer ne morate postavljati veličinu fonta i obitelj fontova za svaki element na web stranici.

Svojstva oblikovanja bloka se ne nasljeđuju. To su pozadina, obrub, prikaz, plutajući i čisti, visina i širina, margina, min-max-visina i -širina, obris, preljev, padding, položaj, dekoracija teksta, okomito poravnavanje i z-indeks.

Prisilno nasljeđivanje

Preko ključna riječ naslijediti Možete prisiliti element da naslijedi bilo koju vrijednost svojstva od nadređenog elementa. Ovo čak funkcionira i za svojstva koja se prema zadanim postavkama ne nasljeđuju.

Kako su CSS stilovi postavljeni i funkcioniraju

1) Stilovi se mogu naslijediti od roditeljskog elementa (naslijeđena svojstva ili korištenjem naslijeđene vrijednosti);

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

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

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

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 kriterija koji određuju redoslijed primjene svojstava - važno pravilo, specifičnost i redoslijed u kojem su stilski listovi uključeni.

Važno pravilo

Težina pravila može se postaviti pomoću ključne riječi! Važno, koja se dodaje odmah iza vrijednosti svojstva, na primjer, raspon (težina fonta: podebljano! Važno;). Pravilo se mora staviti na kraj deklaracije, prije završne zagrade, bez razmaka. Takva objava imat će 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 nema Direktni pristup u datoteku sa stilovima.

Specifičnost

Za svako pravilo, preglednik izračunava specifičnost selektora a ako element ima proturječne deklaracije svojstva, uzima se u obzir pravilo s najvećom specifičnošću. Vrijednost specifičnosti ima četiri dijela: 0, 0, 0, 0. Specifičnost selektora određena je na sljedeći način:

za id dodajte 0, 1, 0, 0;
0, 0, 1, 0 se dodaje za klasu;
0, 0, 0, 1 dodaje se za svaki element i pseudoelement;
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 # glavna stranica (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, ta će se pravila primijeniti na element čija je specifičnost veća. Na primjer, ako stavka ima dvije specifičnosti s vrijednostima 0, 0, 0, 2 i 0, 1, 0, 1, onda drugo pravilo pobjeđuje.

Redoslijed priloženih tablica

Možete stvoriti više vanjskih listova stilova i povezati ih na jednu web stranicu. Ako u različite tabliceću upoznati različita značenja svojstva jednog elementa, tada će se kao rezultat na element primijeniti pravilo koje se nalazi u stilskoj tablici na popisu ispod.